dauth-context-react 6.0.0 → 6.2.0

package/dist/index.js

@@ -40,7 +40,10 @@ var initialDauthState = {
   logout: () => {
   },
   updateUser: () => Promise.resolve(false),
-  deleteAccount: () => Promise.resolve(false)
+  deleteAccount: () => Promise.resolve(false),
+  getPasskeyCredentials: () => Promise.resolve([]),
+  registerPasskey: () => Promise.resolve(null),
+  deletePasskeyCredential: () => Promise.resolve(false)
 };
 var initialDauthState_default = initialDauthState;
 
@@ -147,6 +150,134 @@ async function deleteAccountAPI(basePath) {
   const data = await response.json();
   return { response, data };
 }
+async function getPasskeyCredentialsAPI(basePath) {
+  const response = await fetch(
+    `${basePath}/passkey/credentials`,
+    {
+      method: "GET",
+      headers: { "X-CSRF-Token": getCsrfToken() },
+      credentials: "include"
+    }
+  );
+  const data = await response.json();
+  return { response, data };
+}
+async function startPasskeyRegistrationAPI(basePath) {
+  const response = await fetch(
+    `${basePath}/passkey/register/start`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": getCsrfToken()
+      },
+      credentials: "include"
+    }
+  );
+  const data = await response.json();
+  return { response, data };
+}
+async function finishPasskeyRegistrationAPI(basePath, body) {
+  const response = await fetch(
+    `${basePath}/passkey/register/finish`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": getCsrfToken()
+      },
+      credentials: "include",
+      body: JSON.stringify(body)
+    }
+  );
+  const data = await response.json();
+  return { response, data };
+}
+async function deletePasskeyCredentialAPI(basePath, credentialId) {
+  const response = await fetch(
+    `${basePath}/passkey/credentials/${credentialId}`,
+    {
+      method: "DELETE",
+      headers: { "X-CSRF-Token": getCsrfToken() },
+      credentials: "include"
+    }
+  );
+  const data = await response.json();
+  return { response, data };
+}
+
+// src/webauthn.ts
+function base64urlToBuffer(base64url) {
+  const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = base64.length % 4;
+  const padded = pad ? base64 + "=".repeat(4 - pad) : base64;
+  const binary = atob(padded);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return bytes.buffer;
+}
+function bufferToBase64url(buffer) {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+async function createPasskeyCredential(options) {
+  const publicKey = {
+    ...options,
+    challenge: base64urlToBuffer(options.challenge),
+    user: {
+      ...options.user,
+      id: base64urlToBuffer(options.user.id)
+    },
+    excludeCredentials: (options.excludeCredentials ?? []).map(
+      (c) => ({
+        ...c,
+        id: base64urlToBuffer(c.id)
+      })
+    )
+  };
+  const credential = await navigator.credentials.create({
+    publicKey
+  });
+  if (!credential) {
+    throw new Error("Passkey registration was cancelled");
+  }
+  const attestation = credential.response;
+  return {
+    id: credential.id,
+    rawId: bufferToBase64url(credential.rawId),
+    type: credential.type,
+    response: {
+      clientDataJSON: bufferToBase64url(
+        attestation.clientDataJSON
+      ),
+      attestationObject: bufferToBase64url(
+        attestation.attestationObject
+      ),
+      ...attestation.getTransports ? { transports: attestation.getTransports() } : {},
+      ...attestation.getPublicKeyAlgorithm ? {
+        publicKeyAlgorithm: attestation.getPublicKeyAlgorithm()
+      } : {},
+      ...attestation.getPublicKey ? {
+        publicKey: bufferToBase64url(
+          attestation.getPublicKey()
+        )
+      } : {},
+      ...attestation.getAuthenticatorData ? {
+        authenticatorData: bufferToBase64url(
+          attestation.getAuthenticatorData()
+        )
+      } : {}
+    },
+    clientExtensionResults: credential.getClientExtensionResults(),
+    authenticatorAttachment: credential.authenticatorAttachment ?? void 0
+  };
+}
 
 // src/reducer/dauth.actions.ts
 async function exchangeCodeAction(ctx, code) {
@@ -270,6 +401,65 @@ async function deleteAccountAction(ctx) {
     return false;
   }
 }
+async function getPasskeyCredentialsAction(ctx) {
+  const { authProxyPath, onError } = ctx;
+  try {
+    const result = await getPasskeyCredentialsAPI(authProxyPath);
+    if (result.response.status === 200) {
+      return result.data.credentials ?? [];
+    }
+    return [];
+  } catch (error) {
+    onError(
+      error instanceof Error ? error : new Error("Get passkey credentials error")
+    );
+    return [];
+  }
+}
+async function registerPasskeyAction(ctx, name) {
+  const { authProxyPath, onError } = ctx;
+  try {
+    const startResult = await startPasskeyRegistrationAPI(authProxyPath);
+    if (startResult.response.status !== 200) {
+      onError(new Error("Failed to start passkey registration"));
+      return null;
+    }
+    const credential = await createPasskeyCredential(
+      startResult.data
+    );
+    const finishResult = await finishPasskeyRegistrationAPI(
+      authProxyPath,
+      { credential, name }
+    );
+    if (finishResult.response.status === 200 || finishResult.response.status === 201) {
+      return finishResult.data.credential;
+    }
+    onError(
+      new Error("Failed to finish passkey registration")
+    );
+    return null;
+  } catch (error) {
+    onError(
+      error instanceof Error ? error : new Error("Passkey registration error")
+    );
+    return null;
+  }
+}
+async function deletePasskeyCredentialAction(ctx, credentialId) {
+  const { authProxyPath, onError } = ctx;
+  try {
+    const result = await deletePasskeyCredentialAPI(
+      authProxyPath,
+      credentialId
+    );
+    return result.response.status === 200;
+  } catch (error) {
+    onError(
+      error instanceof Error ? error : new Error("Delete passkey error")
+    );
+    return false;
+  }
+}
 var resetUser = (dispatch) => {
   return dispatch({
     type: LOGIN,
@@ -361,6 +551,107 @@ function IconBack() {
     }
   );
 }
+function IconFingerprint() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14 13.12c0 2.38 0 6.38-1 8.88" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17.29 21.02c.12-.6.43-2.3.5-3.02" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 12a10 10 0 0 1 18-6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2 16h.01" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21.8 16c.2-2 .131-5.354 0-6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5 19.5C5.5 18 6 15 6 12a6 6 0 0 1 .34-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.65 22c.21-.66.45-1.32.57-2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 6.8a6 6 0 0 1 9 5.2v2" })
+      ]
+    }
+  );
+}
+function IconShield() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" })
+    }
+  );
+}
+function IconTrash() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 6h18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+      ]
+    }
+  );
+}
+function IconLogOut() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "16 17 21 12 16 7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
+      ]
+    }
+  );
+}
+function IconCamera() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "13", r: "3" })
+      ]
+    }
+  );
+}
 function Spinner() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: spinnerStyle, "aria-hidden": "true" });
 }
