dauth-context-react 6.5.0 → 6.6.0

package/src/DauthProfileModal.tsx

@@ -7,10 +7,7 @@ import React, {
 } from 'react';
 import { createPortal } from 'react-dom';
 import { useDauth } from './index';
-import type {
-  DauthProfileModalProps,
-  IPasskeyCredential,
-} from './interfaces';
+import type { DauthProfileModalProps, IPasskeyCredential } from './interfaces';
 
 export { type DauthProfileModalProps };
 
@@ -166,14 +163,11 @@ function Spinner() {
 
 function useMediaQuery(query: string): boolean {
   const [matches, setMatches] = useState(
-    () =>
-      typeof window !== 'undefined' &&
-      window.matchMedia(query).matches
+    () => typeof window !== 'undefined' && window.matchMedia(query).matches
   );
   useEffect(() => {
     const mq = window.matchMedia(query);
-    const handler = (e: MediaQueryListEvent) =>
-      setMatches(e.matches);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
     mq.addEventListener('change', handler);
     return () => mq.removeEventListener('change', handler);
   }, [query]);
@@ -193,10 +187,7 @@ function useModalAnimation(open: boolean): Phase {
     }
     if (phase === 'entered' || phase === 'entering') {
       setPhase('exiting');
-      const timer = setTimeout(
-        () => setPhase('exited'),
-        MOBILE_TRANSITION_MS
-      );
+      const timer = setTimeout(() => setPhase('exited'), MOBILE_TRANSITION_MS);
       return () => clearTimeout(timer);
     }
     return undefined;
@@ -234,20 +225,16 @@ function useFocusTrap(
         return;
       }
       if (e.key !== 'Tab') return;
-      const focusable =
-        container.querySelectorAll<HTMLElement>(
-          'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
-        );
+      const focusable = container.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), input:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      );
       if (focusable.length === 0) return;
       const first = focusable[0];
       const last = focusable[focusable.length - 1];
       if (e.shiftKey && document.activeElement === first) {
         e.preventDefault();
         last.focus();
-      } else if (
-        !e.shiftKey &&
-        document.activeElement === last
-      ) {
+      } else if (!e.shiftKey && document.activeElement === last) {
         e.preventDefault();
         first.focus();
       }
