@getauthui/core 0.1.0 → 0.1.2

package/dist/{authui-user-button-3yi-kvES.js → authui-user-button-C64OcOdr.js}

@@ -1,7 +1,7 @@
-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 = {
+import { state as d, property as f, customElement as _, query as rt } from "lit/decorators.js";
+import { css as I, LitElement as X, nothing as o, html as s, svg as l } from "lit";
+import { Client as ot, Account as ct, ID as V, Avatars as lt } from "appwrite";
+const dt = {
   signIn: "Sign in",
   signUp: "Sign up",
   signOut: "Sign out",
@@ -120,15 +120,16 @@ const et = {
   provider: "Provider",
   lastActive: "Last active",
   guestAccount: "Guest account",
-  guestAccountDescription: "Add an email and password to keep your data."
+  guestAccountDescription: "Add an email and password to keep your data.",
+  preview: "Preview"
 };
-function it(e, t = {}) {
+function ht(e, t = {}) {
   return e.replace(
     /\{(\w+)\}/g,
     (i, r) => r in t ? String(t[r]) : `{${r}}`
   );
 }
-const st = {
+const ut = {
   amazon: "Amazon",
   apple: "Apple",
   appwrite: "Appwrite",
@@ -179,10 +180,376 @@ const st = {
   zoho: "Zoho",
   zoom: "Zoom"
 };
-function E(e) {
-  return st[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
+function D(e) {
+  return ut[e] ?? e.charAt(0).toUpperCase() + e.slice(1);
 }
-const b = {
+const q = (e, t, i = 401) => Object.assign(new Error(t), { type: e, code: i }), P = () => (/* @__PURE__ */ new Date()).toISOString(), M = (e) => new Date(Date.now() - e * 6e4).toISOString(), T = [
+  "amber",
+  "brave",
+  "calm",
+  "delta",
+  "ember",
+  "fable",
+  "glide",
+  "harbor",
+  "ivory",
+  "juniper",
+  "kite",
+  "lumen"
+], Z = () => `${T[Math.floor(Math.random() * T.length)]}-${T[Math.floor(Math.random() * T.length)]}`, F = () => Math.random().toString(36).slice(2, 12), J = () => Array.from({ length: 2 }, () => Math.random().toString(36).slice(2, 7)).join("-"), pt = {
+  name: "Ada Lovelace",
+  email: "ada@example.com",
+  phone: "+15550100"
+};
+class ft {
+  constructor(t = pt) {
+    this.seed = t, this.user = null, this.mfaPending = !1, this.mfaEnabled = !1, this.totpEnrolled = !1, this.recoveryCodes = [], this.lastChallenge = 0, this.sessions = [], this.identities = [], this.logs = [], this.tokens = /* @__PURE__ */ new Map(), this.pendingAuthenticator = null;
+  }
+  // ───────────────────────── helpers ─────────────────────────
+  makeUser(t = {}) {
+    const i = t.anonymous ?? !1;
+    return this.user = {
+      $id: "preview-user",
+      $createdAt: M(1440 * 30),
+      $updatedAt: P(),
+      name: i ? "" : t.name ?? this.seed.name,
+      registration: M(1440 * 30),
+      status: !0,
+      labels: [],
+      passwordUpdate: i ? "" : M(1440 * 7),
+      email: i ? "" : t.email ?? this.seed.email,
+      phone: i ? "" : t.phone ?? this.seed.phone,
+      emailVerification: !i,
+      phoneVerification: !1,
+      mfa: this.mfaEnabled,
+      prefs: {},
+      targets: [],
+      accessedAt: P()
+    }, this.seedActivity(i ? "anonymous" : "email"), this.user;
+  }
+  seedActivity(t) {
+    if (this.sessions.length > 0) return;
+    const i = {
+      $createdAt: P(),
+      $updatedAt: P(),
+      userId: "preview-user",
+      expire: new Date(Date.now() + 365 * 864e5).toISOString(),
+      providerUid: "",
+      providerAccessToken: "",
+      providerAccessTokenExpiry: "",
+      providerRefreshToken: "",
+      clientType: "browser",
+      clientCode: "CH",
+      clientEngine: "Blink",
+      clientEngineVersion: "128",
+      deviceName: "desktop",
+      deviceBrand: "",
+      deviceModel: "",
+      factors: ["password"],
+      secret: "",
+      mfaUpdatedAt: ""
+    };
+    this.sessions = [
+      {
+        ...i,
+        $id: "current",
+        provider: t,
+        ip: "203.0.113.24",
+        osCode: "MAC",
+        osName: "macOS",
+        osVersion: "15",
+        clientName: "Chrome",
+        clientVersion: "128",
+        countryCode: "de",
+        countryName: "Germany",
+        current: !0
+      },
+      {
+        ...i,
+        $id: F(),
+        $createdAt: M(300),
+        provider: t,
+        ip: "198.51.100.7",
+        osCode: "IOS",
+        osName: "iOS",
+        osVersion: "18",
+        clientName: "Safari",
+        clientVersion: "18",
+        clientType: "browser",
+        deviceName: "smartphone",
+        countryCode: "de",
+        countryName: "Germany",
+        current: !1
+      },
+      {
+        ...i,
+        $id: F(),
+        $createdAt: M(1440 * 3),
+        provider: "oauth2",
+        ip: "192.0.2.90",
+        osCode: "WIN",
+        osName: "Windows",
+        osVersion: "11",
+        clientName: "Firefox",
+        clientVersion: "130",
+        countryCode: "us",
+        countryName: "United States",
+        current: !1
+      }
+    ], this.identities = [
+      {
+        $id: "identity-github",
+        $createdAt: M(1440 * 20),
+        $updatedAt: M(1440 * 20),
+        userId: "preview-user",
+        provider: "github",
+        providerUid: "8675309",
+        providerEmail: this.seed.email,
+        providerAccessToken: "",
+        providerAccessTokenExpiry: "",
+        providerRefreshToken: ""
+      }
+    ], this.logs = [
+      {
+        event: "session.create",
+        time: P(),
+        clientName: "Chrome",
+        osName: "macOS",
+        countryName: "Germany",
+        ip: "203.0.113.24"
+      },
+      {
+        event: "user.update.name",
+        time: M(1440 * 2),
+        clientName: "Safari",
+        osName: "iOS",
+        countryName: "Germany",
+        ip: "198.51.100.7"
+      },
+      {
+        event: "session.create",
+        time: M(1440 * 3),
+        clientName: "Firefox",
+        osName: "Windows",
+        countryName: "United States",
+        ip: "192.0.2.90"
+      }
+    ];
+  }
+  requireUser() {
+    if (!this.user)
+      throw q("general_unauthorized_scope", "User (role: guests) missing scope (account)");
+    if (this.mfaPending)
+      throw q(
+        "user_more_factors_required",
+        "More factors are required to complete the sign in process."
+      );
+    return this.user;
+  }
+  requireRecentChallenge() {
+    if (Date.now() - this.lastChallenge > 30 * 6e4)
+      throw q(
+        "user_challenge_required",
+        "A recently successful challenge is required to complete this action."
+      );
+  }
+  afterPrimarySignIn() {
+    const t = this.totpEnrolled || this.user?.emailVerification;
+    this.mfaPending = !!(this.user?.mfa && t);
+  }
+  async delay(t, i = 150) {
+    return await new Promise((r) => setTimeout(r, i)), typeof t == "function" ? t() : t;
+  }
+  /** Sign the preview user in directly (used by the playground). */
+  signInDirectly() {
+    this.user || this.makeUser(), this.mfaPending = !1;
+  }
+  // ───────────────────────── account ─────────────────────────
+  async get() {
+    return this.delay(() => this.requireUser(), 120);
+  }
+  async create(t, i, r, a) {
+    return this.delay(() => this.makeUser({ email: i, name: a || i.split("@")[0] }));
+  }
+  async createEmailPasswordSession(t) {
+    return this.delay(() => ((!this.user || this.user.email !== t) && this.makeUser({ email: t, name: this.user?.name || this.seed.name }), this.afterPrimarySignIn(), this.sessions[0]));
+  }
+  async createAnonymousSession() {
+    return this.delay(() => (this.makeUser({ anonymous: !0 }), this.mfaPending = !1, this.sessions[0]));
+  }
+  async createOAuth2Token(t) {
+    return this.delay(() => {
+      this.makeUser({ email: `ada@${t}.example`, name: this.seed.name }), this.afterPrimarySignIn();
+    }, 800);
+  }
+  async createMagicURLToken(t, i) {
+    return this.tokens.set(t, { email: i }), this.delay({
+      $id: F(),
+      $createdAt: P(),
+      userId: t,
+      secret: "",
+      expire: "",
+      phrase: Z()
+    });
+  }
+  async createEmailToken(t, i) {
+    return this.tokens.set(t, { email: i }), this.delay({
+      $id: F(),
+      $createdAt: P(),
+      userId: t,
+      secret: "",
+      expire: "",
+      phrase: Z()
+    });
+  }
+  async createPhoneToken(t, i) {
+    return this.tokens.set(t, { phone: i }), this.delay({ $id: F(), $createdAt: P(), userId: t, secret: "", expire: "", phrase: "" });
+  }
+  async createSession(t) {
+    return this.delay(() => {
+      const i = this.tokens.get(t) ?? {};
+      return this.makeUser({ email: i.email ?? this.seed.email, phone: i.phone ?? this.seed.phone }), i.phone && (this.user.phoneVerification = !0), this.afterPrimarySignIn(), this.sessions[0];
+    });
+  }
+  async createRecovery() {
+    return this.delay({});
+  }
+  async updateRecovery() {
+    return this.delay({});
+  }
+  async createEmailVerification() {
+    return this.delay({});
+  }
+  async updateEmailVerification() {
+    return this.delay(() => (this.user && (this.user.emailVerification = !0), {}));
+  }
+  async createPhoneVerification() {
+    return this.delay({});
+  }
+  async updatePhoneVerification() {
+    return this.delay(() => (this.user && (this.user.phoneVerification = !0), {}));
+  }
+  async getPrefs() {
+    return this.delay(() => ({ ...this.requireUser().prefs }));
+  }
+  async updatePrefs(t) {
+    return this.delay(() => {
+      const i = this.requireUser();
+      return i.prefs = { ...t }, i;
+    });
+  }
+  async updateName(t) {
+    return this.delay(() => (this.requireUser().name = t, this.user));
+  }
+  async updateEmail(t) {
+    return this.delay(() => {
+      const i = this.requireUser();
+      return i.email = t, i.emailVerification = !1, i.passwordUpdate = P(), i;
+    });
+  }
+  async updatePhone(t) {
+    return this.delay(() => {
+      const i = this.requireUser();
+      return i.phone = t, i.phoneVerification = !1, i;
+    });
+  }
+  async updatePassword() {
+    return this.delay(() => {
+      const t = this.requireUser();
+      return t.passwordUpdate = P(), t;
+    });
+  }
+  async updateStatus() {
+    return this.delay(() => (this.requireUser(), this.reset(), this.mfaEnabled = !1, this.totpEnrolled = !1, this.recoveryCodes = [], {}));
+  }
+  // ───────────────────────── sessions ─────────────────────────
+  async listSessions() {
+    return this.delay(() => (this.requireUser(), { total: this.sessions.length, sessions: this.sessions }));
+  }
+  async deleteSession(t = "current") {
+    return this.delay(() => (t === "current" ? this.reset() : this.sessions = this.sessions.filter((i) => i.$id !== t), {}));
+  }
+  async deleteSessions() {
+    return this.delay(() => (this.reset(), {}));
+  }
+  async listIdentities() {
+    return this.delay(() => (this.requireUser(), { total: this.identities.length, identities: this.identities }));
+  }
+  async deleteIdentity(t) {
+    return this.delay(() => (this.identities = this.identities.filter((i) => i.$id !== t), {}));
+  }
+  async listLogs() {
+    return this.delay(() => (this.requireUser(), { total: this.logs.length, logs: this.logs }));
+  }
+  // ───────────────────────── MFA ─────────────────────────
+  async listMFAFactors() {
+    return this.delay({
+      totp: this.totpEnrolled,
+      email: !!this.user?.emailVerification,
+      phone: !!this.user?.phoneVerification,
+      recoveryCode: this.recoveryCodes.length > 0,
+      custom: !1
+    });
+  }
+  async createMFAChallenge() {
+    return this.delay({ $id: F(), $createdAt: P(), userId: "preview-user", expire: "" });
+  }
+  async updateMFAChallenge() {
+    return this.delay(() => (this.mfaPending = !1, this.lastChallenge = Date.now(), this.sessions[0]));
+  }
+  async updateMFA(t) {
+    return this.delay(() => {
+      const i = this.requireUser();
+      return this.mfaEnabled = t, i.mfa = t, i;
+    });
+  }
+  async createMFAAuthenticator() {
+    return this.delay(() => {
+      const t = "JBSWY3DPEHPK3PXP";
+      return this.pendingAuthenticator = {
+        secret: t,
+        uri: `otpauth://totp/Preview:${encodeURIComponent(this.user?.email ?? "user")}?secret=${t}&issuer=Preview`
+      }, this.pendingAuthenticator;
+    });
+  }
+  async updateMFAAuthenticator() {
+    return this.delay(() => (this.totpEnrolled = !0, this.pendingAuthenticator = null, this.lastChallenge = Date.now(), this.requireUser()));
+  }
+  async deleteMFAAuthenticator() {
+    return this.delay(() => (this.requireRecentChallenge(), this.totpEnrolled = !1, {}));
+  }
+  async createMFARecoveryCodes() {
+    return this.delay(() => {
+      if (this.recoveryCodes.length > 0)
+        throw q("user_recovery_codes_already_exists", "Recovery codes already generated.", 409);
+      return this.recoveryCodes = Array.from({ length: 6 }, J), { recoveryCodes: this.recoveryCodes };
+    });
+  }
+  async getMFARecoveryCodes() {
+    return this.delay(() => (this.requireRecentChallenge(), { recoveryCodes: this.recoveryCodes }));
+  }
+  async updateMFARecoveryCodes() {
+    return this.delay(() => (this.requireRecentChallenge(), this.recoveryCodes = Array.from({ length: 6 }, J), { recoveryCodes: this.recoveryCodes }));
+  }
+  /** Forget everything, as a sign out would. */
+  reset() {
+    this.user = null, this.mfaPending = !1, this.sessions = [], this.identities = [], this.logs = [], this.tokens.clear();
+  }
+}
+function mt(e) {
+  let t = 2166136261;
+  const i = () => (t ^= t << 13, t ^= t >>> 17, t ^= t << 5, (t >>> 0) / 4294967296);
+  for (const x of e) t = (t ^ x.charCodeAt(0)) * 16777619;
+  const r = 25;
+  let a = "";
+  const h = (x, S) => `<rect x="${x}" y="${S}" width="7" height="7"/><rect x="${x + 1}" y="${S + 1}" width="5" height="5" fill="#fff"/><rect x="${x + 2}" y="${S + 2}" width="3" height="3"/>`;
+  for (let x = 0; x < r; x++)
+    for (let S = 0; S < r; S++)
+      !(S < 8 && x < 8 || S >= r - 8 && x < 8 || S < 8 && x >= r - 8) && i() < 0.45 && (a += `<rect x="${S}" y="${x}" width="1" height="1"/>`);
+  const u = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${r} ${r}" shape-rendering="crispEdges"><rect width="${r}" height="${r}" fill="#fff"/><g fill="#000">${h(0, 0)}${h(r - 7, 0)}${h(0, r - 7)}${a}</g></svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(u)}`;
+}
+const v = {
   moreFactorsRequired: "user_more_factors_required",
   invalidCredentials: "user_invalid_credentials",
   userAlreadyExists: "user_already_exists",
@@ -214,7 +581,7 @@ const b = {
   countMaxExceeded: "user_count_exceeded",
   targetAlreadyExists: "user_target_already_exists"
 };
-function _(e) {
+function N(e) {
   if (e && typeof e == "object") {
     const t = e;
     return {
@@ -225,44 +592,44 @@ function _(e) {
   }
   return { message: String(e), type: "", code: 0 };
 }
-function F(e, t) {
-  return _(e).type === t;
+function B(e, t) {
+  return N(e).type === t;
 }
-function Z(e, t, i = "link") {
-  const r = _(e);
+function at(e, t, i = "link") {
+  const r = N(e);
   switch (r.type) {
-    case b.invalidCredentials:
+    case v.invalidCredentials:
       return t.errorInvalidCredentials;
-    case b.userAlreadyExists:
-    case b.emailAlreadyExists:
-    case b.phoneAlreadyExists:
+    case v.userAlreadyExists:
+    case v.emailAlreadyExists:
+    case v.phoneAlreadyExists:
       return t.errorUserExists;
-    case b.userBlocked:
+    case v.userBlocked:
       return t.errorUserBlocked;
-    case b.rateLimit:
+    case v.rateLimit:
       return t.errorRateLimit;
-    case b.invalidToken:
+    case v.invalidToken:
       return i === "code" ? t.errorInvalidCode : t.errorInvalidToken;
-    case b.invalidCode:
+    case v.invalidCode:
       return t.errorInvalidCode;
-    case b.passwordMismatch:
+    case v.passwordMismatch:
       return t.errorPasswordMismatch;
-    case b.passwordRecentlyUsed:
+    case v.passwordRecentlyUsed:
       return t.errorPasswordRecentlyUsed;
-    case b.passwordPersonalData:
+    case v.passwordPersonalData:
       return t.errorPasswordPersonalData;
-    case b.passwordWeak:
+    case v.passwordWeak:
       return t.errorPasswordWeak;
-    case b.passwordPwned:
+    case v.passwordPwned:
       return t.errorPasswordPwned;
-    case b.challengeRequired:
+    case v.challengeRequired:
       return t.errorChallengeRequired;
-    case b.sessionAlreadyExists:
+    case v.sessionAlreadyExists:
       return t.errorSessionExists;
-    case b.oauthUnauthorized:
-    case b.oauthBadRequest:
+    case v.oauthUnauthorized:
+    case v.oauthBadRequest:
       return t.errorOAuth;
-    case b.authMethodUnsupported:
+    case v.authMethodUnsupported:
       return t.errorMethodDisabled;
   }
   return r.code === 0 && /fetch|network/i.test(r.message) ? t.errorNetwork : r.message || t.errorGeneric;
@@ -277,25 +644,33 @@ function k(e, t, i) {
     new Error(`Appwrite SDK is missing ${t[0]}(). Update the appwrite package.`)
   );
 }
-const D = "authui", N = ["userId", "secret", "expire", "project", "error", D], j = () => ({
+const G = "authui", tt = ["userId", "secret", "expire", "project", "error", G], et = () => ({
   status: "loading",
   user: null,
   mfaFactors: null,
   pending: null,
   configured: !1
 });
-class rt {
+class gt {
   constructor() {
-    this.client = null, this.account = null, this.config = null, this.state = j(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null;
+    this.client = null, this.account = null, this.config = null, this.state = et(), this.listeners = /* @__PURE__ */ new Map(), this.refreshPromise = null, this.preview = 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());
+    this.config = t, this.client = new ot().setEndpoint(t.endpoint).setProject(t.project), this.preview = t.preview ? new ft() : null, this.account = this.preview ? this.preview : new ct(this.client), this.setState({ configured: !0, status: "loading" }), this.preview ? this.refresh() : typeof window < "u" && this.handleRedirect().then(() => this.refresh());
   }
   get isConfigured() {
     return this.config !== null;
   }
+  /** True when running against the in-memory preview account. */
+  get isPreview() {
+    return this.preview !== null;
+  }
+  /** Preview only: sign the sample user in without any form. */
+  async previewSignIn() {
+    this.preview && (this.preview.signInDirectly(), await this.refresh());
+  }
   getConfig() {
     return this.config;
   }
@@ -303,8 +678,15 @@ class rt {
   getClient() {
     return this.client;
   }
+  /**
+   * The Account service Auth UI talks to. Reuse it for prefs, JWTs or anything else
+   * on the signed-in account. In preview mode this is the in-memory stand-in.
+   */
+  getAccount() {
+    return this.account;
+  }
   getStrings() {
-    return { ...et, ...this.config?.strings ?? {} };
+    return { ...dt, ...this.config?.strings ?? {} };
   }
   getState() {
     return { ...this.state };
@@ -330,7 +712,7 @@ class rt {
     this.state = { ...this.state, ...t }, this.emit("change", this.getState());
   }
   fail(t) {
-    const i = _(t);
+    const i = N(t);
     throw this.emit("error", i), t;
   }
   acct() {
@@ -350,7 +732,7 @@ class rt {
         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)) {
+        if (B(i, v.moreFactorsRequired)) {
           let r = null;
           try {
             r = await k(
@@ -384,7 +766,7 @@ class rt {
   }
   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);
+      await this.acct().create(V.unique(), t.trim(), i, r?.trim() || void 0), await this.acct().createEmailPasswordSession(t.trim(), i);
     } catch (a) {
       this.fail(a);
     }
@@ -398,24 +780,36 @@ class rt {
     }
     await this.afterSignIn();
   }
-  /** Redirects the browser to the provider. Never resolves in a browser. */
-  signInWithOAuth(t) {
+  /**
+   * Redirects the browser to the provider; the returned promise only resolves in
+   * preview mode, where the sign in completes in place.
+   */
+  async signInWithOAuth(t) {
     const i = this.config?.oauthScopes?.[t];
+    let r;
     try {
-      this.acct().createOAuth2Token(
+      r = this.acct().createOAuth2Token(
         t,
         this.redirectUrl("oauth"),
         this.redirectUrl("oauth-failed"),
         i
       );
-    } catch (r) {
-      this.fail(r);
+    } catch (a) {
+      this.fail(a);
+    }
+    if (r && typeof r.then == "function") {
+      try {
+        await r;
+      } catch (a) {
+        this.fail(a);
+      }
+      await this.afterSignIn();
     }
   }
   async sendMagicUrl(t) {
     try {
       return await this.acct().createMagicURLToken(
-        z.unique(),
+        V.unique(),
         t.trim(),
         this.redirectUrl("magic-url"),
         this.config?.securityPhrase ?? !0
@@ -427,7 +821,7 @@ class rt {
   async sendEmailOtp(t) {
     try {
       return await this.acct().createEmailToken(
-        z.unique(),
+        V.unique(),
         t.trim(),
         this.config?.securityPhrase ?? !0
       );
@@ -437,7 +831,7 @@ class rt {
   }
   async sendPhoneOtp(t) {
     try {
-      return await this.acct().createPhoneToken(z.unique(), t.replace(/[\s()-]/g, ""));
+      return await this.acct().createPhoneToken(V.unique(), t.replace(/[\s()-]/g, ""));
     } catch (i) {
       return this.fail(i);
     }
@@ -703,8 +1097,8 @@ class rt {
   /** 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();
+    for (const a of tt) r.searchParams.delete(a);
+    return r.searchParams.set(G, t), r.toString();
   }
   setPending(t) {
     this.setState({ pending: t });
@@ -715,7 +1109,7 @@ class rt {
    */
   async handleRedirect() {
     if (typeof window > "u") return !1;
-    const t = new URLSearchParams(window.location.search), i = t.get(D);
+    const t = new URLSearchParams(window.location.search), i = t.get(G);
     if (!i) return !1;
     const r = t.get("userId") ?? "", a = t.get("secret") ?? "";
     this.cleanUrl();
@@ -745,24 +1139,24 @@ class rt {
           }));
           break;
       }
-    } catch (u) {
-      const h = _(u);
-      this.emit("error", h), this.setState({ pending: { type: "notice", message: h.message, tone: "error" } });
+    } catch (h) {
+      const u = N(h);
+      this.emit("error", u), this.setState({ pending: { type: "notice", message: u.message, tone: "error" } });
     }
     return !0;
   }
   cleanUrl() {
     const t = new URL(window.location.href);
-    for (const i of N) t.searchParams.delete(i);
+    for (const i of tt) 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();
+    this.client = null, this.account = null, this.preview = null, this.config = null, this.state = et(), this.listeners.clear();
   }
 }
-const o = new rt();
-class at {
+const n = new gt();
+class vt {
   constructor() {
     this.listeners = /* @__PURE__ */ new Set(), this.observer = null, this.media = null, this.notify = () => {
       const t = this.isDark("auto");
@@ -790,14 +1184,14 @@ class at {
     this.observer?.disconnect(), this.observer = null, this.media?.removeEventListener?.("change", this.notify), this.media = null;
   }
 }
-const W = new at(), G = {
+const it = new vt(), st = {
   none: "0px",
   sm: "0.25rem",
   md: "0.625rem",
   lg: "0.875rem",
   xl: "1.125rem",
   full: "1.5rem"
-}, ot = A`
+}, bt = I`
   :host {
     /* Light theme (matches :root in the console) */
     --authui-background: oklch(1 0 0);
@@ -875,7 +1269,7 @@ const W = new at(), G = {
     --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`
+`, yt = I`
   *,
   *::before,
   *::after {
@@ -1378,6 +1772,12 @@ const W = new at(), G = {
     gap: 8px;
     flex-wrap: wrap;
   }
+  .row-title svg {
+    width: 16px;
+    height: 16px;
+    color: var(--authui-muted-foreground);
+    flex-shrink: 0;
+  }
   .row-sub {
     font-size: 12px;
     color: var(--authui-muted-foreground);
@@ -1612,62 +2012,65 @@ const W = new at(), G = {
     }
   }
 `;
-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 {
+var wt = Object.defineProperty, $t = (e, t, i, r) => {
+  for (var a = void 0, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (a = u(t, i, a) || a);
+  return a && wt(t, i, a), a;
+}, U;
+const nt = (U = class extends X {
   constructor() {
-    super(...arguments), this.auth = o.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
+    super(...arguments), this.auth = n.getState(), this.unsubscribeStore = null, this.unsubscribeTheme = null, this.stopKeys = (t) => t.stopPropagation();
   }
   connectedCallback() {
-    super.connectedCallback(), this.auth = o.getState(), this.unsubscribeStore = o.on("change", (t) => {
+    super.connectedCallback();
+    for (const t of U.KEY_EVENTS) this.addEventListener(t, this.stopKeys);
+    this.auth = n.getState(), this.unsubscribeStore = n.on("change", (t) => {
       this.auth = t, this.applyBranding();
-    }), this.unsubscribeTheme = W.subscribe(() => this.applyBranding()), this.applyBranding();
+    }), this.unsubscribeTheme = it.subscribe(() => this.applyBranding()), this.applyBranding();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.unsubscribeStore?.(), this.unsubscribeTheme?.(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
+    super.disconnectedCallback();
+    for (const t of U.KEY_EVENTS) this.removeEventListener(t, this.stopKeys);
+    this.unsubscribeStore?.(), this.unsubscribeTheme?.(), this.unsubscribeStore = null, this.unsubscribeTheme = null;
   }
   get strings() {
-    return o.getStrings();
+    return n.getStrings();
   }
   /** Translate a string key with optional `{placeholders}`. */
   t(t, i) {
-    return it(this.strings[t], i);
+    return ht(this.strings[t], i);
   }
   get config() {
-    return o.getConfig();
+    return n.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");
+    const t = this.config?.branding, i = it.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]);
+    )), t?.radius && st[t.radius] && this.style.setProperty("--authui-radius", st[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([
+}, U.styles = [bt, yt], U.KEY_EVENTS = ["keydown", "keyup", "keypress"], U);
+$t([
   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;
+], nt.prototype, "auth");
+let A = nt;
+var xt = Object.defineProperty, kt = Object.getOwnPropertyDescriptor, y = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? kt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
+  return r && a && xt(t, i, a), a;
 };
-let v = class extends V {
+let b = class extends X {
   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 = "";
+    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 = "", this.preview = "";
   }
   connectedCallback() {
     super.connectedCallback(), this.configure();
@@ -1677,8 +2080,8 @@ let v = class extends V {
   }
   configure() {
     if (!this.endpoint || !this.project) return;
-    const e = this.toConfig(), t = o.getConfig();
-    t && JSON.stringify(t) === JSON.stringify(e) || o.configure(e);
+    const e = this.toConfig(), t = n.getConfig();
+    t && JSON.stringify(t) === JSON.stringify(e) || n.configure(e);
   }
   toConfig() {
     const e = { oauth: [] };
@@ -1705,115 +2108,121 @@ let v = class extends V {
       legal: {
         termsUrl: this.termsUrl || void 0,
         privacyUrl: this.privacyUrl || void 0
-      }
+      },
+      preview: this.preview === "" || this.preview === "false" ? void 0 : !0
     };
   }
 };
-v.styles = A`
+b.styles = I`
     :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;
+y([
+  f({ type: String })
+], b.prototype, "endpoint", 2);
+y([
+  f({ type: String })
+], b.prototype, "project", 2);
+y([
+  f({ type: String, attribute: "redirect-url" })
+], b.prototype, "redirectUrl", 2);
+y([
+  f({ type: String, attribute: "success-url" })
+], b.prototype, "successUrl", 2);
+y([
+  f({ type: String })
+], b.prototype, "methods", 2);
+y([
+  f({ type: String, attribute: "sign-up" })
+], b.prototype, "signUp", 2);
+y([
+  f({ type: String, attribute: "require-name" })
+], b.prototype, "requireName", 2);
+y([
+  f({ type: String })
+], b.prototype, "mfa", 2);
+y([
+  f({ type: String, attribute: "security-phrase" })
+], b.prototype, "securityPhrase", 2);
+y([
+  f({ type: String })
+], b.prototype, "name", 2);
+y([
+  f({ type: String })
+], b.prototype, "logo", 2);
+y([
+  f({ type: String })
+], b.prototype, "theme", 2);
+y([
+  f({ type: String })
+], b.prototype, "radius", 2);
+y([
+  f({ type: String })
+], b.prototype, "primary", 2);
+y([
+  f({ type: String, attribute: "primary-foreground" })
+], b.prototype, "primaryForeground", 2);
+y([
+  f({ type: String, attribute: "terms-url" })
+], b.prototype, "termsUrl", 2);
+y([
+  f({ type: String, attribute: "privacy-url" })
+], b.prototype, "privacyUrl", 2);
+y([
+  f({ type: String })
+], b.prototype, "preview", 2);
+b = y([
+  _("authui-config")
+], b);
+var Ct = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, H = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Pt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
+  return r && a && Ct(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);
+  e.id = "authui-fouc", e.textContent = "authui-show:not([ready]){display:none}", document.head.appendChild(e);
+}
+const St = ["loading", "signed-out", "signed-in", "mfa-required"];
+function W(e) {
+  return e ? e.split(/[\s,]+/).map((t) => t.trim()).filter((t) => St.includes(t)) : [];
 }
-class T extends V {
+let L = class extends X {
   constructor() {
-    super(...arguments), this.show = !1, this.unsubscribe = null;
+    super(...arguments), this.when = "", this.unless = "", this.status = n.getState().status, this.unsubscribe = null;
   }
   connectedCallback() {
-    super.connectedCallback(), this.evaluate(o.getState().status), this.unsubscribe = o.on("change", (t) => this.evaluate(t.status));
+    super.connectedCallback(), this.status = n.getState().status, this.unsubscribe = n.on("change", (e) => this.status = e.status);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.unsubscribe?.();
+    super.disconnectedCallback(), this.unsubscribe?.(), this.unsubscribe = null;
   }
-  evaluate(t) {
-    t !== "loading" && (this.show = this.shouldShow(t), this.setAttribute("ready", ""), this.style.display = "contents");
+  /** Whether the current status satisfies `when` and `unless`. */
+  get visible() {
+    const e = W(this.when), t = W(this.unless);
+    return !(this.status === "loading" && !e.includes("loading") || e.length > 0 && !e.includes(this.status) || t.includes(this.status));
   }
-  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";
+  updated() {
+    (this.status !== "loading" || W(this.when).includes("loading")) && (this.setAttribute("ready", ""), this.style.display = "contents");
   }
-};
-Y = B([
-  S("authui-signed-in")
-], Y);
-let K = class extends T {
-  shouldShow(e) {
-    return e !== "signed-in";
+  render() {
+    return this.visible ? s`<slot></slot>` : o;
   }
 };
-K = B([
-  S("authui-signed-out")
-], K);
-const ft = A`
+H([
+  f({ type: String })
+], L.prototype, "when", 2);
+H([
+  f({ type: String })
+], L.prototype, "unless", 2);
+H([
+  d()
+], L.prototype, "status", 2);
+L = H([
+  _("authui-show")
+], L);
+const At = I`
   :host {
     display: block;
     width: 100%;
@@ -1845,6 +2254,10 @@ const ft = A`
   .header:empty {
     display: none;
   }
+  .header .preview {
+    align-self: center;
+    margin-bottom: 4px;
+  }
   .alert .dismiss {
     position: absolute;
     top: 4px;
@@ -1857,7 +2270,7 @@ const ft = A`
     height: 14px;
     margin: 0;
   }
-`, f = (e) => s`<svg
+`, m = (e) => s`<svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     fill="none"
@@ -1869,169 +2282,173 @@ const ft = A`
   >
     ${e}
   </svg>`, c = {
-  mail: f(
+  mail: m(
     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(
+  phone: m(
     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(
+  user: m(
     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(
+  userX: m(
     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(
+  lock: m(
     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(
+  key: m(
     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(
+  shield: m(
     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(
+  shieldCheck: m(
     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(
+  smartphone: m(
     l`<rect width="14" height="20" x="5" y="2" rx="2" ry="2"/><path d="M12 18h.01"/>`
   ),
-  monitor: f(
+  monitor: m(
     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(
+  globe: m(
     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(
+  logOut: m(
     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(
+  settings: m(
     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(
+  x: m(l`<path d="M18 6 6 18"/><path d="m6 6 12 12"/>`),
+  check: m(l`<path d="M20 6 9 17l-5-5"/>`),
+  copy: m(
     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(
+  eye: m(
     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(
+  eyeOff: m(
     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(
+  arrowLeft: m(l`<path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>`),
+  alert: m(
     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(
+  info: m(l`<circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/>`),
+  checkCircle: m(l`<circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/>`),
+  link: m(
     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(
+  activity: m(
     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(
+  trash: m(
     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(
+  sparkles: m(
     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(
+  refresh: m(
     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(
+  chevronDown: m(l`<path d="m6 9 6 6 6-6"/>`),
+  ghost: m(
     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(
+  qr: m(
     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(
+}, w = (e, t = "0 0 24 24") => s`<svg xmlns="http://www.w3.org/2000/svg" viewBox=${t} aria-hidden="true">${e}</svg>`, Mt = {
+  google: w(
     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(
+  github: w(
     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(
+  apple: w(
     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(
+  facebook: w(
     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(
+  x: w(
     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(
+  microsoft: w(
     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(
+  discord: w(
     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(
+  gitlab: w(
     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(
+  linkedin: w(
     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(
+  slack: w(
     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(
+  twitch: w(
     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(
+  spotify: w(
     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(
+  notion: w(
     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(
+  dropbox: w(
     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(
+  figma: w(
     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(
+  bitbucket: w(
     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(
+  amazon: w(
     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(
+  paypal: w(
     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;
+function K(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;
+var Ut = Object.defineProperty, Et = Object.getOwnPropertyDescriptor, C = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Et(t, i) : t, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
+  return r && a && Ut(t, i, a), a;
 };
-let $ = class extends x {
+let $ = class extends A {
   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" });
+        await n.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" });
+        await n.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" });
+        await n.signInAnonymously(), this.fire("authui-success", { method: "anonymous" });
       });
     }, this.onOAuth = (e) => {
       this.run(async () => {
-        o.signInWithOAuth(e), await new Promise((t) => setTimeout(t, 4e3));
+        if (await n.signInWithOAuth(e), n.isPreview) {
+          this.fire("authui-success", { method: "oauth" });
+          return;
+        }
+        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 }) };
+        await n.sendPasswordRecovery(this.email), this.notice = { tone: "success", message: this.t("resetLinkSent", { email: this.email }) };
       });
     }, this.onReset = (e) => {
       if (e.preventDefault(), this.password !== this.passwordConfirm) {
@@ -2040,11 +2457,11 @@ let $ = class extends x {
       }
       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");
+        await n.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);
+        const t = await n.sendMagicUrl(this.email);
         this.token = {
           userId: t.userId,
           kind: "magic-url",
@@ -2054,7 +2471,7 @@ let $ = class extends x {
       });
     }, this.onEmailOtp = (e) => {
       e.preventDefault(), this.run(async () => {
-        const t = await o.sendEmailOtp(this.email);
+        const t = await n.sendEmailOtp(this.email);
         this.token = {
           userId: t.userId,
           kind: "email-otp",
@@ -2064,37 +2481,37 @@ let $ = class extends x {
       });
     }, this.onPhoneOtp = (e) => {
       e.preventDefault(), this.run(async () => {
-        const t = await o.sendPhoneOtp(this.phone);
+        const t = await n.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 });
+        await n.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);
+        const t = await n.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" });
+        await n.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();
+          await n.signOut();
         } catch (e) {
-          if (!F(e, b.sessionNotFound)) throw e;
+          if (!B(e, v.sessionNotFound)) throw e;
         }
         this.go("sign-in");
       });
     }, this.onSignOut = () => {
-      this.run(() => o.signOut());
+      this.run(() => n.signOut());
     };
   }
   connectedCallback() {
@@ -2109,10 +2526,10 @@ let $ = class extends x {
   /** 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 = {
+    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") }, n.setPending(null)), t?.type === "notice" && (this.notice = {
       tone: t.tone === "error" ? "error" : t.tone,
       message: t.message
-    }, o.setPending(null));
+    }, n.setPending(null));
   }
   /** Navigate between screens and reset transient state. */
   go(e) {
@@ -2125,7 +2542,7 @@ let $ = class extends x {
       try {
         await e();
       } catch (i) {
-        this.error = Z(i, this.strings, t);
+        this.error = at(i, this.strings, t);
       } finally {
         this.busy = !1;
       }
@@ -2152,7 +2569,7 @@ let $ = class extends x {
                 >
                   ${c.x}
                 </button>
-              </div>` : n}
+              </div>` : o}
         ${e}
       </div>
     `;
@@ -2184,9 +2601,10 @@ let $ = class extends x {
     }
     return s`
       <header class="header">
-        ${e ? s`<img class="logo" src=${e} alt=${t || "Logo"} />` : n}
+        ${e ? s`<img class="logo" src=${e} alt=${t || "Logo"} />` : o}
+        ${n.isPreview ? s`<span class="badge badge-info preview">${this.t("preview")}</span>` : o}
         <h2 class="title" id="authui-title">${i}</h2>
-        ${r ? s`<p class="description">${r}</p>` : n}
+        ${r ? s`<p class="description">${r}</p>` : o}
       </header>
     `;
   }
@@ -2194,11 +2612,11 @@ let $ = class extends x {
     return this.error ? s`<div class="alert alert-error" role="alert">
           ${c.alert}
           <div class="alert-body">${this.error}</div>
-        </div>` : n;
+        </div>` : o;
   }
   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}
+      ${this.busy ? s`<span class="spinner" aria-hidden="true"></span>` : o} ${e}
     </button>`;
   }
   passwordField(e) {
@@ -2212,7 +2630,7 @@ let $ = class extends x {
                   @click=${() => this.go("forgot-password")}
                 >
                   ${this.t("forgotPassword")}
-                </button>` : n}
+                </button>` : o}
         </label>
         <div class="input-wrap">
           <input
@@ -2235,7 +2653,7 @@ let $ = class extends x {
             ${this.showPassword ? c.eyeOff : c.eye}
           </button>
         </div>
-        ${e.hint ? s`<p class="hint">${e.hint}</p>` : n}
+        ${e.hint ? s`<p class="hint">${e.hint}</p>` : o}
       </div>
     `;
   }
@@ -2275,11 +2693,11 @@ let $ = class extends x {
   }
   legal() {
     const e = this.config?.legal;
-    return !e?.termsUrl && !e?.privacyUrl ? n : s`<p class="legal">
+    return !e?.termsUrl && !e?.privacyUrl ? o : 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}.
+      ${e.termsUrl ? s`<a href=${e.termsUrl} target="_blank" rel="noopener">${this.t("terms")}</a>` : o}
+      ${e.termsUrl && e.privacyUrl ? s` ${this.t("and")} ` : o}
+      ${e.privacyUrl ? s`<a href=${e.privacyUrl} target="_blank" rel="noopener">${this.t("privacy")}</a>` : o}.
     </p>`;
   }
   backLink(e = "sign-in") {
@@ -2326,7 +2744,7 @@ let $ = class extends x {
             <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}
+              ${e.email && e.name ? s`<span class="row-sub">${e.email}</span>` : o}
             </div>
           </div>
         </div>
@@ -2334,7 +2752,7 @@ let $ = class extends x {
         <div class="stack-sm">
           ${this.config?.successUrl ? s`<a class="btn btn-primary btn-block" href=${this.config.successUrl}
                   >${this.t("continue")}</a
-                >` : n}
+                >` : o}
           <button
             class="btn btn-outline btn-block"
             @click=${() => this.fire("authui-open", { view: "account" })}
@@ -2350,7 +2768,7 @@ let $ = class extends x {
   }
   renderProviders() {
     const e = this.config?.methods?.oauth ?? [];
-    if (e.length === 0) return n;
+    if (e.length === 0) return o;
     const t = e.length > 2;
     return s`
       <div class="providers ${t ? "two" : ""}">
@@ -2360,11 +2778,11 @@ let $ = class extends x {
               class="btn btn-outline"
               @click=${() => this.onOAuth(i)}
               ?disabled=${this.busy}
-              aria-label=${this.t("continueWith", { provider: E(i) })}
+              aria-label=${this.t("continueWith", { provider: D(i) })}
             >
-              ${L(i)}
+              ${K(i)}
               <span
-                >${t ? E(i) : this.t("continueWith", { provider: E(i) })}</span
+                >${t ? D(i) : this.t("continueWith", { provider: D(i) })}</span
               >
             </button>`
     )}
@@ -2380,7 +2798,7 @@ let $ = class extends x {
     return s`
       <div class="stack">
         ${this.renderProviders()}
-        ${i && (t || r.length > 0) ? s`<div class="separator-text">${this.t("or")}</div>` : n}
+        ${i && (t || r.length > 0) ? s`<div class="separator-text">${this.t("or")}</div>` : o}
         ${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 })}
@@ -2396,7 +2814,7 @@ let $ = class extends x {
                       ${a.icon} ${a.label}
                     </button>`
     )}
-              </div>` : n}
+              </div>` : o}
         ${e.anonymous ? s`<button
                 type="button"
                 class="btn btn-ghost btn-block"
@@ -2404,13 +2822,13 @@ let $ = class extends x {
                 ?disabled=${this.busy}
               >
                 ${c.ghost} ${this.t("continueAsGuest")}
-              </button>` : n}
+              </button>` : o}
         ${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}
+              </div>` : o}
         ${this.legal()}
       </div>
     `;
@@ -2419,7 +2837,7 @@ let $ = class extends x {
     return s`
       <div class="stack">
         ${this.renderProviders()}
-        ${(this.config?.methods?.oauth?.length ?? 0) > 0 ? s`<div class="separator-text">${this.t("or")}</div>` : n}
+        ${(this.config?.methods?.oauth?.length ?? 0) > 0 ? s`<div class="separator-text">${this.t("or")}</div>` : o}
         <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>
@@ -2432,7 +2850,7 @@ let $ = class extends x {
                     .value=${this.name}
                     @input=${this.bind("name")}
                   />
-                </div>` : n}
+                </div>` : o}
           ${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"))}
@@ -2482,7 +2900,7 @@ let $ = class extends x {
         ${this.t("securityPhrase")}: <span class="code">${e}</span>
       </div>
       <div class="alert-body">${this.t("securityPhraseHint")}</div>
-    </div>` : n;
+    </div>` : o;
   }
   renderMagicUrl() {
     return this.token ? s`<div class="stack">
@@ -2637,12 +3055,12 @@ let $ = class extends x {
     `;
   }
 };
-$.styles = [...x.styles, ft];
+$.styles = [...A.styles, At];
 C([
-  g({ type: String })
+  f({ type: String })
 ], $.prototype, "view", 2);
 C([
-  g({ type: Boolean })
+  f({ type: Boolean })
 ], $.prototype, "embedded", 2);
 C([
   d()
@@ -2669,25 +3087,25 @@ C([
   d()
 ], $.prototype, "recovery", 2);
 C([
-  X("form input:not([type=hidden])")
+  rt("form input:not([type=hidden])")
 ], $.prototype, "firstInput", 2);
 $ = C([
-  S("authui-sign-in")
+  _("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;
+var It = Object.defineProperty, _t = Object.getOwnPropertyDescriptor, g = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? _t(t, i) : t, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
+  return r && a && It(t, i, a), a;
 };
-let p = class extends x {
+let p = class extends A {
   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"));
+      e.preventDefault(), this.run("name", () => n.updateName(this.nameInput), this.t("done"));
     }, this.onUpdateEmail = (e) => {
       e.preventDefault(), this.run(
         "email",
         async () => {
-          await o.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
+          await n.updateEmail(this.emailInput, this.emailPassword), this.emailPassword = "";
         },
         this.t("done")
       );
@@ -2695,7 +3113,7 @@ let p = class extends x {
       e.preventDefault(), this.run(
         "phone",
         async () => {
-          await o.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
+          await n.updatePhone(this.phoneInput, this.phonePassword), this.phonePassword = "";
         },
         this.t("done")
       );
@@ -2703,21 +3121,21 @@ let p = class extends x {
       e.preventDefault(), this.run(
         "guest",
         async () => {
-          await o.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
+          await n.convertGuest(this.emailInput, this.emailPassword, this.guestName), this.emailPassword = "";
         },
         this.t("done")
       );
     }, this.onSendVerification = () => {
-      this.run("verify", () => o.sendEmailVerification(), this.t("verificationSent"));
+      this.run("verify", () => n.sendEmailVerification(), this.t("verificationSent"));
     }, this.onSendPhoneVerification = () => {
       this.run("verify-phone", async () => {
-        await o.sendPhoneVerification(), this.phoneCodeSent = !0;
+        await n.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;
+          await n.confirmPhoneVerification(this.phoneCode), this.phoneCode = "", this.phoneCodeSent = !1;
         },
         this.t("done")
       );
@@ -2729,44 +3147,44 @@ let p = class extends x {
       this.run(
         "password",
         async () => {
-          await o.updatePassword(this.newPassword, this.oldPassword), this.oldPassword = this.newPassword = this.newPasswordConfirm = "";
+          await n.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();
+        await n.setMfaEnabled(e), await this.loadFactors();
       });
     }, this.onAddAuthenticator = () => {
       this.run("authenticator", async () => {
-        this.authenticator = await o.addAuthenticator(), this.authenticatorCode = "";
+        this.authenticator = await n.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();
+          await n.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();
+        await n.removeAuthenticator(), await this.loadFactors();
       });
     }, this.onRecoveryCodes = () => {
       this.run("recovery", async () => {
         try {
-          this.recoveryCodes = await o.createRecoveryCodes();
+          this.recoveryCodes = await n.createRecoveryCodes();
         } catch (e) {
-          if (!F(e, b.recoveryCodesExist)) throw e;
-          this.recoveryCodes = await o.getRecoveryCodes();
+          if (!B(e, v.recoveryCodesExist)) throw e;
+          this.recoveryCodes = await n.getRecoveryCodes();
         }
         await this.loadFactors();
       });
     }, this.onRegenerateRecoveryCodes = () => {
       this.run("recovery", async () => {
-        this.recoveryCodes = await o.regenerateRecoveryCodes();
+        this.recoveryCodes = await n.regenerateRecoveryCodes();
       });
     }, this.onCopyCodes = async () => {
       if (this.recoveryCodes)
@@ -2777,27 +3195,27 @@ let p = class extends x {
         }
     }, this.onStepUpFactor = (e) => {
       this.run("stepup", async () => {
-        const t = await o.createMfaChallenge(e);
+        const t = await n.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();
+        await n.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);
+        await n.signOut(e), this.sessions = (this.sessions ?? []).filter((t) => t.$id !== e);
       });
     }, this.onSignOutAll = () => {
-      this.run("sessions-all", () => o.signOutEverywhere());
+      this.run("sessions-all", () => n.signOutEverywhere());
     }, this.onDeleteIdentity = (e) => {
       this.run(`identity-${e}`, async () => {
-        await o.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
+        await n.deleteIdentity(e), this.identities = (this.identities ?? []).filter((t) => t.$id !== e);
       });
     }, this.onDeleteAccount = () => {
-      this.run("delete", () => o.deleteAccount());
+      this.run("delete", () => n.deleteAccount());
     };
   }
   connectedCallback() {
@@ -2831,9 +3249,9 @@ let p = class extends x {
       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 = {
+        B(r, v.challengeRequired) ? this.stepUp = { retry: () => this.run(e, t, i) } : this.errors = {
           ...this.errors,
-          [e]: Z(r, this.strings, e.includes("code") ? "code" : "link")
+          [e]: at(r, this.strings, e.includes("code") ? "code" : "link")
         };
       } finally {
         this.busy = "";
@@ -2843,18 +3261,18 @@ let p = class extends x {
   // ─────────────────────────── loaders ───────────────────────────
   async loadSessions() {
     await this.run("sessions", async () => {
-      this.sessions = await o.listSessions();
+      this.sessions = await n.listSessions();
     });
   }
   async loadIdentities() {
     await this.run("identities", async () => {
-      this.identities = await o.listIdentities();
+      this.identities = await n.listIdentities();
     });
   }
   async loadLogs() {
     this.busy = "logs";
     try {
-      this.logs = await o.listLogs();
+      this.logs = await n.listLogs();
     } catch {
       this.logsSupported = !1, this.logs = [];
     } finally {
@@ -2865,7 +3283,7 @@ let p = class extends x {
     if (!this.factorsLoading) {
       this.factorsLoading = !0;
       try {
-        this.factors = await o.listMfaFactors();
+        this.factors = await n.listMfaFactors();
       } catch {
         this.factors = {
           totp: !1,
@@ -2922,7 +3340,7 @@ let p = class extends x {
         ${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}
+              </div>` : o}
         ${this.stepUp ? this.renderStepUp() : this.renderTab()}
       </div>
     `;
@@ -2936,12 +3354,13 @@ let p = class extends x {
           <div class="row-main">
             <span class="row-title">
               ${t}
-              ${e.mfa ? s`<span class="badge badge-success">${c.shieldCheck} MFA</span>` : n}
+              ${e.mfa ? s`<span class="badge badge-success">${c.shieldCheck} MFA</span>` : o}
+              ${n.isPreview ? s`<span class="badge badge-info">${this.t("preview")}</span>` : o}
             </span>
-            ${e.email && e.name ? s`<span class="row-sub">${e.email}</span>` : n}
+            ${e.email && e.name ? s`<span class="row-sub">${e.email}</span>` : o}
           </div>
         </div>
-        <button class="btn btn-outline btn-sm" @click=${() => o.signOut()}>
+        <button class="btn btn-outline btn-sm" @click=${() => n.signOut()}>
           ${c.logOut} ${this.t("signOut")}
         </button>
       </div>
@@ -2966,19 +3385,19 @@ let p = class extends x {
     return t ? s`<div class="alert alert-error" role="alert">
           ${c.alert}
           <div class="alert-body">${t}</div>
-        </div>` : n;
+        </div>` : o;
   }
   spinner(e) {
-    return this.busy === e ? s`<span class="spinner" aria-hidden="true"></span>` : n;
+    return this.busy === e ? s`<span class="spinner" aria-hidden="true"></span>` : o;
   }
   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}
+        ${t ? s`<p class="card-description">${t}</p>` : o}
       </div>
       <div class="card-body">${i}</div>
-      ${r ? s`<div class="card-footer">${r}</div>` : n}
+      ${r ? s`<div class="card-footer">${r}</div>` : o}
     </section>`;
   }
   verifiedBadge(e) {
@@ -3073,7 +3492,7 @@ let p = class extends x {
           <div class="field">
             <label class="label" for="acc-email"
               >${this.t("email")}
-              ${e.email ? this.verifiedBadge(e.emailVerification) : n}</label
+              ${e.email ? this.verifiedBadge(e.emailVerification) : o}</label
             >
             <input
               class="input"
@@ -3096,7 +3515,7 @@ let p = class extends x {
                     autocomplete="current-password"
                     required
                   />
-                </div>` : n}
+                </div>` : o}
           ${this.error("email")} ${this.error("verify")}
         </form>`,
       s`
@@ -3107,7 +3526,7 @@ let p = class extends x {
                   ?disabled=${!!this.busy}
                 >
                   ${this.spinner("verify")} ${this.t("verifyEmail")}
-                </button>` : n}
+                </button>` : o}
           <button
             class="btn btn-primary btn-sm"
             type="submit"
@@ -3125,7 +3544,7 @@ let p = class extends x {
           <div class="field">
             <label class="label" for="acc-phone"
               >${this.t("phone")}
-              ${e.phone ? this.verifiedBadge(e.phoneVerification) : n}</label
+              ${e.phone ? this.verifiedBadge(e.phoneVerification) : o}</label
             >
             <input
               class="input"
@@ -3148,7 +3567,7 @@ let p = class extends x {
                     autocomplete="current-password"
                     required
                   />
-                </div>` : n}
+                </div>` : o}
           ${this.phoneCodeSent ? s`<div class="field">
                   <label class="label" for="acc-phone-code">${this.t("code")}</label>
                   <input
@@ -3159,7 +3578,7 @@ let p = class extends x {
                     .value=${this.phoneCode}
                     @input=${this.bind("phoneCode")}
                   />
-                </div>` : n}
+                </div>` : o}
           ${this.error("phone")} ${this.error("verify-phone")} ${this.error("verify-phone-code")}
         </form>`,
       s`
@@ -3170,7 +3589,7 @@ let p = class extends x {
                   ?disabled=${!!this.busy}
                 >
                   ${this.spinner("verify-phone")} ${this.t("sendCode")}
-                </button>` : n}
+                </button>` : o}
           ${this.phoneCodeSent ? s`<button
                   class="btn btn-outline btn-sm"
                   type="button"
@@ -3178,7 +3597,7 @@ let p = class extends x {
                   ?disabled=${!!this.busy}
                 >
                   ${this.spinner("verify-phone-code")} ${this.t("verifyCode")}
-                </button>` : n}
+                </button>` : o}
           <button
             class="btn btn-primary btn-sm"
             type="submit"
@@ -3222,7 +3641,7 @@ let p = class extends x {
   renderSecurity() {
     const e = this.user, t = this.config?.mfa !== !1;
     return s`<div class="section">
-      ${this.isGuest ? n : this.card(
+      ${this.isGuest ? o : this.card(
       this.t("changePassword"),
       void 0,
       s`<form
@@ -3243,7 +3662,7 @@ let p = class extends x {
                           @input=${this.bind("oldPassword")}
                           autocomplete="current-password"
                         />
-                      </div>` : n}
+                      </div>` : o}
                 <div class="field">
                   <label class="label" for="acc-new-password">${this.t("newPassword")}</label>
                   <input
@@ -3284,12 +3703,12 @@ let p = class extends x {
                 ${this.spinner("password")} ${this.t("update")}
               </button>`
     )}
-      ${t ? this.renderMfaCard() : n}
-      ${t ? this.renderRecoveryCard() : n}
+      ${t ? this.renderMfaCard() : o}
+      ${t ? this.renderRecoveryCard() : o}
     </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() : "";
+    const e = this.user, t = this.factors?.totp ?? !1, i = this.authenticator ? n.isPreview ? mt(this.authenticator.uri) : new lt(n.getClient()).getQR(this.authenticator.uri, 400, 1).toString() : "";
     return this.card(
       this.t("twoFactor"),
       this.t("twoFactorDescription"),
@@ -3314,7 +3733,7 @@ let p = class extends x {
           <div class="row-main">
             <span class="row-title"
               >${c.smartphone} ${this.t("authenticatorApp")}
-              ${t ? this.verifiedBadge(!0) : n}</span
+              ${t ? this.verifiedBadge(!0) : o}</span
             >
           </div>
           ${t ? s`<button
@@ -3323,7 +3742,7 @@ let p = class extends x {
                   ?disabled=${!!this.busy}
                 >
                   ${this.spinner("remove-authenticator")} ${this.t("remove")}
-                </button>` : this.authenticator ? n : s`<button
+                </button>` : this.authenticator ? o : s`<button
                     class="btn btn-outline btn-sm"
                     @click=${this.onAddAuthenticator}
                     ?disabled=${!!this.busy}
@@ -3364,7 +3783,7 @@ let p = class extends x {
                     ${this.t("cancel")}
                   </button>
                 </div>
-              </form>` : n}
+              </form>` : o}
       </div>`
     );
   }
@@ -3398,7 +3817,7 @@ let p = class extends x {
                   ${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}
+                ${e ? s`<button class="btn btn-ghost btn-sm" @click=${this.onRegenerateRecoveryCodes} ?disabled=${!!this.busy}>${c.refresh} ${this.t("regenerateRecoveryCodes")}</button>` : o}
               </div>`}
         ${this.error("recovery")}
       </div>`
@@ -3474,8 +3893,8 @@ let p = class extends x {
   }
   // ── 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;
+    const t = (e.deviceName || "").toLowerCase(), i = (e.osName || e.osCode || "").toLowerCase();
+    return /phone|tablet|mobile/.test(t) || /ios|android|ipados/.test(i) ? c.smartphone : /desktop|browser/.test(t) || /mac|windows|linux|chrome os/.test(i) ? c.monitor : c.globe;
   }
   renderSessions() {
     const e = this.sessions;
@@ -3491,8 +3910,8 @@ let p = class extends x {
                         <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}
+                            ${t.clientVersion ? s`<span class="muted small">${t.clientVersion}</span>` : o}
+                            ${t.current ? s`<span class="badge badge-info">${this.t("currentSession")}</span>` : o}
                           </span>
                           <span class="row-sub"
                             >${[t.osName, t.countryName || t.countryCode, t.ip].filter(Boolean).join(" · ")}</span
@@ -3500,7 +3919,7 @@ let p = class extends x {
                         </div>
                       </div>
                       <div class="row-actions">
-                        ${this.busy === `session-${t.$id}` ? s`<span class="spinner"></span>` : n}
+                        ${this.busy === `session-${t.$id}` ? s`<span class="spinner"></span>` : o}
                         <button
                           class="btn btn-ghost btn-sm"
                           @click=${() => this.onDeleteSession(t.$id)}
@@ -3540,9 +3959,9 @@ let p = class extends x {
         ${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>
+                        <span class="device">${K(i.provider)}</span>
                         <div class="row-main">
-                          <span class="row-title">${E(i.provider)}</span>
+                          <span class="row-title">${D(i.provider)}</span>
                           <span class="row-sub">${i.providerEmail || i.providerUid}</span>
                         </div>
                       </div>
@@ -3552,7 +3971,7 @@ let p = class extends x {
                           @click=${() => this.onDeleteIdentity(i.$id)}
                           ?disabled=${!!this.busy}
                         >
-                          ${this.busy === `identity-${i.$id}` ? s`<span class="spinner"></span>` : n}
+                          ${this.busy === `identity-${i.$id}` ? s`<span class="spinner"></span>` : o}
                           ${this.t("disconnect")}
                         </button>
                       </div>
@@ -3561,9 +3980,9 @@ let p = class extends x {
       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)}
+                    @click=${() => n.signInWithOAuth(i)}
                   >
-                    ${L(i)} ${E(i)}
+                    ${K(i)} ${D(i)}
                   </button>`
       )}` : void 0
     )}
@@ -3592,8 +4011,8 @@ let p = class extends x {
   }
 };
 p.styles = [
-  ...x.styles,
-  A`
+  ...A.styles,
+  I`
       :host {
         display: block;
         width: 100%;
@@ -3670,102 +4089,102 @@ p.styles = [
       }
     `
 ];
-m([
-  g({ type: Boolean })
+g([
+  f({ type: Boolean })
 ], p.prototype, "embedded", 2);
-m([
-  g({ type: String })
+g([
+  f({ type: String })
 ], p.prototype, "tab", 2);
-m([
+g([
   d()
 ], p.prototype, "active", 2);
-m([
+g([
   d()
 ], p.prototype, "busy", 2);
-m([
+g([
   d()
 ], p.prototype, "notice", 2);
-m([
+g([
   d()
 ], p.prototype, "errors", 2);
-m([
+g([
   d()
 ], p.prototype, "nameInput", 2);
-m([
+g([
   d()
 ], p.prototype, "emailInput", 2);
-m([
+g([
   d()
 ], p.prototype, "emailPassword", 2);
-m([
+g([
   d()
 ], p.prototype, "phoneInput", 2);
-m([
+g([
   d()
 ], p.prototype, "phonePassword", 2);
-m([
+g([
   d()
 ], p.prototype, "phoneCode", 2);
-m([
+g([
   d()
 ], p.prototype, "phoneCodeSent", 2);
-m([
+g([
   d()
 ], p.prototype, "guestName", 2);
-m([
+g([
   d()
 ], p.prototype, "oldPassword", 2);
-m([
+g([
   d()
 ], p.prototype, "newPassword", 2);
-m([
+g([
   d()
 ], p.prototype, "newPasswordConfirm", 2);
-m([
+g([
   d()
 ], p.prototype, "authenticator", 2);
-m([
+g([
   d()
 ], p.prototype, "authenticatorCode", 2);
-m([
+g([
   d()
 ], p.prototype, "factors", 2);
-m([
+g([
   d()
 ], p.prototype, "recoveryCodes", 2);
-m([
+g([
   d()
 ], p.prototype, "stepUp", 2);
-m([
+g([
   d()
 ], p.prototype, "stepUpCode", 2);
-m([
+g([
   d()
 ], p.prototype, "copied", 2);
-m([
+g([
   d()
 ], p.prototype, "sessions", 2);
-m([
+g([
   d()
 ], p.prototype, "identities", 2);
-m([
+g([
   d()
 ], p.prototype, "logs", 2);
-m([
+g([
   d()
 ], p.prototype, "logsSupported", 2);
-m([
+g([
   d()
 ], p.prototype, "confirmDelete", 2);
-p = m([
-  S("authui-account")
+p = g([
+  _("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;
+var Ft = Object.defineProperty, zt = Object.getOwnPropertyDescriptor, O = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? zt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
+  return r && a && Ft(t, i, a), a;
 };
-let P = class extends x {
+let E = class extends A {
   constructor() {
     super(...arguments), this.open = !1, this.view = "sign-in", this.closeOnSuccess = !0, this.handledPending = null, this.onOpenEvent = (e) => {
       const t = e.detail ?? {};
@@ -3822,15 +4241,15 @@ let P = class extends x {
                     embedded
                     .view=${this.view}
                     @authui-success=${this.onSuccess}
-                  ></authui-sign-in>` : n}
+                  ></authui-sign-in>` : o}
         </div>
       </dialog>
     `;
   }
 };
-P.styles = [
-  ...x.styles,
-  A`
+E.styles = [
+  ...A.styles,
+  I`
       :host {
         display: contents;
       }
@@ -3890,38 +4309,38 @@ P.styles = [
       }
     `
 ];
-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([
+O([
+  f({ type: Boolean, reflect: !0 })
+], E.prototype, "open", 2);
+O([
+  f({ type: String })
+], E.prototype, "view", 2);
+O([
+  f({ type: Boolean, attribute: "close-on-success" })
+], E.prototype, "closeOnSuccess", 2);
+O([
   d()
-], P.prototype, "handledPending", 2);
-U([
-  X("dialog")
-], P.prototype, "dialog", 2);
-P = U([
-  S("authui-modal")
-], P);
-function R(e) {
+], E.prototype, "handledPending", 2);
+O([
+  rt("dialog")
+], E.prototype, "dialog", 2);
+E = O([
+  _("authui-modal")
+], E);
+function Y(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() {
+function Bt() {
   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;
+var Ot = Object.defineProperty, Dt = Object.getOwnPropertyDescriptor, j = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Dt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
+  return r && a && Ot(t, i, a), a;
 };
-let M = class extends x {
+let z = class extends A {
   constructor() {
     super(...arguments), this.view = "sign-in", this.variant = "primary", this.size = "md";
   }
@@ -3929,7 +4348,7 @@ let M = class extends x {
     const e = this.size === "md" ? "" : `btn-${this.size}`;
     return s`<button
       class="btn btn-${this.variant} ${e}"
-      @click=${() => R(this.view)}
+      @click=${() => Y(this.view)}
       part="button"
     >
       <slot
@@ -3938,9 +4357,9 @@ let M = class extends x {
     </button>`;
   }
 };
-M.styles = [
-  ...x.styles,
-  A`
+z.styles = [
+  ...A.styles,
+  I`
       :host {
         display: inline-block;
       }
@@ -3949,24 +4368,24 @@ M.styles = [
       }
     `
 ];
-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;
+j([
+  f({ type: String })
+], z.prototype, "view", 2);
+j([
+  f({ type: String })
+], z.prototype, "variant", 2);
+j([
+  f({ type: String })
+], z.prototype, "size", 2);
+z = j([
+  _("authui-button")
+], z);
+var Lt = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, Q = (e, t, i, r) => {
+  for (var a = r > 1 ? void 0 : r ? Rt(t, i) : t, h = e.length - 1, u; h >= 0; h--)
+    (u = e[h]) && (a = (r ? u(t, i, a) : u(a)) || a);
+  return r && a && Lt(t, i, a), a;
 };
-let I = class extends x {
+let R = class extends A {
   constructor() {
     super(...arguments), this.src = "", this.menuOpen = !1, this.onDocumentClick = (e) => {
       e.composedPath().includes(this) || (this.menuOpen = !1);
@@ -3975,17 +4394,17 @@ let I = class extends x {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("click", this.onDocumentClick, !0), document.addEventListener("keydown", this.onKeydown);
+    super.connectedCallback(), document.addEventListener("click", this.onDocumentClick, !0), document.addEventListener("keydown", this.onKeydown), this.addEventListener("keydown", this.onKeydown);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick, !0), document.removeEventListener("keydown", this.onKeydown);
+    super.disconnectedCallback(), document.removeEventListener("click", this.onDocumentClick, !0), document.removeEventListener("keydown", this.onKeydown), this.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")}>
+      return s`<button class="btn btn-primary btn-sm" @click=${() => Y("sign-in")}>
         <slot>${this.t("signIn")}</slot>
       </button>`;
     const i = t.name || t.email || t.phone || this.t("guestAccount");
@@ -4004,13 +4423,13 @@ let I = class extends x {
       ${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}
+                ${t.email && t.name ? s`<span class="row-sub">${t.email}</span>` : o}
               </div>
               <button
                 class="menu-item"
                 role="menuitem"
                 @click=${() => {
-      this.menuOpen = !1, R("account");
+      this.menuOpen = !1, Y("account");
     }}
               >
                 ${c.settings} ${this.t("manageAccount")}
@@ -4019,18 +4438,18 @@ let I = class extends x {
                 class="menu-item"
                 role="menuitem"
                 @click=${() => {
-      this.menuOpen = !1, o.signOut();
+      this.menuOpen = !1, n.signOut();
     }}
               >
                 ${c.logOut} ${this.t("signOut")}
               </button>
-            </div>` : n}
+            </div>` : o}
     `;
   }
 };
-I.styles = [
-  ...x.styles,
-  A`
+R.styles = [
+  ...A.styles,
+  I`
       :host {
         display: inline-block;
         position: relative;
@@ -4108,32 +4527,32 @@ I.styles = [
       }
     `
 ];
-q([
-  g({ type: String })
-], I.prototype, "src", 2);
-q([
+Q([
+  f({ type: String })
+], R.prototype, "src", 2);
+Q([
   d()
-], I.prototype, "menuOpen", 2);
-I = q([
-  S("authui-user-button")
-], I);
+], R.prototype, "menuOpen", 2);
+R = Q([
+  _("authui-user-button")
+], R);
 export {
-  rt as A,
-  b as E,
-  o as a,
+  gt as A,
+  v as E,
+  ft as P,
+  n 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
+  Bt as c,
+  z as d,
+  b as e,
+  A as f,
+  E as g,
+  L as h,
+  $ as i,
+  R as j,
+  dt as k,
+  at as l,
+  Y as o,
+  D as p,
+  N as t
 };