@@ -388,7 +679,10 @@ function useModalAnimation(open) {
     }
     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 void 0;
@@ -456,11 +750,27 @@ function useScrollLock(active) {
     };
   }, [active]);
 }
-function DauthProfileModal({ open, onClose }) {
-  const { user, domain, updateUser, deleteAccount } = useDauth();
+function DauthProfileModal({
+  open,
+  onClose,
+  onAvatarUpload
+}) {
+  const {
+    user,
+    domain,
+    updateUser,
+    deleteAccount,
+    logout,
+    getPasskeyCredentials,
+    registerPasskey,
+    deletePasskeyCredential
+  } = useDauth();
   const isDesktop = useMediaQuery("(min-width: 641px)");
   const phase = useModalAnimation(open);
   const modalRef = (0, import_react.useRef)(null);
+  const avatarInputRef = (0, import_react.useRef)(null);
+  const showSecurity = domain.authMethods?.passkey === true;
+  const [activeTab, setActiveTab] = (0, import_react.useState)("profile");
   const [name, setName] = (0, import_react.useState)("");
   const [lastname, setLastname] = (0, import_react.useState)("");
   const [nickname, setNickname] = (0, import_react.useState)("");
@@ -471,6 +781,13 @@ function DauthProfileModal({ open, onClose }) {
   const [showDelete, setShowDelete] = (0, import_react.useState)(false);
   const [deleteText, setDeleteText] = (0, import_react.useState)("");
   const [deleting, setDeleting] = (0, import_react.useState)(false);
+  const [credentials, setCredentials] = (0, import_react.useState)([]);
+  const [loadingCreds, setLoadingCreds] = (0, import_react.useState)(false);
+  const [showRegister, setShowRegister] = (0, import_react.useState)(false);
+  const [passkeyName, setPasskeyName] = (0, import_react.useState)("");
+  const [registering, setRegistering] = (0, import_react.useState)(false);
+  const [passkeyStatus, setPasskeyStatus] = (0, import_react.useState)(null);
+  const [uploadingAvatar, setUploadingAvatar] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
     if (open && user?._id && !populated) {
       setName(user.name || "");
@@ -484,13 +801,36 @@ function DauthProfileModal({ open, onClose }) {
       setStatus(null);
       setShowDelete(false);
       setDeleteText("");
+      setActiveTab("profile");
+      setPasskeyStatus(null);
+      setShowRegister(false);
+      setPasskeyName("");
     }
   }, [open, user, populated]);
+  (0, import_react.useEffect)(() => {
+    if (activeTab !== "security" || !showSecurity) return;
+    setLoadingCreds(true);
+    getPasskeyCredentials().then((creds) => {
+      setCredentials(creds);
+      setLoadingCreds(false);
+    });
+  }, [activeTab, showSecurity, getPasskeyCredentials]);
   (0, import_react.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]);
+  (0, import_react.useEffect)(() => {
+    if (passkeyStatus?.type !== "success") return;
+    const timer = setTimeout(
+      () => setPasskeyStatus(null),
+      SUCCESS_TIMEOUT_MS
+    );
+    return () => clearTimeout(timer);
+  }, [passkeyStatus]);
   useFocusTrap(modalRef, phase === "entered", onClose);
   useScrollLock(phase !== "exited");
   const hasField = (0, import_react.useCallback)(
@@ -542,6 +882,90 @@ function DauthProfileModal({ open, onClose }) {
       setDeleteText("");
     }
   }, [deleteAccount, onClose]);