@@ -268,8 +255,7 @@ function useScrollLock(active: boolean) {
   useEffect(() => {
     if (!active) return;
     const scrollbarWidth =
-      window.innerWidth -
-      document.documentElement.clientWidth;
+      window.innerWidth - document.documentElement.clientWidth;
     const prevOverflow = document.body.style.overflow;
     const prevPaddingRight = document.body.style.paddingRight;
     document.body.style.overflow = 'hidden';
@@ -336,9 +322,7 @@ export function DauthProfileModal({
   const [deleting, setDeleting] = useState(false);
 
   // Passkey state
-  const [credentials, setCredentials] = useState<
-    IPasskeyCredential[]
-  >([]);
+  const [credentials, setCredentials] = useState<IPasskeyCredential[]>([]);
   const [loadingCreds, setLoadingCreds] = useState(false);
   const [showRegister, setShowRegister] = useState(false);
   const [passkeyName, setPasskeyName] = useState('');
@@ -349,8 +333,7 @@ export function DauthProfileModal({
   } | null>(null);
 
   // Avatar upload state
-  const [uploadingAvatar, setUploadingAvatar] =
-    useState(false);
+  const [uploadingAvatar, setUploadingAvatar] = useState(false);
 
   // Populate form when modal opens
   useEffect(() => {
@@ -363,9 +346,7 @@ export function DauthProfileModal({
       setTelSuffix(user.telSuffix || '');
       setBirthDate(
         user.birthDate
-          ? new Date(user.birthDate)
-              .toISOString()
-              .split('T')[0]
+          ? new Date(user.birthDate).toISOString().split('T')[0]
           : ''
       );
       const cf: Record<string, string> = {};
@@ -400,19 +381,13 @@ export function DauthProfileModal({
   // Auto-clear success message
   useEffect(() => {
     if (status?.type !== 'success') return;
-    const timer = setTimeout(
-      () => setStatus(null),
-      SUCCESS_TIMEOUT_MS
-    );
+    const timer = setTimeout(() => setStatus(null), SUCCESS_TIMEOUT_MS);
     return () => clearTimeout(timer);
   }, [status]);
 
   useEffect(() => {
     if (passkeyStatus?.type !== 'success') return;
-    const timer = setTimeout(
-      () => setPasskeyStatus(null),
-      SUCCESS_TIMEOUT_MS
-    );
+    const timer = setTimeout(() => setPasskeyStatus(null), SUCCESS_TIMEOUT_MS);
     return () => clearTimeout(timer);
   }, [passkeyStatus]);
 
@@ -421,15 +396,13 @@ export function DauthProfileModal({
 
   const hasField = useCallback(
     (field: string) =>
-      domain.formFields?.some((f) => f.field === field) ??
-      false,
+      domain.formFields?.some((f) => f.field === field) ?? false,
     [domain.formFields]
   );
 
   const isRequired = useCallback(
     (field: string) =>
-      domain.formFields?.find((f) => f.field === field)
-        ?.required ?? false,
+      domain.formFields?.find((f) => f.field === field)?.required ?? false,
     [domain.formFields]
   );
 
@@ -440,8 +413,7 @@ export function DauthProfileModal({
       : '';
     const cfChanged = (domain.customFields ?? []).some(
       (f) =>
-        (customFieldValues[f.key] ?? '') !==
-        (user.customFields?.[f.key] ?? '')
+        (customFieldValues[f.key] ?? '') !== (user.customFields?.[f.key] ?? '')
     );
     return (
       name !== (user.name || '') ||
@@ -466,8 +438,7 @@ export function DauthProfileModal({
     domain.customFields,
   ]);
 
-  const canSave =
-    name.trim().length > 0 && hasChanges && !saving;
+  const canSave = name.trim().length > 0 && hasChanges && !saving;
 
   const handleSave = useCallback(async () => {
     setSaving(true);
@@ -476,12 +447,9 @@ export function DauthProfileModal({
     if (hasField('lastname')) fields.lastname = lastname;
     if (hasField('nickname')) fields.nickname = nickname;
     if (hasField('country')) fields.country = country;
-    if (hasField('tel_prefix'))
-      fields.telPrefix = telPrefix;
-    if (hasField('tel_suffix'))
-      fields.telSuffix = telSuffix;
-    if (hasField('birth_date') && birthDate)
-      fields.birthDate = birthDate;
+    if (hasField('tel_prefix')) fields.telPrefix = telPrefix;
+    if (hasField('tel_suffix')) fields.telSuffix = telSuffix;
+    if (hasField('birth_date') && birthDate) fields.birthDate = birthDate;
     if ((domain.customFields ?? []).length > 0)
       fields.customFields = customFieldValues;
     const ok = await updateUser(fields);
@@ -520,8 +488,7 @@ export function DauthProfileModal({
     } else {
       setStatus({
         type: 'error',
-        message:
-          'Could not delete account. Please try again.',
+        message: 'Could not delete account. Please try again.',
       });
       setShowDelete(false);
       setDeleteText('');
@@ -538,9 +505,7 @@ export function DauthProfileModal({
   const handleRegisterPasskey = useCallback(async () => {
     setRegistering(true);
     setPasskeyStatus(null);
-    const cred = await registerPasskey(
-      passkeyName || undefined
-    );
+    const cred = await registerPasskey(passkeyName || undefined);
     setRegistering(false);
     if (cred) {
       setCredentials((prev) => [...prev, cred]);
@@ -562,9 +527,7 @@ export function DauthProfileModal({
     async (credentialId: string) => {
       const ok = await deletePasskeyCredential(credentialId);
       if (ok) {
-        setCredentials((prev) =>
-          prev.filter((c) => c._id !== credentialId)
-        );
+        setCredentials((prev) => prev.filter((c) => c._id !== credentialId));
       }
     },
     [deletePasskeyCredential]
@@ -610,15 +573,11 @@ export function DauthProfileModal({
     if (!t) return {};
     const vars: Record<string, string> = {};
     if (t.accent) vars['--dauth-accent'] = t.accent;
-    if (t.accentHover)
-      vars['--dauth-accent-hover'] = t.accentHover;
+    if (t.accentHover) vars['--dauth-accent-hover'] = t.accentHover;
     if (t.surface) vars['--dauth-surface'] = t.surface;
-    if (t.surfaceHover)
-      vars['--dauth-surface-hover'] = t.surfaceHover;
-    if (t.textPrimary)
-      vars['--dauth-text-primary'] = t.textPrimary;
-    if (t.textSecondary)
-      vars['--dauth-text-secondary'] = t.textSecondary;
+    if (t.surfaceHover) vars['--dauth-surface-hover'] = t.surfaceHover;
+    if (t.textPrimary) vars['--dauth-text-primary'] = t.textPrimary;
+    if (t.textSecondary) vars['--dauth-text-secondary'] = t.textSecondary;
     if (t.border) vars['--dauth-border'] = t.border;
     return vars;
   }, [domain.modalTheme]);
@@ -632,8 +591,7 @@ export function DauthProfileModal({
     position: 'fixed',
     inset: 0,
     zIndex: 2147483647,
-    backgroundColor:
-      'var(--dauth-backdrop, rgba(0, 0, 0, 0.6))',
+    backgroundColor: 'var(--dauth-backdrop, rgba(0, 0, 0, 0.6))',
     backdropFilter: 'blur(4px)',
     WebkitBackdropFilter: 'blur(4px)',
     display: 'flex',
@@ -651,10 +609,8 @@ export function DauthProfileModal({
     margin: 16,
     backgroundColor: 'var(--dauth-surface, #1a1a2e)',
     borderRadius: 'var(--dauth-radius, 12px)',
-    boxShadow:
-      'var(--dauth-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5))',
-    border:
-      '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+    boxShadow: 'var(--dauth-shadow, 0 25px 50px -12px rgba(0, 0, 0, 0.5))',
+    border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
     display: 'flex',
     flexDirection: 'column',
     overflow: 'hidden',
@@ -662,10 +618,7 @@ export function DauthProfileModal({
       'var(--dauth-font-family, system-ui, -apple-system, sans-serif)',
     color: 'var(--dauth-text-primary, #e4e4e7)',
     opacity: phase === 'entered' ? 1 : 0,
-    transform:
-      phase === 'entered'
-        ? 'translateY(0)'
-        : 'translateY(16px)',
+    transform: phase === 'entered' ? 'translateY(0)' : 'translateY(16px)',
     transition: `opacity ${dur}ms ${easing}, transform ${dur}ms ${easing}`,
   };
 
@@ -678,10 +631,7 @@ export function DauthProfileModal({
     fontFamily:
       'var(--dauth-font-family, system-ui, -apple-system, sans-serif)',
     color: 'var(--dauth-text-primary, #e4e4e7)',
-    transform:
-      phase === 'entered'
-        ? 'translateY(0)'
-        : 'translateY(100%)',
+    transform: phase === 'entered' ? 'translateY(0)' : 'translateY(100%)',
     transition: `transform ${dur}ms ${easing}`,
   };
 
@@ -691,9 +641,7 @@ export function DauthProfileModal({
 
   const tabs: { key: Tab; label: string }[] = [
     { key: 'profile', label: 'Profile' },
-    ...(showSecurity
-      ? [{ key: 'security' as Tab, label: 'Security' }]
-      : []),
+    ...(showSecurity ? [{ key: 'security' as Tab, label: 'Security' }] : []),
     { key: 'account', label: 'Account' },
   ];
 
@@ -701,8 +649,7 @@ export function DauthProfileModal({
     <>
       <style
         dangerouslySetInnerHTML={{
-          __html:
-            '@keyframes dauth-spin{to{transform:rotate(360deg)}}',
+          __html: '@keyframes dauth-spin{to{transform:rotate(360deg)}}',
         }}
       />
       <div
@@ -731,8 +678,7 @@ export function DauthProfileModal({
                   'var(--dauth-surface-hover, #232340)')
               }
               onMouseLeave={(e) =>
-                (e.currentTarget.style.backgroundColor =
-                  'transparent')
+                (e.currentTarget.style.backgroundColor = 'transparent')
               }
             >
               {isDesktop ? <IconClose /> : <IconBack />}
@@ -829,19 +775,14 @@ export function DauthProfileModal({
                 {/* Form */}
                 <div>
                   <div style={fieldGroup}>
-                    <label
-                      htmlFor="dauth-name"
-                      style={label}
-                    >
+                    <label htmlFor="dauth-name" style={label}>
                       Name *
                     </label>
                     <input
                       id="dauth-name"
                       type="text"
                       value={name}
-                      onChange={(e) =>
-                        setName(e.target.value)
-                      }
+                      onChange={(e) => setName(e.target.value)}
                       placeholder="Your name"
                       disabled={saving}
                       style={input}
@@ -852,10 +793,7 @@ export function DauthProfileModal({
 
                   {hasField('lastname') && (
                     <div style={fieldGroup}>
-                      <label
-                        htmlFor="dauth-lastname"
-                        style={label}
-                      >
+                      <label htmlFor="dauth-lastname" style={label}>
                         Last name
                         {isRequired('lastname') ? ' *' : ''}
                       </label>
@@ -863,9 +801,7 @@ export function DauthProfileModal({
                         id="dauth-lastname"
                         type="text"
                         value={lastname}
-                        onChange={(e) =>
-                          setLastname(e.target.value)
-                        }
+                        onChange={(e) => setLastname(e.target.value)}
                         placeholder="Your last name"
                         disabled={saving}
                         style={input}
@@ -877,10 +813,7 @@ export function DauthProfileModal({
 
                   {hasField('nickname') && (
                     <div style={fieldGroup}>
-                      <label
-                        htmlFor="dauth-nickname"
-                        style={label}
-                      >
+                      <label htmlFor="dauth-nickname" style={label}>
                         Nickname
                         {isRequired('nickname') ? ' *' : ''}
                       </label>
@@ -888,9 +821,7 @@ export function DauthProfileModal({
                         id="dauth-nickname"
                         type="text"
                         value={nickname}
-                        onChange={(e) =>
-                          setNickname(e.target.value)
-                        }
+                        onChange={(e) => setNickname(e.target.value)}
                         placeholder="Choose a nickname"
                         disabled={saving}
                         style={input}
@@ -902,10 +833,7 @@ export function DauthProfileModal({
 
                   {hasField('country') && (
                     <div style={fieldGroup}>
-                      <label
-                        htmlFor="dauth-country"
-                        style={label}
-                      >
+                      <label htmlFor="dauth-country" style={label}>
                         Country
                         {isRequired('country') ? ' *' : ''}
                       </label>
@@ -913,9 +841,7 @@ export function DauthProfileModal({
                         id="dauth-country"
                         type="text"
                         value={country}
-                        onChange={(e) =>
-                          setCountry(e.target.value)
-                        }
+                        onChange={(e) => setCountry(e.target.value)}
                         placeholder="Your country"
                         disabled={saving}
                         style={input}
@@ -925,13 +851,11 @@ export function DauthProfileModal({
                     </div>
                   )}
 
-                  {(hasField('tel_prefix') ||
-                    hasField('tel_suffix')) && (
+                  {(hasField('tel_prefix') || hasField('tel_suffix')) && (
                     <div style={fieldGroup}>
                       <div style={label}>
                         Phone
-                        {isRequired('tel_prefix') ||
-                        isRequired('tel_suffix')
+                        {isRequired('tel_prefix') || isRequired('tel_suffix')
                           ? ' *'
                           : ''}
                       </div>
@@ -946,9 +870,7 @@ export function DauthProfileModal({
                             id="dauth-tel-prefix"
                             type="text"
                             value={telPrefix}
-                            onChange={(e) =>
-                              setTelPrefix(e.target.value)
-                            }
+                            onChange={(e) => setTelPrefix(e.target.value)}
                             placeholder="+34"
                             disabled={saving}
                             style={{
@@ -966,9 +888,7 @@ export function DauthProfileModal({
                             id="dauth-tel-suffix"
                             type="tel"
                             value={telSuffix}
-                            onChange={(e) =>
-                              setTelSuffix(e.target.value)
-                            }
+                            onChange={(e) => setTelSuffix(e.target.value)}
                             placeholder="612 345 678"
                             disabled={saving}
                             style={{
@@ -986,22 +906,15 @@ export function DauthProfileModal({
 
                   {hasField('birth_date') && (
                     <div style={fieldGroup}>
-                      <label
-                        htmlFor="dauth-birthdate"
-                        style={label}
-                      >
+                      <label htmlFor="dauth-birthdate" style={label}>
                         Birth date
-                        {isRequired('birth_date')
-                          ? ' *'
-                          : ''}
+                        {isRequired('birth_date') ? ' *' : ''}
                       </label>
                       <input
                         id="dauth-birthdate"
                         type="date"
                         value={birthDate}
-                        onChange={(e) =>
-                          setBirthDate(e.target.value)
-                        }
+                        onChange={(e) => setBirthDate(e.target.value)}
                         disabled={saving}
                         style={input}
                         onFocus={inputFocusHandler}
@@ -1010,37 +923,24 @@ export function DauthProfileModal({
                     </div>
                   )}
 
-                  {(domain.customFields ?? []).length >
-                    0 && (
+                  {(domain.customFields ?? []).length > 0 && (
                     <>
                       <hr style={separator} />
                       {domain.customFields!.map((cf) => (
-                        <div
-                          key={cf.key}
-                          style={fieldGroup}
-                        >
-                          <label
-                            htmlFor={`dauth-cf-${cf.key}`}
-                            style={label}
-                          >
+                        <div key={cf.key} style={fieldGroup}>
+                          <label htmlFor={`dauth-cf-${cf.key}`} style={label}>
                             {cf.label}
                             {cf.required ? ' *' : ''}
                           </label>
                           <input
                             id={`dauth-cf-${cf.key}`}
                             type="text"
-                            value={
-                              customFieldValues[cf.key] ??
-                              ''
-                            }
+                            value={customFieldValues[cf.key] ?? ''}
                             onChange={(e) =>
-                              setCustomFieldValues(
-                                (prev) => ({
-                                  ...prev,
-                                  [cf.key]:
-                                    e.target.value,
-                                })
-                              )
+                              setCustomFieldValues((prev) => ({
+                                ...prev,
+                                [cf.key]: e.target.value,
+                              }))
                             }
                             disabled={saving}
                             style={input}
@@ -1075,9 +975,7 @@ export function DauthProfileModal({
                         }}
                         onClick={() => handleLanguage(lang)}
                       >
-                        {lang === 'es'
-                          ? 'Espa\u00f1ol'
-                          : 'English'}
+                        {lang === 'es' ? 'Espa\u00f1ol' : 'English'}
                       </button>
                     ))}
                   </div>
@@ -1108,16 +1006,13 @@ export function DauthProfileModal({
                   <button
                     type="button"
                     style={outlineBtn}
-                    onClick={() =>
-                      setShowRegister(!showRegister)
-                    }
+                    onClick={() => setShowRegister(!showRegister)}
                     onMouseEnter={(e) =>
                       (e.currentTarget.style.backgroundColor =
                         'var(--dauth-surface-hover, #232340)')
                     }
                     onMouseLeave={(e) =>
-                      (e.currentTarget.style.backgroundColor =
-                        'transparent')
+                      (e.currentTarget.style.backgroundColor = 'transparent')
                     }
                   >
                     + Add passkey
@@ -1128,19 +1023,14 @@ export function DauthProfileModal({
                 {showRegister && (
                   <div style={registerPanel}>
                     <div style={fieldGroup}>
-                      <label
-                        htmlFor="dauth-passkey-name"
-                        style={label}
-                      >
+                      <label htmlFor="dauth-passkey-name" style={label}>
                         Passkey name (optional)
                       </label>
                       <input
                         id="dauth-passkey-name"
                         type="text"
                         value={passkeyName}
-                        onChange={(e) =>
-                          setPasskeyName(e.target.value)
-                        }
+                        onChange={(e) => setPasskeyName(e.target.value)}
                         placeholder="e.g. MacBook Touch ID"
                         disabled={registering}
                         style={input}
@@ -1163,21 +1053,13 @@ export function DauthProfileModal({
                         disabled={registering}
                         onClick={handleRegisterPasskey}
                       >
-                        {registering ? (
-                          <Spinner />
-                        ) : (
-                          <IconFingerprint />
-                        )}
-                        {registering
-                          ? 'Registering...'
-                          : 'Register'}
+                        {registering ? <Spinner /> : <IconFingerprint />}
+                        {registering ? 'Registering...' : 'Register'}
                       </button>
                       <button
                         type="button"
                         style={cancelBtn}
-                        onClick={() =>
-                          setShowRegister(false)
-                        }
+                        onClick={() => setShowRegister(false)}
                         onMouseEnter={(e) =>
                           (e.currentTarget.style.backgroundColor =
                             'var(--dauth-surface-hover, #232340)')
@@ -1220,10 +1102,7 @@ export function DauthProfileModal({
                     </div>
                   ) : credentials.length > 0 ? (
                     credentials.map((cred) => (
-                      <div
-                        key={cred._id}
-                        style={credentialRow}
-                      >
+                      <div key={cred._id} style={credentialRow}>
                         <div
                           style={{
                             display: 'flex',
@@ -1235,8 +1114,7 @@ export function DauthProfileModal({
                         >
                           <span
                             style={{
-                              color:
-                                'var(--dauth-accent, #6366f1)',
+                              color: 'var(--dauth-accent, #6366f1)',
                               flexShrink: 0,
                             }}
                           >
@@ -1250,29 +1128,23 @@ export function DauthProfileModal({
                           >
                             <div
                               style={{
-                                fontSize:
-                                  'var(--dauth-font-size-sm, 0.875rem)',
+                                fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
                                 fontWeight: 500,
-                                color:
-                                  'var(--dauth-text-primary, #e4e4e7)',
+                                color: 'var(--dauth-text-primary, #e4e4e7)',
                                 overflow: 'hidden',
                                 textOverflow: 'ellipsis',
-                                whiteSpace:
-                                  'nowrap' as const,
+                                whiteSpace: 'nowrap' as const,
                               }}
                             >
                               {cred.name || 'Passkey'}
                             </div>
                             <div
                               style={{
-                                fontSize:
-                                  'var(--dauth-font-size-xs, 0.75rem)',
-                                color:
-                                  'var(--dauth-text-muted, #71717a)',
+                                fontSize: 'var(--dauth-font-size-xs, 0.75rem)',
+                                color: 'var(--dauth-text-muted, #71717a)',
                               }}
                             >
-                              {cred.deviceType ===
-                              'multiDevice'
+                              {cred.deviceType === 'multiDevice'
                                 ? 'Synced'
                                 : 'Device-bound'}
                               {cred.createdAt &&
@@ -1282,9 +1154,7 @@ export function DauthProfileModal({
                         </div>
                         <button
                           type="button"
-                          onClick={() =>
-                            handleDeletePasskey(cred._id)
-                          }
+                          onClick={() => handleDeletePasskey(cred._id)}
                           style={trashBtn}
                           onMouseEnter={(e) =>
                             (e.currentTarget.style.color =
@@ -1304,8 +1174,7 @@ export function DauthProfileModal({
                     <div style={emptyState}>
                       <span
                         style={{
-                          color:
-                            'var(--dauth-accent, #6366f1)',
+                          color: 'var(--dauth-accent, #6366f1)',
                         }}
                       >
                         <IconShield />
@@ -1313,25 +1182,20 @@ export function DauthProfileModal({
                       <div>
                         <div
                           style={{
-                            fontSize:
-                              'var(--dauth-font-size-sm, 0.875rem)',
+                            fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
                             fontWeight: 500,
-                            color:
-                              'var(--dauth-text-primary, #e4e4e7)',
+                            color: 'var(--dauth-text-primary, #e4e4e7)',
                           }}
                         >
                           No passkeys registered
                         </div>
                         <div
                           style={{
-                            fontSize:
-                              'var(--dauth-font-size-xs, 0.75rem)',
-                            color:
-                              'var(--dauth-text-secondary, #a1a1aa)',
+                            fontSize: 'var(--dauth-font-size-xs, 0.75rem)',
+                            color: 'var(--dauth-text-secondary, #a1a1aa)',
                           }}
                         >
-                          Add a passkey for faster, more
-                          secure sign-in.
+                          Add a passkey for faster, more secure sign-in.
                         </div>
                       </div>
                     </div>
@@ -1356,12 +1220,9 @@ export function DauthProfileModal({
 
                 {/* Delete account */}
                 <div>
-                  <div style={dangerTitle}>
-                    Delete account
-                  </div>
+                  <div style={dangerTitle}>Delete account</div>
                   <div style={dangerDesc}>
-                    Permanently delete your account and all
-                    associated data.
+                    Permanently delete your account and all associated data.
                   </div>
                   {!showDelete ? (
                     <button
@@ -1382,17 +1243,13 @@ export function DauthProfileModal({
                   ) : (
                     <div style={deletePanel}>
                       <div style={deletePanelText}>
-                        This action is permanent and cannot
-                        be undone. Type{' '}
-                        <strong>{CONFIRM_WORD}</strong> to
-                        confirm.
+                        This action is permanent and cannot be undone. Type{' '}
+                        <strong>{CONFIRM_WORD}</strong> to confirm.
                       </div>
                       <input
                         type="text"
                         value={deleteText}
-                        onChange={(e) =>
-                          setDeleteText(e.target.value)
-                        }
+                        onChange={(e) => setDeleteText(e.target.value)}
                         placeholder={`Type ${CONFIRM_WORD}`}
                         style={input}
                         onFocus={inputFocusHandler}
@@ -1429,20 +1286,13 @@ export function DauthProfileModal({
                           style={{
                             ...deleteConfirmBtn,
                             opacity:
-                              deleteText !== CONFIRM_WORD ||
-                              deleting
-                                ? 0.5
-                                : 1,
+                              deleteText !== CONFIRM_WORD || deleting ? 0.5 : 1,
                             cursor:
-                              deleteText !== CONFIRM_WORD ||
-                              deleting
+                              deleteText !== CONFIRM_WORD || deleting
                                 ? 'not-allowed'
                                 : 'pointer',
                           }}
-                          disabled={
-                            deleteText !== CONFIRM_WORD ||
-                            deleting
-                          }
+                          disabled={deleteText !== CONFIRM_WORD || deleting}
                           onClick={handleDelete}
                         >
                           {deleting && <Spinner />}
@@ -1512,9 +1362,7 @@ export function DauthProfileModal({
 
 // --- Style constants ---
 
-const headerStyle = (
-  isDesktop: boolean
-): React.CSSProperties => ({
+const headerStyle = (isDesktop: boolean): React.CSSProperties => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
@@ -1525,8 +1373,7 @@ const headerStyle = (
         position: 'sticky' as const,
         top: 0,
         zIndex: 1,
-        backgroundColor:
-          'var(--dauth-surface, #1a1a2e)',
+        backgroundColor: 'var(--dauth-surface, #1a1a2e)',
       }
     : {}),
 });
@@ -1558,8 +1405,7 @@ const closeBtn: React.CSSProperties = {
 const tabBar: React.CSSProperties = {
   display: 'flex',
   padding: '0 24px',
-  borderBottom:
-    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  borderBottom: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
   flexShrink: 0,
 };
 
@@ -1624,9 +1470,7 @@ const emailText: React.CSSProperties = {
   color: 'var(--dauth-text-secondary, #a1a1aa)',
 };
 
-const statusMsg = (
-  type: 'success' | 'error'
-): React.CSSProperties => ({
+const statusMsg = (type: 'success' | 'error'): React.CSSProperties => ({
   padding: '10px 14px',
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
@@ -1661,10 +1505,8 @@ const input: React.CSSProperties = {
   fontSize: 'var(--dauth-font-size-base, 1rem)',
   lineHeight: 1.5,
   color: 'var(--dauth-text-primary, #e4e4e7)',
-  backgroundColor:
-    'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
-  border:
-    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  backgroundColor: 'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+  border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
   borderRadius: 'var(--dauth-radius-input, 8px)',
   outline: 'none',
   transition: 'border-color 150ms, box-shadow 150ms',
@@ -1672,18 +1514,13 @@ const input: React.CSSProperties = {
   fontFamily: 'inherit',
 };
 
-const inputFocusHandler = (
-  e: React.FocusEvent<HTMLInputElement>
-) => {
+const inputFocusHandler = (e: React.FocusEvent<HTMLInputElement>) => {
   e.currentTarget.style.borderColor =
     'var(--dauth-border-focus, rgba(99, 102, 241, 0.5))';
-  e.currentTarget.style.boxShadow =
-    '0 0 0 3px rgba(99, 102, 241, 0.15)';
+  e.currentTarget.style.boxShadow = '0 0 0 3px rgba(99, 102, 241, 0.15)';
 };
 
-const inputBlurHandler = (
-  e: React.FocusEvent<HTMLInputElement>
-) => {
+const inputBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
   e.currentTarget.style.borderColor =
     'var(--dauth-border, rgba(255, 255, 255, 0.08))';
   e.currentTarget.style.boxShadow = 'none';
@@ -1702,8 +1539,7 @@ const langBtn: React.CSSProperties = {
 
 const separator: React.CSSProperties = {
   height: 1,
-  backgroundColor:
-    'var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  backgroundColor: 'var(--dauth-border, rgba(255, 255, 255, 0.08))',
   margin: '24px 0',
   border: 'none',
 };
@@ -1714,8 +1550,7 @@ const outlineBtn: React.CSSProperties = {
   fontWeight: 500,
   color: 'var(--dauth-text-secondary, #a1a1aa)',
   backgroundColor: 'transparent',
-  border:
-    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   cursor: 'pointer',
   transition: 'background-color 150ms',
@@ -1725,10 +1560,8 @@ const outlineBtn: React.CSSProperties = {
 const registerPanel: React.CSSProperties = {
   padding: 16,
   borderRadius: 'var(--dauth-radius-sm, 8px)',
-  border:
-    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
-  backgroundColor:
-    'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+  border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  backgroundColor: 'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
   marginBottom: 12,
 };
 
@@ -1754,8 +1587,7 @@ const credentialRow: React.CSSProperties = {
   justifyContent: 'space-between',
   padding: 12,
   borderRadius: 'var(--dauth-radius-sm, 8px)',
-  backgroundColor:
-    'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+  backgroundColor: 'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
   marginBottom: 8,
 };
 
@@ -1781,8 +1613,7 @@ const emptyState: React.CSSProperties = {
   gap: 12,
   padding: 16,
   borderRadius: 'var(--dauth-radius-sm, 8px)',
-  backgroundColor:
-    'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
+  backgroundColor: 'var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))',
 };
 
 const dangerTitle: React.CSSProperties = {
@@ -1804,8 +1635,7 @@ const deleteBtn: React.CSSProperties = {
   fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
   fontWeight: 500,
   color: 'var(--dauth-error, #ef4444)',
-  backgroundColor:
-    'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
+  backgroundColor: 'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
   border: '1px solid rgba(239, 68, 68, 0.2)',
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   cursor: 'pointer',
@@ -1818,8 +1648,7 @@ const deletePanel: React.CSSProperties = {
   padding: 16,
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   border: '1px solid rgba(239, 68, 68, 0.3)',
-  backgroundColor:
-    'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
+  backgroundColor: 'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
 };
 
 const deletePanelText: React.CSSProperties = {
@@ -1835,8 +1664,7 @@ const cancelBtn: React.CSSProperties = {
   fontWeight: 500,
   color: 'var(--dauth-text-secondary, #a1a1aa)',
   backgroundColor: 'transparent',
-  border:
-    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   cursor: 'pointer',
   transition: 'background-color 150ms',
@@ -1867,8 +1695,7 @@ const signOutBtn: React.CSSProperties = {
   fontSize: 'var(--dauth-font-size-base, 1rem)',
   fontWeight: 500,
   color: 'var(--dauth-error, #ef4444)',
-  backgroundColor:
-    'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
+  backgroundColor: 'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
   border: '1px solid rgba(239, 68, 68, 0.2)',
   borderRadius: 'var(--dauth-radius-sm, 8px)',
   cursor: 'pointer',
@@ -1880,22 +1707,17 @@ const signOutBtn: React.CSSProperties = {
   gap: 8,
 };
 
-const footerStyle = (
-  isDesktop: boolean
-): React.CSSProperties => ({
+const footerStyle = (isDesktop: boolean): React.CSSProperties => ({
   padding: '16px 24px',
-  borderTop:
-    '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  borderTop: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
   flexShrink: 0,
   ...(!isDesktop
     ? {
         position: 'sticky' as const,
         bottom: 0,
         zIndex: 1,
-        backgroundColor:
-          'var(--dauth-surface, #1a1a2e)',
-        paddingBottom:
-          'max(16px, env(safe-area-inset-bottom))',
+        backgroundColor: 'var(--dauth-surface, #1a1a2e)',
+        paddingBottom: 'max(16px, env(safe-area-inset-bottom))',
       }
     : {}),
 });