@getauthui/core 0.1.0

package/dist/authui-user-button-3yi-kvES.js

@@ -0,0 +1,4139 @@
+import { state as d, property as g, customElement as S, query as X } from "lit/decorators.js";
+import { css as A, LitElement as V, nothing as n, html as s, svg as l } from "lit";
+import { Client as Q, Account as J, ID as z, Avatars as tt } from "appwrite";
+const et = {
+  signIn: "Sign in",
+  signUp: "Sign up",
+  signOut: "Sign out",
+  continueAsGuest: "Continue as guest",
+  email: "Email",
+  password: "Password",
+  newPassword: "New password",
+  confirmPassword: "Confirm password",
+  name: "Name",
+  phone: "Phone number",
+  code: "Code",
+  forgotPassword: "Forgot password?",
+  noAccount: "Don't have an account?",
+  haveAccount: "Already have an account?",
+  or: "or",
+  continueWith: "Continue with {provider}",
+  continueWithEmail: "Continue with email",
+  sendEmailCode: "Email me a code",
+  continueWithPhone: "Continue with phone",
+  sendMagicLink: "Send magic link",
+  sendCode: "Send code",
+  verifyCode: "Verify code",
+  magicLinkSent: "We sent a sign-in link to {email}. Open it on this device to continue.",
+  codeSent: "We sent a code to {target}. Enter it below to continue.",
+  securityPhrase: "Security phrase",
+  securityPhraseHint: "The message we sent includes this phrase. Do not continue if it differs.",
+  back: "Back",
+  cancel: "Cancel",
+  save: "Save",
+  update: "Update",
+  remove: "Remove",
+  close: "Close",
+  resetPassword: "Reset password",
+  resetLinkSent: "If an account exists for {email}, a reset link is on its way.",
+  passwordUpdated: "Your password was updated. You can sign in now.",
+  sendResetLink: "Send reset link",
+  agreeTo: "By continuing you agree to our",
+  terms: "Terms of Service",
+  privacy: "Privacy Policy",
+  and: "and",
+  welcomeBack: "Welcome back",
+  createAccount: "Create your account",
+  signInTitle: "Sign in to {name}",
+  signUpTitle: "Sign up for {name}",
+  mfaTitle: "Two-factor authentication",
+  mfaDescription: "Confirm it is you with a second factor.",
+  mfaUseAuthenticator: "Use authenticator app",
+  mfaUseEmail: "Send code to email",
+  mfaUsePhone: "Send code by SMS",
+  mfaUseRecoveryCode: "Use a recovery code",
+  recoveryCode: "Recovery code",
+  account: "Account",
+  profile: "Profile",
+  security: "Security",
+  sessions: "Sessions",
+  connections: "Connections",
+  activity: "Activity",
+  dangerZone: "Danger zone",
+  verified: "Verified",
+  unverified: "Unverified",
+  verifyEmail: "Verify email",
+  verificationSent: "Verification email sent. Check your inbox.",
+  emailVerified: "Your email is verified.",
+  changePassword: "Change password",
+  currentPassword: "Current password",
+  twoFactor: "Two-factor authentication",
+  twoFactorDescription: "Require a second factor when signing in to this account.",
+  enable: "Enable",
+  disable: "Disable",
+  authenticatorApp: "Authenticator app",
+  authenticatorAdd: "Add authenticator",
+  authenticatorScan: "Scan this QR code with your authenticator app, then enter the 6-digit code.",
+  authenticatorManual: "Or enter this key manually",
+  authenticatorVerify: "Verify and enable",
+  recoveryCodes: "Recovery codes",
+  recoveryCodesDescription: "Use a recovery code to sign in if you lose access to your other factors.",
+  generateRecoveryCodes: "Generate recovery codes",
+  regenerateRecoveryCodes: "Regenerate",
+  recoveryCodesWarning: "Store these codes somewhere safe. Each code works once.",
+  currentSession: "This device",
+  signOutSession: "Sign out",
+  signOutAllSessions: "Sign out everywhere",
+  signOutAllSessionsDescription: "End every session, including this one.",
+  noConnections: "No connected accounts.",
+  disconnect: "Disconnect",
+  noActivity: "No recent activity.",
+  deleteAccount: "Delete account",
+  deleteAccountDescription: "Your account is disabled and you are signed out. An administrator can restore it.",
+  deleteAccountConfirm: "Delete my account",
+  loading: "Loading",
+  copied: "Copied",
+  copy: "Copy",
+  done: "Done",
+  errorGeneric: "Something went wrong. Please try again.",
+  errorInvalidCredentials: "Invalid email or password.",
+  errorUserExists: "An account with this email already exists.",
+  errorUserBlocked: "This account is blocked. Contact support.",
+  errorRateLimit: "Too many attempts. Wait a moment and try again.",
+  errorInvalidToken: "This link is invalid or has expired. Request a new one.",
+  errorInvalidCode: "That code is not valid. Check it and try again.",
+  errorPasswordMismatch: "Passwords do not match.",
+  errorPasswordRecentlyUsed: "You used this password recently. Choose a different one.",
+  errorPasswordPersonalData: "Password must not contain your name, email or phone.",
+  errorPasswordWeak: "Password is too common or too short. Use at least 8 characters.",
+  errorPasswordPwned: "This password appeared in a data breach. Choose a different one.",
+  errorChallengeRequired: "Confirm a second factor to continue.",
+  errorSessionExists: "You are already signed in.",
+  errorOAuth: "Sign in with the provider failed. Please try again.",
+  errorNetwork: "Could not reach the server. Check your connection.",
+  errorMethodDisabled: "This sign-in method is disabled for this project.",
+  errorNotConfigured: "Auth UI is not configured. Call AuthUI.init() or add <authui-config>.",
+  passwordHint: "At least 8 characters.",
+  signedInAs: "Signed in as",
+  manageAccount: "Manage account",
+  continue: "Continue",
+  provider: "Provider",
+  lastActive: "Last active",
+  guestAccount: "Guest account",
+  guestAccountDescription: "Add an email and password to keep your data."
+};
+function it(e, t = {}) {
+  return e.replace(
+    /\{(\w+)\}/g,
+    (i, r) => r in t ? String(t[r]) : `{${r}}`
+  );
+}
+const st = {
+  amazon: "Amazon",
+  apple: "Apple",
+  appwrite: "Appwrite",
+  auth0: "Auth0",
+  authentik: "Authentik",
+  autodesk: "Autodesk",
+  bitbucket: "Bitbucket",
+  bitly: "Bitly",
+  box: "Box",
+  cloudflare: "Cloudflare",
+  dailymotion: "Dailymotion",
+  discord: "Discord",
+  disqus: "Disqus",
+  dropbox: "Dropbox",
+  etsy: "Etsy",
+  facebook: "Facebook",
+  figma: "Figma",
+  fusionauth: "FusionAuth",
+  github: "GitHub",
+  gitlab: "GitLab",
+  google: "Google",
+  huggingface: "Hugging Face",
+  kakao: "Kakao",
+  keycloak: "Keycloak",
+  kick: "Kick",
+  linkedin: "LinkedIn",
+  microsoft: "Microsoft",
+  notion: "Notion",
+  oidc: "OpenID Connect",
+  okta: "Okta",
+  paypal: "PayPal",
+  paypalSandbox: "PayPal Sandbox",
+  podio: "Podio",
+  resend: "Resend",
+  salesforce: "Salesforce",
+  slack: "Slack",
+  spotify: "Spotify",
+  stripe: "Stripe",
+  tiktok: "TikTok",
+  tradeshift: "Tradeshift",
+  tradeshiftBox: "Tradeshift Box",
+  twitch: "Twitch",
+  wordpress: "WordPress",
+  x: "X",
+  yahoo: "Yahoo",
+  yammer: "Yammer",
+  yandex: "Yandex",
+  zoho: "Zoho",
+  zoom: "Zoom"
+};
+function E(e) {
+  return st[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
+}
+const b = {
+  moreFactorsRequired: "user_more_factors_required",
+  invalidCredentials: "user_invalid_credentials",
+  userAlreadyExists: "user_already_exists",
+  emailAlreadyExists: "user_email_already_exists",
+  phoneAlreadyExists: "user_phone_already_exists",
+  userBlocked: "user_blocked",
+  rateLimit: "general_rate_limit_exceeded",
+  invalidToken: "user_invalid_token",
+  invalidCode: "user_invalid_code",
+  passwordMismatch: "user_password_mismatch",
+  passwordRecentlyUsed: "password_recently_used",
+  passwordPersonalData: "password_personal_data",
+  passwordWeak: "user_password_weak",
+  passwordPwned: "password_pwned",
+  challengeRequired: "user_challenge_required",
+  recoveryCodesExist: "user_recovery_codes_already_exists",
+  recoveryCodesNotFound: "user_recovery_codes_not_found",
+  authenticatorNotFound: "user_authenticator_not_found",
+  routeNotFound: "general_route_not_found",
+  emailAlreadyVerified: "user_email_already_verified",
+  sessionNotFound: "user_session_not_found",
+  wafChallenged: "waf_request_challenged",
+  sessionAlreadyExists: "user_session_already_exists",
+  oauthUnauthorized: "user_oauth2_unauthorized",
+  oauthBadRequest: "user_oauth2_bad_request",
+  unauthorized: "general_unauthorized_scope",
+  userUnauthorized: "user_unauthorized",
+  authMethodUnsupported: "user_auth_method_unsupported",
+  countMaxExceeded: "user_count_exceeded",
+  targetAlreadyExists: "user_target_already_exists"
+};
+function _(e) {
+  if (e && typeof e == "object") {
+    const t = e;
+    return {
+      message: typeof t.message == "string" ? t.message : "Unknown error",
+      type: typeof t.type == "string" ? t.type : "",
+      code: typeof t.code == "number" ? t.code : 0
+    };
+  }
+  return { message: String(e), type: "", code: 0 };
+}
+function F(e, t) {
+  return _(e).type === t;
+}
+function Z(e, t, i = "link") {
+  const r = _(e);
+  switch (r.type) {
+    case b.invalidCredentials:
+      return t.errorInvalidCredentials;
+    case b.userAlreadyExists:
+    case b.emailAlreadyExists:
+    case b.phoneAlreadyExists:
+      return t.errorUserExists;
+    case b.userBlocked:
+      return t.errorUserBlocked;
+    case b.rateLimit:
+      return t.errorRateLimit;
+    case b.invalidToken:
+      return i === "code" ? t.errorInvalidCode : t.errorInvalidToken;
+    case b.invalidCode:
+      return t.errorInvalidCode;
+    case b.passwordMismatch:
+      return t.errorPasswordMismatch;
+    case b.passwordRecentlyUsed:
+      return t.errorPasswordRecentlyUsed;
+    case b.passwordPersonalData:
+      return t.errorPasswordPersonalData;
+    case b.passwordWeak:
+      return t.errorPasswordWeak;
+    case b.passwordPwned:
+      return t.errorPasswordPwned;
+    case b.challengeRequired:
+      return t.errorChallengeRequired;
+    case b.sessionAlreadyExists:
+      return t.errorSessionExists;
+    case b.oauthUnauthorized:
+    case b.oauthBadRequest:
+      return t.errorOAuth;
+    case b.authMethodUnsupported:
+      return t.errorMethodDisabled;
+  }
+  return r.code === 0 && /fetch|network/i.test(r.message) ? t.errorNetwork : r.message || t.errorGeneric;
+}
+function k(e, t, i) {
+  for (const r of t) {
+    const a = e[r];
+    if (typeof a == "function")
+      return a.apply(e, i);
+  }
+  return Promise.reject(
+    new Error(`Appwrite SDK is missing ${t[0]}(). Update the appwrite package.`)
+  );
+}
+const D = "authui", N = ["userId", "secret", "expire", "project", "error", D], j = () => ({
+  status: "loading",
+  user: null,
+  mfaFactors: null,
+  pending: null,
+  configured: !1
+});
+class rt {
+  constructor() {
+    this.client = null, this.account = null, this.config = null, this.state = j(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null;
+  }
+  // ───────────────────────────── configuration ─────────────────────────────
+  /** Configure the Appwrite client. Safe to call more than once; the last call wins. */
+  configure(t) {
+    this.config = t, this.client = new Q().setEndpoint(t.endpoint).setProject(t.project), this.account = new J(this.client), this.setState({ configured: !0, status: "loading" }), typeof window < "u" && this.handleRedirect().then(() => this.refresh());
+  }
+  get isConfigured() {
+    return this.config !== null;
+  }
+  getConfig() {
+    return this.config;
+  }
+  /** The configured Appwrite client, for apps that want to reuse it. */
+  getClient() {
+    return this.client;
+  }
+  getStrings() {
+    return { ...et, ...this.config?.strings ?? {} };
+  }
+  getState() {
+    return { ...this.state };
+  }
+  get user() {
+    return this.state.user;
+  }
+  // ─────────────────────────────── events ───────────────────────────────
+  on(t, i) {
+    let r = this.listeners.get(t);
+    return r || (r = /* @__PURE__ */ new Set(), this.listeners.set(t, r)), r.add(i), () => r.delete(i);
+  }
+  emit(t, i) {
+    this.listeners.get(t)?.forEach((r) => {
+      try {
+        r(i);
+      } catch (a) {
+        console.error("[authui] listener failed", a);
+      }
+    }), typeof window < "u" && window.dispatchEvent(new CustomEvent(`authui:${t}`, { detail: i }));
+  }
+  setState(t) {
+    this.state = { ...this.state, ...t }, this.emit("change", this.getState());
+  }
+  fail(t) {
+    const i = _(t);
+    throw this.emit("error", i), t;
+  }
+  acct() {
+    if (!this.account) throw new Error(this.getStrings().errorNotConfigured);
+    return this.account;
+  }
+  // ─────────────────────────── session lifecycle ───────────────────────────
+  /** Re-fetch the current user and derive status. */
+  refresh() {
+    return this.refreshPromise ? this.refreshPromise : (this.refreshPromise = (async () => {
+      if (!this.account) {
+        this.setState({ status: "signed-out", user: null, mfaFactors: null });
+        return;
+      }
+      const t = this.state.status === "signed-in";
+      try {
+        const i = await this.account.get();
+        this.setState({ status: "signed-in", user: i, mfaFactors: null }), t || this.emit("signed-in", i);
+      } catch (i) {
+        if (F(i, b.moreFactorsRequired)) {
+          let r = null;
+          try {
+            r = await k(
+              this.account,
+              ["listMFAFactors", "listMfaFactors"],
+              []
+            );
+          } catch {
+          }
+          this.setState({ status: "mfa-required", user: null, mfaFactors: r });
+        } else
+          this.setState({ status: "signed-out", user: null, mfaFactors: null }), t && this.emit("signed-out", void 0);
+      }
+    })().finally(() => {
+      this.refreshPromise = null;
+    }), this.refreshPromise);
+  }
+  async afterSignIn() {
+    await this.refresh();
+    const t = this.config?.successUrl;
+    t && this.state.status === "signed-in" && typeof window < "u" && window.location.assign(t);
+  }
+  // ─────────────────────────────── sign in ───────────────────────────────
+  async signInWithEmailPassword(t, i) {
+    try {
+      await this.acct().createEmailPasswordSession(t.trim(), i);
+    } catch (r) {
+      this.fail(r);
+    }
+    await this.afterSignIn();
+  }
+  async signUp(t, i, r) {
+    try {
+      await this.acct().create(z.unique(), t.trim(), i, r?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
+    } catch (a) {
+      this.fail(a);
+    }
+    await this.afterSignIn();
+  }
+  async signInAnonymously() {
+    try {
+      await this.acct().createAnonymousSession();
+    } catch (t) {
+      this.fail(t);
+    }
+    await this.afterSignIn();
+  }
+  /** Redirects the browser to the provider. Never resolves in a browser. */
+  signInWithOAuth(t) {
+    const i = this.config?.oauthScopes?.[t];
+    try {
+      this.acct().createOAuth2Token(
+        t,
+        this.redirectUrl("oauth"),
+        this.redirectUrl("oauth-failed"),
+        i
+      );
+    } catch (r) {
+      this.fail(r);
+    }
+  }
+  async sendMagicUrl(t) {
+    try {
+      return await this.acct().createMagicURLToken(
+        z.unique(),
+        t.trim(),
+        this.redirectUrl("magic-url"),
+        this.config?.securityPhrase ?? !0
+      );
+    } catch (i) {
+      return this.fail(i);
+    }
+  }
+  async sendEmailOtp(t) {
+    try {
+      return await this.acct().createEmailToken(
+        z.unique(),
+        t.trim(),
+        this.config?.securityPhrase ?? !0
+      );
+    } catch (i) {
+      return this.fail(i);
+    }
+  }
+  async sendPhoneOtp(t) {
+    try {
+      return await this.acct().createPhoneToken(z.unique(), t.replace(/[\s()-]/g, ""));
+    } catch (i) {
+      return this.fail(i);
+    }
+  }
+  /** Redeem any token secret (email OTP, SMS OTP, magic URL, OAuth token). */
+  async signInWithToken(t, i) {
+    try {
+      await this.acct().createSession(t, i.trim());
+    } catch (r) {
+      this.fail(r);
+    }
+    await this.afterSignIn();
+  }
+  // ─────────────────────────────── MFA ───────────────────────────────
+  async createMfaChallenge(t) {
+    try {
+      return await k(
+        this.acct(),
+        ["createMFAChallenge", "createMfaChallenge"],
+        [t]
+      );
+    } catch (i) {
+      return this.fail(i);
+    }
+  }
+  /** Verify a challenge. Completes a pending sign in, or acts as a step-up for protected actions. */
+  async completeMfaChallenge(t, i, r = {}) {
+    try {
+      await k(
+        this.acct(),
+        ["updateMFAChallenge", "updateMfaChallenge"],
+        [t, i.trim()]
+      );
+    } catch (a) {
+      this.fail(a);
+    }
+    (r.signIn ?? !0) && await this.afterSignIn();
+  }
+  async listMfaFactors() {
+    try {
+      return await k(this.acct(), ["listMFAFactors", "listMfaFactors"], []);
+    } catch (t) {
+      return this.fail(t);
+    }
+  }
+  async setMfaEnabled(t) {
+    try {
+      await this.acct().updateMFA(t);
+    } catch (i) {
+      this.fail(i);
+    }
+    await this.refresh();
+  }
+  async addAuthenticator() {
+    try {
+      return await k(
+        this.acct(),
+        ["createMFAAuthenticator", "createMfaAuthenticator"],
+        ["totp"]
+      );
+    } catch (t) {
+      return this.fail(t);
+    }
+  }
+  async verifyAuthenticator(t) {
+    try {
+      await k(
+        this.acct(),
+        ["updateMFAAuthenticator", "updateMfaAuthenticator"],
+        ["totp", t.trim()]
+      );
+    } catch (i) {
+      this.fail(i);
+    }
+    await this.refresh();
+  }
+  /** Requires a recent MFA challenge (server rejects with user_challenge_required otherwise). */
+  async removeAuthenticator() {
+    try {
+      await k(this.acct(), ["deleteMFAAuthenticator", "deleteMfaAuthenticator"], ["totp"]);
+    } catch (t) {
+      this.fail(t);
+    }
+    await this.refresh();
+  }
+  async createRecoveryCodes() {
+    try {
+      return (await k(
+        this.acct(),
+        ["createMFARecoveryCodes", "createMfaRecoveryCodes"],
+        []
+      )).recoveryCodes;
+    } catch (t) {
+      return this.fail(t);
+    }
+  }
+  /** Requires a recent MFA challenge. */
+  async regenerateRecoveryCodes() {
+    try {
+      return (await k(
+        this.acct(),
+        ["updateMFARecoveryCodes", "updateMfaRecoveryCodes"],
+        []
+      )).recoveryCodes;
+    } catch (t) {
+      return this.fail(t);
+    }
+  }
+  /** Requires a recent MFA challenge. */
+  async getRecoveryCodes() {
+    try {
+      return (await k(
+        this.acct(),
+        ["getMFARecoveryCodes", "getMfaRecoveryCodes"],
+        []
+      )).recoveryCodes;
+    } catch (t) {
+      return this.fail(t);
+    }
+  }
+  // ───────────────────────── password recovery ─────────────────────────
+  async sendPasswordRecovery(t) {
+    try {
+      await this.acct().createRecovery(t.trim(), this.redirectUrl("recovery"));
+    } catch (i) {
+      this.fail(i);
+    }
+  }
+  async completePasswordRecovery(t, i, r) {
+    try {
+      await this.acct().updateRecovery(t, i, r);
+    } catch (a) {
+      this.fail(a);
+    }
+    this.setState({ pending: null });
+  }
+  // ───────────────────────────── sign out ─────────────────────────────
+  async signOut(t = "current") {
+    try {
+      await this.acct().deleteSession(t);
+    } catch (i) {
+      this.fail(i);
+    }
+    t === "current" && (this.setState({ status: "signed-out", user: null, mfaFactors: null }), this.emit("signed-out", void 0));
+  }
+  async signOutEverywhere() {
+    try {
+      await this.acct().deleteSessions();
+    } catch (t) {
+      this.fail(t);
+    }
+    this.setState({ status: "signed-out", user: null, mfaFactors: null }), this.emit("signed-out", void 0);
+  }
+  // ────────────────────────── account management ──────────────────────────
+  async listSessions() {
+    try {
+      return (await this.acct().listSessions()).sessions;
+    } catch (t) {
+      return this.fail(t);
+    }
+  }
+  async listIdentities() {
+    try {
+      return (await this.acct().listIdentities()).identities;
+    } catch (t) {
+      return this.fail(t);
+    }
+  }
+  async deleteIdentity(t) {
+    try {
+      await this.acct().deleteIdentity(t);
+    } catch (i) {
+      this.fail(i);
+    }
+  }
+  async listLogs() {
+    try {
+      return (await this.acct().listLogs()).logs;
+    } catch (t) {
+      return this.fail(t);
+    }
+  }
+  async updateName(t) {
+    try {
+      await this.acct().updateName(t.trim());
+    } catch (i) {
+      this.fail(i);
+    }
+    await this.refresh();
+  }
+  async updateEmail(t, i) {
+    try {
+      await this.acct().updateEmail(t.trim(), i);
+    } catch (r) {
+      this.fail(r);
+    }
+    await this.refresh();
+  }
+  async updatePhone(t, i) {
+    try {
+      await this.acct().updatePhone(t.replace(/[\s()-]/g, ""), i);
+    } catch (r) {
+      this.fail(r);
+    }
+    await this.refresh();
+  }
+  async updatePassword(t, i) {
+    try {
+      await this.acct().updatePassword(t, i || void 0);
+    } catch (r) {
+      this.fail(r);
+    }
+    await this.refresh();
+  }
+  /** Turn an anonymous session into a full account. */
+  async convertGuest(t, i, r) {
+    try {
+      await this.acct().updateEmail(t.trim(), i), r?.trim() && await this.acct().updateName(r.trim());
+    } catch (a) {
+      this.fail(a);
+    }
+    await this.refresh();
+  }
+  async sendEmailVerification() {
+    try {
+      await k(
+        this.acct(),
+        ["createEmailVerification", "createVerification"],
+        [this.redirectUrl("verify-email")]
+      );
+    } catch (t) {
+      this.fail(t);
+    }
+  }
+  async sendPhoneVerification() {
+    try {
+      await this.acct().createPhoneVerification();
+    } catch (t) {
+      this.fail(t);
+    }
+  }
+  async confirmPhoneVerification(t) {
+    const i = this.state.user?.$id;
+    if (i) {
+      try {
+        await this.acct().updatePhoneVerification(i, t.trim());
+      } catch (r) {
+        this.fail(r);
+      }
+      await this.refresh();
+    }
+  }
+  /** Blocks the account and ends the session. Appwrite keeps the record so an admin can restore it. */
+  async deleteAccount() {
+    try {
+      await this.acct().updateStatus();
+    } catch (t) {
+      this.fail(t);
+    }
+    this.setState({ status: "signed-out", user: null, mfaFactors: null }), this.emit("signed-out", void 0);
+  }
+  // ───────────────────────────── redirects ─────────────────────────────
+  /** Build the URL Appwrite should send the user back to for a given flow. */
+  redirectUrl(t) {
+    const i = this.config?.redirectUrl ?? (typeof window < "u" ? window.location.origin + window.location.pathname : ""), r = new URL(i, typeof window < "u" ? window.location.href : void 0);
+    for (const a of N) r.searchParams.delete(a);
+    return r.searchParams.set(D, t), r.toString();
+  }
+  setPending(t) {
+    this.setState({ pending: t });
+  }
+  /**
+   * Finish a flow that arrived through the URL. Called automatically by `configure()`.
+   * Returns true when a redirect was handled.
+   */
+  async handleRedirect() {
+    if (typeof window > "u") return !1;
+    const t = new URLSearchParams(window.location.search), i = t.get(D);
+    if (!i) return !1;
+    const r = t.get("userId") ?? "", a = t.get("secret") ?? "";
+    this.cleanUrl();
+    try {
+      switch (i) {
+        case "oauth":
+        case "magic-url":
+          r && a && await this.acct().createSession(r, a);
+          break;
+        case "oauth-failed":
+          this.setState({ pending: { type: "oauth-failed" } });
+          break;
+        case "recovery":
+          r && a && this.setState({ pending: { type: "reset-password", userId: r, secret: a } });
+          break;
+        case "verify-email":
+          r && a && (await k(
+            this.acct(),
+            ["updateEmailVerification", "updateVerification"],
+            [r, a]
+          ), this.setState({
+            pending: {
+              type: "notice",
+              message: this.getStrings().emailVerified,
+              tone: "success"
+            }
+          }));
+          break;
+      }
+    } catch (u) {
+      const h = _(u);
+      this.emit("error", h), this.setState({ pending: { type: "notice", message: h.message, tone: "error" } });
+    }
+    return !0;
+  }
+  cleanUrl() {
+    const t = new URL(window.location.href);
+    for (const i of N) t.searchParams.delete(i);
+    window.history.replaceState(window.history.state, "", t.toString());
+  }
+  /** Test helper. */
+  reset() {
+    this.client = null, this.account = null, this.config = null, this.state = j(), this.listeners.clear();
+  }
+}
+const o = new rt();
+class at {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Set(), this.observer = null, this.media = null, this.notify = () => {
+      const t = this.isDark("auto");
+      this.listeners.forEach((i) => i(t));
+    };
+  }
+  isDark(t = "auto") {
+    if (t === "dark") return !0;
+    if (t === "light" || typeof document > "u") return !1;
+    const i = document.documentElement.classList;
+    return i.contains("dark") ? !0 : i.contains("light") ? !1 : document.documentElement.dataset.theme === "dark" ? !0 : document.documentElement.dataset.theme === "light" ? !1 : typeof window < "u" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+  }
+  subscribe(t) {
+    return this.listeners.add(t), this.start(), () => {
+      this.listeners.delete(t), this.listeners.size === 0 && this.stop();
+    };
+  }
+  start() {
+    this.observer || typeof document > "u" || (this.observer = new MutationObserver(this.notify), this.observer.observe(document.documentElement, {
+      attributes: !0,
+      attributeFilter: ["class", "data-theme"]
+    }), typeof window < "u" && window.matchMedia && (this.media = window.matchMedia("(prefers-color-scheme: dark)"), this.media.addEventListener?.("change", this.notify)));
+  }
+  stop() {
+    this.observer?.disconnect(), this.observer = null, this.media?.removeEventListener?.("change", this.notify), this.media = null;
+  }
+}
+const W = new at(), G = {
+  none: "0px",
+  sm: "0.25rem",
+  md: "0.625rem",
+  lg: "0.875rem",
+  xl: "1.125rem",
+  full: "1.5rem"
+}, ot = A`
+  :host {
+    /* Light theme (matches :root in the console) */
+    --authui-background: oklch(1 0 0);
+    --authui-foreground: oklch(0.141 0.005 285.823);
+    --authui-card: oklch(1 0 0);
+    --authui-card-foreground: oklch(0.141 0.005 285.823);
+    --authui-popover: oklch(1 0 0);
+    --authui-popover-foreground: oklch(0.141 0.005 285.823);
+    --authui-primary: oklch(0.21 0.006 285.885);
+    --authui-primary-foreground: oklch(0.985 0 0);
+    --authui-secondary: oklch(0.967 0.001 286.375);
+    --authui-secondary-foreground: oklch(0.21 0.006 285.885);
+    --authui-muted: oklch(0.967 0.001 286.375);
+    --authui-muted-foreground: oklch(0.552 0.016 285.938);
+    --authui-accent: oklch(0.967 0.001 286.375);
+    --authui-accent-foreground: oklch(0.21 0.006 285.885);
+    --authui-destructive: oklch(0.577 0.245 27.325);
+    --authui-destructive-foreground: oklch(0.577 0.245 27.325);
+    --authui-border: oklch(0.93 0.0035 286.32);
+    --authui-input: oklch(0.93 0.0035 286.32);
+    --authui-ring: oklch(0.898 0.004 286.286);
+    --authui-brand: #fd366e;
+    --authui-brand-foreground: #ffffff;
+    --authui-success: oklch(0.696 0.17 162.48);
+    --authui-success-foreground: #047857;
+    --authui-success-bg: rgba(16, 185, 129, 0.1);
+    --authui-warning-foreground: #b45309;
+    --authui-warning-bg: rgba(245, 158, 11, 0.1);
+    --authui-error-foreground: #dc2626;
+    --authui-error-bg: rgba(239, 68, 68, 0.1);
+    --authui-info-foreground: #475569;
+    --authui-info-bg: rgba(100, 116, 139, 0.1);
+    --authui-overlay: rgba(0, 0, 0, 0.5);
+
+    --authui-radius: 0.625rem;
+    --authui-radius-sm: calc(var(--authui-radius) - 4px);
+    --authui-radius-md: calc(var(--authui-radius) - 2px);
+    --authui-radius-lg: var(--authui-radius);
+    --authui-radius-xl: calc(var(--authui-radius) + 4px);
+
+    --authui-font:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans",
+      "Droid Sans", "Helvetica Neue", sans-serif;
+    --authui-font-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+
+    --authui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+    --authui-z: 110;
+  }
+
+  :host([data-theme="dark"]) {
+    --authui-background: #19191c;
+    --authui-foreground: oklch(0.985 0 0);
+    --authui-card: #1d1d21;
+    --authui-card-foreground: oklch(0.985 0 0);
+    --authui-popover: #1d1d21;
+    --authui-popover-foreground: oklch(0.985 0 0);
+    --authui-primary: oklch(0.985 0 0);
+    --authui-primary-foreground: oklch(0.21 0.006 285.885);
+    --authui-secondary: #2d2d31;
+    --authui-secondary-foreground: oklch(0.985 0 0);
+    --authui-muted: #2d2d31;
+    --authui-muted-foreground: oklch(0.705 0.015 286.067);
+    --authui-accent: #2d2d31;
+    --authui-accent-foreground: oklch(0.985 0 0);
+    --authui-destructive: oklch(0.396 0.141 25.723);
+    --authui-destructive-foreground: oklch(0.637 0.237 25.331);
+    --authui-border: oklch(0.252 0.005 286.32);
+    --authui-input: #2d2d31;
+    --authui-ring: oklch(0.448 0.015 285.786);
+    --authui-success-foreground: #34d399;
+    --authui-warning-foreground: #fbbf24;
+    --authui-error-foreground: #f87171;
+    --authui-info-foreground: #94a3b8;
+    --authui-overlay: rgba(0, 0, 0, 0.6);
+    --authui-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.5);
+    color-scheme: dark;
+  }
+`, nt = A`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    font-family: var(--authui-font);
+    color: var(--authui-foreground);
+    font-size: 14px;
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-align: start;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* ── Typography ── */
+  .title {
+    font-size: 18px;
+    line-height: 1.2;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+    margin: 0;
+    color: var(--authui-foreground);
+  }
+  .description {
+    font-size: 13px;
+    color: var(--authui-muted-foreground);
+    margin: 6px 0 0;
+  }
+  .eyebrow {
+    font-size: 12px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--authui-muted-foreground);
+  }
+  .muted {
+    color: var(--authui-muted-foreground);
+  }
+  .small {
+    font-size: 13px;
+  }
+  .mono {
+    font-family: var(--authui-font-mono);
+  }
+
+  /* ── Button ── */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    white-space: nowrap;
+    border-radius: var(--authui-radius-md);
+    font-size: 14px;
+    font-weight: 500;
+    font-family: inherit;
+    height: 36px;
+    padding: 0 16px;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition:
+      background-color 150ms,
+      color 150ms,
+      border-color 150ms,
+      box-shadow 150ms,
+      opacity 150ms;
+    outline: none;
+    flex-shrink: 0;
+    text-decoration: none;
+    position: relative;
+  }
+  .btn:focus-visible {
+    border-color: var(--authui-ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--authui-ring) 50%, transparent);
+  }
+  .btn:disabled,
+  .btn[aria-disabled="true"] {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+  .btn svg {
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    pointer-events: none;
+  }
+  .btn-primary {
+    background: var(--authui-primary);
+    color: var(--authui-primary-foreground);
+  }
+  .btn-primary:hover {
+    background: color-mix(in oklab, var(--authui-primary) 90%, transparent);
+  }
+  .btn-brand {
+    background: var(--authui-brand);
+    color: var(--authui-brand-foreground);
+  }
+  .btn-brand:hover {
+    opacity: 0.9;
+  }
+  .btn-outline {
+    border-color: var(--authui-border);
+    background: transparent;
+    color: var(--authui-foreground);
+  }
+  .btn-outline:hover {
+    background: var(--authui-accent);
+    color: var(--authui-accent-foreground);
+  }
+  .btn-secondary {
+    background: var(--authui-secondary);
+    color: var(--authui-secondary-foreground);
+  }
+  .btn-secondary:hover {
+    background: color-mix(in oklab, var(--authui-secondary) 80%, transparent);
+  }
+  .btn-ghost {
+    background: transparent;
+    color: var(--authui-muted-foreground);
+  }
+  .btn-ghost:hover {
+    background: var(--authui-accent);
+    color: var(--authui-foreground);
+  }
+  .btn-destructive {
+    background: var(--authui-destructive);
+    color: #fff;
+  }
+  .btn-destructive:hover {
+    background: color-mix(in oklab, var(--authui-destructive) 90%, transparent);
+  }
+  .btn-link {
+    height: auto;
+    padding: 0;
+    border: 0;
+    background: none;
+    font-weight: 500;
+    color: color-mix(in oklab, var(--authui-foreground) 85%, transparent);
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-decoration-color: color-mix(in oklab, var(--authui-muted-foreground) 38%, transparent);
+    text-underline-offset: 3px;
+    text-decoration-thickness: 1px;
+    border-radius: 2px;
+  }
+  .btn-link:hover {
+    color: var(--authui-foreground);
+    text-decoration-color: color-mix(in oklab, var(--authui-muted-foreground) 58%, transparent);
+  }
+  .btn-sm {
+    height: 32px;
+    padding: 0 12px;
+    font-size: 13px;
+  }
+  .btn-lg {
+    height: 40px;
+    padding: 0 24px;
+  }
+  .btn-icon {
+    width: 36px;
+    height: 36px;
+    padding: 0;
+  }
+  .btn-block {
+    width: 100%;
+  }
+
+  /* ── Form ── */
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+  .label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 14px;
+    line-height: 1;
+    font-weight: 500;
+    user-select: none;
+  }
+  .input {
+    font: inherit;
+    font-size: 14px;
+    height: 36px;
+    width: 100%;
+    min-width: 0;
+    border-radius: var(--authui-radius-md);
+    border: 1px solid var(--authui-input);
+    background: transparent;
+    color: var(--authui-foreground);
+    padding: 4px 12px;
+    outline: none;
+    transition:
+      border-color 150ms,
+      box-shadow 150ms;
+  }
+  :host([data-theme="dark"]) .input {
+    background: color-mix(in oklab, var(--authui-input) 30%, transparent);
+  }
+  .input::placeholder {
+    color: var(--authui-muted-foreground);
+  }
+  .input:focus-visible {
+    border-color: var(--authui-ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--authui-ring) 50%, transparent);
+  }
+  .input[aria-invalid="true"] {
+    border-color: var(--authui-destructive);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--authui-destructive) 20%, transparent);
+  }
+  .input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .input-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .input-wrap .input {
+    padding-inline-end: 40px;
+  }
+  .input-wrap .btn-icon {
+    position: absolute;
+    inset-inline-end: 2px;
+    width: 32px;
+    height: 32px;
+    color: var(--authui-muted-foreground);
+  }
+  .input-otp {
+    letter-spacing: 0.4em;
+    text-align: center;
+    font-family: var(--authui-font-mono);
+    font-size: 18px;
+    height: 44px;
+  }
+  .hint {
+    font-size: 12px;
+    color: var(--authui-muted-foreground);
+    margin: 0;
+  }
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  /* ── Alert ── */
+  .alert {
+    position: relative;
+    width: 100%;
+    border-radius: var(--authui-radius-lg);
+    border: 1px solid var(--authui-border);
+    padding: 12px 16px;
+    font-size: 13px;
+    display: grid;
+    grid-template-columns: 16px 1fr;
+    column-gap: 12px;
+    row-gap: 2px;
+    align-items: start;
+    background: var(--authui-card);
+    color: var(--authui-card-foreground);
+  }
+  .alert svg {
+    width: 16px;
+    height: 16px;
+    margin-top: 2px;
+  }
+  .alert-title {
+    grid-column: 2;
+    font-weight: 500;
+    letter-spacing: -0.01em;
+  }
+  .alert-body {
+    grid-column: 2;
+    color: var(--authui-muted-foreground);
+    line-height: 1.55;
+  }
+  .alert-error {
+    color: var(--authui-error-foreground);
+    border-color: color-mix(in oklab, var(--authui-error-foreground) 30%, transparent);
+    background: var(--authui-error-bg);
+  }
+  .alert-error .alert-body {
+    color: color-mix(in oklab, var(--authui-error-foreground) 90%, transparent);
+  }
+  .alert-success {
+    color: var(--authui-success-foreground);
+    border-color: color-mix(in oklab, var(--authui-success-foreground) 30%, transparent);
+    background: var(--authui-success-bg);
+  }
+  .alert-success .alert-body {
+    color: color-mix(in oklab, var(--authui-success-foreground) 90%, transparent);
+  }
+  .alert-info {
+    background: var(--authui-info-bg);
+  }
+  .alert-warning {
+    color: var(--authui-warning-foreground);
+    border-color: color-mix(in oklab, var(--authui-warning-foreground) 30%, transparent);
+    background: var(--authui-warning-bg);
+  }
+
+  /* ── Badge ── */
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    border-radius: var(--authui-radius-md);
+    padding: 2px 8px;
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    width: fit-content;
+  }
+  .badge svg {
+    width: 12px;
+    height: 12px;
+  }
+  .badge-success {
+    background: var(--authui-success-bg);
+    color: var(--authui-success-foreground);
+  }
+  .badge-error {
+    background: var(--authui-error-bg);
+    color: var(--authui-error-foreground);
+  }
+  .badge-warning {
+    background: var(--authui-warning-bg);
+    color: var(--authui-warning-foreground);
+  }
+  .badge-info {
+    background: var(--authui-info-bg);
+    color: var(--authui-info-foreground);
+  }
+  .badge-outline {
+    background: color-mix(in oklab, var(--authui-muted) 60%, transparent);
+    color: color-mix(in oklab, var(--authui-foreground) 80%, transparent);
+  }
+
+  /* ── Separator ── */
+  .separator {
+    height: 1px;
+    width: 100%;
+    background: var(--authui-border);
+    flex-shrink: 0;
+  }
+  .separator-text {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 12px;
+    color: var(--authui-muted-foreground);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+  .separator-text::before,
+  .separator-text::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--authui-border);
+  }
+
+  /* ── Tabs ── */
+  .tabs {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    width: fit-content;
+    max-width: 100%;
+    overflow-x: auto;
+    border-radius: var(--authui-radius-lg);
+    background: color-mix(in oklab, var(--authui-muted) 50%, transparent);
+    color: var(--authui-muted-foreground);
+    padding: 3px;
+    gap: 2px;
+    scrollbar-width: none;
+  }
+  :host([data-theme="dark"]) .tabs {
+    background: color-mix(in oklab, var(--authui-muted) 80%, transparent);
+  }
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    height: 100%;
+    flex: 1;
+    padding: 4px 10px;
+    border-radius: var(--authui-radius-md);
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--authui-muted-foreground);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+      color 150ms,
+      background-color 150ms,
+      box-shadow 150ms;
+  }
+  .tab:hover {
+    color: var(--authui-foreground);
+  }
+  .tab[aria-selected="true"] {
+    background: var(--authui-background);
+    color: var(--authui-foreground);
+    border-color: var(--authui-input);
+  }
+  .tab:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 3px color-mix(in oklab, var(--authui-ring) 50%, transparent);
+  }
+
+  /* ── Settings card (console "Settings Card Structure") ── */
+  .card {
+    border-radius: var(--authui-radius-xl);
+    border: 1px solid var(--authui-border);
+    background: color-mix(in oklab, var(--authui-card) 50%, transparent);
+    overflow: hidden;
+  }
+  .card-header {
+    padding: 16px 24px;
+  }
+  .card-title {
+    font-size: 15px;
+    font-weight: 600;
+    margin: 0;
+    color: var(--authui-foreground);
+  }
+  .card-description {
+    font-size: 13px;
+    color: var(--authui-muted-foreground);
+    margin: 8px 0 0;
+  }
+  .card-body {
+    padding: 16px 24px;
+    border-top: 1px solid var(--authui-border);
+  }
+  .card-footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--authui-border);
+    background: color-mix(in oklab, var(--authui-muted) 30%, transparent);
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+  .card-danger {
+    border-color: color-mix(in oklab, var(--authui-destructive) 40%, transparent);
+  }
+
+  /* ── Lists / rows ── */
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 12px 0;
+  }
+  .row + .row {
+    border-top: 1px solid var(--authui-border);
+  }
+  .row-main {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
+  }
+  .row-title {
+    font-size: 14px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .row-sub {
+    font-size: 12px;
+    color: var(--authui-muted-foreground);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .row-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+  }
+
+  /* ── Misc ── */
+  .stack {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+  .stack-sm {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .inline {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+  .between {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+  }
+  .center {
+    text-align: center;
+  }
+  .spinner {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid color-mix(in oklab, currentColor 30%, transparent);
+    border-top-color: currentColor;
+    animation: authui-spin 0.7s linear infinite;
+    flex-shrink: 0;
+  }
+  @keyframes authui-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .avatar {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background: var(--authui-muted);
+    color: var(--authui-muted-foreground);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    font-size: 14px;
+    flex-shrink: 0;
+    overflow: hidden;
+    text-transform: uppercase;
+  }
+  .avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .logo {
+    display: block;
+    max-height: 40px;
+    max-width: 160px;
+    margin: 0 auto 16px;
+  }
+  .code {
+    font-family: var(--authui-font-mono);
+    font-size: 13px;
+    border-radius: var(--authui-radius-md);
+    border: 1px solid var(--authui-border);
+    background: color-mix(in oklab, var(--authui-muted) 50%, transparent);
+    padding: 2px 6px;
+    color: color-mix(in oklab, var(--authui-foreground) 85%, transparent);
+    word-break: break-all;
+    user-select: all;
+  }
+  .codes {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+  .qr {
+    display: block;
+    width: 168px;
+    height: 168px;
+    margin: 0 auto;
+    border-radius: var(--authui-radius-md);
+    border: 1px solid var(--authui-border);
+    background: #fff;
+    padding: 8px;
+  }
+  .legal {
+    font-size: 12px;
+    color: var(--authui-muted-foreground);
+    text-align: center;
+    margin: 0;
+    line-height: 1.6;
+  }
+  .legal a {
+    color: inherit;
+    text-decoration: underline;
+    text-decoration-style: dotted;
+    text-underline-offset: 3px;
+  }
+  .legal a:hover {
+    color: var(--authui-foreground);
+  }
+  .links {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    font-size: 13px;
+    color: var(--authui-muted-foreground);
+    flex-wrap: wrap;
+  }
+  .providers {
+    display: grid;
+    gap: 8px;
+  }
+  .providers.two {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .providers .btn svg {
+    width: 18px;
+    height: 18px;
+  }
+  .empty {
+    padding: 24px 0;
+    text-align: center;
+    font-size: 13px;
+    color: var(--authui-muted-foreground);
+  }
+  .choice {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    width: 100%;
+    padding: 12px 14px;
+    border-radius: var(--authui-radius-lg);
+    border: 1px solid var(--authui-border);
+    background: transparent;
+    color: var(--authui-foreground);
+    font: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition:
+      background-color 150ms,
+      border-color 150ms;
+  }
+  .choice:hover {
+    background: var(--authui-accent);
+  }
+  .choice:focus-visible {
+    outline: none;
+    border-color: var(--authui-ring);
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--authui-ring) 50%, transparent);
+  }
+  .choice svg {
+    width: 18px;
+    height: 18px;
+    color: var(--authui-muted-foreground);
+    flex-shrink: 0;
+  }
+  .choice-title {
+    font-weight: 500;
+    font-size: 14px;
+  }
+  .choice-sub {
+    font-size: 12px;
+    color: var(--authui-muted-foreground);
+  }
+  .switch {
+    position: relative;
+    width: 36px;
+    height: 20px;
+    border-radius: 999px;
+    border: 1px solid transparent;
+    background: var(--authui-input);
+    cursor: pointer;
+    transition: background-color 150ms;
+    flex-shrink: 0;
+    padding: 0;
+  }
+  .switch[aria-checked="true"] {
+    background: var(--authui-primary);
+  }
+  .switch::after {
+    content: "";
+    position: absolute;
+    top: 2px;
+    inset-inline-start: 2px;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--authui-background);
+    transition: transform 150ms;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  }
+  .switch[aria-checked="true"]::after {
+    transform: translateX(16px);
+  }
+  .switch:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--authui-ring) 50%, transparent);
+  }
+  .switch:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      transition: none !important;
+      animation-duration: 0.01ms !important;
+    }
+  }
+`;
+var ct = Object.defineProperty, lt = (e, t, i, r) => {
+  for (var a = void 0, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (a = h(t, i, a) || a);
+  return a && ct(t, i, a), a;
+};
+const H = class H extends V {
+  constructor() {
+    super(...arguments), this.auth = o.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.auth = o.getState(), this.unsubscribeStore = o.on("change", (t) => {
+      this.auth = t, this.applyBranding();
+    }), this.unsubscribeTheme = W.subscribe(() => this.applyBranding()), this.applyBranding();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.unsubscribeStore?.(), this.unsubscribeTheme?.(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
+  }
+  get strings() {
+    return o.getStrings();
+  }
+  /** Translate a string key with optional `{placeholders}`. */
+  t(t, i) {
+    return it(this.strings[t], i);
+  }
+  get config() {
+    return o.getConfig();
+  }
+  get productName() {
+    return this.config?.branding?.name ?? "";
+  }
+  /** Push theme and branding from config onto the host element. */
+  applyBranding() {
+    const t = this.config?.branding, i = W.isDark(t?.theme ?? "auto");
+    this.setAttribute("data-theme", i ? "dark" : "light"), t?.primary && (this.style.setProperty("--authui-primary", t.primary), this.style.setProperty(
+      "--authui-primary-foreground",
+      t.primaryForeground ?? "#ffffff"
+    )), t?.radius && G[t.radius] && this.style.setProperty("--authui-radius", G[t.radius]);
+  }
+  /** Emit a composed custom event from this element. */
+  fire(t, i) {
+    this.dispatchEvent(new CustomEvent(t, { detail: i, bubbles: !0, composed: !0 }));
+  }
+};
+H.styles = [ot, nt];
+let x = H;
+lt([
+  d()
+], x.prototype, "auth");
+var dt = Object.defineProperty, ut = Object.getOwnPropertyDescriptor, w = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? ut(t, i) : t, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (a = (r ? h(t, i, a) : h(a)) || a);
+  return r && a && dt(t, i, a), a;
+};
+let v = class extends V {
+  constructor() {
+    super(...arguments), this.endpoint = "", this.project = "", this.redirectUrl = "", this.successUrl = "", this.methods = "email-password", this.signUp = "true", this.requireName = "true", this.mfa = "true", this.securityPhrase = "true", this.name = "", this.logo = "", this.theme = "auto", this.radius = "", this.primary = "", this.primaryForeground = "", this.termsUrl = "", this.privacyUrl = "";
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.configure();
+  }
+  updated() {
+    this.configure();
+  }
+  configure() {
+    if (!this.endpoint || !this.project) return;
+    const e = this.toConfig(), t = o.getConfig();
+    t && JSON.stringify(t) === JSON.stringify(e) || o.configure(e);
+  }
+  toConfig() {
+    const e = { oauth: [] };
+    for (const t of this.methods.split(/[\s,]+/).filter(Boolean))
+      t.startsWith("oauth:") ? e.oauth.push(t.slice(6)) : t === "email-password" ? e.emailPassword = !0 : t === "magic-url" ? e.magicUrl = !0 : t === "email-otp" ? e.emailOtp = !0 : t === "phone" ? e.phone = !0 : (t === "anonymous" || t === "guest") && (e.anonymous = !0);
+    return e.emailPassword === void 0 && !this.methods.trim() && (e.emailPassword = !0), {
+      endpoint: this.endpoint,
+      project: this.project,
+      redirectUrl: this.redirectUrl || void 0,
+      successUrl: this.successUrl || void 0,
+      methods: e,
+      signUp: this.signUp !== "false",
+      requireName: this.requireName !== "false",
+      mfa: this.mfa !== "false",
+      securityPhrase: this.securityPhrase !== "false",
+      branding: {
+        name: this.name || void 0,
+        logo: this.logo || void 0,
+        theme: this.theme || "auto",
+        radius: this.radius || void 0,
+        primary: this.primary || void 0,
+        primaryForeground: this.primaryForeground || void 0
+      },
+      legal: {
+        termsUrl: this.termsUrl || void 0,
+        privacyUrl: this.privacyUrl || void 0
+      }
+    };
+  }
+};
+v.styles = A`
+    :host {
+      display: none;
+    }
+  `;
+w([
+  g({ type: String })
+], v.prototype, "endpoint", 2);
+w([
+  g({ type: String })
+], v.prototype, "project", 2);
+w([
+  g({ type: String, attribute: "redirect-url" })
+], v.prototype, "redirectUrl", 2);
+w([
+  g({ type: String, attribute: "success-url" })
+], v.prototype, "successUrl", 2);
+w([
+  g({ type: String })
+], v.prototype, "methods", 2);
+w([
+  g({ type: String, attribute: "sign-up" })
+], v.prototype, "signUp", 2);
+w([
+  g({ type: String, attribute: "require-name" })
+], v.prototype, "requireName", 2);
+w([
+  g({ type: String })
+], v.prototype, "mfa", 2);
+w([
+  g({ type: String, attribute: "security-phrase" })
+], v.prototype, "securityPhrase", 2);
+w([
+  g({ type: String })
+], v.prototype, "name", 2);
+w([
+  g({ type: String })
+], v.prototype, "logo", 2);
+w([
+  g({ type: String })
+], v.prototype, "theme", 2);
+w([
+  g({ type: String })
+], v.prototype, "radius", 2);
+w([
+  g({ type: String })
+], v.prototype, "primary", 2);
+w([
+  g({ type: String, attribute: "primary-foreground" })
+], v.prototype, "primaryForeground", 2);
+w([
+  g({ type: String, attribute: "terms-url" })
+], v.prototype, "termsUrl", 2);
+w([
+  g({ type: String, attribute: "privacy-url" })
+], v.prototype, "privacyUrl", 2);
+v = w([
+  S("authui-config")
+], v);
+var ht = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, B = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? pt(t, i) : t, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (a = (r ? h(t, i, a) : h(a)) || a);
+  return r && a && ht(t, i, a), a;
+};
+if (typeof document < "u" && !document.getElementById("authui-fouc")) {
+  const e = document.createElement("style");
+  e.id = "authui-fouc", e.textContent = "authui-signed-in:not([ready]),authui-signed-out:not([ready]){display:none}", document.head.appendChild(e);
+}
+class T extends V {
+  constructor() {
+    super(...arguments), this.show = !1, this.unsubscribe = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.evaluate(o.getState().status), this.unsubscribe = o.on("change", (t) => this.evaluate(t.status));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.unsubscribe?.();
+  }
+  evaluate(t) {
+    t !== "loading" && (this.show = this.shouldShow(t), this.setAttribute("ready", ""), this.style.display = "contents");
+  }
+  render() {
+    return this.show ? s`<slot></slot>` : n;
+  }
+}
+B([
+  d()
+], T.prototype, "show", 2);
+let Y = class extends T {
+  shouldShow(e) {
+    return e === "signed-in";
+  }
+};
+Y = B([
+  S("authui-signed-in")
+], Y);
+let K = class extends T {
+  shouldShow(e) {
+    return e !== "signed-in";
+  }
+};
+K = B([
+  S("authui-signed-out")
+], K);
+const ft = A`
+  :host {
+    display: block;
+    width: 100%;
+    max-width: 420px;
+  }
+  .panel {
+    background: var(--authui-card);
+    color: var(--authui-card-foreground);
+    border: 1px solid var(--authui-border);
+    border-radius: var(--authui-radius-xl);
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    box-shadow: var(--authui-shadow-lg);
+  }
+  .panel.embedded {
+    border: 0;
+    box-shadow: none;
+    padding: 0;
+    background: transparent;
+  }
+  .header {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .header:empty {
+    display: none;
+  }
+  .alert .dismiss {
+    position: absolute;
+    top: 4px;
+    inset-inline-end: 4px;
+    width: 28px;
+    height: 28px;
+  }
+  .alert .dismiss svg {
+    width: 14px;
+    height: 14px;
+    margin: 0;
+  }
+`, f = (e) => s`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${e}
+  </svg>`, c = {
+  mail: f(
+    l`<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>`
+  ),
+  phone: f(
+    l`<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>`
+  ),
+  user: f(
+    l`<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>`
+  ),
+  userX: f(
+    l`<path d="M2 21a8 8 0 0 1 11.873-7"/><circle cx="10" cy="8" r="5"/><path d="m17 17 5 5"/><path d="m22 17-5 5"/>`
+  ),
+  lock: f(
+    l`<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>`
+  ),
+  key: f(
+    l`<path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4"/><path d="m21 2-9.6 9.6"/><circle cx="7.5" cy="15.5" r="5.5"/>`
+  ),
+  shield: f(
+    l`<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/>`
+  ),
+  shieldCheck: f(
+    l`<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>`
+  ),
+  smartphone: f(
+    l`<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>`
+  ),
+  monitor: f(
+    l`<rect width="20" height="14" x="2" y="3" rx="2"/><line x1="8" x2="16" y1="21" y2="21"/><line x1="12" x2="12" y1="17" y2="21"/>`
+  ),
+  globe: f(
+    l`<circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/>`
+  ),
+  logOut: f(
+    l`<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>`
+  ),
+  settings: f(
+    l`<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>`
+  ),
+  x: f(l`<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`),
+  check: f(l`<path d="M20 6 9 17l-5-5"/>`),
+  copy: f(
+    l`<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>`
+  ),
+  eye: f(
+    l`<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>`
+  ),
+  eyeOff: f(
+    l`<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>`
+  ),
+  arrowLeft: f(l`<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>`),
+  alert: f(
+    l`<circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/>`
+  ),
+  info: f(l`<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>`),
+  checkCircle: f(l`<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`),
+  link: f(
+    l`<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>`
+  ),
+  activity: f(
+    l`<path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"/>`
+  ),
+  trash: f(
+    l`<path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>`
+  ),
+  sparkles: f(
+    l`<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/>`
+  ),
+  refresh: f(
+    l`<path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/>`
+  ),
+  chevronDown: f(l`<path d="m6 9 6 6 6-6"/>`),
+  ghost: f(
+    l`<path d="M9 10h.01"/><path d="M15 10h.01"/><path d="M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z"/>`
+  ),
+  qr: f(
+    l`<rect width="5" height="5" x="3" y="3" rx="1"/><rect width="5" height="5" x="16" y="3" rx="1"/><rect width="5" height="5" x="3" y="16" rx="1"/><path d="M21 16h-3a2 2 0 0 0-2 2v3"/><path d="M21 21v.01"/><path d="M12 7v3a2 2 0 0 1-2 2H7"/><path d="M3 12h.01"/><path d="M12 3h.01"/><path d="M12 16v.01"/><path d="M16 12h1"/><path d="M21 12v.01"/><path d="M12 21v-1"/>`
+  )
+}, y = (e, t = "0 0 24 24") => s`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, mt = {
+  google: y(
+    l`<path fill="#4285F4" d="M23.49 12.27c0-.79-.07-1.54-.19-2.27H12v4.51h6.47a5.57 5.57 0 0 1-2.4 3.58v3h3.86c2.26-2.09 3.56-5.17 3.56-8.82z"/><path fill="#34A853" d="M12 24c3.24 0 5.95-1.08 7.93-2.91l-3.86-3c-1.08.72-2.45 1.16-4.07 1.16-3.13 0-5.78-2.11-6.73-4.96H1.29v3.09A11.99 11.99 0 0 0 12 24z"/><path fill="#FBBC05" d="M5.27 14.29A7.2 7.2 0 0 1 4.89 12c0-.8.14-1.57.38-2.29V6.62H1.29A11.97 11.97 0 0 0 0 12c0 1.94.46 3.77 1.29 5.38l3.98-3.09z"/><path fill="#EA4335" d="M12 4.75c1.77 0 3.35.61 4.6 1.8l3.42-3.42C17.95 1.19 15.24 0 12 0 7.31 0 3.26 2.69 1.29 6.62l3.98 3.09C6.22 6.86 8.87 4.75 12 4.75z"/>`
+  ),
+  github: y(
+    l`<path fill="currentColor" d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>`
+  ),
+  apple: y(
+    l`<path fill="currentColor" d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>`
+  ),
+  facebook: y(
+    l`<path fill="#1877F2" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>`
+  ),
+  x: y(
+    l`<path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>`
+  ),
+  microsoft: y(
+    l`<path fill="#F25022" d="M1 1h10v10H1z"/><path fill="#7FBA00" d="M13 1h10v10H13z"/><path fill="#00A4EF" d="M1 13h10v10H1z"/><path fill="#FFB900" d="M13 13h10v10H13z"/>`
+  ),
+  discord: y(
+    l`<path fill="#5865F2" d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>`
+  ),
+  gitlab: y(
+    l`<path fill="#FC6D26" d="m23.6 9.593-.033-.086L20.3.98a.851.851 0 0 0-.336-.405.876.876 0 0 0-1.001.054.874.874 0 0 0-.29.44l-2.205 6.748H7.535L5.33 1.069a.857.857 0 0 0-.29-.441.876.876 0 0 0-1.001-.054.86.86 0 0 0-.336.405L.436 9.502l-.032.086a6.066 6.066 0 0 0 2.012 7.01l.011.009.03.021 4.976 3.727 2.462 1.863 1.5 1.132a1.009 1.009 0 0 0 1.22 0l1.5-1.132 2.461-1.863 5.006-3.75.013-.01a6.068 6.068 0 0 0 2.006-7.002z"/>`
+  ),
+  linkedin: y(
+    l`<path fill="#0A66C2" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 0 1-2.063-2.065 2.064 2.064 0 1 1 2.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>`
+  ),
+  slack: y(
+    l`<path fill="#E01E5A" d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313z"/><path fill="#36C5F0" d="M8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312z"/><path fill="#2EB67D" d="M18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zm-1.27 0a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.163 0a2.528 2.528 0 0 1 2.523 2.522v6.312z"/><path fill="#ECB22E" d="M15.163 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.163 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zm0-1.27a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.315A2.527 2.527 0 0 1 24 15.163a2.528 2.528 0 0 1-2.522 2.523h-6.315z"/>`
+  ),
+  twitch: y(
+    l`<path fill="#9146FF" d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0 1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/>`
+  ),
+  spotify: y(
+    l`<path fill="#1DB954" d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.66 0 12 0zm5.521 17.34c-.24.359-.66.48-1.021.24-2.82-1.74-6.36-2.101-10.561-1.141-.418.122-.779-.179-.899-.539-.12-.421.18-.78.54-.9 4.56-1.021 8.52-.6 11.64 1.32.42.18.479.659.301 1.02zm1.44-3.3c-.301.42-.841.6-1.262.3-3.239-1.98-8.159-2.58-11.939-1.38-.479.12-1.02-.12-1.14-.6-.12-.48.12-1.021.6-1.141C9.6 9.9 15 10.561 18.72 12.84c.361.181.54.78.241 1.2zm.12-3.36C15.24 8.4 8.82 8.16 5.16 9.301c-.6.179-1.2-.181-1.38-.721-.18-.601.18-1.2.72-1.381 4.26-1.26 11.28-1.02 15.721 1.621.539.3.719 1.02.419 1.56-.299.421-1.02.599-1.559.3z"/>`
+  ),
+  notion: y(
+    l`<path fill="currentColor" d="M4.459 4.208c.746.606 1.026.56 2.428.466l13.215-.793c.28 0 .047-.28-.046-.326L17.86 1.968c-.42-.326-.981-.7-2.055-.607L3.01 2.295c-.466.046-.56.28-.374.466zm.793 3.08v13.904c0 .747.373 1.027 1.214.98l14.523-.84c.841-.046.935-.56.935-1.167V6.354c0-.606-.233-.933-.748-.887l-15.177.887c-.56.047-.747.327-.747.933zm14.337.745c.093.42 0 .84-.42.888l-.7.14v10.264c-.608.327-1.168.514-1.635.514-.748 0-.935-.234-1.495-.933l-4.577-7.186v6.952L12.21 19s0 .84-1.168.84l-3.222.186c-.093-.186 0-.653.327-.746l.84-.233V9.854L7.822 9.76c-.094-.42.14-1.026.793-1.073l3.456-.233 4.764 7.279v-6.44l-1.215-.139c-.093-.514.28-.887.747-.933zM1.936 1.035l13.31-.98c1.634-.14 2.055-.047 3.082.7l4.249 2.986c.7.513.934.653.934 1.213v16.378c0 1.026-.373 1.634-1.68 1.726l-15.458.934c-.98.047-1.448-.093-1.962-.747l-3.129-4.06c-.56-.747-.793-1.306-.793-1.96V2.667c0-.839.374-1.54 1.447-1.632z"/>`
+  ),
+  dropbox: y(
+    l`<path fill="#0061FF" d="M6 1.807 0 5.629l6 3.822 6.001-3.822L6 1.807zm12 0-6 3.822 6 3.822 6-3.822-6-3.822zM0 13.274l6 3.822 6.001-3.822L6 9.452l-6 3.822zm18-3.822-6 3.822 6 3.822 6-3.822-6-3.822zM6 18.371l6.001 3.822 6-3.822-6-3.822L6 18.371z"/>`
+  ),
+  figma: y(
+    l`<path fill="#F24E1E" d="M8 24a4 4 0 0 0 4-4v-4H8a4 4 0 0 0 0 8z"/><path fill="#A259FF" d="M4 12a4 4 0 0 1 4-4h4v8H8a4 4 0 0 1-4-4z"/><path fill="#FF7262" d="M4 4a4 4 0 0 1 4-4h4v8H8a4 4 0 0 1-4-4z"/><path fill="#1ABCFE" d="M12 0h4a4 4 0 0 1 0 8h-4V0z"/><path fill="#0ACF83" d="M20 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0z"/>`
+  ),
+  bitbucket: y(
+    l`<path fill="#2684FF" d="M.778 1.213a.768.768 0 0 0-.768.892l3.263 19.81c.084.5.515.868 1.022.873H19.95a.772.772 0 0 0 .77-.646l3.27-20.03a.768.768 0 0 0-.768-.891zM14.52 15.53H9.522L8.17 8.466h7.561z"/>`
+  ),
+  amazon: y(
+    l`<path fill="currentColor" d="M.045 18.02c.072-.116.187-.124.348-.022 3.636 2.11 7.594 3.166 11.87 3.166 2.852 0 5.668-.533 8.447-1.595l.315-.14c.138-.06.234-.1.293-.13.226-.088.39-.046.525.13.12.174.09.336-.12.48-.256.19-.6.41-1.006.654-1.244.743-2.64 1.316-4.185 1.726a17.617 17.617 0 0 1-10.951-.577 17.88 17.88 0 0 1-5.43-3.35c-.1-.074-.151-.15-.151-.22 0-.047.021-.09.051-.13zm6.565-6.218c0-1.005.247-1.863.743-2.577.495-.71 1.17-1.25 2.04-1.615.796-.335 1.756-.575 2.912-.72.39-.046 1.033-.103 1.92-.174v-.37c0-.93-.105-1.558-.3-1.875-.302-.43-.78-.65-1.44-.65h-.182c-.48.046-.896.196-1.246.46-.35.27-.575.63-.675 1.096-.06.3-.206.465-.435.51l-2.52-.315c-.248-.06-.372-.18-.372-.39 0-.046.007-.09.022-.15.247-1.29.855-2.25 1.82-2.88.976-.616 2.1-.975 3.39-1.05h.54c1.65 0 2.957.434 3.888 1.29.135.15.27.3.405.48.12.165.224.314.283.45.075.134.15.33.195.57.06.254.105.42.135.51.03.104.062.3.076.615.01.313.02.493.02.553v5.28c0 .376.06.72.165 1.036.105.313.21.54.315.674l.51.674c.09.136.136.256.136.36 0 .12-.06.226-.18.314-1.2 1.05-1.86 1.62-1.963 1.71-.165.135-.373.15-.61.045a6.62 6.62 0 0 1-.526-.496l-.31-.347a9.858 9.858 0 0 1-.317-.42l-.3-.435c-.81.886-1.603 1.44-2.4 1.665-.494.15-1.093.227-1.83.227-1.11 0-2.04-.343-2.76-1.034-.72-.69-1.08-1.665-1.08-2.94l-.05-.076zm3.753-.438c0 .566.14 1.02.425 1.364.285.34.675.512 1.155.512.045 0 .106-.007.195-.02.09-.016.134-.023.166-.023.614-.16 1.08-.553 1.424-1.178.165-.28.285-.58.36-.91.09-.32.12-.59.135-.8.015-.195.015-.54.015-1.005v-.54c-.84 0-1.484.06-1.92.18-1.275.36-1.92 1.17-1.92 2.43l-.035-.01zm9.162 7.027c.03-.06.075-.11.132-.17.362-.243.714-.41 1.05-.5a8.094 8.094 0 0 1 1.612-.24c.14-.012.28 0 .41.03.65.06 1.05.168 1.172.33.063.09.099.228.099.39v.15c0 .51-.149 1.11-.424 1.8-.278.69-.664 1.248-1.156 1.68-.073.06-.14.09-.197.09-.03 0-.06 0-.09-.012-.09-.044-.107-.12-.064-.24.54-1.26.806-2.143.806-2.64 0-.15-.03-.27-.087-.344-.145-.166-.55-.257-1.224-.257-.243 0-.533.016-.87.045-.363.045-.7.09-1 .135-.09 0-.148-.014-.18-.044-.03-.03-.036-.06-.02-.106 0-.014.007-.03.02-.06z"/>`
+  ),
+  paypal: y(
+    l`<path fill="#003087" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/>`
+  )
+};
+function L(e) {
+  return mt[e] ?? c.globe;
+}
+var gt = Object.defineProperty, bt = Object.getOwnPropertyDescriptor, C = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? bt(t, i) : t, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (a = (r ? h(t, i, a) : h(a)) || a);
+  return r && a && gt(t, i, a), a;
+};
+let $ = class extends x {
+  constructor() {
+    super(...arguments), this.view = "sign-in", this.embedded = !1, this.step = "sign-in", this.busy = !1, this.error = "", this.notice = null, this.showPassword = !1, this.token = null, this.challenge = null, this.recovery = null, this.email = "", this.password = "", this.passwordConfirm = "", this.name = "", this.phone = "", this.code = "", this.onSignIn = (e) => {
+      e.preventDefault(), this.run(async () => {
+        await o.signInWithEmailPassword(this.email, this.password), this.password = "", this.fire("authui-success", { method: "email-password" });
+      });
+    }, this.onSignUp = (e) => {
+      e.preventDefault(), this.run(async () => {
+        await o.signUp(this.email, this.password, this.name), this.password = "", this.fire("authui-success", { method: "sign-up" });
+      });
+    }, this.onGuest = () => {
+      this.run(async () => {
+        await o.signInAnonymously(), this.fire("authui-success", { method: "anonymous" });
+      });
+    }, this.onOAuth = (e) => {
+      this.run(async () => {
+        o.signInWithOAuth(e), await new Promise((t) => setTimeout(t, 4e3));
+      });
+    }, this.onForgot = (e) => {
+      e.preventDefault(), this.run(async () => {
+        await o.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
+      });
+    }, this.onReset = (e) => {
+      if (e.preventDefault(), this.password !== this.passwordConfirm) {
+        this.error = this.t("errorPasswordMismatch");
+        return;
+      }
+      const t = this.recovery;
+      t && this.run(async () => {
+        await o.completePasswordRecovery(t.userId, t.secret, this.password), this.password = "", this.passwordConfirm = "", this.recovery = null, this.notice = { tone: "success", message: this.t("passwordUpdated") }, this.go("sign-in");
+      });
+    }, this.onMagicUrl = (e) => {
+      e.preventDefault(), this.run(async () => {
+        const t = await o.sendMagicUrl(this.email);
+        this.token = {
+          userId: t.userId,
+          kind: "magic-url",
+          target: this.email,
+          phrase: t.phrase
+        };
+      });
+    }, this.onEmailOtp = (e) => {
+      e.preventDefault(), this.run(async () => {
+        const t = await o.sendEmailOtp(this.email);
+        this.token = {
+          userId: t.userId,
+          kind: "email-otp",
+          target: this.email,
+          phrase: t.phrase
+        }, this.code = "";
+      });
+    }, this.onPhoneOtp = (e) => {
+      e.preventDefault(), this.run(async () => {
+        const t = await o.sendPhoneOtp(this.phone);
+        this.token = { userId: t.userId, kind: "phone", target: this.phone }, this.code = "";
+      });
+    }, this.onVerifyCode = (e) => {
+      e.preventDefault();
+      const t = this.token;
+      t && this.run(async () => {
+        await o.signInWithToken(t.userId, this.code), this.code = "", this.fire("authui-success", { method: t.kind });
+      }, "code");
+    }, this.onChooseFactor = (e) => {
+      this.run(async () => {
+        const t = await o.createMfaChallenge(e);
+        this.challenge = { id: t.$id, factor: e }, this.code = "";
+      });
+    }, this.onVerifyFactor = (e) => {
+      e.preventDefault();
+      const t = this.challenge;
+      t && this.run(async () => {
+        await o.completeMfaChallenge(t.id, this.code), this.code = "", this.challenge = null, this.fire("authui-success", { method: "mfa" });
+      }, "code");
+    }, this.onCancelMfa = () => {
+      this.run(async () => {
+        try {
+          await o.signOut();
+        } catch (e) {
+          if (!F(e, b.sessionNotFound)) throw e;
+        }
+        this.go("sign-in");
+      });
+    }, this.onSignOut = () => {
+      this.run(() => o.signOut());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.step = this.view, this.syncFromStore();
+  }
+  willUpdate(e) {
+    e.has("view") && e.get("view") !== void 0 && this.go(this.view), e.has("auth") && this.syncFromStore();
+  }
+  updated(e) {
+    e.has("step") && requestAnimationFrame(() => this.firstInput?.focus());
+  }
+  /** React to store transitions: MFA pending, redirect results, sign in. */
+  syncFromStore() {
+    const { status: e, pending: t } = this.auth;
+    e === "mfa-required" && this.step !== "mfa" && this.go("mfa"), t?.type === "reset-password" && this.step !== "reset-password" && (this.recovery = { userId: t.userId, secret: t.secret }, this.go("reset-password")), t?.type === "oauth-failed" && (this.notice = { tone: "error", message: this.t("errorOAuth") }, o.setPending(null)), t?.type === "notice" && (this.notice = {
+      tone: t.tone === "error" ? "error" : t.tone,
+      message: t.message
+    }, o.setPending(null));
+  }
+  /** Navigate between screens and reset transient state. */
+  go(e) {
+    this.step = e, this.error = "", this.busy = !1, this.showPassword = !1, e !== "mfa" && (this.challenge = null), e !== "email-otp" && e !== "phone" && e !== "magic-url" && (this.token = null), this.fire("authui-view", { view: e });
+  }
+  // ───────────────────────────── actions ─────────────────────────────
+  async run(e, t = "link") {
+    if (!this.busy) {
+      this.busy = !0, this.error = "";
+      try {
+        await e();
+      } catch (i) {
+        this.error = Z(i, this.strings, t);
+      } finally {
+        this.busy = !1;
+      }
+    }
+  }
+  bind(e) {
+    return (t) => {
+      this[e] = t.target.value;
+    };
+  }
+  // ───────────────────────────── render ─────────────────────────────
+  render() {
+    const e = this.renderStep();
+    return s`
+      <div class="panel ${this.embedded ? "embedded" : ""}" part="panel">
+        ${this.renderHeader()}
+        ${this.notice ? s`<div class="alert alert-${this.notice.tone}" role="status">
+                ${this.notice.tone === "success" ? c.checkCircle : this.notice.tone === "error" ? c.alert : c.info}
+                <div class="alert-body">${this.notice.message}</div>
+                <button
+                  class="btn btn-ghost btn-icon dismiss"
+                  @click=${() => this.notice = null}
+                  aria-label=${this.t("close")}
+                >
+                  ${c.x}
+                </button>
+              </div>` : n}
+        ${e}
+      </div>
+    `;
+  }
+  renderHeader() {
+    const e = this.config?.branding?.logo, t = this.productName;
+    let i = "", r = "";
+    switch (this.step) {
+      case "sign-in":
+        i = this.auth.status === "signed-in" ? this.t("signedInAs") : t ? this.t("signInTitle", { name: t }) : this.t("welcomeBack");
+        break;
+      case "sign-up":
+        i = t ? this.t("signUpTitle", { name: t }) : this.t("createAccount");
+        break;
+      case "forgot-password":
+      case "reset-password":
+        i = this.t("resetPassword");
+        break;
+      case "magic-url":
+      case "email-otp":
+        i = this.t("continueWithEmail");
+        break;
+      case "phone":
+        i = this.t("continueWithPhone");
+        break;
+      case "mfa":
+        i = this.t("mfaTitle"), r = this.t("mfaDescription");
+        break;
+    }
+    return s`
+      <header class="header">
+        ${e ? s`<img class="logo" src=${e} alt=${t || "Logo"} />` : n}
+        <h2 class="title" id="authui-title">${i}</h2>
+        ${r ? s`<p class="description">${r}</p>` : n}
+      </header>
+    `;
+  }
+  renderError() {
+    return this.error ? s`<div class="alert alert-error" role="alert">
+          ${c.alert}
+          <div class="alert-body">${this.error}</div>
+        </div>` : n;
+  }
+  submitButton(e, t = "btn-primary") {
+    return s`<button class="btn ${t} btn-block" type="submit" ?disabled=${this.busy}>
+      ${this.busy ? s`<span class="spinner" aria-hidden="true"></span>` : n} ${e}
+    </button>`;
+  }
+  passwordField(e) {
+    return s`
+      <div class="field">
+        <label class="label" for=${e.id}>
+          ${e.label}
+          ${e.forgot ? s`<button
+                  type="button"
+                  class="btn btn-link small"
+                  @click=${() => this.go("forgot-password")}
+                >
+                  ${this.t("forgotPassword")}
+                </button>` : n}
+        </label>
+        <div class="input-wrap">
+          <input
+            class="input"
+            id=${e.id}
+            type=${this.showPassword ? "text" : "password"}
+            autocomplete=${e.autocomplete}
+            required
+            minlength="8"
+            .value=${this[e.field]}
+            @input=${this.bind(e.field)}
+          />
+          <button
+            type="button"
+            class="btn btn-ghost btn-icon"
+            @click=${() => this.showPassword = !this.showPassword}
+            aria-label=${this.showPassword ? "Hide password" : "Show password"}
+            tabindex="-1"
+          >
+            ${this.showPassword ? c.eyeOff : c.eye}
+          </button>
+        </div>
+        ${e.hint ? s`<p class="hint">${e.hint}</p>` : n}
+      </div>
+    `;
+  }
+  emailField(e = "email") {
+    return s`
+      <div class="field">
+        <label class="label" for="authui-email">${this.t("email")}</label>
+        <input
+          class="input"
+          id="authui-email"
+          type="email"
+          autocomplete=${e}
+          required
+          inputmode="email"
+          .value=${this.email}
+          @input=${this.bind("email")}
+        />
+      </div>
+    `;
+  }
+  codeField() {
+    return s`
+      <div class="field">
+        <label class="label" for="authui-code">${this.t("code")}</label>
+        <input
+          class="input input-otp"
+          id="authui-code"
+          type="text"
+          inputmode="numeric"
+          autocomplete="one-time-code"
+          required
+          .value=${this.code}
+          @input=${this.bind("code")}
+        />
+      </div>
+    `;
+  }
+  legal() {
+    const e = this.config?.legal;
+    return !e?.termsUrl && !e?.privacyUrl ? n : s`<p class="legal">
+      ${this.t("agreeTo")}
+      ${e.termsUrl ? s`<a href=${e.termsUrl} target="_blank" rel="noopener">${this.t("terms")}</a>` : n}
+      ${e.termsUrl && e.privacyUrl ? s` ${this.t("and")} ` : n}
+      ${e.privacyUrl ? s`<a href=${e.privacyUrl} target="_blank" rel="noopener">${this.t("privacy")}</a>` : n}.
+    </p>`;
+  }
+  backLink(e = "sign-in") {
+    return s`<div class="links">
+      <button type="button" class="btn btn-link" @click=${() => this.go(e)}>
+        ${c.arrowLeft} ${this.t("back")}
+      </button>
+    </div>`;
+  }
+  renderStep() {
+    if (!this.auth.configured)
+      return s`<div class="alert alert-error" role="alert">
+        ${c.alert}
+        <div class="alert-body">${this.t("errorNotConfigured")}</div>
+      </div>`;
+    if (this.auth.status === "loading")
+      return s`<div class="empty"><span class="spinner"></span></div>`;
+    if (this.auth.status === "signed-in" && this.step !== "mfa") return this.renderSignedIn();
+    switch (this.step) {
+      case "sign-up":
+        return this.renderSignUp();
+      case "forgot-password":
+        return this.renderForgot();
+      case "reset-password":
+        return this.renderReset();
+      case "magic-url":
+        return this.renderMagicUrl();
+      case "email-otp":
+        return this.renderEmailOtp();
+      case "phone":
+        return this.renderPhone();
+      case "mfa":
+        return this.renderMfa();
+      default:
+        return this.renderSignIn();
+    }
+  }
+  renderSignedIn() {
+    const e = this.auth.user, t = e.name || e.email || e.phone || this.t("guestAccount");
+    return s`
+      <div class="stack">
+        <div class="row">
+          <div class="inline">
+            <span class="avatar">${t[0] ?? "?"}</span>
+            <div class="row-main">
+              <span class="row-title">${t}</span>
+              ${e.email && e.name ? s`<span class="row-sub">${e.email}</span>` : n}
+            </div>
+          </div>
+        </div>
+        ${this.renderError()}
+        <div class="stack-sm">
+          ${this.config?.successUrl ? s`<a class="btn btn-primary btn-block" href=${this.config.successUrl}
+                  >${this.t("continue")}</a
+                >` : n}
+          <button
+            class="btn btn-outline btn-block"
+            @click=${() => this.fire("authui-open", { view: "account" })}
+          >
+            ${c.settings} ${this.t("manageAccount")}
+          </button>
+          <button class="btn btn-ghost btn-block" @click=${this.onSignOut} ?disabled=${this.busy}>
+            ${c.logOut} ${this.t("signOut")}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  renderProviders() {
+    const e = this.config?.methods?.oauth ?? [];
+    if (e.length === 0) return n;
+    const t = e.length > 2;
+    return s`
+      <div class="providers ${t ? "two" : ""}">
+        ${e.map(
+      (i) => s`<button
+              type="button"
+              class="btn btn-outline"
+              @click=${() => this.onOAuth(i)}
+              ?disabled=${this.busy}
+              aria-label=${this.t("continueWith", { provider: E(i) })}
+            >
+              ${L(i)}
+              <span
+                >${t ? E(i) : this.t("continueWith", { provider: E(i) })}</span
+              >
+            </button>`
+    )}
+      </div>
+    `;
+  }
+  renderSignIn() {
+    const e = this.config?.methods ?? {}, t = e.emailPassword !== !1, i = (e.oauth?.length ?? 0) > 0, r = [
+      e.magicUrl ? { step: "magic-url", icon: c.link, label: this.t("sendMagicLink") } : null,
+      e.emailOtp ? { step: "email-otp", icon: c.mail, label: this.t("continueWithEmail") } : null,
+      e.phone ? { step: "phone", icon: c.smartphone, label: this.t("continueWithPhone") } : null
+    ].filter(Boolean);
+    return s`
+      <div class="stack">
+        ${this.renderProviders()}
+        ${i && (t || r.length > 0) ? s`<div class="separator-text">${this.t("or")}</div>` : n}
+        ${t ? s`<form class="form" @submit=${this.onSignIn} novalidate>
+                ${this.emailField()}
+                ${this.passwordField({ label: this.t("password"), autocomplete: "current-password", id: "authui-password", field: "password", forgot: !0 })}
+                ${this.renderError()} ${this.submitButton(this.t("signIn"))}
+              </form>` : this.renderError()}
+        ${r.length > 0 ? s`<div class="stack-sm">
+                ${r.map(
+      (a) => s`<button
+                      type="button"
+                      class="btn btn-secondary btn-block"
+                      @click=${() => this.go(a.step)}
+                    >
+                      ${a.icon} ${a.label}
+                    </button>`
+    )}
+              </div>` : n}
+        ${e.anonymous ? s`<button
+                type="button"
+                class="btn btn-ghost btn-block"
+                @click=${this.onGuest}
+                ?disabled=${this.busy}
+              >
+                ${c.ghost} ${this.t("continueAsGuest")}
+              </button>` : n}
+        ${t && this.config?.signUp !== !1 ? s`<div class="links">
+                <span>${this.t("noAccount")}</span>
+                <button type="button" class="btn btn-link" @click=${() => this.go("sign-up")}>
+                  ${this.t("signUp")}
+                </button>
+              </div>` : n}
+        ${this.legal()}
+      </div>
+    `;
+  }
+  renderSignUp() {
+    return s`
+      <div class="stack">
+        ${this.renderProviders()}
+        ${(this.config?.methods?.oauth?.length ?? 0) > 0 ? s`<div class="separator-text">${this.t("or")}</div>` : n}
+        <form class="form" @submit=${this.onSignUp} novalidate>
+          ${this.config?.requireName !== !1 ? s`<div class="field">
+                  <label class="label" for="authui-name">${this.t("name")}</label>
+                  <input
+                    class="input"
+                    id="authui-name"
+                    type="text"
+                    autocomplete="name"
+                    required
+                    .value=${this.name}
+                    @input=${this.bind("name")}
+                  />
+                </div>` : n}
+          ${this.emailField()}
+          ${this.passwordField({ label: this.t("password"), autocomplete: "new-password", id: "authui-password", field: "password", hint: this.t("passwordHint") })}
+          ${this.renderError()} ${this.submitButton(this.t("createAccount"))}
+        </form>
+        <div class="links">
+          <span>${this.t("haveAccount")}</span>
+          <button type="button" class="btn btn-link" @click=${() => this.go("sign-in")}>
+            ${this.t("signIn")}
+          </button>
+        </div>
+        ${this.legal()}
+      </div>
+    `;
+  }
+  renderForgot() {
+    return s`
+      <div class="stack">
+        <form class="form" @submit=${this.onForgot} novalidate>
+          ${this.emailField()} ${this.renderError()} ${this.submitButton(this.t("sendResetLink"))}
+        </form>
+        ${this.backLink()}
+      </div>
+    `;
+  }
+  renderReset() {
+    return this.recovery ? s`
+      <div class="stack">
+        <form class="form" @submit=${this.onReset} novalidate>
+          ${this.passwordField({ label: this.t("newPassword"), autocomplete: "new-password", id: "authui-password", field: "password", hint: this.t("passwordHint") })}
+          ${this.passwordField({ label: this.t("confirmPassword"), autocomplete: "new-password", id: "authui-password-confirm", field: "passwordConfirm" })}
+          ${this.renderError()} ${this.submitButton(this.t("resetPassword"))}
+        </form>
+        ${this.backLink()}
+      </div>
+    ` : s`<div class="stack">
+        <div class="alert alert-error" role="alert">
+          ${c.alert}
+          <div class="alert-body">${this.t("errorInvalidToken")}</div>
+        </div>
+        ${this.backLink()}
+      </div>`;
+  }
+  phraseBox(e) {
+    return e ? s`<div class="alert alert-info">
+      ${c.shield}
+      <div class="alert-title">
+        ${this.t("securityPhrase")}: <span class="code">${e}</span>
+      </div>
+      <div class="alert-body">${this.t("securityPhraseHint")}</div>
+    </div>` : n;
+  }
+  renderMagicUrl() {
+    return this.token ? s`<div class="stack">
+        <div class="alert alert-success" role="status">
+          ${c.mail}
+          <div class="alert-body">${this.t("magicLinkSent", { email: this.token.target })}</div>
+        </div>
+        ${this.phraseBox(this.token.phrase)} ${this.backLink()}
+      </div>` : s`
+      <div class="stack">
+        <form class="form" @submit=${this.onMagicUrl} novalidate>
+          ${this.emailField()} ${this.renderError()} ${this.submitButton(this.t("sendMagicLink"))}
+        </form>
+        ${this.backLink()}
+      </div>
+    `;
+  }
+  renderCodeEntry() {
+    return s`
+      <div class="alert alert-info" role="status">
+        ${c.mail}
+        <div class="alert-body">${this.t("codeSent", { target: this.token.target })}</div>
+      </div>
+      ${this.phraseBox(this.token.phrase)}
+      <form class="form" @submit=${this.onVerifyCode} novalidate>
+        ${this.codeField()} ${this.renderError()} ${this.submitButton(this.t("verifyCode"))}
+      </form>
+      <div class="links">
+        <button type="button" class="btn btn-link" @click=${() => this.token = null}>
+          ${this.t("sendCode")}
+        </button>
+        <span aria-hidden="true">·</span>
+        <button type="button" class="btn btn-link" @click=${() => this.go("sign-in")}>
+          ${this.t("back")}
+        </button>
+      </div>
+    `;
+  }
+  renderEmailOtp() {
+    return this.token ? s`<div class="stack">${this.renderCodeEntry()}</div>` : s`
+      <div class="stack">
+        <form class="form" @submit=${this.onEmailOtp} novalidate>
+          ${this.emailField()} ${this.renderError()} ${this.submitButton(this.t("sendCode"))}
+        </form>
+        ${this.backLink()}
+      </div>
+    `;
+  }
+  renderPhone() {
+    return this.token ? s`<div class="stack">${this.renderCodeEntry()}</div>` : s`
+      <div class="stack">
+        <form class="form" @submit=${this.onPhoneOtp} novalidate>
+          <div class="field">
+            <label class="label" for="authui-phone">${this.t("phone")}</label>
+            <input
+              class="input"
+              id="authui-phone"
+              type="tel"
+              autocomplete="tel"
+              placeholder="+1 555 000 0000"
+              required
+              .value=${this.phone}
+              @input=${this.bind("phone")}
+            />
+          </div>
+          ${this.renderError()} ${this.submitButton(this.t("sendCode"))}
+        </form>
+        ${this.backLink()}
+      </div>
+    `;
+  }
+  renderMfa() {
+    const e = this.auth.mfaFactors;
+    if (!this.challenge) {
+      const i = [
+        {
+          factor: "totp",
+          icon: c.smartphone,
+          label: this.t("mfaUseAuthenticator"),
+          available: e?.totp ?? !0
+        },
+        {
+          factor: "email",
+          icon: c.mail,
+          label: this.t("mfaUseEmail"),
+          available: e?.email ?? !0
+        },
+        {
+          factor: "phone",
+          icon: c.phone,
+          label: this.t("mfaUsePhone"),
+          available: e?.phone ?? !0
+        },
+        {
+          factor: "recoverycode",
+          icon: c.key,
+          label: this.t("mfaUseRecoveryCode"),
+          available: e?.recoveryCode ?? !0
+        }
+      ];
+      return s`
+        <div class="stack">
+          <div class="stack-sm">
+            ${i.filter((r) => r.available).map(
+        (r) => s`<button
+                    type="button"
+                    class="choice"
+                    @click=${() => this.onChooseFactor(r.factor)}
+                    ?disabled=${this.busy}
+                  >
+                    ${r.icon}<span class="choice-title">${r.label}</span>
+                  </button>`
+      )}
+          </div>
+          ${this.renderError()}
+          <div class="links">
+            <button type="button" class="btn btn-link" @click=${this.onCancelMfa}>
+              ${this.t("cancel")}
+            </button>
+          </div>
+        </div>
+      `;
+    }
+    const t = this.challenge.factor === "recoverycode";
+    return s`
+      <div class="stack">
+        <form class="form" @submit=${this.onVerifyFactor} novalidate>
+          ${t ? s`<div class="field">
+                  <label class="label" for="authui-code">${this.t("recoveryCode")}</label>
+                  <input
+                    class="input mono"
+                    id="authui-code"
+                    type="text"
+                    autocomplete="off"
+                    required
+                    .value=${this.code}
+                    @input=${this.bind("code")}
+                  />
+                </div>` : this.codeField()}
+          ${this.renderError()} ${this.submitButton(this.t("verifyCode"))}
+        </form>
+        <div class="links">
+          <button type="button" class="btn btn-link" @click=${() => this.challenge = null}>
+            ${c.arrowLeft} ${this.t("back")}
+          </button>
+          <span aria-hidden="true">·</span>
+          <button type="button" class="btn btn-link" @click=${this.onCancelMfa}>
+            ${this.t("cancel")}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+$.styles = [...x.styles, ft];
+C([
+  g({ type: String })
+], $.prototype, "view", 2);
+C([
+  g({ type: Boolean })
+], $.prototype, "embedded", 2);
+C([
+  d()
+], $.prototype, "step", 2);
+C([
+  d()
+], $.prototype, "busy", 2);
+C([
+  d()
+], $.prototype, "error", 2);
+C([
+  d()
+], $.prototype, "notice", 2);
+C([
+  d()
+], $.prototype, "showPassword", 2);
+C([
+  d()
+], $.prototype, "token", 2);
+C([
+  d()
+], $.prototype, "challenge", 2);
+C([
+  d()
+], $.prototype, "recovery", 2);
+C([
+  X("form input:not([type=hidden])")
+], $.prototype, "firstInput", 2);
+$ = C([
+  S("authui-sign-in")
+], $);
+var vt = Object.defineProperty, yt = Object.getOwnPropertyDescriptor, m = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? yt(t, i) : t, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (a = (r ? h(t, i, a) : h(a)) || a);
+  return r && a && vt(t, i, a), a;
+};
+let p = class extends x {
+  constructor() {
+    super(...arguments), this.embedded = !1, this.tab = "profile", this.active = "profile", this.busy = "", this.notice = null, this.errors = {}, this.nameInput = "", this.emailInput = "", this.emailPassword = "", this.phoneInput = "", this.phonePassword = "", this.phoneCode = "", this.phoneCodeSent = !1, this.guestName = "", this.oldPassword = "", this.newPassword = "", this.newPasswordConfirm = "", this.authenticator = null, this.authenticatorCode = "", this.factors = null, this.recoveryCodes = null, this.stepUp = null, this.stepUpCode = "", this.copied = !1, this.sessions = null, this.identities = null, this.logs = null, this.logsSupported = !0, this.confirmDelete = !1, this.factorsLoading = !1, this.onUpdateName = (e) => {
+      e.preventDefault(), this.run("name", () => o.updateName(this.nameInput), this.t("done"));
+    }, this.onUpdateEmail = (e) => {
+      e.preventDefault(), this.run(
+        "email",
+        async () => {
+          await o.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
+        },
+        this.t("done")
+      );
+    }, this.onUpdatePhone = (e) => {
+      e.preventDefault(), this.run(
+        "phone",
+        async () => {
+          await o.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
+        },
+        this.t("done")
+      );
+    }, this.onConvertGuest = (e) => {
+      e.preventDefault(), this.run(
+        "guest",
+        async () => {
+          await o.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
+        },
+        this.t("done")
+      );
+    }, this.onSendVerification = () => {
+      this.run("verify", () => o.sendEmailVerification(), this.t("verificationSent"));
+    }, this.onSendPhoneVerification = () => {
+      this.run("verify-phone", async () => {
+        await o.sendPhoneVerification(), this.phoneCodeSent = !0;
+      });
+    }, this.onConfirmPhoneVerification = (e) => {
+      e.preventDefault(), this.run(
+        "verify-phone-code",
+        async () => {
+          await o.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1;
+        },
+        this.t("done")
+      );
+    }, this.onChangePassword = (e) => {
+      if (e.preventDefault(), this.newPassword !== this.newPasswordConfirm) {
+        this.errors = { ...this.errors, password: this.t("errorPasswordMismatch") };
+        return;
+      }
+      this.run(
+        "password",
+        async () => {
+          await o.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
+        },
+        this.t("passwordUpdated")
+      );
+    }, this.onToggleMfa = () => {
+      const e = !this.user?.mfa;
+      this.run("mfa", async () => {
+        await o.setMfaEnabled(e), await this.loadFactors();
+      });
+    }, this.onAddAuthenticator = () => {
+      this.run("authenticator", async () => {
+        this.authenticator = await o.addAuthenticator(), this.authenticatorCode = "";
+      });
+    }, this.onVerifyAuthenticator = (e) => {
+      e.preventDefault(), this.run(
+        "authenticator-code",
+        async () => {
+          await o.verifyAuthenticator(this.authenticatorCode), this.authenticator = null, this.authenticatorCode = "", await this.loadFactors();
+        },
+        this.t("done")
+      );
+    }, this.onRemoveAuthenticator = () => {
+      this.run("remove-authenticator", async () => {
+        await o.removeAuthenticator(), await this.loadFactors();
+      });
+    }, this.onRecoveryCodes = () => {
+      this.run("recovery", async () => {
+        try {
+          this.recoveryCodes = await o.createRecoveryCodes();
+        } catch (e) {
+          if (!F(e, b.recoveryCodesExist)) throw e;
+          this.recoveryCodes = await o.getRecoveryCodes();
+        }
+        await this.loadFactors();
+      });
+    }, this.onRegenerateRecoveryCodes = () => {
+      this.run("recovery", async () => {
+        this.recoveryCodes = await o.regenerateRecoveryCodes();
+      });
+    }, this.onCopyCodes = async () => {
+      if (this.recoveryCodes)
+        try {
+          await navigator.clipboard.writeText(this.recoveryCodes.join(`
+`)), this.copied = !0, setTimeout(() => this.copied = !1, 1500);
+        } catch {
+        }
+    }, this.onStepUpFactor = (e) => {
+      this.run("stepup", async () => {
+        const t = await o.createMfaChallenge(e);
+        this.stepUp = { ...this.stepUp, challenge: { id: t.$id, factor: e } }, this.stepUpCode = "";
+      });
+    }, this.onStepUpVerify = (e) => {
+      e.preventDefault();
+      const t = this.stepUp;
+      t?.challenge && this.run("stepup-code", async () => {
+        await o.completeMfaChallenge(t.challenge.id, this.stepUpCode, { signIn: !1 }), this.stepUp = null, this.stepUpCode = "", await t.retry();
+      });
+    }, this.onDeleteSession = (e) => {
+      this.run(`session-${e}`, async () => {
+        await o.signOut(e), this.sessions = (this.sessions ?? []).filter((t) => t.$id !== e);
+      });
+    }, this.onSignOutAll = () => {
+      this.run("sessions-all", () => o.signOutEverywhere());
+    }, this.onDeleteIdentity = (e) => {
+      this.run(`identity-${e}`, async () => {
+        await o.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
+      });
+    }, this.onDeleteAccount = () => {
+      this.run("delete", () => o.deleteAccount());
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.active = this.tab, this.hydrate();
+  }
+  willUpdate(e) {
+    e.has("tab") && e.get("tab") !== void 0 && (this.active = this.tab), e.has("auth") && this.hydrate(), this.ensureLoaded();
+  }
+  /** Lazily load data for the active tab once a user is available. */
+  ensureLoaded() {
+    !this.user || this.busy || (this.active === "sessions" && this.sessions === null ? this.loadSessions() : this.active === "connections" && this.identities === null ? this.loadIdentities() : this.active === "activity" && this.logs === null ? this.loadLogs() : this.active === "security" && this.factors === null && this.loadFactors());
+  }
+  hydrate() {
+    const e = this.auth.user;
+    e && (this.nameInput || (this.nameInput = e.name ?? ""), this.emailInput || (this.emailInput = e.email ?? ""), this.phoneInput || (this.phoneInput = e.phone ?? ""));
+  }
+  get user() {
+    return this.auth.user;
+  }
+  get isGuest() {
+    const e = this.user;
+    return !!e && !e.email && !e.phone;
+  }
+  select(e) {
+    this.active = e, this.notice = null, this.errors = {};
+  }
+  /** Run an action with a busy key, surfacing errors under that key. Handles MFA step-up. */
+  async run(e, t, i) {
+    if (!this.busy) {
+      this.busy = e, this.errors = { ...this.errors, [e]: "" };
+      try {
+        await t(), i && (this.notice = { tone: "success", message: i });
+      } catch (r) {
+        F(r, b.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
+          ...this.errors,
+          [e]: Z(r, this.strings, e.includes("code") ? "code" : "link")
+        };
+      } finally {
+        this.busy = "";
+      }
+    }
+  }
+  // ─────────────────────────── loaders ───────────────────────────
+  async loadSessions() {
+    await this.run("sessions", async () => {
+      this.sessions = await o.listSessions();
+    });
+  }
+  async loadIdentities() {
+    await this.run("identities", async () => {
+      this.identities = await o.listIdentities();
+    });
+  }
+  async loadLogs() {
+    this.busy = "logs";
+    try {
+      this.logs = await o.listLogs();
+    } catch {
+      this.logsSupported = !1, this.logs = [];
+    } finally {
+      this.busy = "";
+    }
+  }
+  async loadFactors() {
+    if (!this.factorsLoading) {
+      this.factorsLoading = !0;
+      try {
+        this.factors = await o.listMfaFactors();
+      } catch {
+        this.factors = {
+          totp: !1,
+          phone: !1,
+          email: !1,
+          recoveryCode: !1,
+          custom: !1
+        };
+      } finally {
+        this.factorsLoading = !1;
+      }
+    }
+  }
+  bind(e) {
+    return (t) => {
+      this[e] = t.target.value;
+    };
+  }
+  // ─────────────────────────── render ───────────────────────────
+  render() {
+    if (!this.auth.configured)
+      return s`<div class="alert alert-error" role="alert">
+        ${c.alert}
+        <div class="alert-body">${this.t("errorNotConfigured")}</div>
+      </div>`;
+    if (this.auth.status === "loading")
+      return s`<div class="empty"><span class="spinner"></span></div>`;
+    if (!this.user)
+      return s`<div class="panel ${this.embedded ? "embedded" : ""}">
+        <authui-sign-in embedded></authui-sign-in>
+      </div>`;
+    const e = [
+      { id: "profile", label: this.t("profile") },
+      { id: "security", label: this.t("security") },
+      { id: "sessions", label: this.t("sessions") },
+      { id: "connections", label: this.t("connections") },
+      ...this.logsSupported ? [{ id: "activity", label: this.t("activity") }] : []
+    ];
+    return s`
+      <div class="panel ${this.embedded ? "embedded" : ""}" part="panel">
+        ${this.renderIdentity()}
+        <div class="tabs" role="tablist">
+          ${e.map(
+      (t) => s`<button
+                class="tab"
+                role="tab"
+                aria-selected=${this.active === t.id ? "true" : "false"}
+                @click=${() => this.select(t.id)}
+              >
+                ${t.label}
+              </button>`
+    )}
+        </div>
+        ${this.notice ? s`<div class="alert alert-${this.notice.tone}" role="status">
+                ${this.notice.tone === "success" ? c.checkCircle : c.info}
+                <div class="alert-body">${this.notice.message}</div>
+              </div>` : n}
+        ${this.stepUp ? this.renderStepUp() : this.renderTab()}
+      </div>
+    `;
+  }
+  renderIdentity() {
+    const e = this.user, t = e.name || e.email || e.phone || this.t("guestAccount");
+    return s`
+      <div class="between">
+        <div class="identity">
+          <span class="avatar">${t[0] ?? "?"}</span>
+          <div class="row-main">
+            <span class="row-title">
+              ${t}
+              ${e.mfa ? s`<span class="badge badge-success">${c.shieldCheck} MFA</span>` : n}
+            </span>
+            ${e.email && e.name ? s`<span class="row-sub">${e.email}</span>` : n}
+          </div>
+        </div>
+        <button class="btn btn-outline btn-sm" @click=${() => o.signOut()}>
+          ${c.logOut} ${this.t("signOut")}
+        </button>
+      </div>
+    `;
+  }
+  renderTab() {
+    switch (this.active) {
+      case "security":
+        return this.renderSecurity();
+      case "sessions":
+        return this.renderSessions();
+      case "connections":
+        return this.renderConnections();
+      case "activity":
+        return this.renderActivity();
+      default:
+        return this.renderProfile();
+    }
+  }
+  error(e) {
+    const t = this.errors[e];
+    return t ? s`<div class="alert alert-error" role="alert">
+          ${c.alert}
+          <div class="alert-body">${t}</div>
+        </div>` : n;
+  }
+  spinner(e) {
+    return this.busy === e ? s`<span class="spinner" aria-hidden="true"></span>` : n;
+  }
+  card(e, t, i, r, a = !1) {
+    return s`<section class="card ${a ? "card-danger" : ""}">
+      <div class="card-header">
+        <h3 class="card-title">${e}</h3>
+        ${t ? s`<p class="card-description">${t}</p>` : n}
+      </div>
+      <div class="card-body">${i}</div>
+      ${r ? s`<div class="card-footer">${r}</div>` : n}
+    </section>`;
+  }
+  verifiedBadge(e) {
+    return e ? s`<span class="badge badge-success">${c.check} ${this.t("verified")}</span>` : s`<span class="badge badge-warning">${this.t("unverified")}</span>`;
+  }
+  // ── Profile ──
+  renderProfile() {
+    const e = this.user;
+    return this.isGuest ? s`<div class="section">
+        ${this.card(
+      this.t("guestAccount"),
+      this.t("guestAccountDescription"),
+      s`<form class="form" id="guest-form" @submit=${this.onConvertGuest} novalidate>
+            <div class="field">
+              <label class="label" for="guest-name">${this.t("name")}</label>
+              <input
+                class="input"
+                id="guest-name"
+                .value=${this.guestName}
+                @input=${this.bind("guestName")}
+                autocomplete="name"
+              />
+            </div>
+            <div class="field">
+              <label class="label" for="guest-email">${this.t("email")}</label>
+              <input
+                class="input"
+                id="guest-email"
+                type="email"
+                required
+                .value=${this.emailInput}
+                @input=${this.bind("emailInput")}
+                autocomplete="email"
+              />
+            </div>
+            <div class="field">
+              <label class="label" for="guest-password">${this.t("password")}</label>
+              <input
+                class="input"
+                id="guest-password"
+                type="password"
+                required
+                minlength="8"
+                .value=${this.emailPassword}
+                @input=${this.bind("emailPassword")}
+                autocomplete="new-password"
+              />
+              <p class="hint">${this.t("passwordHint")}</p>
+            </div>
+            ${this.error("guest")}
+          </form>`,
+      s`<button
+            class="btn btn-primary btn-sm"
+            type="submit"
+            form="guest-form"
+            ?disabled=${!!this.busy}
+          >
+            ${this.spinner("guest")} ${this.t("createAccount")}
+          </button>`
+    )}
+      </div>` : s`<div class="section">
+      ${this.card(
+      this.t("name"),
+      void 0,
+      s`<form class="form" id="name-form" @submit=${this.onUpdateName} novalidate>
+          <div class="field">
+            <label class="label" for="acc-name">${this.t("name")}</label>
+            <input
+              class="input"
+              id="acc-name"
+              .value=${this.nameInput}
+              @input=${this.bind("nameInput")}
+              autocomplete="name"
+              required
+            />
+          </div>
+          ${this.error("name")}
+        </form>`,
+      s`<button
+          class="btn btn-primary btn-sm"
+          type="submit"
+          form="name-form"
+          ?disabled=${!!this.busy || this.nameInput === e.name}
+        >
+          ${this.spinner("name")} ${this.t("update")}
+        </button>`
+    )}
+      ${this.card(
+      this.t("email"),
+      void 0,
+      s`<form class="form" id="email-form" @submit=${this.onUpdateEmail} novalidate>
+          <div class="field">
+            <label class="label" for="acc-email"
+              >${this.t("email")}
+              ${e.email ? this.verifiedBadge(e.emailVerification) : n}</label
+            >
+            <input
+              class="input"
+              id="acc-email"
+              type="email"
+              .value=${this.emailInput}
+              @input=${this.bind("emailInput")}
+              autocomplete="email"
+              required
+            />
+          </div>
+          ${this.emailInput !== e.email ? s`<div class="field">
+                  <label class="label" for="acc-email-password">${this.t("currentPassword")}</label>
+                  <input
+                    class="input"
+                    id="acc-email-password"
+                    type="password"
+                    .value=${this.emailPassword}
+                    @input=${this.bind("emailPassword")}
+                    autocomplete="current-password"
+                    required
+                  />
+                </div>` : n}
+          ${this.error("email")} ${this.error("verify")}
+        </form>`,
+      s`
+          ${e.email && !e.emailVerification ? s`<button
+                  class="btn btn-outline btn-sm"
+                  type="button"
+                  @click=${this.onSendVerification}
+                  ?disabled=${!!this.busy}
+                >
+                  ${this.spinner("verify")} ${this.t("verifyEmail")}
+                </button>` : n}
+          <button
+            class="btn btn-primary btn-sm"
+            type="submit"
+            form="email-form"
+            ?disabled=${!!this.busy || this.emailInput === e.email}
+          >
+            ${this.spinner("email")} ${this.t("update")}
+          </button>
+        `
+    )}
+      ${this.card(
+      this.t("phone"),
+      void 0,
+      s`<form class="form" id="phone-form" @submit=${this.onUpdatePhone} novalidate>
+          <div class="field">
+            <label class="label" for="acc-phone"
+              >${this.t("phone")}
+              ${e.phone ? this.verifiedBadge(e.phoneVerification) : n}</label
+            >
+            <input
+              class="input"
+              id="acc-phone"
+              type="tel"
+              placeholder="+1 555 000 0000"
+              .value=${this.phoneInput}
+              @input=${this.bind("phoneInput")}
+              autocomplete="tel"
+            />
+          </div>
+          ${this.phoneInput !== e.phone ? s`<div class="field">
+                  <label class="label" for="acc-phone-password">${this.t("currentPassword")}</label>
+                  <input
+                    class="input"
+                    id="acc-phone-password"
+                    type="password"
+                    .value=${this.phonePassword}
+                    @input=${this.bind("phonePassword")}
+                    autocomplete="current-password"
+                    required
+                  />
+                </div>` : n}
+          ${this.phoneCodeSent ? s`<div class="field">
+                  <label class="label" for="acc-phone-code">${this.t("code")}</label>
+                  <input
+                    class="input input-otp"
+                    id="acc-phone-code"
+                    inputmode="numeric"
+                    autocomplete="one-time-code"
+                    .value=${this.phoneCode}
+                    @input=${this.bind("phoneCode")}
+                  />
+                </div>` : n}
+          ${this.error("phone")} ${this.error("verify-phone")} ${this.error("verify-phone-code")}
+        </form>`,
+      s`
+          ${e.phone && !e.phoneVerification && !this.phoneCodeSent ? s`<button
+                  class="btn btn-outline btn-sm"
+                  type="button"
+                  @click=${this.onSendPhoneVerification}
+                  ?disabled=${!!this.busy}
+                >
+                  ${this.spinner("verify-phone")} ${this.t("sendCode")}
+                </button>` : n}
+          ${this.phoneCodeSent ? s`<button
+                  class="btn btn-outline btn-sm"
+                  type="button"
+                  @click=${this.onConfirmPhoneVerification}
+                  ?disabled=${!!this.busy}
+                >
+                  ${this.spinner("verify-phone-code")} ${this.t("verifyCode")}
+                </button>` : n}
+          <button
+            class="btn btn-primary btn-sm"
+            type="submit"
+            form="phone-form"
+            ?disabled=${!!this.busy || this.phoneInput === e.phone}
+          >
+            ${this.spinner("phone")} ${this.t("update")}
+          </button>
+        `
+    )}
+      ${this.renderDanger()}
+    </div>`;
+  }
+  renderDanger() {
+    return this.card(
+      this.t("deleteAccount"),
+      this.t("deleteAccountDescription"),
+      s`${this.error("delete")}
+      ${this.confirmDelete ? s`<div class="inline">
+              <button
+                class="btn btn-destructive btn-sm"
+                @click=${this.onDeleteAccount}
+                ?disabled=${!!this.busy}
+              >
+                ${this.spinner("delete")} ${this.t("deleteAccountConfirm")}
+              </button>
+              <button class="btn btn-ghost btn-sm" @click=${() => this.confirmDelete = !1}>
+                ${this.t("cancel")}
+              </button>
+            </div>` : s`<button
+              class="btn btn-outline btn-sm warn"
+              @click=${() => this.confirmDelete = !0}
+            >
+              ${c.userX} ${this.t("deleteAccount")}
+            </button>`}`,
+      void 0,
+      !0
+    );
+  }
+  // ── Security ──
+  renderSecurity() {
+    const e = this.user, t = this.config?.mfa !== !1;
+    return s`<div class="section">
+      ${this.isGuest ? n : this.card(
+      this.t("changePassword"),
+      void 0,
+      s`<form
+                class="form"
+                id="password-form"
+                @submit=${this.onChangePassword}
+                novalidate
+              >
+                ${e.passwordUpdate ? s`<div class="field">
+                        <label class="label" for="acc-old-password"
+                          >${this.t("currentPassword")}</label
+                        >
+                        <input
+                          class="input"
+                          id="acc-old-password"
+                          type="password"
+                          .value=${this.oldPassword}
+                          @input=${this.bind("oldPassword")}
+                          autocomplete="current-password"
+                        />
+                      </div>` : n}
+                <div class="field">
+                  <label class="label" for="acc-new-password">${this.t("newPassword")}</label>
+                  <input
+                    class="input"
+                    id="acc-new-password"
+                    type="password"
+                    required
+                    minlength="8"
+                    .value=${this.newPassword}
+                    @input=${this.bind("newPassword")}
+                    autocomplete="new-password"
+                  />
+                  <p class="hint">${this.t("passwordHint")}</p>
+                </div>
+                <div class="field">
+                  <label class="label" for="acc-new-password-confirm"
+                    >${this.t("confirmPassword")}</label
+                  >
+                  <input
+                    class="input"
+                    id="acc-new-password-confirm"
+                    type="password"
+                    required
+                    minlength="8"
+                    .value=${this.newPasswordConfirm}
+                    @input=${this.bind("newPasswordConfirm")}
+                    autocomplete="new-password"
+                  />
+                </div>
+                ${this.error("password")}
+              </form>`,
+      s`<button
+                class="btn btn-primary btn-sm"
+                type="submit"
+                form="password-form"
+                ?disabled=${!!this.busy || !this.newPassword}
+              >
+                ${this.spinner("password")} ${this.t("update")}
+              </button>`
+    )}
+      ${t ? this.renderMfaCard() : n}
+      ${t ? this.renderRecoveryCard() : n}
+    </div>`;
+  }
+  renderMfaCard() {
+    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? new tt(o.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
+    return this.card(
+      this.t("twoFactor"),
+      this.t("twoFactorDescription"),
+      s`<div class="kv">
+        <div class="toggle-row">
+          <div class="row-main">
+            <span class="row-title">${this.t("twoFactor")}</span>
+            <span class="row-sub">${e.mfa ? this.t("enable") : this.t("disable")}d</span>
+          </div>
+          <button
+            class="switch"
+            role="switch"
+            aria-checked=${e.mfa ? "true" : "false"}
+            @click=${this.onToggleMfa}
+            ?disabled=${!!this.busy}
+            aria-label=${this.t("twoFactor")}
+          ></button>
+        </div>
+        ${this.error("mfa")}
+        <div class="separator"></div>
+        <div class="toggle-row">
+          <div class="row-main">
+            <span class="row-title"
+              >${c.smartphone} ${this.t("authenticatorApp")}
+              ${t ? this.verifiedBadge(!0) : n}</span
+            >
+          </div>
+          ${t ? s`<button
+                  class="btn btn-outline btn-sm"
+                  @click=${this.onRemoveAuthenticator}
+                  ?disabled=${!!this.busy}
+                >
+                  ${this.spinner("remove-authenticator")} ${this.t("remove")}
+                </button>` : this.authenticator ? n : s`<button
+                    class="btn btn-outline btn-sm"
+                    @click=${this.onAddAuthenticator}
+                    ?disabled=${!!this.busy}
+                  >
+                    ${this.spinner("authenticator")} ${this.t("authenticatorAdd")}
+                  </button>`}
+        </div>
+        ${this.error("authenticator")} ${this.error("remove-authenticator")}
+        ${this.authenticator ? s`<form class="form" @submit=${this.onVerifyAuthenticator} novalidate>
+                <p class="hint">${this.t("authenticatorScan")}</p>
+                <img class="qr" src=${i} alt="QR code" />
+                <p class="hint center">
+                  ${this.t("authenticatorManual")}:
+                  <span class="code">${this.authenticator.secret}</span>
+                </p>
+                <div class="field">
+                  <label class="label" for="acc-totp">${this.t("code")}</label>
+                  <input
+                    class="input input-otp"
+                    id="acc-totp"
+                    inputmode="numeric"
+                    autocomplete="one-time-code"
+                    required
+                    .value=${this.authenticatorCode}
+                    @input=${this.bind("authenticatorCode")}
+                  />
+                </div>
+                ${this.error("authenticator-code")}
+                <div class="inline">
+                  <button class="btn btn-primary btn-sm" type="submit" ?disabled=${!!this.busy}>
+                    ${this.spinner("authenticator-code")} ${this.t("authenticatorVerify")}
+                  </button>
+                  <button
+                    class="btn btn-ghost btn-sm"
+                    type="button"
+                    @click=${() => this.authenticator = null}
+                  >
+                    ${this.t("cancel")}
+                  </button>
+                </div>
+              </form>` : n}
+      </div>`
+    );
+  }
+  renderRecoveryCard() {
+    const e = this.factors?.recoveryCode ?? !1;
+    return this.card(
+      this.t("recoveryCodes"),
+      this.t("recoveryCodesDescription"),
+      s`<div class="kv">
+        ${this.recoveryCodes ? s`<div class="alert alert-warning">
+                  ${c.alert}
+                  <div class="alert-body">${this.t("recoveryCodesWarning")}</div>
+                </div>
+                <div class="codes">
+                  ${this.recoveryCodes.map((t) => s`<span class="code">${t}</span>`)}
+                </div>
+                <div class="inline">
+                  <button class="btn btn-outline btn-sm" @click=${this.onCopyCodes}>
+                    ${this.copied ? c.check : c.copy}
+                    ${this.copied ? this.t("copied") : this.t("copy")}
+                  </button>
+                  <button class="btn btn-ghost btn-sm" @click=${() => this.recoveryCodes = null}>
+                    ${this.t("done")}
+                  </button>
+                </div>` : s`<div class="inline">
+                <button
+                  class="btn btn-outline btn-sm"
+                  @click=${this.onRecoveryCodes}
+                  ?disabled=${!!this.busy}
+                >
+                  ${this.spinner("recovery")} ${c.key}
+                  ${e ? this.t("recoveryCodes") : this.t("generateRecoveryCodes")}
+                </button>
+                ${e ? s`<button class="btn btn-ghost btn-sm" @click=${this.onRegenerateRecoveryCodes} ?disabled=${!!this.busy}>${c.refresh} ${this.t("regenerateRecoveryCodes")}</button>` : n}
+              </div>`}
+        ${this.error("recovery")}
+      </div>`
+    );
+  }
+  /** Inline MFA challenge shown when Appwrite demands a recent factor for a protected action. */
+  renderStepUp() {
+    const e = this.stepUp, t = this.factors, i = [
+      {
+        factor: "totp",
+        icon: c.smartphone,
+        label: this.t("mfaUseAuthenticator"),
+        available: t?.totp ?? !0
+      },
+      {
+        factor: "email",
+        icon: c.mail,
+        label: this.t("mfaUseEmail"),
+        available: t?.email ?? !0
+      },
+      {
+        factor: "phone",
+        icon: c.phone,
+        label: this.t("mfaUsePhone"),
+        available: t?.phone ?? !0
+      },
+      {
+        factor: "recoverycode",
+        icon: c.key,
+        label: this.t("mfaUseRecoveryCode"),
+        available: t?.recoveryCode ?? !0
+      }
+    ];
+    return this.card(
+      this.t("mfaTitle"),
+      this.t("errorChallengeRequired"),
+      s`<div class="kv">
+        ${e.challenge ? s`<form class="form" @submit=${this.onStepUpVerify} novalidate>
+                <div class="field">
+                  <label class="label" for="acc-stepup"
+                    >${e.challenge.factor === "recoverycode" ? this.t("recoveryCode") : this.t("code")}</label
+                  >
+                  <input
+                    class="input ${e.challenge.factor === "recoverycode" ? "mono" : "input-otp"}"
+                    id="acc-stepup"
+                    autocomplete="one-time-code"
+                    required
+                    .value=${this.stepUpCode}
+                    @input=${this.bind("stepUpCode")}
+                  />
+                </div>
+                <button class="btn btn-primary btn-sm" type="submit" ?disabled=${!!this.busy}>
+                  ${this.spinner("stepup-code")} ${this.t("verifyCode")}
+                </button>
+              </form>` : s`<div class="stack-sm">
+                ${i.filter((r) => r.available).map(
+        (r) => s`<button
+                        type="button"
+                        class="choice"
+                        @click=${() => this.onStepUpFactor(r.factor)}
+                        ?disabled=${!!this.busy}
+                      >
+                        ${r.icon}<span class="choice-title">${r.label}</span>
+                      </button>`
+      )}
+              </div>`}
+        ${this.error("stepup")} ${this.error("stepup-code")}
+      </div>`,
+      s`<button class="btn btn-ghost btn-sm" @click=${() => this.stepUp = null}>
+        ${this.t("cancel")}
+      </button>`
+    );
+  }
+  // ── Sessions ──
+  deviceIcon(e) {
+    const t = (e.clientType || e.deviceName || "").toLowerCase();
+    return t.includes("smartphone") || t.includes("phone") || t.includes("tablet") ? c.smartphone : t.includes("browser") || t.includes("desktop") ? c.monitor : c.globe;
+  }
+  renderSessions() {
+    const e = this.sessions;
+    return s`<div class="section">
+      ${this.card(
+      this.t("sessions"),
+      void 0,
+      s`${this.error("sessions")}
+        ${e === null ? s`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? s`<div class="empty">${this.t("noActivity")}</div>` : e.map(
+        (t) => s`<div class="row">
+                      <div class="inline">
+                        <span class="device">${this.deviceIcon(t)}</span>
+                        <div class="row-main">
+                          <span class="row-title">
+                            ${t.clientName || t.provider}
+                            ${t.clientVersion ? s`<span class="muted small">${t.clientVersion}</span>` : n}
+                            ${t.current ? s`<span class="badge badge-info">${this.t("currentSession")}</span>` : n}
+                          </span>
+                          <span class="row-sub"
+                            >${[t.osName, t.countryName || t.countryCode, t.ip].filter(Boolean).join(" · ")}</span
+                          >
+                        </div>
+                      </div>
+                      <div class="row-actions">
+                        ${this.busy === `session-${t.$id}` ? s`<span class="spinner"></span>` : n}
+                        <button
+                          class="btn btn-ghost btn-sm"
+                          @click=${() => this.onDeleteSession(t.$id)}
+                          ?disabled=${!!this.busy}
+                          aria-label=${this.t("signOutSession")}
+                        >
+                          ${c.logOut}
+                        </button>
+                      </div>
+                    </div>`
+      )}`
+    )}
+      ${this.card(
+      this.t("signOutAllSessions"),
+      this.t("signOutAllSessionsDescription"),
+      s`${this.error("sessions-all")}
+          <button
+            class="btn btn-outline btn-sm warn"
+            @click=${this.onSignOutAll}
+            ?disabled=${!!this.busy}
+          >
+            ${this.spinner("sessions-all")} ${c.logOut} ${this.t("signOutAllSessions")}
+          </button>`,
+      void 0,
+      !0
+    )}
+    </div>`;
+  }
+  // ── Connections ──
+  renderConnections() {
+    const e = this.identities, t = this.config?.methods?.oauth ?? [];
+    return s`<div class="section">
+      ${this.card(
+      this.t("connections"),
+      void 0,
+      s`${this.error("identities")}
+        ${e === null ? s`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? s`<div class="empty">${this.t("noConnections")}</div>` : e.map(
+        (i) => s`<div class="row">
+                      <div class="inline">
+                        <span class="device">${L(i.provider)}</span>
+                        <div class="row-main">
+                          <span class="row-title">${E(i.provider)}</span>
+                          <span class="row-sub">${i.providerEmail || i.providerUid}</span>
+                        </div>
+                      </div>
+                      <div class="row-actions">
+                        <button
+                          class="btn btn-ghost btn-sm"
+                          @click=${() => this.onDeleteIdentity(i.$id)}
+                          ?disabled=${!!this.busy}
+                        >
+                          ${this.busy === `identity-${i.$id}` ? s`<span class="spinner"></span>` : n}
+                          ${this.t("disconnect")}
+                        </button>
+                      </div>
+                    </div>`
+      )}`,
+      t.length > 0 ? s`${t.filter((i) => !(e ?? []).some((r) => r.provider === i)).map(
+        (i) => s`<button
+                    class="btn btn-outline btn-sm"
+                    @click=${() => o.signInWithOAuth(i)}
+                  >
+                    ${L(i)} ${E(i)}
+                  </button>`
+      )}` : void 0
+    )}
+    </div>`;
+  }
+  // ── Activity ──
+  renderActivity() {
+    const e = this.logs;
+    return s`<div class="section">
+      ${this.card(
+      this.t("activity"),
+      void 0,
+      s`${e === null ? s`<div class="empty"><span class="spinner"></span></div>` : e.length === 0 ? s`<div class="empty">${this.t("noActivity")}</div>` : e.map(
+        (t) => s`<div class="row">
+                      <div class="row-main">
+                        <span class="row-title">${t.event}</span>
+                        <span class="row-sub"
+                          >${[t.clientName, t.osName, t.countryName || t.countryCode, t.ip].filter(Boolean).join(" · ")}</span
+                        >
+                      </div>
+                      <span class="log-time">${new Date(t.time).toLocaleString()}</span>
+                    </div>`
+      )}`
+    )}
+    </div>`;
+  }
+};
+p.styles = [
+  ...x.styles,
+  A`
+      :host {
+        display: block;
+        width: 100%;
+        max-width: 560px;
+      }
+      .panel {
+        background: var(--authui-card);
+        color: var(--authui-card-foreground);
+        border: 1px solid var(--authui-border);
+        border-radius: var(--authui-radius-xl);
+        padding: 24px;
+        display: flex;
+        flex-direction: column;
+        gap: 20px;
+        box-shadow: var(--authui-shadow-lg);
+      }
+      .panel.embedded {
+        border: 0;
+        box-shadow: none;
+        padding: 0;
+        background: transparent;
+      }
+      .identity {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .identity .avatar {
+        width: 44px;
+        height: 44px;
+        font-size: 16px;
+      }
+      .tabs {
+        width: 100%;
+      }
+      .section {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+      .kv {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .toggle-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+      }
+      .device {
+        width: 36px;
+        height: 36px;
+        border-radius: var(--authui-radius-md);
+        background: var(--authui-muted);
+        color: var(--authui-muted-foreground);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+      .device svg {
+        width: 18px;
+        height: 18px;
+      }
+      .log-time {
+        font-size: 12px;
+        color: var(--authui-muted-foreground);
+        white-space: nowrap;
+      }
+      .warn {
+        color: var(--authui-destructive-foreground);
+      }
+    `
+];
+m([
+  g({ type: Boolean })
+], p.prototype, "embedded", 2);
+m([
+  g({ type: String })
+], p.prototype, "tab", 2);
+m([
+  d()
+], p.prototype, "active", 2);
+m([
+  d()
+], p.prototype, "busy", 2);
+m([
+  d()
+], p.prototype, "notice", 2);
+m([
+  d()
+], p.prototype, "errors", 2);
+m([
+  d()
+], p.prototype, "nameInput", 2);
+m([
+  d()
+], p.prototype, "emailInput", 2);
+m([
+  d()
+], p.prototype, "emailPassword", 2);
+m([
+  d()
+], p.prototype, "phoneInput", 2);
+m([
+  d()
+], p.prototype, "phonePassword", 2);
+m([
+  d()
+], p.prototype, "phoneCode", 2);
+m([
+  d()
+], p.prototype, "phoneCodeSent", 2);
+m([
+  d()
+], p.prototype, "guestName", 2);
+m([
+  d()
+], p.prototype, "oldPassword", 2);
+m([
+  d()
+], p.prototype, "newPassword", 2);
+m([
+  d()
+], p.prototype, "newPasswordConfirm", 2);
+m([
+  d()
+], p.prototype, "authenticator", 2);
+m([
+  d()
+], p.prototype, "authenticatorCode", 2);
+m([
+  d()
+], p.prototype, "factors", 2);
+m([
+  d()
+], p.prototype, "recoveryCodes", 2);
+m([
+  d()
+], p.prototype, "stepUp", 2);
+m([
+  d()
+], p.prototype, "stepUpCode", 2);
+m([
+  d()
+], p.prototype, "copied", 2);
+m([
+  d()
+], p.prototype, "sessions", 2);
+m([
+  d()
+], p.prototype, "identities", 2);
+m([
+  d()
+], p.prototype, "logs", 2);
+m([
+  d()
+], p.prototype, "logsSupported", 2);
+m([
+  d()
+], p.prototype, "confirmDelete", 2);
+p = m([
+  S("authui-account")
+], p);
+var wt = Object.defineProperty, $t = Object.getOwnPropertyDescriptor, U = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? $t(t, i) : t, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (a = (r ? h(t, i, a) : h(a)) || a);
+  return r && a && wt(t, i, a), a;
+};
+let P = class extends x {
+  constructor() {
+    super(...arguments), this.open = !1, this.view = "sign-in", this.closeOnSuccess = !0, this.handledPending = null, this.onOpenEvent = (e) => {
+      const t = e.detail ?? {};
+      this.show(t.view);
+    }, this.onCloseEvent = () => this.hide(), this.onSuccess = () => {
+      this.fire("authui-signed-in", this.auth.user), this.closeOnSuccess && !this.config?.successUrl && this.hide();
+    }, this.onInnerOpen = (e) => {
+      const t = e.detail?.view;
+      t && (this.view = t);
+    }, this.onBackdrop = (e) => {
+      e.target === this.dialog && this.hide();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("authui:open", this.onOpenEvent), window.addEventListener("authui:close", this.onCloseEvent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("authui:open", this.onOpenEvent), window.removeEventListener("authui:close", this.onCloseEvent);
+  }
+  show(e) {
+    e ? this.view = e : this.auth.status === "signed-in" && (this.view = "account"), this.open = !0;
+  }
+  hide() {
+    this.open = !1;
+  }
+  updated(e) {
+    if (e.has("open") && this.dialog && (this.open && !this.dialog.open && this.dialog.showModal(), !this.open && this.dialog.open && this.dialog.close()), e.has("auth")) {
+      const t = this.auth.pending;
+      t && t !== this.handledPending && t.type !== "notice" && (this.handledPending = t, this.view = "sign-in", this.open = !0), t?.type === "notice" && t !== this.handledPending && (this.handledPending = t, this.open = !0);
+    }
+  }
+  render() {
+    const e = this.view === "account";
+    return s`
+      <dialog
+        class=${e ? "wide" : ""}
+        aria-labelledby="authui-title"
+        @close=${() => this.open = !1}
+        @cancel=${(t) => {
+      t.preventDefault(), this.hide();
+    }}
+        @click=${this.onBackdrop}
+        @authui-open=${this.onInnerOpen}
+      >
+        <div class="body">
+          <button
+            class="btn btn-ghost btn-icon close"
+            @click=${this.hide}
+            aria-label=${this.t("close")}
+          >
+            ${c.x}
+          </button>
+          ${this.open ? e ? s`<authui-account embedded></authui-account>` : s`<authui-sign-in
+                    embedded
+                    .view=${this.view}
+                    @authui-success=${this.onSuccess}
+                  ></authui-sign-in>` : n}
+        </div>
+      </dialog>
+    `;
+  }
+};
+P.styles = [
+  ...x.styles,
+  A`
+      :host {
+        display: contents;
+      }
+      dialog {
+        border: 1px solid var(--authui-border);
+        border-radius: var(--authui-radius-lg);
+        background: var(--authui-background);
+        color: var(--authui-foreground);
+        padding: 0;
+        width: calc(100% - 2rem);
+        max-width: 440px;
+        max-height: calc(100dvh - 2rem);
+        box-shadow: var(--authui-shadow-lg);
+        overflow: hidden;
+        z-index: var(--authui-z);
+      }
+      dialog.wide {
+        max-width: 600px;
+      }
+      dialog::backdrop {
+        background: var(--authui-overlay);
+        backdrop-filter: blur(4px);
+      }
+      dialog[open] {
+        animation: authui-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
+      }
+      @keyframes authui-in {
+        from {
+          opacity: 0;
+          transform: scale(0.96);
+        }
+        to {
+          opacity: 1;
+          transform: none;
+        }
+      }
+      .body {
+        padding: 24px;
+        max-height: calc(100dvh - 2rem);
+        overflow-y: auto;
+      }
+      .close {
+        position: absolute;
+        top: 12px;
+        inset-inline-end: 12px;
+        width: 32px;
+        height: 32px;
+        border-radius: var(--authui-radius-sm);
+        opacity: 0.7;
+      }
+      .close:hover {
+        opacity: 1;
+      }
+      authui-sign-in,
+      authui-account {
+        max-width: none;
+      }
+    `
+];
+U([
+  g({ type: Boolean, reflect: !0 })
+], P.prototype, "open", 2);
+U([
+  g({ type: String })
+], P.prototype, "view", 2);
+U([
+  g({ type: Boolean, attribute: "close-on-success" })
+], P.prototype, "closeOnSuccess", 2);
+U([
+  d()
+], P.prototype, "handledPending", 2);
+U([
+  X("dialog")
+], P.prototype, "dialog", 2);
+P = U([
+  S("authui-modal")
+], P);
+function R(e) {
+  typeof document > "u" || (document.querySelector("authui-modal") || document.body.appendChild(document.createElement("authui-modal")), queueMicrotask(() => {
+    window.dispatchEvent(new CustomEvent("authui:open", { detail: { view: e } }));
+  }));
+}
+function Ut() {
+  typeof window > "u" || window.dispatchEvent(new CustomEvent("authui:close"));
+}
+var xt = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, O = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? kt(t, i) : t, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (a = (r ? h(t, i, a) : h(a)) || a);
+  return r && a && xt(t, i, a), a;
+};
+let M = class extends x {
+  constructor() {
+    super(...arguments), this.view = "sign-in", this.variant = "primary", this.size = "md";
+  }
+  render() {
+    const e = this.size === "md" ? "" : `btn-${this.size}`;
+    return s`<button
+      class="btn btn-${this.variant} ${e}"
+      @click=${() => R(this.view)}
+      part="button"
+    >
+      <slot
+        >${this.view === "sign-up" ? this.t("signUp") : this.view === "account" ? this.t("manageAccount") : this.t("signIn")}</slot
+      >
+    </button>`;
+  }
+};
+M.styles = [
+  ...x.styles,
+  A`
+      :host {
+        display: inline-block;
+      }
+      .btn {
+        width: 100%;
+      }
+    `
+];
+O([
+  g({ type: String })
+], M.prototype, "view", 2);
+O([
+  g({ type: String })
+], M.prototype, "variant", 2);
+O([
+  g({ type: String })
+], M.prototype, "size", 2);
+M = O([
+  S("authui-button")
+], M);
+var Ct = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, q = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Pt(t, i) : t, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (a = (r ? h(t, i, a) : h(a)) || a);
+  return r && a && Ct(t, i, a), a;
+};
+let I = class extends x {
+  constructor() {
+    super(...arguments), this.src = "", this.menuOpen = !1, this.onDocumentClick = (e) => {
+      e.composedPath().includes(this) || (this.menuOpen = !1);
+    }, this.onKeydown = (e) => {
+      e.key === "Escape" && (this.menuOpen = !1);
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this.onDocumentClick, !0), document.addEventListener("keydown", this.onKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick, !0), document.removeEventListener("keydown", this.onKeydown);
+  }
+  render() {
+    const { status: e, user: t } = this.auth;
+    if (e === "loading")
+      return s`<span class="avatar"><span class="spinner"></span></span>`;
+    if (e !== "signed-in" || !t)
+      return s`<button class="btn btn-primary btn-sm" @click=${() => R("sign-in")}>
+        <slot>${this.t("signIn")}</slot>
+      </button>`;
+    const i = t.name || t.email || t.phone || this.t("guestAccount");
+    return s`
+      <button
+        class="trigger"
+        aria-haspopup="menu"
+        aria-expanded=${this.menuOpen ? "true" : "false"}
+        @click=${() => this.menuOpen = !this.menuOpen}
+        aria-label=${i}
+      >
+        <span class="avatar"
+          >${this.src ? s`<img src=${this.src} alt="" />` : i[0] ?? "?"}</span
+        >
+      </button>
+      ${this.menuOpen ? s`<div class="menu" role="menu">
+              <div class="menu-header">
+                <span class="row-title">${i}</span>
+                ${t.email && t.name ? s`<span class="row-sub">${t.email}</span>` : n}
+              </div>
+              <button
+                class="menu-item"
+                role="menuitem"
+                @click=${() => {
+      this.menuOpen = !1, R("account");
+    }}
+              >
+                ${c.settings} ${this.t("manageAccount")}
+              </button>
+              <button
+                class="menu-item"
+                role="menuitem"
+                @click=${() => {
+      this.menuOpen = !1, o.signOut();
+    }}
+              >
+                ${c.logOut} ${this.t("signOut")}
+              </button>
+            </div>` : n}
+    `;
+  }
+};
+I.styles = [
+  ...x.styles,
+  A`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+      .trigger {
+        border: 1px solid transparent;
+        background: transparent;
+        padding: 2px;
+        border-radius: 999px;
+        cursor: pointer;
+        display: inline-flex;
+        transition: border-color 150ms;
+      }
+      .trigger:hover,
+      .trigger[aria-expanded="true"] {
+        border-color: var(--authui-border);
+      }
+      .trigger:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px color-mix(in oklab, var(--authui-ring) 50%, transparent);
+      }
+      .menu {
+        position: absolute;
+        top: calc(100% + 6px);
+        inset-inline-end: 0;
+        min-width: 220px;
+        background: var(--authui-popover);
+        color: var(--authui-popover-foreground);
+        border: 1px solid var(--authui-border);
+        border-radius: var(--authui-radius-md);
+        box-shadow: var(--authui-shadow-lg);
+        padding: 4px;
+        z-index: var(--authui-z);
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .menu-header {
+        padding: 8px 10px 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        border-bottom: 1px solid var(--authui-border);
+        margin-bottom: 4px;
+      }
+      .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 6px 10px;
+        border-radius: var(--authui-radius-sm);
+        border: 0;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        font-size: 14px;
+        cursor: pointer;
+        text-align: start;
+        width: 100%;
+      }
+      .menu-item:hover,
+      .menu-item:focus-visible {
+        background: var(--authui-accent);
+        outline: none;
+      }
+      .menu-item svg {
+        width: 16px;
+        height: 16px;
+        color: var(--authui-muted-foreground);
+      }
+      .avatar {
+        width: 32px;
+        height: 32px;
+        font-size: 13px;
+      }
+    `
+];
+q([
+  g({ type: String })
+], I.prototype, "src", 2);
+q([
+  d()
+], I.prototype, "menuOpen", 2);
+I = q([
+  S("authui-user-button")
+], I);
+export {
+  rt as A,
+  b as E,
+  o as a,
+  p as b,
+  Ut as c,
+  M as d,
+  v as e,
+  x as f,
+  P as g,
+  $ as h,
+  Y as i,
+  K as j,
+  I as k,
+  et as l,
+  Z as m,
+  R as o,
+  E as p,
+  _ as t
+};