+  const handleLanguage = (0, import_react.useCallback)(
+    async (lang) => {
+      await updateUser({ language: lang });
+    },
+    [updateUser]
+  );
+  const handleRegisterPasskey = (0, import_react.useCallback)(async () => {
+    setRegistering(true);
+    setPasskeyStatus(null);
+    const cred = await registerPasskey(
+      passkeyName || void 0
+    );
+    setRegistering(false);
+    if (cred) {
+      setCredentials((prev) => [...prev, cred]);
+      setPasskeyName("");
+      setShowRegister(false);
+      setPasskeyStatus({
+        type: "success",
+        message: "Passkey registered successfully"
+      });
+    } else {
+      setPasskeyStatus({
+        type: "error",
+        message: "Failed to register passkey"
+      });
+    }
+  }, [passkeyName, registerPasskey]);
+  const handleDeletePasskey = (0, import_react.useCallback)(
+    async (credentialId) => {
+      const ok = await deletePasskeyCredential(credentialId);
+      if (ok) {
+        setCredentials(
+          (prev) => prev.filter((c) => c._id !== credentialId)
+        );
+      }
+    },
+    [deletePasskeyCredential]
+  );
+  const handleAvatarClick = (0, import_react.useCallback)(() => {
+    if (onAvatarUpload) {
+      avatarInputRef.current?.click();
+    }
+  }, [onAvatarUpload]);
+  const handleAvatarChange = (0, import_react.useCallback)(
+    async (e) => {
+      const file = e.target.files?.[0];
+      if (!file || !onAvatarUpload) return;
+      setUploadingAvatar(true);
+      try {
+        const url = await onAvatarUpload(file);
+        if (url) {
+          await updateUser({ avatar: url });
+        }
+      } catch {
+      }
+      setUploadingAvatar(false);
+      if (avatarInputRef.current) {
+        avatarInputRef.current.value = "";
+      }
+    },
+    [onAvatarUpload, updateUser]
+  );
+  const handleSignOut = (0, import_react.useCallback)(() => {
+    logout();
+    onClose();
+  }, [logout, onClose]);
+  const themeVars = (0, import_react.useMemo)(() => {
+    const t = domain.modalTheme;
+    if (!t) return {};
+    const vars = {};
+    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)";
@@ -589,6 +1013,11 @@ function DauthProfileModal({ open, onClose }) {
     transition: `transform ${dur}ms ${easing}`
   };
   const avatarInitial = (user.name || user.email || "?").charAt(0).toUpperCase();
+  const tabs = [
+    { key: "profile", label: "Profile" },
+    ...showSecurity ? [{ key: "security", label: "Security" }] : [],
+    { key: "account", label: "Account" }
+  ];
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -602,7 +1031,7 @@ function DauthProfileModal({ open, onClose }) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "div",
         {
-          style: backdrop,
+          style: { ...backdrop, ...themeVars },
           onClick: isDesktop ? onClose : void 0,
           "data-testid": "dauth-profile-backdrop",
           children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -632,191 +1061,542 @@ function DauthProfileModal({ open, onClose }) {
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: "dauth-profile-title", style: titleStyle, children: "Your Profile" }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: 36 } })
                 ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: tabBar, role: "tablist", children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "button",
