dauth-context-react 5.0.0 → 6.0.0

package/dist/index.mjs

@@ -1,9 +1,9 @@
 // src/index.tsx
 import {
   useReducer,
-  useMemo,
-  useEffect,
-  useCallback,
+  useMemo as useMemo2,
+  useEffect as useEffect2,
+  useCallback as useCallback2,
   createContext,
   useContext
 } from "react";
@@ -21,8 +21,6 @@ var initialDauthState = {
   logout: () => {
   },
   updateUser: () => Promise.resolve(false),
-  updateUserWithRedirect: () => {
-  },
   deleteAccount: () => Promise.resolve(false)
 };
 var initialDauthState_default = initialDauthState;
@@ -72,7 +70,12 @@ function getCsrfToken() {
   const match = document.cookie.match(
     /(?:^|;\s*)(?:__Host-csrf|csrf-token)=([^;]*)/
   );
-  return match?.[1] ?? "";
+  if (!match?.[1]) return "";
+  try {
+    return decodeURIComponent(match[1]);
+  } catch {
+    return match[1];
+  }
 }
 async function exchangeCodeAPI(basePath, code) {
   const response = await fetch(`${basePath}/exchange-code`, {
@@ -125,18 +128,6 @@ async function deleteAccountAPI(basePath) {
   const data = await response.json();
   return { response, data };
 }
-async function profileRedirectAPI(basePath) {
-  const response = await fetch(
-    `${basePath}/profile-redirect`,
-    {
-      method: "GET",
-      headers: { "X-CSRF-Token": getCsrfToken() },
-      credentials: "include"
-    }
-  );
-  const data = await response.json();
-  return { response, data };
-}
 
 // src/reducer/dauth.actions.ts
 async function exchangeCodeAction(ctx, code) {
@@ -146,11 +137,7 @@ async function exchangeCodeAction(ctx, code) {
     payload: { isLoading: true }
   });
   try {
-    window.history.replaceState(
-      {},
-      document.title,
-      window.location.pathname
-    );
+    window.history.replaceState({}, document.title, window.location.pathname);
     const result = await exchangeCodeAPI(authProxyPath, code);
     if (result.response.status === 200) {
       dispatch({
@@ -165,9 +152,7 @@ async function exchangeCodeAction(ctx, code) {
     }
     resetUser(dispatch);
   } catch (error) {
-    onError(
-      error instanceof Error ? error : new Error(String(error))
-    );
+    onError(error instanceof Error ? error : new Error(String(error)));
     resetUser(dispatch);
   } finally {
     dispatch({
@@ -197,9 +182,7 @@ async function autoLoginAction(ctx) {
     }
     resetUser(dispatch);
   } catch (error) {
-    onError(
-      error instanceof Error ? error : new Error(String(error))
-    );
+    onError(error instanceof Error ? error : new Error(String(error)));
     resetUser(dispatch);
   } finally {
     dispatch({
@@ -236,10 +219,7 @@ async function logoutAction(ctx) {
 async function updateUserAction(ctx, user) {
   const { dispatch, authProxyPath, onError } = ctx;
   if (user.language) {
-    window.document.documentElement.setAttribute(
-      "lang",
-      user.language
-    );
+    window.document.documentElement.setAttribute("lang", user.language);
   }
   try {
     const result = await updateUserAPI(authProxyPath, user);
@@ -250,34 +230,13 @@ async function updateUserAction(ctx, user) {
       });
       return true;
     }
-    onError(
-      new Error("Update user error: " + result.data.message)
-    );
+    onError(new Error("Update user error: " + result.data.message));
     return false;
   } catch (error) {
-    onError(
-      error instanceof Error ? error : new Error("Update user error")
-    );
+    onError(error instanceof Error ? error : new Error("Update user error"));
     return false;
   }
 }
-async function updateUserWithRedirectAction(ctx) {
-  const { authProxyPath, onError } = ctx;
-  try {
-    const result = await profileRedirectAPI(authProxyPath);
-    if (result.response.status === 200 && result.data.redirectUrl) {
-      window.location.replace(result.data.redirectUrl);
-      return;
-    }
-    onError(
-      new Error("Could not generate profile redirect")
-    );
-  } catch (error) {
-    onError(
-      error instanceof Error ? error : new Error("Profile redirect error")
-    );
-  }
-}
 async function deleteAccountAction(ctx) {
   const { dispatch, authProxyPath, onError } = ctx;
   try {
@@ -288,9 +247,7 @@ async function deleteAccountAction(ctx) {
     }
     return false;
   } catch (error) {
-    onError(
-      error instanceof Error ? error : new Error("Delete account error")
-    );
+    onError(error instanceof Error ? error : new Error("Delete account error"));
     return false;
   }
 }
@@ -314,12 +271,12 @@ function setDauthUrl(url) {
 function checkIsLocalhost() {
   if (typeof window === "undefined") return false;
   const hostname = window.location.hostname;
-  return Boolean(
-    hostname === "localhost" || hostname === "[::1]" || hostname.match(
-      /(192)\.(168)\.(1)\.([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gm
-    ) || hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+  return hostname === "localhost" || hostname === "[::1]" || /^127(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(
+    hostname
+  ) || /^192\.168(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){2}$/.test(
+    hostname
+  ) || /^10(?:\.(?:25[0-5]|2[0-4]\d|[01]?\d\d?)){3}$/.test(
+    hostname
   );
 }
 function getClientBasePath() {
@@ -339,8 +296,766 @@ var routes = {
   signin: "signin"
 };
 
+// src/DauthProfileModal.tsx
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TRANSITION_MS = 200;
+var MOBILE_TRANSITION_MS = 300;
+var SUCCESS_TIMEOUT_MS = 4e3;
+var CONFIRM_WORD = "DELETE";
+function IconClose() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+        /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      ]
+    }
+  );
+}
+function IconBack() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+        /* @__PURE__ */ jsx("polyline", { points: "12 19 5 12 12 5" })
+      ]
+    }
+  );
+}
+function Spinner() {
+  return /* @__PURE__ */ jsx("span", { style: spinnerStyle, "aria-hidden": "true" });
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(
+    () => typeof window !== "undefined" && window.matchMedia(query).matches
+  );
+  useEffect(() => {
+    const mq = window.matchMedia(query);
+    const handler = (e) => setMatches(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [query]);
+  return matches;
+}
+function useModalAnimation(open) {
+  const [phase, setPhase] = useState("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 void 0;
+  }, [open]);
+  return phase;
+}
+function useFocusTrap(containerRef, active, onEscape) {
+  const previousFocus = useRef(null);
+  useEffect(() => {
+    if (!active) return;
+    previousFocus.current = document.activeElement;
+    const container = containerRef.current;
+    if (!container) return;
+    const focusFirst = () => {
+      const firstInput = container.querySelector(
+        "input:not([disabled])"
+      );
+      (firstInput ?? container).focus();
+    };
+    const raf = requestAnimationFrame(focusFirst);
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onEscape();
+        return;
+      }
+      if (e.key !== "Tab") return;
+      const focusable = container.querySelectorAll(
+        '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) {
+  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]);
+}
+function DauthProfileModal({ open, onClose }) {
+  const { user, domain, updateUser, deleteAccount } = useDauth();
+  const isDesktop = useMediaQuery("(min-width: 641px)");
+  const phase = useModalAnimation(open);
+  const modalRef = useRef(null);
+  const [name, setName] = useState("");
+  const [lastname, setLastname] = useState("");
+  const [nickname, setNickname] = useState("");
+  const [country, setCountry] = useState("");
+  const [populated, setPopulated] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [status, setStatus] = useState(null);
+  const [showDelete, setShowDelete] = useState(false);
+  const [deleteText, setDeleteText] = useState("");
+  const [deleting, setDeleting] = useState(false);
+  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]);
+  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) => domain.formFields?.some((f) => f.field === field) ?? false,
+    [domain.formFields]
+  );
+  const isRequired = useCallback(
+    (field) => 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 = { 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]);
+  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 = {
+    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 = {
+    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 = {
+    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(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "style",
+        {
+          dangerouslySetInnerHTML: {
+            __html: "@keyframes dauth-spin{to{transform:rotate(360deg)}}"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: backdrop,
+          onClick: isDesktop ? onClose : void 0,
+          "data-testid": "dauth-profile-backdrop",
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: modalRef,
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": "dauth-profile-title",
+              style: isDesktop ? modalDesktop : modalMobile,
+              onClick: (e) => e.stopPropagation(),
+              tabIndex: -1,
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: headerStyle(isDesktop), children: [
+                  /* @__PURE__ */ jsx(
+                    "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",
+                      children: isDesktop ? /* @__PURE__ */ jsx(IconClose, {}) : /* @__PURE__ */ jsx(IconBack, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("h2", { id: "dauth-profile-title", style: titleStyle, children: "Your Profile" }),
+                  /* @__PURE__ */ jsx("div", { style: { width: 36 } })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: bodyStyle, children: [
+                  /* @__PURE__ */ jsxs("div", { style: avatarSection, children: [
+                    /* @__PURE__ */ jsx("div", { style: avatarCircle, children: user.avatar?.url ? /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: user.avatar.url,
+                        alt: "",
+                        style: {
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "cover"
+                        }
+                      }
+                    ) : avatarInitial }),
+                    /* @__PURE__ */ jsx("div", { style: emailText, children: user.email })
+                  ] }),
+                  status && /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "status",
+                      "aria-live": "polite",
+                      style: statusMsg(status.type),
+                      children: status.message
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsxs("div", { style: fieldGroup, children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: "dauth-name", style: label, children: "Name *" }),
+                      /* @__PURE__ */ 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
+                        }
+                      )
+                    ] }),
+                    hasField("lastname") && /* @__PURE__ */ jsxs("div", { style: fieldGroup, children: [
+                      /* @__PURE__ */ jsxs("label", { htmlFor: "dauth-lastname", style: label, children: [
+                        "Last name",
+                        isRequired("lastname") ? " *" : ""
+                      ] }),
+                      /* @__PURE__ */ 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
+                        }
+                      )
+                    ] }),
+                    hasField("nickname") && /* @__PURE__ */ jsxs("div", { style: fieldGroup, children: [
+                      /* @__PURE__ */ jsxs("label", { htmlFor: "dauth-nickname", style: label, children: [
+                        "Nickname",
+                        isRequired("nickname") ? " *" : ""
+                      ] }),
+                      /* @__PURE__ */ 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__ */ jsxs("div", { style: fieldGroup, children: [
+                      /* @__PURE__ */ jsxs("label", { htmlFor: "dauth-country", style: label, children: [
+                        "Country",
+                        isRequired("country") ? " *" : ""
+                      ] }),
+                      /* @__PURE__ */ 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__ */ jsx("hr", { style: separator }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("div", { style: dangerTitle, children: "Delete account" }),
+                    /* @__PURE__ */ jsx("div", { style: dangerDesc, children: "Permanently delete your account and all associated data." }),
+                    !showDelete ? /* @__PURE__ */ 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__ */ jsxs("div", { style: deletePanel, children: [
+                      /* @__PURE__ */ jsxs("div", { style: deletePanelText, children: [
+                        "This action is permanent and cannot be undone. Type",
+                        " ",
+                        /* @__PURE__ */ jsx("strong", { children: CONFIRM_WORD }),
+                        " to confirm."
+                      ] }),
+                      /* @__PURE__ */ 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__ */ jsxs(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            gap: 8,
+                            marginTop: 12
+                          },
+                          children: [
+                            /* @__PURE__ */ 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__ */ 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__ */ jsx(Spinner, {}),
+                                  "Delete my account"
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("div", { style: footerStyle(isDesktop), children: /* @__PURE__ */ jsxs(
+                  "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)";
+                    },
+                    children: [
+                      saving && /* @__PURE__ */ jsx(Spinner, {}),
+                      saving ? "Saving..." : "Save changes"
+                    ]
+                  }
+                ) })
+              ]
+            }
+          )
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+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))",
+  flexShrink: 0,
+  ...!isDesktop ? {
+    position: "sticky",
+    top: 0,
+    zIndex: 1,
+    backgroundColor: "var(--dauth-surface, #1a1a2e)"
+  } : {}
+});
+var titleStyle = {
+  fontSize: "var(--dauth-font-size-lg, 1.25rem)",
+  fontWeight: 600,
+  margin: 0,
+  lineHeight: 1.4,
+  textAlign: "center",
+  flex: 1
+};
+var closeBtn = {
+  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
+};
+var bodyStyle = {
+  flex: 1,
+  overflowY: "auto",
+  padding: 24,
+  WebkitOverflowScrolling: "touch"
+};
+var avatarSection = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  marginBottom: 24,
+  gap: 8
+};
+var avatarCircle = {
+  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
+};
+var emailText = {
+  fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+  color: "var(--dauth-text-secondary, #a1a1aa)"
+};
+var statusMsg = (type) => ({
+  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
+});
+var fieldGroup = { marginBottom: 16 };
+var label = {
+  display: "block",
+  fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+  fontWeight: 500,
+  color: "var(--dauth-text-primary, #e4e4e7)",
+  marginBottom: 6
+};
+var input = {
+  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",
+  fontFamily: "inherit"
+};
+var inputFocusHandler = (e) => {
+  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)";
+};
+var inputBlurHandler = (e) => {
+  e.currentTarget.style.borderColor = "var(--dauth-border, rgba(255, 255, 255, 0.08))";
+  e.currentTarget.style.boxShadow = "none";
+};
+var separator = {
+  height: 1,
+  backgroundColor: "var(--dauth-border, rgba(255, 255, 255, 0.08))",
+  margin: "24px 0",
+  border: "none"
+};
+var dangerTitle = {
+  fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+  fontWeight: 600,
+  color: "var(--dauth-error, #ef4444)",
+  marginBottom: 4
+};
+var dangerDesc = {
+  fontSize: "var(--dauth-font-size-xs, 0.75rem)",
+  color: "var(--dauth-text-muted, #71717a)",
+  marginBottom: 12,
+  lineHeight: 1.5
+};
+var deleteBtn = {
+  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"
+};
+var deletePanel = {
+  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))"
+};
+var deletePanelText = {
+  fontSize: "var(--dauth-font-size-sm, 0.875rem)",
+  color: "var(--dauth-text-primary, #e4e4e7)",
+  marginBottom: 12,
+  lineHeight: 1.5
+};
+var cancelBtn = {
+  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"
+};
+var deleteConfirmBtn = {
+  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
+};
+var footerStyle = (isDesktop) => ({
+  padding: "16px 24px",
+  borderTop: "1px solid var(--dauth-border, rgba(255, 255, 255, 0.08))",
+  flexShrink: 0,
+  ...!isDesktop ? {
+    position: "sticky",
+    bottom: 0,
+    zIndex: 1,
+    backgroundColor: "var(--dauth-surface, #1a1a2e)",
+    paddingBottom: "max(16px, env(safe-area-inset-bottom))"
+  } : {}
+});
+var saveBtn = {
+  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"
+};
+var spinnerStyle = {
+  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"
+};
+
 // src/index.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var defaultOnError = (error) => console.error(error);
 var DauthProvider = (props) => {
   const {
@@ -351,22 +1066,19 @@ var DauthProvider = (props) => {
     env,
     dauthUrl
   } = props;
-  const [dauthState, dispatch] = useReducer(
-    userReducer,
-    initialDauthState_default
-  );
-  useEffect(() => {
+  const [dauthState, dispatch] = useReducer(userReducer, initialDauthState_default);
+  useEffect2(() => {
     setDauthUrl(dauthUrl);
   }, [dauthUrl]);
-  const handleError = useCallback(
+  const handleError = useCallback2(
     (error) => (onError ?? defaultOnError)(error),
     [onError]
   );
-  const ctx = useMemo(
+  const ctx = useMemo2(
     () => ({ dispatch, authProxyPath, onError: handleError }),
     [authProxyPath, handleError]
   );
-  useEffect(() => {
+  useEffect2(() => {
     const params = new URLSearchParams(window.location.search);
     const code = params.get(AUTH_CODE_PARAM);
     if (code) {
@@ -375,16 +1087,13 @@ var DauthProvider = (props) => {
       autoLoginAction(ctx);
     }
   }, []);
-  const loginWithRedirect = useCallback(() => {
+  const loginWithRedirect = useCallback2(() => {
     const base = `${getClientBasePath()}/${domainName}/${routes.signin}`;
     const url = env ? `${base}?env=${encodeURIComponent(env)}` : base;
     return window.location.replace(url);
   }, [domainName, env]);
-  const logout = useCallback(
-    () => logoutAction(ctx),
-    [ctx]
-  );
-  const updateUser = useCallback(
+  const logout = useCallback2(() => logoutAction(ctx), [ctx]);
+  const updateUser = useCallback2(
     async (fields) => {
       const {
         name,
@@ -414,33 +1123,21 @@ var DauthProvider = (props) => {
     },
     [ctx]
   );
-  const updateUserWithRedirect = useCallback(
-    () => updateUserWithRedirectAction(ctx),
-    [ctx]
-  );
-  const deleteAccount = useCallback(
+  const deleteAccount = useCallback2(
     () => deleteAccountAction(ctx),
     [ctx]
   );
-  const memoProvider = useMemo(
+  const memoProvider = useMemo2(
     () => ({
       ...dauthState,
       loginWithRedirect,
       logout,
       updateUser,
-      updateUserWithRedirect,
       deleteAccount
     }),
-    [
-      dauthState,
-      loginWithRedirect,
-      logout,
-      updateUser,
-      updateUserWithRedirect,
-      deleteAccount
-    ]
+    [dauthState, loginWithRedirect, logout, updateUser, deleteAccount]
   );
-  return /* @__PURE__ */ jsx(DauthContext.Provider, { value: memoProvider, children });
+  return /* @__PURE__ */ jsx2(DauthContext.Provider, { value: memoProvider, children });
 };
 var DauthContext = createContext(initialDauthState_default);
 var useDauth = () => {
@@ -451,6 +1148,7 @@ var useDauth = () => {
   return context;
 };
 export {
+  DauthProfileModal,
   DauthProvider,
   useDauth
 };