dauth-context-react 5.0.0 → 6.1.0

package/src/DauthProfileModal.tsx

@@ -0,0 +1,890 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useDauth } from './index';
+import type { DauthProfileModalProps } from './interfaces';
+
+export { type DauthProfileModalProps };
+
+type Phase = 'exited' | 'entering' | 'entered' | 'exiting';
+
+const TRANSITION_MS = 200;
+const MOBILE_TRANSITION_MS = 300;
+const SUCCESS_TIMEOUT_MS = 4000;
+const CONFIRM_WORD = 'DELETE';
+
+// --- Inline SVG icons ---
+
+function IconClose() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+function IconBack() {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <line x1="19" y1="12" x2="5" y2="12" />
+      <polyline points="12 19 5 12 12 5" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return <span style={spinnerStyle} aria-hidden="true" />;
+}
+
+// --- Hooks ---
+
+function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(
+    () => typeof window !== 'undefined' && window.matchMedia(query).matches
+  );
+  useEffect(() => {
+    const mq = window.matchMedia(query);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, [query]);
+  return matches;
+}
+
+function useModalAnimation(open: boolean): Phase {
+  const [phase, setPhase] = useState<Phase>('exited');
+
+  useEffect(() => {
+    if (open) {
+      setPhase('entering');
+      const raf = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setPhase('entered'));
+      });
+      return () => cancelAnimationFrame(raf);
+    }
+    if (phase === 'entered' || phase === 'entering') {
+      setPhase('exiting');
+      const timer = setTimeout(() => setPhase('exited'), MOBILE_TRANSITION_MS);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [open]);
+
+  return phase;
+}
+
+function useFocusTrap(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+  active: boolean,
+  onEscape: () => void
+) {
+  const previousFocus = useRef<Element | null>(null);
+
+  useEffect(() => {
+    if (!active) return;
+    previousFocus.current = document.activeElement;
+
+    const container = containerRef.current;
+    if (!container) return;
+
+    const focusFirst = () => {
+      const firstInput = container.querySelector<HTMLElement>(
+        'input:not([disabled])'
+      );
+      (firstInput ?? container).focus();
+    };
+    // Small delay to let the portal render
+    const raf = requestAnimationFrame(focusFirst);
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onEscape();
+        return;
+      }
+      if (e.key !== 'Tab') return;
+      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) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      document.removeEventListener('keydown', handleKeyDown);
+      if (previousFocus.current instanceof HTMLElement) {
+        previousFocus.current.focus();
+      }
+    };
+  }, [active, containerRef, onEscape]);
+}
+
+function useScrollLock(active: boolean) {
+  useEffect(() => {
+    if (!active) return;
+    const scrollbarWidth =
+      window.innerWidth - document.documentElement.clientWidth;
+    const prevOverflow = document.body.style.overflow;
+    const prevPaddingRight = document.body.style.paddingRight;
+    document.body.style.overflow = 'hidden';
+    if (scrollbarWidth > 0) {
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    }
+    return () => {
+      document.body.style.overflow = prevOverflow;
+      document.body.style.paddingRight = prevPaddingRight;
+    };
+  }, [active]);
+}
+
+// --- Component ---
+
+export function DauthProfileModal({ open, onClose }: DauthProfileModalProps) {
+  const { user, domain, updateUser, deleteAccount } = useDauth();
+  const isDesktop = useMediaQuery('(min-width: 641px)');
+  const phase = useModalAnimation(open);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  // Form state
+  const [name, setName] = useState('');
+  const [lastname, setLastname] = useState('');
+  const [nickname, setNickname] = useState('');
+  const [country, setCountry] = useState('');
+  const [populated, setPopulated] = useState(false);
+
+  // Status
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState<{
+    type: 'success' | 'error';
+    message: string;
+  } | null>(null);
+
+  // Delete
+  const [showDelete, setShowDelete] = useState(false);
+  const [deleteText, setDeleteText] = useState('');
+  const [deleting, setDeleting] = useState(false);
+
+  // Populate form when modal opens
+  useEffect(() => {
+    if (open && user?._id && !populated) {
+      setName(user.name || '');
+      setLastname(user.lastname || '');
+      setNickname(user.nickname || '');
+      setCountry(user.country || '');
+      setPopulated(true);
+    }
+    if (!open) {
+      setPopulated(false);
+      setStatus(null);
+      setShowDelete(false);
+      setDeleteText('');
+    }
+  }, [open, user, populated]);
+
+  // Auto-clear success message
+  useEffect(() => {
+    if (status?.type !== 'success') return;
+    const timer = setTimeout(() => setStatus(null), SUCCESS_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [status]);
+
+  useFocusTrap(modalRef, phase === 'entered', onClose);
+  useScrollLock(phase !== 'exited');
+
+  const hasField = useCallback(
+    (field: string) =>
+      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]
+  );
+
+  const hasChanges = useMemo(() => {
+    if (!user?._id) return false;
+    return (
+      name !== (user.name || '') ||
+      lastname !== (user.lastname || '') ||
+      nickname !== (user.nickname || '') ||
+      country !== (user.country || '')
+    );
+  }, [name, lastname, nickname, country, user]);
+
+  const canSave = name.trim().length > 0 && hasChanges && !saving;
+
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    setStatus(null);
+    const fields: Record<string, string> = { name };
+    if (hasField('lastname')) fields.lastname = lastname;
+    if (hasField('nickname')) fields.nickname = nickname;
+    if (hasField('country')) fields.country = country;
+    const ok = await updateUser(fields);
+    setSaving(false);
+    if (ok) {
+      setStatus({
+        type: 'success',
+        message: 'Profile updated successfully',
+      });
+    } else {
+      setStatus({
+        type: 'error',
+        message: 'Something went wrong. Please try again.',
+      });
+    }
+  }, [name, lastname, nickname, country, hasField, updateUser]);
+
+  const handleDelete = useCallback(async () => {
+    setDeleting(true);
+    const ok = await deleteAccount();
+    setDeleting(false);
+    if (ok) {
+      onClose();
+    } else {
+      setStatus({
+        type: 'error',
+        message: 'Could not delete account. Please try again.',
+      });
+      setShowDelete(false);
+      setDeleteText('');
+    }
+  }, [deleteAccount, onClose]);
+
+  // Build CSS custom property overrides from domain.modalTheme
+  const themeVars = useMemo(() => {
+    const t = domain.modalTheme;
+    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.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.border) vars['--dauth-border'] = t.border;
+    return vars;
+  }, [domain.modalTheme]);
+
+  if (phase === 'exited') return null;
+
+  const dur = isDesktop ? TRANSITION_MS : MOBILE_TRANSITION_MS;
+  const easing = 'cubic-bezier(0.16, 1, 0.3, 1)';
+
+  const backdrop: React.CSSProperties = {
+    position: 'fixed',
+    inset: 0,
+    zIndex: 2147483647,
+    backgroundColor: 'var(--dauth-backdrop, rgba(0, 0, 0, 0.6))',
+    backdropFilter: 'blur(4px)',
+    WebkitBackdropFilter: 'blur(4px)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: phase === 'entered' ? 1 : 0,
+    transition: `opacity ${dur}ms ease-out`,
+  };
+
+  const modalDesktop: React.CSSProperties = {
+    position: 'relative',
+    width: '100%',
+    maxWidth: 480,
+    maxHeight: '90vh',
+    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))',
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+    fontFamily:
+      '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)',
+    transition: `opacity ${dur}ms ${easing}, transform ${dur}ms ${easing}`,
+  };
+
+  const modalMobile: React.CSSProperties = {
+    position: 'fixed',
+    inset: 0,
+    backgroundColor: 'var(--dauth-surface, #1a1a2e)',
+    display: 'flex',
+    flexDirection: 'column',
+    fontFamily:
+      'var(--dauth-font-family, system-ui, -apple-system, sans-serif)',
+    color: 'var(--dauth-text-primary, #e4e4e7)',
+    transform: phase === 'entered' ? 'translateY(0)' : 'translateY(100%)',
+    transition: `transform ${dur}ms ${easing}`,
+  };
+
+  const avatarInitial = (user.name || user.email || '?')
+    .charAt(0)
+    .toUpperCase();
+
+  return createPortal(
+    <>
+      <style
+        dangerouslySetInnerHTML={{
+          __html: '@keyframes dauth-spin{to{transform:rotate(360deg)}}',
+        }}
+      />
+      <div
+        style={{ ...backdrop, ...themeVars }}
+        onClick={isDesktop ? onClose : undefined}
+        data-testid="dauth-profile-backdrop"
+      >
+        <div
+          ref={modalRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="dauth-profile-title"
+          style={isDesktop ? modalDesktop : modalMobile}
+          onClick={(e) => e.stopPropagation()}
+          tabIndex={-1}
+        >
+          {/* Header */}
+          <div style={headerStyle(isDesktop)}>
+            <button
+              type="button"
+              onClick={onClose}
+              style={closeBtn}
+              aria-label="Close"
+              onMouseEnter={(e) =>
+                (e.currentTarget.style.backgroundColor =
+                  'var(--dauth-surface-hover, #232340)')
+              }
+              onMouseLeave={(e) =>
+                (e.currentTarget.style.backgroundColor = 'transparent')
+              }
+            >
+              {isDesktop ? <IconClose /> : <IconBack />}
+            </button>
+            <h2 id="dauth-profile-title" style={titleStyle}>
+              Your Profile
+            </h2>
+            <div style={{ width: 36 }} />
+          </div>
+
+          {/* Scrollable body */}
+          <div style={bodyStyle}>
+            {/* Avatar */}
+            <div style={avatarSection}>
+              <div style={avatarCircle}>
+                {user.avatar?.url ? (
+                  <img
+                    src={user.avatar.url}
+                    alt=""
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'cover',
+                    }}
+                  />
+                ) : (
+                  avatarInitial
+                )}
+              </div>
+              <div style={emailText}>{user.email}</div>
+            </div>
+
+            {/* Status */}
+            {status && (
+              <div
+                role="status"
+                aria-live="polite"
+                style={statusMsg(status.type)}
+              >
+                {status.message}
+              </div>
+            )}
+
+            {/* Form */}
+            <div>
+              <div style={fieldGroup}>
+                <label htmlFor="dauth-name" style={label}>
+                  Name *
+                </label>
+                <input
+                  id="dauth-name"
+                  type="text"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Your name"
+                  disabled={saving}
+                  style={input}
+                  onFocus={inputFocusHandler}
+                  onBlur={inputBlurHandler}
+                />
+              </div>
+
+              {hasField('lastname') && (
+                <div style={fieldGroup}>
+                  <label htmlFor="dauth-lastname" style={label}>
+                    Last name
+                    {isRequired('lastname') ? ' *' : ''}
+                  </label>
+                  <input
+                    id="dauth-lastname"
+                    type="text"
+                    value={lastname}
+                    onChange={(e) => setLastname(e.target.value)}
+                    placeholder="Your last name"
+                    disabled={saving}
+                    style={input}
+                    onFocus={inputFocusHandler}
+                    onBlur={inputBlurHandler}
+                  />
+                </div>
+              )}
+
+              {hasField('nickname') && (
+                <div style={fieldGroup}>
+                  <label htmlFor="dauth-nickname" style={label}>
+                    Nickname
+                    {isRequired('nickname') ? ' *' : ''}
+                  </label>
+                  <input
+                    id="dauth-nickname"
+                    type="text"
+                    value={nickname}
+                    onChange={(e) => setNickname(e.target.value)}
+                    placeholder="Choose a nickname"
+                    disabled={saving}
+                    style={input}
+                    onFocus={inputFocusHandler}
+                    onBlur={inputBlurHandler}
+                  />
+                </div>
+              )}
+
+              {hasField('country') && (
+                <div style={fieldGroup}>
+                  <label htmlFor="dauth-country" style={label}>
+                    Country
+                    {isRequired('country') ? ' *' : ''}
+                  </label>
+                  <input
+                    id="dauth-country"
+                    type="text"
+                    value={country}
+                    onChange={(e) => setCountry(e.target.value)}
+                    placeholder="Your country"
+                    disabled={saving}
+                    style={input}
+                    onFocus={inputFocusHandler}
+                    onBlur={inputBlurHandler}
+                  />
+                </div>
+              )}
+            </div>
+
+            {/* Danger zone */}
+            <hr style={separator} />
+            <div>
+              <div style={dangerTitle}>Delete account</div>
+              <div style={dangerDesc}>
+                Permanently delete your account and all associated data.
+              </div>
+              {!showDelete ? (
+                <button
+                  type="button"
+                  style={deleteBtn}
+                  onClick={() => setShowDelete(true)}
+                  onMouseEnter={(e) =>
+                    (e.currentTarget.style.backgroundColor =
+                      'rgba(239, 68, 68, 0.2)')
+                  }
+                  onMouseLeave={(e) =>
+                    (e.currentTarget.style.backgroundColor =
+                      'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))')
+                  }
+                >
+                  Delete account
+                </button>
+              ) : (
+                <div style={deletePanel}>
+                  <div style={deletePanelText}>
+                    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)}
+                    placeholder={`Type ${CONFIRM_WORD}`}
+                    style={input}
+                    onFocus={inputFocusHandler}
+                    onBlur={inputBlurHandler}
+                    disabled={deleting}
+                  />
+                  <div
+                    style={{
+                      display: 'flex',
+                      gap: 8,
+                      marginTop: 12,
+                    }}
+                  >
+                    <button
+                      type="button"
+                      style={cancelBtn}
+                      onClick={() => {
+                        setShowDelete(false);
+                        setDeleteText('');
+                      }}
+                      onMouseEnter={(e) =>
+                        (e.currentTarget.style.backgroundColor =
+                          'var(--dauth-surface-hover, #232340)')
+                      }
+                      onMouseLeave={(e) =>
+                        (e.currentTarget.style.backgroundColor = 'transparent')
+                      }
+                    >
+                      Cancel
+                    </button>
+                    <button
+                      type="button"
+                      style={{
+                        ...deleteConfirmBtn,
+                        opacity:
+                          deleteText !== CONFIRM_WORD || deleting ? 0.5 : 1,
+                        cursor:
+                          deleteText !== CONFIRM_WORD || deleting
+                            ? 'not-allowed'
+                            : 'pointer',
+                      }}
+                      disabled={deleteText !== CONFIRM_WORD || deleting}
+                      onClick={handleDelete}
+                    >
+                      {deleting && <Spinner />}
+                      Delete my account
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div style={footerStyle(isDesktop)}>
+            <button
+              type="button"
+              style={{
+                ...saveBtn,
+                opacity: canSave ? 1 : 0.5,
+                cursor: canSave ? 'pointer' : 'not-allowed',
+              }}
+              disabled={!canSave}
+              onClick={handleSave}
+              aria-busy={saving}
+              onMouseEnter={(e) => {
+                if (canSave)
+                  e.currentTarget.style.backgroundColor =
+                    'var(--dauth-accent-hover, #818cf8)';
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor =
+                  'var(--dauth-accent, #6366f1)';
+              }}
+            >
+              {saving && <Spinner />}
+              {saving ? 'Saving...' : 'Save changes'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}
+
+// --- Style constants ---
+
+const headerStyle = (isDesktop: boolean): React.CSSProperties => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '16px 24px',
+  borderBottom: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  flexShrink: 0,
+  ...(!isDesktop
+    ? {
+        position: 'sticky' as const,
+        top: 0,
+        zIndex: 1,
+        backgroundColor: 'var(--dauth-surface, #1a1a2e)',
+      }
+    : {}),
+});
+
+const titleStyle: React.CSSProperties = {
+  fontSize: 'var(--dauth-font-size-lg, 1.25rem)',
+  fontWeight: 600,
+  margin: 0,
+  lineHeight: 1.4,
+  textAlign: 'center',
+  flex: 1,
+};
+
+const closeBtn: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 36,
+  height: 36,
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  border: 'none',
+  backgroundColor: 'transparent',
+  color: 'var(--dauth-text-secondary, #a1a1aa)',
+  cursor: 'pointer',
+  transition: 'background-color 150ms, color 150ms',
+  padding: 0,
+};
+
+const bodyStyle: React.CSSProperties = {
+  flex: 1,
+  overflowY: 'auto',
+  padding: 24,
+  WebkitOverflowScrolling: 'touch',
+};
+
+const avatarSection: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  marginBottom: 24,
+  gap: 8,
+};
+
+const avatarCircle: React.CSSProperties = {
+  width: 64,
+  height: 64,
+  borderRadius: '50%',
+  backgroundColor: 'var(--dauth-accent, #6366f1)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  color: '#ffffff',
+  fontSize: '1.5rem',
+  fontWeight: 600,
+};
+
+const emailText: React.CSSProperties = {
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  color: 'var(--dauth-text-secondary, #a1a1aa)',
+};
+
+const statusMsg = (type: 'success' | 'error'): React.CSSProperties => ({
+  padding: '10px 14px',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  marginBottom: 16,
+  backgroundColor:
+    type === 'success'
+      ? 'var(--dauth-success-bg, rgba(34, 197, 94, 0.1))'
+      : 'var(--dauth-error-bg, rgba(239, 68, 68, 0.1))',
+  color:
+    type === 'success'
+      ? 'var(--dauth-success, #22c55e)'
+      : 'var(--dauth-error, #ef4444)',
+  textAlign: 'center',
+  lineHeight: 1.5,
+});
+
+const fieldGroup: React.CSSProperties = { marginBottom: 16 };
+
+const label: React.CSSProperties = {
+  display: 'block',
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  fontWeight: 500,
+  color: 'var(--dauth-text-primary, #e4e4e7)',
+  marginBottom: 6,
+};
+
+const input: React.CSSProperties = {
+  width: '100%',
+  padding: '10px 14px',
+  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))',
+  borderRadius: 'var(--dauth-radius-input, 8px)',
+  outline: 'none',
+  transition: 'border-color 150ms, box-shadow 150ms',
+  boxSizing: 'border-box' as const,
+  fontFamily: 'inherit',
+};
+
+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)';
+};
+
+const inputBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
+  e.currentTarget.style.borderColor =
+    'var(--dauth-border, rgba(255, 255, 255, 0.08))';
+  e.currentTarget.style.boxShadow = 'none';
+};
+
+const separator: React.CSSProperties = {
+  height: 1,
+  backgroundColor: 'var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  margin: '24px 0',
+  border: 'none',
+};
+
+const dangerTitle: React.CSSProperties = {
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  fontWeight: 600,
+  color: 'var(--dauth-error, #ef4444)',
+  marginBottom: 4,
+};
+
+const dangerDesc: React.CSSProperties = {
+  fontSize: 'var(--dauth-font-size-xs, 0.75rem)',
+  color: 'var(--dauth-text-muted, #71717a)',
+  marginBottom: 12,
+  lineHeight: 1.5,
+};
+
+const deleteBtn: React.CSSProperties = {
+  padding: '8px 16px',
+  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))',
+  border: '1px solid rgba(239, 68, 68, 0.2)',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  cursor: 'pointer',
+  transition: 'background-color 150ms, border-color 150ms',
+  fontFamily: 'inherit',
+};
+
+const deletePanel: React.CSSProperties = {
+  marginTop: 12,
+  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))',
+};
+
+const deletePanelText: React.CSSProperties = {
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  color: 'var(--dauth-text-primary, #e4e4e7)',
+  marginBottom: 12,
+  lineHeight: 1.5,
+};
+
+const cancelBtn: React.CSSProperties = {
+  flex: 1,
+  padding: '8px 16px',
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  fontWeight: 500,
+  color: 'var(--dauth-text-secondary, #a1a1aa)',
+  backgroundColor: 'transparent',
+  border: '1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  cursor: 'pointer',
+  transition: 'background-color 150ms',
+  fontFamily: 'inherit',
+};
+
+const deleteConfirmBtn: React.CSSProperties = {
+  flex: 1,
+  padding: '8px 16px',
+  fontSize: 'var(--dauth-font-size-sm, 0.875rem)',
+  fontWeight: 500,
+  color: '#ffffff',
+  backgroundColor: 'var(--dauth-error, #ef4444)',
+  border: 'none',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  cursor: 'pointer',
+  transition: 'opacity 150ms',
+  fontFamily: 'inherit',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+};
+
+const footerStyle = (isDesktop: boolean): React.CSSProperties => ({
+  padding: '16px 24px',
+  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))',
+      }
+    : {}),
+});
+
+const saveBtn: React.CSSProperties = {
+  width: '100%',
+  padding: '12px 24px',
+  fontSize: 'var(--dauth-font-size-base, 1rem)',
+  fontWeight: 600,
+  color: '#ffffff',
+  backgroundColor: 'var(--dauth-accent, #6366f1)',
+  border: 'none',
+  borderRadius: 'var(--dauth-radius-sm, 8px)',
+  transition: 'opacity 150ms, background-color 150ms',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 8,
+  fontFamily: 'inherit',
+};
+
+const spinnerStyle: React.CSSProperties = {
+  display: 'inline-block',
+  width: 16,
+  height: 16,
+  border: '2px solid rgba(255, 255, 255, 0.3)',
+  borderTopColor: '#ffffff',
+  borderRadius: '50%',
+  animation: 'dauth-spin 0.6s linear infinite',
+};