+                  {
+                    role: "tab",
+                    type: "button",
+                    "aria-selected": activeTab === t.key,
+                    style: {
+                      ...tabBtn,
+                      color: activeTab === t.key ? "var(--dauth-accent, #6366f1)" : "var(--dauth-text-secondary, #a1a1aa)",
+                      borderBottomColor: activeTab === t.key ? "var(--dauth-accent, #6366f1)" : "transparent"
+                    },
+                    onClick: () => setActiveTab(t.key),
+                    children: t.label
+                  },
+                  t.key
+                )) }),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: bodyStyle, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: avatarSection, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: avatarCircle, children: user.avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "img",
-                      {
-                        src: user.avatar.url,
-                        alt: "",
-                        style: {
-                          width: "100%",
-                          height: "100%",
-                          objectFit: "cover"
-                        }
-                      }
-                    ) : avatarInitial }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: emailText, children: user.email })
-                  ] }),
-                  status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                    "div",
-                    {
-                      role: "status",
-                      "aria-live": "polite",
-                      style: statusMsg(status.type),
-                      children: status.message
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: "dauth-name", style: label, children: "Name *" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "input",
+                  activeTab === "profile" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: avatarSection, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                        "div",
                         {
-                          id: "dauth-name",
-                          type: "text",
-                          value: name,
-                          onChange: (e) => setName(e.target.value),
-                          placeholder: "Your name",
-                          disabled: saving,
-                          style: input,
-                          onFocus: inputFocusHandler,
-                          onBlur: inputBlurHandler
+                          style: {
+                            ...avatarCircle,
+                            cursor: onAvatarUpload ? "pointer" : "default",
+                            position: "relative"
+                          },
+                          onClick: handleAvatarClick,
+                          children: [
+                            uploadingAvatar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}) : user.avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                              "img",
+                              {
+                                src: user.avatar.url,
+                                alt: "",
+                                style: {
+                                  width: "100%",
+                                  height: "100%",
+                                  objectFit: "cover"
+                                }
+                              }
+                            ) : avatarInitial,
+                            onAvatarUpload && !uploadingAvatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: avatarOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCamera, {}) })
+                          ]
                         }
-                      )
-                    ] }),
-                    hasField("lastname") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "dauth-lastname", style: label, children: [
-                        "Last name",
-                        isRequired("lastname") ? " *" : ""
-                      ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: emailText, children: user.email }),
+                      onAvatarUpload && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                         "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
+                          ref: avatarInputRef,
+                          type: "file",
+                          accept: "image/*",
+                          style: { display: "none" },
+                          onChange: handleAvatarChange
                         }
                       )
                     ] }),
