sa2kit 2.0.4 → 3.0.0

package/dist/chunk-RWCD2CAD.mjs

@@ -0,0 +1,1132 @@
+import { useAuthContext } from './chunk-LKBIVQBT.mjs';
+import { useAuthActions } from './chunk-TTYCVBIQ.mjs';
+import { validatePhoneNumber, validateEmail, validatePassword } from './chunk-ZF7DKR5A.mjs';
+import { useAuth } from './chunk-MZOGYD4N.mjs';
+import React7, { useState, useEffect } from 'react';
+import { X, Phone, Lock, EyeOff, Eye, Mail, User, LogOut, LogIn } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { clsx } from 'clsx';
+
+function SignInForm({
+  authClient,
+  initialMode = "email-password",
+  onSuccess,
+  onError,
+  children
+}) {
+  const actions = useAuthActions(authClient);
+  const [mode, setMode] = useState(initialMode);
+  const [step, setStep] = useState("credentials");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fail = (message) => {
+    setError(message);
+    onError?.(message);
+  };
+  const sendOtp = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (mode === "phone-otp") {
+        if (!validatePhoneNumber(phone)) {
+          fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+          return;
+        }
+        const result = await actions.sendPhoneOtp(phone.trim());
+        if (!result.success) {
+          fail(result.error);
+          return;
+        }
+        setStep("otp");
+      } else if (mode === "email-otp") {
+        if (!validateEmail(email)) {
+          fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u90AE\u7BB1");
+          return;
+        }
+        const result = await actions.sendEmailOtp(email.trim(), "sign-in");
+        if (!result.success) {
+          fail(result.error);
+          return;
+        }
+        setStep("otp");
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = async (e) => {
+    e?.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (mode === "email-password") {
+        if (!validateEmail(email)) return fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u90AE\u7BB1");
+        const pwd = validatePassword(password);
+        if (!pwd.valid) return fail(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+        const result = await actions.signInWithEmail(email.trim(), password);
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+        return;
+      }
+      if (mode === "phone-password") {
+        if (!validatePhoneNumber(phone)) return fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+        const pwd = validatePassword(password);
+        if (!pwd.valid) return fail(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+        const result = await actions.signInWithPhonePassword(phone.trim(), password);
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+        return;
+      }
+      if (mode === "phone-otp") {
+        if (step === "credentials") {
+          await sendOtp();
+          return;
+        }
+        if (!/^\d{4,8}$/.test(otp)) return fail("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+        const result = await actions.verifyPhoneOtp(phone.trim(), otp);
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+        return;
+      }
+      if (mode === "email-otp") {
+        if (step === "credentials") {
+          await sendOtp();
+          return;
+        }
+        if (!/^\d{4,8}$/.test(otp)) return fail("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+        const result = await actions.signInWithEmailOtp(email.trim(), otp);
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const state = {
+    mode,
+    step,
+    email,
+    phone,
+    password,
+    otp,
+    loading,
+    error,
+    setMode: (next) => {
+      setMode(next);
+      setStep("credentials");
+      setError(null);
+    },
+    setEmail,
+    setPhone,
+    setPassword,
+    setOtp,
+    sendOtp,
+    handleSubmit
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children(state));
+}
+function RegisterFormHeadless({
+  authClient,
+  initialChannel = "email",
+  onSuccess,
+  onError,
+  children
+}) {
+  const actions = useAuthActions(authClient);
+  const [channel, setChannel] = useState(initialChannel);
+  const [step, setStep] = useState("credentials");
+  const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [name, setName] = useState("");
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fail = (message) => {
+    setError(message);
+    onError?.(message);
+  };
+  const sendOtp = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (!validatePhoneNumber(phone)) {
+        fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+        return;
+      }
+      const result = await actions.sendPhoneOtp(phone.trim());
+      if (!result.success) {
+        fail(result.error);
+        return;
+      }
+      setStep("otp");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = async (e) => {
+    e?.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (channel === "email") {
+        if (!validateEmail(email)) return fail("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u90AE\u7BB1");
+        const pwd = validatePassword(password);
+        if (!pwd.valid) return fail(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+        if (password !== confirmPassword) return fail("\u4E24\u6B21\u5BC6\u7801\u4E0D\u4E00\u81F4");
+        if (!name.trim()) return fail("\u8BF7\u586B\u5199\u6635\u79F0");
+        const result = await actions.signUpWithEmail(email.trim(), password, name.trim());
+        if (!result.success) return fail(result.error);
+        onSuccess?.();
+        return;
+      }
+      if (step === "credentials") {
+        const pwd = validatePassword(password);
+        if (!pwd.valid) return fail(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+        if (password !== confirmPassword) return fail("\u4E24\u6B21\u5BC6\u7801\u4E0D\u4E00\u81F4");
+        await sendOtp();
+        return;
+      }
+      if (!/^\d{4,8}$/.test(otp)) return fail("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+      const verify = await actions.verifyPhoneOtp(phone.trim(), otp);
+      if (!verify.success) return fail(verify.error);
+      onSuccess?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+  const state = {
+    channel,
+    step,
+    email,
+    phone,
+    password,
+    confirmPassword,
+    name,
+    otp,
+    loading,
+    error,
+    setChannel: (next) => {
+      setChannel(next);
+      setStep("credentials");
+      setError(null);
+    },
+    setEmail,
+    setPhone,
+    setPassword,
+    setConfirmPassword,
+    setName,
+    setOtp,
+    sendOtp,
+    handleSubmit
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children(state));
+}
+function VerifyOtpForm({
+  authClient,
+  channel,
+  target,
+  onSuccess,
+  onError,
+  children
+}) {
+  const actions = useAuthActions(authClient);
+  const [otp, setOtp] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const fail = (message) => {
+    setError(message);
+    onError?.(message);
+  };
+  const resendOtp = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      if (channel === "phone") {
+        if (!validatePhoneNumber(target)) return fail("\u624B\u673A\u53F7\u65E0\u6548");
+        const result = await actions.sendPhoneOtp(target.trim());
+        if (!result.success) fail(result.error);
+      } else {
+        if (!validateEmail(target)) return fail("\u90AE\u7BB1\u65E0\u6548");
+        const result = await actions.sendEmailOtp(target.trim(), "sign-in");
+        if (!result.success) fail(result.error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = async (e) => {
+    e?.preventDefault();
+    setLoading(true);
+    setError(null);
+    try {
+      if (!/^\d{4,8}$/.test(otp)) return fail("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+      if (channel === "phone") {
+        const result = await actions.verifyPhoneOtp(target.trim(), otp);
+        if (!result.success) return fail(result.error);
+      } else {
+        const result = await actions.signInWithEmailOtp(target.trim(), otp);
+        if (!result.success) return fail(result.error);
+      }
+      onSuccess?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+  const state = {
+    channel,
+    target,
+    otp,
+    loading,
+    error,
+    setOtp,
+    resendOtp,
+    handleSubmit
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children(state));
+}
+var overlayClass = "fixed top-0 left-0 right-0 bottom-0 w-screen h-screen bg-black/50 backdrop-blur-sm flex items-center justify-center z-[9999] p-4";
+var panelClass = "bg-white rounded-2xl shadow-xl w-full max-w-[420px] max-h-[90vh] overflow-y-auto relative";
+var closeBtnClass = "absolute top-5 right-5 bg-transparent border-none text-gray-500 cursor-pointer p-2 rounded-lg transition-all hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 min-w-9 min-h-9 flex items-center justify-center";
+var inputClass = "w-full py-3 px-4 pl-12 border-2 border-gray-200 rounded-lg text-base transition-all box-border min-h-12 bg-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/10 placeholder:text-gray-400 disabled:bg-gray-50 disabled:text-gray-500 disabled:cursor-not-allowed";
+var submitClass = "w-full bg-blue-500 text-white border-none py-3.5 px-6 rounded-lg text-base font-medium cursor-pointer transition-all mt-2 min-h-[52px] hover:bg-blue-600 hover:-translate-y-0.5 hover:shadow-lg hover:shadow-blue-500/30 active:translate-y-0 disabled:bg-gray-400 disabled:cursor-not-allowed disabled:transform-none disabled:shadow-none focus:outline-none focus:ring-2 focus:ring-blue-700 focus:ring-offset-2";
+var errorClass = "text-red-500 text-sm my-4 p-3 bg-red-50 border border-red-200 rounded-lg leading-relaxed";
+var linkBtnClass = "bg-transparent border-none text-blue-500 cursor-pointer text-sm font-medium underline px-1 py-0.5 rounded transition-all hover:text-blue-600 hover:bg-blue-50 hover:no-underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2";
+function useClientMounted() {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return mounted;
+}
+function AuthModalPortal({ children }) {
+  const mounted = useClientMounted();
+  if (!mounted) return null;
+  return createPortal(children, document.body);
+}
+var authModalStyles = {
+  overlayClass,
+  panelClass,
+  closeBtnClass,
+  inputClass,
+  submitClass,
+  errorClass,
+  linkBtnClass
+};
+function ForgotPasswordModal({ isOpen, onClose, onSuccess }) {
+  const { requestPhonePasswordReset, resetPhonePassword } = useAuthContext();
+  const [phone, setPhone] = useState("");
+  const [otp, setOtp] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [error, setError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [countdown, setCountdown] = useState(0);
+  const startCountdown = () => {
+    setCountdown(60);
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          clearInterval(timer);
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1e3);
+  };
+  const handleSendCode = async () => {
+    setError("");
+    if (!validatePhoneNumber(phone)) {
+      setError("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+      return;
+    }
+    setLoading(true);
+    try {
+      const result = await requestPhonePasswordReset(phone.trim());
+      if (!result.success) {
+        setError(result.error);
+        return;
+      }
+      startCountdown();
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError("");
+    if (!validatePhoneNumber(phone)) return setError("\u8BF7\u8F93\u5165\u6B63\u786E\u7684\u624B\u673A\u53F7");
+    const pwd = validatePassword(newPassword);
+    if (!pwd.valid) return setError(pwd.message ?? "\u5BC6\u7801\u65E0\u6548");
+    if (newPassword !== confirmPassword) return setError("\u4E24\u6B21\u5BC6\u7801\u4E0D\u4E00\u81F4");
+    if (!/^\d{4,8}$/.test(otp)) return setError("\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801");
+    setLoading(true);
+    try {
+      const result = await resetPhonePassword(phone.trim(), otp, newPassword);
+      if (!result.success) {
+        setError(result.error);
+        return;
+      }
+      onSuccess?.();
+    } finally {
+      setLoading(false);
+    }
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React7.createElement(AuthModalPortal, null, /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.overlayClass, style: { margin: 0 }, onClick: (e) => e.target === e.currentTarget && onClose() }, /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.panelClass, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React7.createElement("button", { type: "button", className: authModalStyles.closeBtnClass, onClick: onClose }, /* @__PURE__ */ React7.createElement(X, { size: 20 })), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-6 pb-4 text-center border-b border-gray-100" }, /* @__PURE__ */ React7.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-2" }, "\u91CD\u7F6E\u5BC6\u7801"), /* @__PURE__ */ React7.createElement("p", { className: "text-gray-500 text-sm" }, "\u8BF7\u8F93\u5165\u624B\u673A\u53F7\u548C\u9A8C\u8BC1\u7801\u91CD\u7F6E\u5BC6\u7801")), /* @__PURE__ */ React7.createElement("form", { onSubmit: handleSubmit, className: "p-6" }, /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "reset-phone", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u624B\u673A\u53F7"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Phone, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "reset-phone",
+      type: "tel",
+      value: phone,
+      onChange: (e) => setPhone(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u624B\u673A\u53F7",
+      className: authModalStyles.inputClass,
+      disabled: loading
+    }
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "reset-otp", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u9A8C\u8BC1\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "reset-otp",
+      type: "text",
+      inputMode: "numeric",
+      value: otp,
+      onChange: (e) => setOtp(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801",
+      className: "w-full py-3 px-4 pr-28 border-2 border-gray-200 rounded-lg text-base transition-all box-border min-h-12 bg-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/10",
+      disabled: loading,
+      maxLength: 8
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-2 top-1/2 -translate-y-1/2 bg-transparent border-none text-blue-500 text-sm font-medium cursor-pointer px-2 py-1 rounded transition-all whitespace-nowrap hover:bg-blue-50 disabled:text-gray-400 disabled:cursor-not-allowed",
+      onClick: handleSendCode,
+      disabled: loading || countdown > 0
+    },
+    countdown > 0 ? `${countdown}\u79D2\u540E\u91CD\u8BD5` : "\u53D1\u9001\u9A8C\u8BC1\u7801"
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "reset-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u65B0\u5BC6\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "reset-password",
+      type: showPassword ? "text" : "password",
+      value: newPassword,
+      onChange: (e) => setNewPassword(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u65B0\u5BC6\u7801",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowPassword((v) => !v),
+      disabled: loading
+    },
+    showPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "reset-confirm-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u786E\u8BA4\u5BC6\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "reset-confirm-password",
+      type: showConfirmPassword ? "text" : "password",
+      value: confirmPassword,
+      onChange: (e) => setConfirmPassword(e.target.value),
+      placeholder: "\u8BF7\u518D\u6B21\u8F93\u5165\u65B0\u5BC6\u7801",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowConfirmPassword((v) => !v),
+      disabled: loading
+    },
+    showConfirmPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  ))), error && /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.errorClass }, error), /* @__PURE__ */ React7.createElement("button", { type: "submit", className: authModalStyles.submitClass, disabled: loading }, loading ? "\u63D0\u4EA4\u4E2D..." : "\u91CD\u7F6E\u5BC6\u7801")))));
+}
+
+// src/common/auth/components/styled/LoginModal.tsx
+var MODE_LABELS = {
+  "phone-password": "\u624B\u673A\u5BC6\u7801",
+  "email-password": "\u90AE\u7BB1\u5BC6\u7801",
+  "phone-otp": "\u624B\u673A\u9A8C\u8BC1\u7801",
+  "email-otp": "\u90AE\u7BB1\u9A8C\u8BC1\u7801"
+};
+function LoginModal({
+  isOpen,
+  onClose,
+  onSuccess,
+  onSwitchToRegister,
+  defaultMode = "phone-password"
+}) {
+  const { authClient, refreshSession } = useAuthContext();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showForgotPassword, setShowForgotPassword] = useState(false);
+  const handleSuccess = async () => {
+    await refreshSession();
+    onSuccess?.();
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React7.createElement(AuthModalPortal, null, /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.overlayClass, style: { margin: 0 }, onClick: (e) => e.target === e.currentTarget && onClose() }, /* @__PURE__ */ React7.createElement(SignInForm, { authClient, initialMode: defaultMode, onSuccess: handleSuccess }, (state) => /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.panelClass, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React7.createElement("button", { type: "button", className: authModalStyles.closeBtnClass, onClick: onClose }, /* @__PURE__ */ React7.createElement(X, { size: 20 })), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-6 pb-4 text-center border-b border-gray-100" }, /* @__PURE__ */ React7.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-2" }, "\u7528\u6237\u767B\u5F55"), /* @__PURE__ */ React7.createElement("p", { className: "text-gray-500 text-sm" }, "\u9009\u62E9\u767B\u5F55\u65B9\u5F0F\u5E76\u586B\u5199\u4FE1\u606F")), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-4 flex flex-wrap gap-2" }, Object.keys(MODE_LABELS).map((mode) => /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      key: mode,
+      type: "button",
+      onClick: () => state.setMode(mode),
+      className: `px-3 py-1.5 text-xs rounded-full border transition-all ${state.mode === mode ? "bg-blue-500 text-white border-blue-500" : "bg-white text-gray-600 border-gray-200 hover:border-blue-300"}`
+    },
+    MODE_LABELS[mode]
+  ))), /* @__PURE__ */ React7.createElement("form", { onSubmit: state.handleSubmit, className: "p-6" }, (state.mode === "email-password" || state.mode === "email-otp") && state.step === "credentials" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "login-email", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u90AE\u7BB1"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Mail, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "login-email",
+      type: "email",
+      autoComplete: "email",
+      value: state.email,
+      onChange: (e) => state.setEmail(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u90AE\u7BB1",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), (state.mode === "phone-password" || state.mode === "phone-otp") && state.step === "credentials" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "login-phone", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u624B\u673A\u53F7"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Phone, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "login-phone",
+      type: "tel",
+      autoComplete: "tel",
+      value: state.phone,
+      onChange: (e) => state.setPhone(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u624B\u673A\u53F7",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), (state.mode === "email-password" || state.mode === "phone-password") && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "login-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u5BC6\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "login-password",
+      type: showPassword ? "text" : "password",
+      autoComplete: "current-password",
+      value: state.password,
+      onChange: (e) => state.setPassword(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: state.loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowPassword((v) => !v),
+      disabled: state.loading
+    },
+    showPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  ))), (state.mode === "phone-otp" || state.mode === "email-otp") && state.step === "otp" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "login-otp", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u9A8C\u8BC1\u7801"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(User, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "login-otp",
+      type: "text",
+      inputMode: "numeric",
+      value: state.otp,
+      onChange: (e) => state.setOtp(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801",
+      className: authModalStyles.inputClass,
+      disabled: state.loading,
+      maxLength: 8
+    }
+  ))), (state.mode === "phone-password" || state.mode === "phone-otp") && state.step === "credentials" && /* @__PURE__ */ React7.createElement("div", { className: "text-right -mt-2 mb-4" }, /* @__PURE__ */ React7.createElement("button", { type: "button", onClick: () => setShowForgotPassword(true), className: authModalStyles.linkBtnClass }, "\u5FD8\u8BB0\u5BC6\u7801\uFF1F")), state.error && /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.errorClass }, state.error), /* @__PURE__ */ React7.createElement("button", { type: "submit", className: authModalStyles.submitClass, disabled: state.loading }, state.loading ? "\u5904\u7406\u4E2D..." : state.step === "otp" ? "\u9A8C\u8BC1\u5E76\u767B\u5F55" : state.mode === "phone-otp" || state.mode === "email-otp" ? "\u53D1\u9001\u9A8C\u8BC1\u7801" : "\u767B\u5F55"), onSwitchToRegister && /* @__PURE__ */ React7.createElement("div", { className: "text-center mt-5 pt-4 border-t border-gray-100" }, /* @__PURE__ */ React7.createElement("span", { className: "text-gray-500 text-sm mr-1" }, "\u8FD8\u6CA1\u6709\u8D26\u53F7\uFF1F"), /* @__PURE__ */ React7.createElement("button", { type: "button", onClick: onSwitchToRegister, className: authModalStyles.linkBtnClass }, "\u7ACB\u5373\u6CE8\u518C")))))), /* @__PURE__ */ React7.createElement(
+    ForgotPasswordModal,
+    {
+      isOpen: showForgotPassword,
+      onClose: () => setShowForgotPassword(false),
+      onSuccess: () => {
+        setShowForgotPassword(false);
+        handleSuccess();
+      }
+    }
+  ));
+}
+function RegisterModal({ isOpen, onClose, onSuccess, onSwitchToLogin }) {
+  const { authClient, refreshSession } = useAuthContext();
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const handleSuccess = async () => {
+    await refreshSession();
+    onSuccess?.();
+  };
+  if (!isOpen) return null;
+  return /* @__PURE__ */ React7.createElement(AuthModalPortal, null, /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.overlayClass, style: { margin: 0 }, onClick: (e) => e.target === e.currentTarget && onClose() }, /* @__PURE__ */ React7.createElement(RegisterFormHeadless, { authClient, initialChannel: "phone", onSuccess: handleSuccess }, (state) => /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.panelClass, onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React7.createElement("button", { type: "button", className: authModalStyles.closeBtnClass, onClick: onClose }, /* @__PURE__ */ React7.createElement(X, { size: 20 })), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-6 pb-4 text-center border-b border-gray-100" }, /* @__PURE__ */ React7.createElement("h2", { className: "text-2xl font-semibold text-gray-800 mb-2" }, "\u7528\u6237\u6CE8\u518C"), /* @__PURE__ */ React7.createElement("p", { className: "text-gray-500 text-sm" }, "\u8BF7\u586B\u5199\u4EE5\u4E0B\u4FE1\u606F\u521B\u5EFA\u8D26\u6237")), /* @__PURE__ */ React7.createElement("div", { className: "px-6 pt-4 flex gap-2" }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => state.setChannel("phone"),
+      className: `px-3 py-1.5 text-xs rounded-full border transition-all ${state.channel === "phone" ? "bg-blue-500 text-white border-blue-500" : "bg-white text-gray-600 border-gray-200 hover:border-blue-300"}`
+    },
+    "\u624B\u673A\u53F7\u6CE8\u518C"
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => state.setChannel("email"),
+      className: `px-3 py-1.5 text-xs rounded-full border transition-all ${state.channel === "email" ? "bg-blue-500 text-white border-blue-500" : "bg-white text-gray-600 border-gray-200 hover:border-blue-300"}`
+    },
+    "\u90AE\u7BB1\u6CE8\u518C"
+  )), /* @__PURE__ */ React7.createElement("form", { onSubmit: state.handleSubmit, className: "p-6" }, state.channel === "email" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-email", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u90AE\u7BB1 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Mail, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-email",
+      type: "email",
+      autoComplete: "email",
+      value: state.email,
+      onChange: (e) => state.setEmail(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u90AE\u7BB1",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), state.channel === "phone" && state.step === "credentials" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-phone", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u624B\u673A\u53F7 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Phone, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-phone",
+      type: "tel",
+      autoComplete: "tel",
+      value: state.phone,
+      onChange: (e) => state.setPhone(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u624B\u673A\u53F7",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), state.channel === "email" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-name", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u6635\u79F0 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(User, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-name",
+      type: "text",
+      autoComplete: "name",
+      value: state.name,
+      onChange: (e) => state.setName(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u6635\u79F0",
+      className: authModalStyles.inputClass,
+      disabled: state.loading
+    }
+  ))), state.step === "credentials" && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u5BC6\u7801 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-password",
+      type: showPassword ? "text" : "password",
+      autoComplete: "new-password",
+      value: state.password,
+      onChange: (e) => state.setPassword(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u5BC6\u7801\uFF08\u81F3\u5C116\u4F4D\uFF09",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: state.loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowPassword((v) => !v),
+      disabled: state.loading
+    },
+    showPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  ))), /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-confirm-password", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u786E\u8BA4\u5BC6\u7801 *"), /* @__PURE__ */ React7.createElement("div", { className: "relative flex items-center" }, /* @__PURE__ */ React7.createElement(Lock, { size: 18, className: "absolute left-4 text-gray-400 z-[1] pointer-events-none" }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-confirm-password",
+      type: showConfirmPassword ? "text" : "password",
+      autoComplete: "new-password",
+      value: state.confirmPassword,
+      onChange: (e) => state.setConfirmPassword(e.target.value),
+      placeholder: "\u8BF7\u518D\u6B21\u8F93\u5165\u5BC6\u7801",
+      className: `${authModalStyles.inputClass} pr-12`,
+      disabled: state.loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "absolute right-4 bg-transparent border-none text-gray-400 cursor-pointer p-1 rounded transition-all flex items-center justify-center min-w-6 min-h-6 hover:text-gray-600 hover:bg-gray-100",
+      onClick: () => setShowConfirmPassword((v) => !v),
+      disabled: state.loading
+    },
+    showConfirmPassword ? /* @__PURE__ */ React7.createElement(EyeOff, { size: 18 }) : /* @__PURE__ */ React7.createElement(Eye, { size: 18 })
+  )))), state.channel === "phone" && state.step === "otp" && /* @__PURE__ */ React7.createElement("div", { className: "mb-5" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "register-otp", className: "block mb-1.5 text-sm font-medium text-gray-700" }, "\u9A8C\u8BC1\u7801 *"), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      id: "register-otp",
+      type: "text",
+      inputMode: "numeric",
+      value: state.otp,
+      onChange: (e) => state.setOtp(e.target.value),
+      placeholder: "\u8BF7\u8F93\u5165\u9A8C\u8BC1\u7801",
+      className: "w-full py-3 px-4 border-2 border-gray-200 rounded-lg text-base transition-all box-border min-h-12 bg-white focus:outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-500/10",
+      disabled: state.loading,
+      maxLength: 8
+    }
+  )), state.error && /* @__PURE__ */ React7.createElement("div", { className: authModalStyles.errorClass }, state.error), /* @__PURE__ */ React7.createElement("button", { type: "submit", className: authModalStyles.submitClass, disabled: state.loading }, state.loading ? "\u5904\u7406\u4E2D..." : state.channel === "phone" && state.step === "credentials" ? "\u53D1\u9001\u9A8C\u8BC1\u7801" : state.channel === "phone" && state.step === "otp" ? "\u5B8C\u6210\u6CE8\u518C" : "\u6CE8\u518C"), onSwitchToLogin && /* @__PURE__ */ React7.createElement("div", { className: "text-center mt-5 pt-4 border-t border-gray-100" }, /* @__PURE__ */ React7.createElement("span", { className: "text-gray-500 text-sm mr-1" }, "\u5DF2\u6709\u8D26\u53F7\uFF1F"), /* @__PURE__ */ React7.createElement("button", { type: "button", onClick: onSwitchToLogin, className: authModalStyles.linkBtnClass }, "\u7ACB\u5373\u767B\u5F55")))))));
+}
+function AuthGuard({ children, fallback, requireAuth = true }) {
+  const { isAuthenticated, loading, refreshSession } = useAuthContext();
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  useEffect(() => {
+    if (!loading && requireAuth && !isAuthenticated) {
+      setShowLoginModal(true);
+    }
+  }, [loading, requireAuth, isAuthenticated]);
+  const handleLoginSuccess = async () => {
+    await refreshSession();
+    setShowLoginModal(false);
+  };
+  if (loading) {
+    return /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-center min-h-[200px] text-gray-500 flex-col gap-3" }, /* @__PURE__ */ React7.createElement("div", { className: "w-8 h-8 border-[3px] border-gray-200 border-t-blue-500 rounded-full animate-spin" }), /* @__PURE__ */ React7.createElement("div", null, "\u9A8C\u8BC1\u767B\u5F55\u72B6\u6001..."));
+  }
+  if (requireAuth && !isAuthenticated) {
+    return /* @__PURE__ */ React7.createElement(React7.Fragment, null, fallback ?? /* @__PURE__ */ React7.createElement("div", { className: "flex items-center justify-center min-h-[200px] text-gray-500 flex-col gap-4 p-6 text-center" }, /* @__PURE__ */ React7.createElement("div", { className: "text-5xl opacity-50" }, "\u{1F512}"), /* @__PURE__ */ React7.createElement("div", { className: "text-lg font-medium" }, "\u8BF7\u5148\u767B\u5F55\u4EE5\u8BBF\u95EE\u6B64\u9875\u9762"), /* @__PURE__ */ React7.createElement("div", { className: "text-sm opacity-70" }, "\u767B\u5F55\u540E\u5373\u53EF\u67E5\u770B\u76F8\u5173\u5185\u5BB9")), /* @__PURE__ */ React7.createElement(LoginModal, { isOpen: showLoginModal, onClose: () => setShowLoginModal(false), onSuccess: handleLoginSuccess }));
+  }
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
+}
+function UserMenu({ customMenuItems = [], className }) {
+  const { user, isAuthenticated, signOut, refreshSession } = useAuthContext();
+  const [isOpen, setIsOpen] = useState(false);
+  const [showLoginModal, setShowLoginModal] = useState(false);
+  const [showRegisterModal, setShowRegisterModal] = useState(false);
+  useEffect(() => {
+    const handleGlobalClick = () => setIsOpen(false);
+    if (isOpen) document.addEventListener("click", handleGlobalClick);
+    return () => document.removeEventListener("click", handleGlobalClick);
+  }, [isOpen]);
+  const visibleCustomMenuItems = customMenuItems.filter((item) => {
+    if (item.requireAuth === true) return isAuthenticated;
+    if (item.requireAuth === false) return !isAuthenticated;
+    return true;
+  });
+  const handleAuthSuccess = async () => {
+    await refreshSession();
+    setShowLoginModal(false);
+    setShowRegisterModal(false);
+  };
+  const displayName = user?.name || user?.phoneNumber || user?.email || "\u7528\u6237";
+  return /* @__PURE__ */ React7.createElement("div", { className: `relative inline-block ${className ?? ""}` }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      className: "flex items-center gap-2 px-3 py-2 bg-slate-50 text-slate-500 border border-slate-200 rounded-lg cursor-pointer transition-all min-w-11 min-h-11 text-sm font-medium hover:bg-slate-200 hover:text-slate-800 focus:outline-none focus:ring-2 focus:ring-blue-500/10",
+      onClick: () => setIsOpen((v) => !v)
+    },
+    /* @__PURE__ */ React7.createElement(User, { size: 24 }),
+    isAuthenticated && user && /* @__PURE__ */ React7.createElement("span", { className: "max-w-[120px] overflow-hidden text-ellipsis whitespace-nowrap" }, displayName)
+  ), isOpen && /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      className: "absolute top-[calc(100%+0.5rem)] right-0 z-[1000] min-w-[200px] bg-white border border-slate-200 rounded-xl shadow-lg max-h-[90vh] overflow-y-auto p-2",
+      onClick: (e) => e.stopPropagation()
+    },
+    isAuthenticated && user ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "p-3 mb-2 bg-slate-50 rounded-lg" }, /* @__PURE__ */ React7.createElement("div", { className: "text-sm font-semibold text-slate-800 mb-1 overflow-hidden text-ellipsis whitespace-nowrap" }, user.name || "\u672A\u8BBE\u7F6E\u540D\u79F0"), /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-slate-500 mb-1 overflow-hidden text-ellipsis whitespace-nowrap" }, user.phoneNumber || user.email), user.role && /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-blue-500 font-medium" }, user.role === "admin" ? "\u7BA1\u7406\u5458" : "\u666E\u901A\u7528\u6237")), visibleCustomMenuItems.length > 0 && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "h-px bg-slate-200 my-2" }), visibleCustomMenuItems.map((item) => {
+      const IconComponent = item.icon;
+      return /* @__PURE__ */ React7.createElement(
+        "button",
+        {
+          key: item.id,
+          type: "button",
+          className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-slate-100 hover:text-slate-800",
+          onClick: () => {
+            item.onClick();
+            setIsOpen(false);
+          }
+        },
+        IconComponent && /* @__PURE__ */ React7.createElement(IconComponent, { size: 16 }),
+        /* @__PURE__ */ React7.createElement("span", null, item.label)
+      );
+    })), /* @__PURE__ */ React7.createElement("div", { className: "h-px bg-slate-200 my-2" }), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-red-50 hover:text-red-600",
+        onClick: async () => {
+          await signOut();
+          setIsOpen(false);
+        }
+      },
+      /* @__PURE__ */ React7.createElement(LogOut, { size: 16 }),
+      /* @__PURE__ */ React7.createElement("span", null, "\u9000\u51FA\u767B\u5F55")
+    )) : /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-slate-100 hover:text-slate-800",
+        onClick: () => {
+          setShowLoginModal(true);
+          setIsOpen(false);
+        }
+      },
+      /* @__PURE__ */ React7.createElement(LogIn, { size: 16 }),
+      /* @__PURE__ */ React7.createElement("span", null, "\u767B\u5F55")
+    ), /* @__PURE__ */ React7.createElement(
+      "button",
+      {
+        type: "button",
+        className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-slate-100 hover:text-slate-800",
+        onClick: () => {
+          setShowRegisterModal(true);
+          setIsOpen(false);
+        }
+      },
+      /* @__PURE__ */ React7.createElement(User, { size: 16 }),
+      /* @__PURE__ */ React7.createElement("span", null, "\u6CE8\u518C")
+    ), visibleCustomMenuItems.length > 0 && /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("div", { className: "h-px bg-slate-200 my-2" }), visibleCustomMenuItems.map((item) => {
+      const IconComponent = item.icon;
+      return /* @__PURE__ */ React7.createElement(
+        "button",
+        {
+          key: item.id,
+          type: "button",
+          className: "flex items-center gap-3 w-full p-3 bg-transparent border-none rounded-lg text-gray-700 text-sm font-medium cursor-pointer transition-all text-left min-h-11 hover:bg-slate-100 hover:text-slate-800",
+          onClick: () => {
+            item.onClick();
+            setIsOpen(false);
+          }
+        },
+        IconComponent && /* @__PURE__ */ React7.createElement(IconComponent, { size: 16 }),
+        /* @__PURE__ */ React7.createElement("span", null, item.label)
+      );
+    })))
+  ), /* @__PURE__ */ React7.createElement(
+    LoginModal,
+    {
+      isOpen: showLoginModal,
+      onClose: () => setShowLoginModal(false),
+      onSuccess: handleAuthSuccess,
+      onSwitchToRegister: () => {
+        setShowLoginModal(false);
+        setShowRegisterModal(true);
+      }
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    RegisterModal,
+    {
+      isOpen: showRegisterModal,
+      onClose: () => setShowRegisterModal(false),
+      onSuccess: handleAuthSuccess,
+      onSwitchToLogin: () => {
+        setShowRegisterModal(false);
+        setShowLoginModal(true);
+      }
+    }
+  ));
+}
+function LoginForm({ apiClient, onSuccess, onError, children }) {
+  const { login, loading, error: authError, clearError } = useAuth(apiClient);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const handleSubmit = async (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    clearError();
+    const result = await login(email, password);
+    if (result.success) {
+      onSuccess?.(apiClient.getUser());
+    } else {
+      onError?.(result.error || "\u767B\u5F55\u5931\u8D25");
+    }
+  };
+  const state = {
+    email,
+    password,
+    loading,
+    error: authError,
+    handleEmailChange: setEmail,
+    handlePasswordChange: setPassword,
+    handleSubmit
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children(state));
+}
+function RegisterForm({
+  apiClient,
+  onSuccess,
+  onError,
+  children
+}) {
+  const { register, loading, error: authError, clearError } = useAuth(apiClient);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState("");
+  const handleSubmit = async (e) => {
+    if (e) {
+      e.preventDefault();
+    }
+    clearError();
+    if (!email || !password || !username) {
+      const errorMsg = "\u8BF7\u586B\u5199\u6240\u6709\u5B57\u6BB5";
+      onError?.(errorMsg);
+      return;
+    }
+    if (password.length < 6) {
+      const errorMsg = "\u5BC6\u7801\u957F\u5EA6\u81F3\u5C11\u4E3A 6 \u4F4D";
+      onError?.(errorMsg);
+      return;
+    }
+    const result = await register(email, password, username);
+    if (result.success) {
+      onSuccess?.(apiClient.getUser());
+    } else {
+      onError?.(result.error || "\u6CE8\u518C\u5931\u8D25");
+    }
+  };
+  const state = {
+    email,
+    password,
+    username,
+    loading,
+    error: authError,
+    handleEmailChange: setEmail,
+    handlePasswordChange: setPassword,
+    handleUsernameChange: setUsername,
+    handleSubmit
+  };
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children(state));
+}
+var DefaultContainer = ({ children }) => /* @__PURE__ */ React7.createElement("div", { className: "min-h-screen bg-gradient-to-br from-indigo-100 via-purple-50 to-pink-100 flex items-center justify-center px-4 py-12 relative overflow-hidden" }, /* @__PURE__ */ React7.createElement("div", { className: "absolute inset-0 overflow-hidden pointer-events-none" }, /* @__PURE__ */ React7.createElement(
+  "div",
+  {
+    className: "absolute -top-40 -right-40 w-80 h-80 bg-purple-300 rounded-full mix-blend-multiply filter blur-xl opacity-70",
+    style: {
+      animation: "blob 7s infinite"
+    }
+  }
+), /* @__PURE__ */ React7.createElement(
+  "div",
+  {
+    className: "absolute -bottom-40 -left-40 w-80 h-80 bg-indigo-300 rounded-full mix-blend-multiply filter blur-xl opacity-70",
+    style: {
+      animation: "blob 7s infinite",
+      animationDelay: "2s"
+    }
+  }
+), /* @__PURE__ */ React7.createElement(
+  "div",
+  {
+    className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-300 rounded-full mix-blend-multiply filter blur-xl opacity-70",
+    style: {
+      animation: "blob 7s infinite",
+      animationDelay: "4s"
+    }
+  }
+)), /* @__PURE__ */ React7.createElement("div", { className: "relative z-[10]" }, children), /* @__PURE__ */ React7.createElement("style", { dangerouslySetInnerHTML: { __html: `
+      @keyframes blob {
+        0%, 100% { transform: translate(0, 0) scale(1); }
+        25% { transform: translate(20px, -50px) scale(1.1); }
+        50% { transform: translate(-20px, 20px) scale(0.9); }
+        75% { transform: translate(50px, 50px) scale(1.05); }
+      }
+    ` } }));
+var DefaultCard = ({ children }) => /* @__PURE__ */ React7.createElement("div", { className: "w-full max-w-md bg-white/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-white/20 overflow-hidden" }, children);
+var DefaultInput = (props) => /* @__PURE__ */ React7.createElement(
+  "input",
+  {
+    ...props,
+    className: "w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-200 placeholder-gray-400 text-gray-900 hover:border-gray-300"
+  }
+);
+var DefaultButton = ({ children, disabled, type, ...props }) => /* @__PURE__ */ React7.createElement(
+  "button",
+  {
+    type: type || "button",
+    disabled,
+    ...props,
+    className: clsx("w-full bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-dashed border-blue-300 text-blue-700 hover:from-blue-100 hover:to-indigo-100 hover:border-blue-400 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 transform hover:scale-105 active:scale-95", disabled ? "opacity-60 cursor-not-allowed hover:scale-100 hover:shadow-none" : "block", "}"),
+    style: {
+      backgroundSize: "200% 100%",
+      backgroundPosition: disabled ? "0% 0%" : "0% 0%",
+      display: "block"
+    },
+    onMouseEnter: (e) => {
+      if (!disabled) {
+        e.currentTarget.style.backgroundPosition = "100% 0%";
+      }
+    },
+    onMouseLeave: (e) => {
+      if (!disabled) {
+        e.currentTarget.style.backgroundPosition = "0% 0%";
+      }
+    }
+  },
+  children
+);
+var DefaultAlert = ({ children }) => /* @__PURE__ */ React7.createElement("div", { className: "bg-red-50 border-l-4 border-red-500 text-red-700 px-4 py-3 rounded-lg relative flex items-start space-x-3 shadow-sm" }, /* @__PURE__ */ React7.createElement("svg", { className: "w-5 h-5 text-red-500 mt-0.5 flex-shrink-0", fill: "currentColor", viewBox: "0 0 20 20" }, /* @__PURE__ */ React7.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" })), /* @__PURE__ */ React7.createElement("div", { className: "flex-1 text-sm" }, children));
+var DefaultBadge = ({
+  children,
+  variant,
+  className = ""
+}) => /* @__PURE__ */ React7.createElement(
+  "span",
+  {
+    className: clsx("inline-flex items-center px-3 py-1.5 rounded-full text-xs font-semibold shadow-sm", variant === "dev" ? "bg-gradient-to-r from-orange-400 to-amber-500 text-white border-0" : "bg-gray-100 text-gray-700 border border-gray-200", className)
+  },
+  children
+);
+function AdminLoginPage(props) {
+  const {
+    apiClient,
+    onLoginSuccess,
+    onLoginError,
+    checkPermission,
+    permissionDeniedMessage = "\u8BBF\u95EE\u88AB\u62D2\u7EDD\uFF1A\u9700\u8981\u7BA1\u7406\u5458\u6743\u9650",
+    devConfig,
+    texts = {},
+    analytics,
+    components,
+    classNames = {}
+  } = props;
+  const Container = components?.Container || DefaultContainer;
+  const Card = components?.Card || DefaultCard;
+  const Input = components?.Input || DefaultInput;
+  const Button = components?.Button || DefaultButton;
+  const Alert = components?.Alert || DefaultAlert;
+  components?.Badge || DefaultBadge;
+  const t = {
+    appName: texts.appName || "LyricNote",
+    appDescription: texts.appDescription || "\u667A\u80FD\u6B4C\u8BCD\u7BA1\u7406\u5E73\u53F0",
+    pageTitle: texts.pageTitle || "\u7BA1\u7406\u5458\u767B\u5F55",
+    pageSubtitle: texts.pageSubtitle || "\u8BF7\u4F7F\u7528\u7BA1\u7406\u5458\u8D26\u6237\u767B\u5F55\u7CFB\u7EDF",
+    emailLabel: texts.emailLabel || "\u7BA1\u7406\u5458\u90AE\u7BB1",
+    emailPlaceholder: texts.emailPlaceholder || "admin@example.com",
+    passwordLabel: texts.passwordLabel || "\u5BC6\u7801",
+    passwordPlaceholder: texts.passwordPlaceholder || "\u8BF7\u8F93\u5165\u5BC6\u7801",
+    loginButton: texts.loginButton || "\u767B\u5F55\u7BA1\u7406\u540E\u53F0",
+    loggingInButton: texts.loggingInButton || "\u767B\u5F55\u4E2D...",
+    fillTestAccount: texts.fillTestAccount || "\u586B\u5145\u6D4B\u8BD5\u8D26\u6237",
+    copyCredentials: texts.copyCredentials || "\u590D\u5236",
+    devModeLabel: texts.devModeLabel || "\u5F00\u53D1\u73AF\u5883",
+    testAccountInfo: texts.testAccountInfo || "\u6D4B\u8BD5\u8D26\u6237\u5DF2\u586B\u5145\uFF0C\u53EF\u76F4\u63A5\u767B\u5F55",
+    testAccountFilled: texts.testAccountFilled || "\u5DF2\u81EA\u52A8\u586B\u5145\u6D4B\u8BD5\u8D26\u6237\u4FE1\u606F",
+    footer: texts.footer || "\u4EC5\u9650\u7BA1\u7406\u5458\u8BBF\u95EE \u2022 \u7CFB\u7EDF\u5B89\u5168\u4FDD\u62A4"
+  };
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [autoFilled, setAutoFilled] = useState(false);
+  const [localError, setLocalError] = useState("");
+  const isDevelopment = devConfig?.enabled ?? (typeof window !== "undefined" && (process.env.NODE_ENV === "development" || window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"));
+  const testEmail = devConfig?.testEmail || "admin@example.com";
+  const testPassword = devConfig?.testPassword || "admin123";
+  const autoFillDelay = devConfig?.autoFillDelay || 2e3;
+  const { user, isLoggedIn, loading, error: authError, login, clearError } = useAuth(apiClient);
+  const error = authError || localError;
+  useEffect(() => {
+    if (typeof window !== "undefined" && analytics?.trackPageView) {
+      analytics.trackPageView({
+        pageName: "admin_login_page",
+        pageUrl: window.location.pathname
+      });
+    }
+  }, [analytics]);
+  useEffect(() => {
+    if (isDevelopment && !email && !password) {
+      const timer = setTimeout(() => {
+        if (!email && !password) {
+          setEmail(testEmail);
+          setPassword(testPassword);
+          setAutoFilled(true);
+        }
+      }, autoFillDelay);
+      return () => clearTimeout(timer);
+    }
+    return;
+  }, [isDevelopment, email, password, testEmail, testPassword, autoFillDelay]);
+  useEffect(() => {
+    if (user && isLoggedIn) {
+      if (checkPermission && !checkPermission(user)) {
+        setLocalError(permissionDeniedMessage);
+        analytics?.trackPermissionDenied?.(user);
+        return;
+      }
+      analytics?.trackLoginSuccess?.(user);
+      analytics?.setUser?.({
+        userId: user.id,
+        email: user.email,
+        role: user.role
+      });
+      onLoginSuccess?.(user);
+    }
+  }, [user, isLoggedIn, checkPermission, permissionDeniedMessage, analytics, onLoginSuccess]);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLocalError("");
+    clearError();
+    try {
+      const result = await login(email, password);
+      if (!result.success) {
+        const errorMsg = result.error || "\u767B\u5F55\u5931\u8D25";
+        setLocalError(errorMsg);
+        analytics?.trackLoginFailed?.(errorMsg, email);
+        onLoginError?.(errorMsg);
+      }
+    } catch (err) {
+      const errorMsg = "\u767B\u5F55\u5931\u8D25\uFF1A\u7F51\u7EDC\u9519\u8BEF\u6216\u670D\u52A1\u5668\u9519\u8BEF";
+      setLocalError(errorMsg);
+      analytics?.trackLoginFailed?.(errorMsg, email);
+      onLoginError?.(errorMsg);
+    }
+  };
+  const fillTestAccount = () => {
+    setEmail(testEmail);
+    setPassword(testPassword);
+    setLocalError("");
+    setAutoFilled(true);
+  };
+  return /* @__PURE__ */ React7.createElement(Container, null, /* @__PURE__ */ React7.createElement("div", { className: "w-full max-w-md" }, /* @__PURE__ */ React7.createElement(Card, null, /* @__PURE__ */ React7.createElement("div", { className: "p-8" }, /* @__PURE__ */ React7.createElement("div", { className: "pb-8" }, /* @__PURE__ */ React7.createElement("h2", { className: "text-2xl font-bold text-center text-gray-800" }, t.pageTitle)), /* @__PURE__ */ React7.createElement("form", { onSubmit: handleSubmit, className: "space-y-5" }, error && /* @__PURE__ */ React7.createElement(Alert, null, error), /* @__PURE__ */ React7.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "email", className: "text-sm font-semibold text-gray-700 block" }, t.emailLabel), /* @__PURE__ */ React7.createElement(
+    Input,
+    {
+      id: "email",
+      type: "email",
+      value: email,
+      onChange: (e) => setEmail(e.target.value),
+      placeholder: t.emailPlaceholder,
+      required: true,
+      disabled: loading
+    }
+  )), /* @__PURE__ */ React7.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React7.createElement("label", { htmlFor: "password", className: "text-sm font-semibold text-gray-700 block" }, t.passwordLabel), /* @__PURE__ */ React7.createElement("div", { className: "relative" }, /* @__PURE__ */ React7.createElement(
+    Input,
+    {
+      id: "password",
+      type: showPassword ? "text" : "password",
+      value: password,
+      onChange: (e) => setPassword(e.target.value),
+      placeholder: t.passwordPlaceholder,
+      required: true,
+      disabled: loading
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: () => setShowPassword(!showPassword),
+      className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 transition-colors p-1",
+      disabled: loading,
+      title: showPassword ? "\u9690\u85CF\u5BC6\u7801" : "\u663E\u793A\u5BC6\u7801"
+    },
+    showPassword ? /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { fillRule: "evenodd", d: "M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z", clipRule: "evenodd" }), /* @__PURE__ */ React7.createElement("path", { d: "M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" })) : /* @__PURE__ */ React7.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React7.createElement("path", { d: "M10 12a2 2 0 100-4 2 2 0 000 4z" }), /* @__PURE__ */ React7.createElement("path", { fillRule: "evenodd", d: "M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z", clipRule: "evenodd" }))
+  ))), isDevelopment && /* @__PURE__ */ React7.createElement("div", { className: "pt-2" }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: fillTestAccount,
+      className: "w-full bg-gradient-to-r from-blue-50 to-indigo-50 border-2 border-dashed border-blue-300 text-blue-700 hover:from-blue-100 hover:to-indigo-100 hover:border-blue-400 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 transform hover:scale-105 active:scale-95",
+      disabled: loading
+    },
+    t.fillTestAccount
+  )), /* @__PURE__ */ React7.createElement("div", { className: "pt-3" }, /* @__PURE__ */ React7.createElement(Button, { type: "submit", disabled: loading }, loading ? t.loggingInButton : t.loginButton)))))));
+}
+
+export { AdminLoginPage, AuthGuard, ForgotPasswordModal, LoginForm, LoginModal, RegisterForm, RegisterFormHeadless, RegisterModal, SignInForm, UserMenu, VerifyOtpForm };
+//# sourceMappingURL=chunk-RWCD2CAD.mjs.map
+//# sourceMappingURL=chunk-RWCD2CAD.mjs.map