-                    hasField("nickname") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "dauth-nickname", style: label, children: [
-                        "Nickname",
-                        isRequired("nickname") ? " *" : ""
+                    status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        role: "status",
+                        "aria-live": "polite",
+                        style: statusMsg(status.type),
+                        children: status.message
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "label",
+                          {
+                            htmlFor: "dauth-name",
+                            style: label,
+                            children: "Name *"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "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
+                          }
+                        )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "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
-                        }
-                      )
-                    ] }),
-                    hasField("country") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: "dauth-country", style: label, children: [
-                        "Country",
-                        isRequired("country") ? " *" : ""
+                      hasField("lastname") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "label",
+                          {
+                            htmlFor: "dauth-lastname",
+                            style: label,
+                            children: [
+                              "Last name",
+                              isRequired("lastname") ? " *" : ""
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "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
+                          }
+                        )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "input",
+                      hasField("nickname") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "label",
+                          {
+                            htmlFor: "dauth-nickname",
+                            style: label,
+                            children: [
+                              "Nickname",
+                              isRequired("nickname") ? " *" : ""
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "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
+                          }
+                        )
+                      ] }),
+                      hasField("country") && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "label",
+                          {
+                            htmlFor: "dauth-country",
+                            style: label,
+                            children: [
+                              "Country",
+                              isRequired("country") ? " *" : ""
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "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
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: label, children: "Language" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", gap: 8 }, children: ["es", "en"].map((lang) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "button",
                         {
-                          id: "dauth-country",
-                          type: "text",
-                          value: country,
-                          onChange: (e) => setCountry(e.target.value),
-                          placeholder: "Your country",
-                          disabled: saving,
-                          style: input,
-                          onFocus: inputFocusHandler,
-                          onBlur: inputBlurHandler
-                        }
-                      )
+                          type: "button",
+                          style: {
+                            ...langBtn,
+                            backgroundColor: user.language === lang ? "var(--dauth-accent, #6366f1)" : "var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))",
+                            color: user.language === lang ? "#ffffff" : "var(--dauth-text-secondary, #a1a1aa)"
+                          },
+                          onClick: () => handleLanguage(lang),
+                          children: lang === "es" ? "Espa\xF1ol" : "English"
+                        },
+                        lang
+                      )) })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: dangerTitle, children: "Delete account" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: dangerDesc, children: "Permanently delete your account and all associated data." }),
-                    !showDelete ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                      "button",
+                  activeTab === "security" && showSecurity && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
                       {
-                        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))",
-                        children: "Delete account"
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          marginBottom: 16
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "div",
+                            {
+                              style: {
+                                ...label,
+                                marginBottom: 0,
+                                fontWeight: 600
+                              },
+                              children: "Passkeys"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              style: outlineBtn,
+                              onClick: () => setShowRegister(!showRegister),
+                              onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--dauth-surface-hover, #232340)",
+                              onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+                              children: "+ Add passkey"
+                            }
+                          )
+                        ]
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: deletePanel, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: deletePanelText, children: [
-                        "This action is permanent and cannot be undone. Type",
-                        " ",
-                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: CONFIRM_WORD }),
-                        " to confirm."
+                    ),
+                    showRegister && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: registerPanel, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: fieldGroup, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "label",
+                          {
+                            htmlFor: "dauth-passkey-name",
+                            style: label,
+                            children: "Passkey name (optional)"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "input",
+                          {
+                            id: "dauth-passkey-name",
+                            type: "text",
+                            value: passkeyName,
+                            onChange: (e) => setPasskeyName(e.target.value),
+                            placeholder: "e.g. MacBook Touch ID",
+                            disabled: registering,
+                            style: input,
+                            onFocus: inputFocusHandler,
+                            onBlur: inputBlurHandler
+                          }
+                        )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                        "input",
-                        {
-                          type: "text",
-                          value: deleteText,
-                          onChange: (e) => setDeleteText(e.target.value),
-                          placeholder: `Type ${CONFIRM_WORD}`,
-                          style: input,
-                          onFocus: inputFocusHandler,
-                          onBlur: inputBlurHandler,
-                          disabled: deleting
-                        }
-                      ),
                       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                         "div",
                         {
                           style: {
                             display: "flex",
-                            gap: 8,
-                            marginTop: 12
+                            gap: 8
                           },
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                               "button",
                               {
                                 type: "button",
-                                style: cancelBtn,
-                                onClick: () => {
-                                  setShowDelete(false);
-                                  setDeleteText("");
+                                style: {
+                                  ...smallAccentBtn,
+                                  opacity: registering ? 0.6 : 1
                                 },
-                                onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--dauth-surface-hover, #232340)",
-                                onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
-                                children: "Cancel"
+                                disabled: registering,
+                                onClick: handleRegisterPasskey,
+                                children: [
+                                  registering ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconFingerprint, {}),
+                                  registering ? "Registering..." : "Register"
+                                ]
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                               "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,
-                                children: [
-                                  deleting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}),
-                                  "Delete my account"
-                                ]
+                                style: cancelBtn,
+                                onClick: () => setShowRegister(false),
+                                onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--dauth-surface-hover, #232340)",
+                                onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
+                                children: "Cancel"
                               }
                             )
                           ]
                         }
                       )
-                    ] })
+                    ] }),
+                    passkeyStatus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        role: "status",
+                        "aria-live": "polite",
+                        style: {
+                          ...statusMsg(passkeyStatus.type),
+                          marginTop: 12
+                        },
+                        children: passkeyStatus.message
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 12 }, children: loadingCreds ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        style: {
+                          textAlign: "center",
+                          padding: 24
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})
+                      }
+                    ) : credentials.length > 0 ? credentials.map((cred) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: credentialRow,
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                            "div",
+                            {
+                              style: {
+                                display: "flex",
+                                alignItems: "center",
+                                gap: 12,
+                                flex: 1,
+                                minWidth: 0
+                              },
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                  "span",
+                                  {
+                                    style: {
+                                      color: "var(--dauth-accent, #6366f1)",
+                                      flexShrink: 0
+                                    },
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconFingerprint, {})
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                  "div",
+                                  {
+                                    style: {
+                                      minWidth: 0,
+                                      flex: 1
+                                    },
+                                    children: [
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                        "div",
+                                        {
+                                          style: {
+                                            fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+                                            fontWeight: 500,
+                                            color: "var(--dauth-text-primary, #e4e4e7)",
+                                            overflow: "hidden",
+                                            textOverflow: "ellipsis",
+                                            whiteSpace: "nowrap"
+                                          },
+                                          children: cred.name || "Passkey"
+                                        }
+                                      ),
+                                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                        "div",
+                                        {
+                                          style: {
+                                            fontSize: "var(--dauth-font-size-xs, 0.75rem)",
+                                            color: "var(--dauth-text-muted, #71717a)"
+                                          },
+                                          children: [
+                                            cred.deviceType === "multiDevice" ? "Synced" : "Device-bound",
+                                            cred.createdAt && ` \xB7 Created ${new Date(cred.createdAt).toLocaleDateString()}`
+                                          ]
+                                        }
+                                      )
+                                    ]
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => handleDeletePasskey(cred._id),
+                              style: trashBtn,
+                              onMouseEnter: (e) => e.currentTarget.style.color = "var(--dauth-error, #ef4444)",
+                              onMouseLeave: (e) => e.currentTarget.style.color = "var(--dauth-text-muted, #71717a)",
+                              "aria-label": `Delete passkey ${cred.name || ""}`,
+                              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconTrash, {})
+                            }
+                          )
+                        ]
+                      },
+                      cred._id
+                    )) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: emptyState, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "span",
+                        {
+                          style: {
+                            color: "var(--dauth-accent, #6366f1)"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconShield, {})
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+                              fontWeight: 500,
+                              color: "var(--dauth-text-primary, #e4e4e7)"
+                            },
+                            children: "No passkeys registered"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "div",
+                          {
+                            style: {
+                              fontSize: "var(--dauth-font-size-xs, 0.75rem)",
+                              color: "var(--dauth-text-secondary, #a1a1aa)"
+                            },
+                            children: "Add a passkey for faster, more secure sign-in."
+                          }
+                        )
+                      ] })
+                    ] }) })
+                  ] }),
+                  activeTab === "account" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    status && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        role: "status",
+                        "aria-live": "polite",
+                        style: statusMsg(status.type),
+                        children: status.message
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: dangerTitle, children: "Delete account" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: dangerDesc, children: "Permanently delete your account and all associated data." }),
+                      !showDelete ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "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))",
+                          children: "Delete account"
+                        }
+                      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: deletePanel, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: deletePanelText, children: [
+                          "This action is permanent and cannot be undone. Type",
+                          " ",
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: CONFIRM_WORD }),
+                          " to confirm."
+                        ] }),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "input",
+                          {
+                            type: "text",
+                            value: deleteText,
+                            onChange: (e) => setDeleteText(e.target.value),
+                            placeholder: `Type ${CONFIRM_WORD}`,
+                            style: input,
+                            onFocus: inputFocusHandler,
+                            onBlur: inputBlurHandler,
+                            disabled: deleting
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                          "div",
+                          {
+                            style: {
+                              display: "flex",
+                              gap: 8,
+                              marginTop: 12
+                            },
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                                "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",
+                                  children: "Cancel"
+                                }
+                              ),
+                              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                                "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,
+                                  children: [
+                                    deleting && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {}),
+                                    "Delete my account"
+                                  ]
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("hr", { style: separator }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        style: signOutBtn,
+                        onClick: handleSignOut,
+                        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))",
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconLogOut, {}),
+                          "Sign out"
+                        ]
+                      }
+                    )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: footerStyle(isDesktop), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                activeTab === "profile" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: footerStyle(isDesktop), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -854,8 +1634,7 @@ var headerStyle = (isDesktop) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "16px 24px",
-  borderBottom: "1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))",
+  padding: "16px 24px 0",
   flexShrink: 0,
   ...!isDesktop ? {
     position: "sticky",
@@ -886,6 +1665,25 @@ var closeBtn = {
   transition: "background-color 150ms, color 150ms",
   padding: 0
 };
+var tabBar = {
+  display: "flex",
+  padding: "0 24px",
+  borderBottom: "1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))",
+  flexShrink: 0
+};
+var tabBtn = {
+  flex: 1,
+  padding: "12px 4px",
+  fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+  fontWeight: 500,
+  border: "none",
+  borderBottom: "2px solid transparent",
+  backgroundColor: "transparent",
+  cursor: "pointer",
+  transition: "color 150ms, border-color 150ms",
+  fontFamily: "inherit",
+  textAlign: "center"
+};
 var bodyStyle = {
   flex: 1,
   overflowY: "auto",
@@ -912,6 +1710,18 @@ var avatarCircle = {
   fontSize: "1.5rem",
   fontWeight: 600
 };
+var avatarOverlay = {
+  position: "absolute",
+  inset: 0,
+  backgroundColor: "rgba(0, 0, 0, 0.4)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "50%",
+  opacity: 0.7,
+  transition: "opacity 150ms",
+  color: "#ffffff"
+};
 var emailText = {
   fontSize: "var(--dauth-font-size-sm, 0.875rem)",
   color: "var(--dauth-text-secondary, #a1a1aa)"
@@ -926,7 +1736,9 @@ var statusMsg = (type) => ({
   textAlign: "center",
   lineHeight: 1.5
 });
-var fieldGroup = { marginBottom: 16 };
+var fieldGroup = {
+  marginBottom: 16
+};
 var label = {
   display: "block",
   fontSize: "var(--dauth-font-size-sm, 0.875rem)",
@@ -956,12 +1768,88 @@ var inputBlurHandler = (e) => {
   e.currentTarget.style.borderColor = "var(--dauth-border, rgba(255, 255, 255, 0.08))";
   e.currentTarget.style.boxShadow = "none";
 };
+var langBtn = {
+  padding: "8px 16px",
+  fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+  fontWeight: 500,
+  border: "none",
+  borderRadius: "var(--dauth-radius-sm, 8px)",
+  cursor: "pointer",
+  transition: "background-color 150ms, color 150ms",
+  fontFamily: "inherit"
+};
 var separator = {
   height: 1,
   backgroundColor: "var(--dauth-border, rgba(255, 255, 255, 0.08))",
   margin: "24px 0",
   border: "none"
 };
+var outlineBtn = {
+  padding: "6px 12px",
+  fontSize: "var(--dauth-font-size-xs, 0.75rem)",
+  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"
+};
+var registerPanel = {
+  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))",
+  marginBottom: 12
+};
+var smallAccentBtn = {
+  padding: "8px 16px",
+  fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+  fontWeight: 500,
+  color: "#ffffff",
+  backgroundColor: "var(--dauth-accent, #6366f1)",
+  border: "none",
+  borderRadius: "var(--dauth-radius-sm, 8px)",
+  cursor: "pointer",
+  transition: "opacity 150ms",
+  fontFamily: "inherit",
+  display: "flex",
+  alignItems: "center",
+  gap: 6
+};
+var credentialRow = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: 12,
+  borderRadius: "var(--dauth-radius-sm, 8px)",
+  backgroundColor: "var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))",
+  marginBottom: 8
+};
+var trashBtn = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: 28,
+  height: 28,
+  border: "none",
+  backgroundColor: "transparent",
+  color: "var(--dauth-text-muted, #71717a)",
+  cursor: "pointer",
+  transition: "color 150ms",
+  padding: 0,
+  borderRadius: "var(--dauth-radius-sm, 8px)",
+  flexShrink: 0
+};
+var emptyState = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  padding: 16,
+  borderRadius: "var(--dauth-radius-sm, 8px)",
+  backgroundColor: "var(--dauth-surface-secondary, rgba(255, 255, 255, 0.04))"
+};
 var dangerTitle = {
   fontSize: "var(--dauth-font-size-sm, 0.875rem)",
   fontWeight: 600,
@@ -1000,7 +1888,6 @@ var deletePanelText = {
   lineHeight: 1.5
 };
 var cancelBtn = {
-  flex: 1,
   padding: "8px 16px",
   fontSize: "var(--dauth-font-size-sm, 0.875rem)",
   fontWeight: 500,
@@ -1029,6 +1916,23 @@ var deleteConfirmBtn = {
   justifyContent: "center",
   gap: 8
 };
+var signOutBtn = {
+  width: "100%",
+  padding: "12px 24px",
+  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))",
+  border: "1px solid rgba(239, 68, 68, 0.2)",
+  borderRadius: "var(--dauth-radius-sm, 8px)",
+  cursor: "pointer",
+  transition: "background-color 150ms",
+  fontFamily: "inherit",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 8
+};
 var footerStyle = (isDesktop) => ({
   padding: "16px 24px",
   borderTop: "1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))",
@@ -1140,15 +2044,39 @@ var DauthProvider = (props) => {
     () => deleteAccountAction(ctx),
     [ctx]
   );
+  const getPasskeyCredentials = (0, import_react2.useCallback)(
+    () => getPasskeyCredentialsAction(ctx),
+    [ctx]
+  );
+  const registerPasskey = (0, import_react2.useCallback)(
+    (name) => registerPasskeyAction(ctx, name),
+    [ctx]
+  );
+  const deletePasskeyCredential = (0, import_react2.useCallback)(
+    (credentialId) => deletePasskeyCredentialAction(ctx, credentialId),
+    [ctx]
+  );
   const memoProvider = (0, import_react2.useMemo)(
     () => ({
       ...dauthState,
       loginWithRedirect,
       logout,
       updateUser,
-      deleteAccount
+      deleteAccount,
+      getPasskeyCredentials,
+      registerPasskey,
+      deletePasskeyCredential
     }),
-    [dauthState, loginWithRedirect, logout, updateUser, deleteAccount]
+    [
+      dauthState,
+      loginWithRedirect,
+      logout,
+      updateUser,
+      deleteAccount,
+      getPasskeyCredentials,
+      registerPasskey,
+      deletePasskeyCredential
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DauthContext.Provider, { value: memoProvider, children });
 };