@singlebase/elements 0.1.0

package/dist/display-8HEcKYR4.js

@@ -0,0 +1,3444 @@
+var ts = Object.defineProperty;
+var Te = (r) => {
+  throw TypeError(r);
+};
+var es = (r, t, e) => t in r ? ts(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var b = (r, t, e) => es(r, typeof t != "symbol" ? t + "" : t, e), Ue = (r, t, e) => t.has(r) || Te("Cannot " + e);
+var n = (r, t, e) => (Ue(r, t, "read from private field"), e ? e.call(r) : t.get(r)), o = (r, t, e) => t.has(r) ? Te("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), l = (r, t, e, s) => (Ue(r, t, "write to private field"), s ? s.call(r, e) : t.set(r, e), e);
+import { LitElement as ss, html as a, nothing as d, css as je } from "lit";
+import { property as p, state as m, customElement as fe } from "lit/decorators.js";
+import { ifDefined as k } from "lit/directives/if-defined.js";
+import { SinglebaseAuthError as ye, mapErrorToHint as is, createFilesUploadApi as as, resolveScreen as rs } from "@singlebase/singlebase-sdk";
+import { t as ns, s as os, r as ls } from "./uploader-D-Da1trc.js";
+import { getDefaultClient as hs, AUTHUI_PROP_KEYS as ds, authUIAttributeFor as cs, matchesPredicate as us, validatePredicate as ps, getPath as Le } from "@singlebase/core";
+class gs {
+  constructor(t) {
+    b(this, "host");
+    b(this, "client", null);
+    b(this, "unsubscribe", null);
+    b(this, "state", { status: "loading", session: null, user: null });
+    this.host = t, t.addController(this);
+  }
+  bind(t) {
+    var e;
+    t !== this.client && ((e = this.unsubscribe) == null || e.call(this), this.unsubscribe = null, this.client = t, t && (this.state = t.getState(), this.unsubscribe = t.subscribe((s) => {
+      this.state = s, this.host.requestUpdate();
+    }), this.host.requestUpdate()));
+  }
+  hostDisconnected() {
+    var t;
+    (t = this.unsubscribe) == null || t.call(this), this.unsubscribe = null;
+  }
+}
+const Ae = {
+  signInTitle: "Sign in",
+  signUpTitle: "Create your account",
+  forgotTitle: "Reset your password",
+  verifyTitle: "Enter your code",
+  otpTitle: "Sign in with a code",
+  newPassTitle: "Choose a new password",
+  inviteTitle: "You have been invited",
+  signInSubEmailAndOauth: "Use your email or a connected provider.",
+  signInSubEmailOnly: "Use your email address and password.",
+  signInSubOauthOnly: "Continue with a connected provider.",
+  signUpSub: "Free to start. No card required.",
+  forgotSub: "We will email you a six-digit code to confirm it is you.",
+  otpSub: "No password needed — we will email you a six-digit code.",
+  inviteSub: "Set up your account to continue.",
+  signInCta: "Sign in",
+  signUpCta: "Create account",
+  forgotCta: "Send code",
+  verifyCta: "Verify code",
+  otpCta: "Email me a code",
+  newPassCta: "Save password",
+  inviteCta: "Create account",
+  continueCta: "Continue",
+  backCta: "Back",
+  emailMethodTitle: "Email",
+  emailMethodTitleSignUp: "Email and password",
+  emailMethodMeta: "Password or one-time code",
+  emailMethodMetaSignUp: "Create with an address",
+  emailMethodMetaOtp: "One-time code",
+  oauthMethodTitle: "Single sign-on",
+  oauthMethodMeta: "Google, GitHub, and more",
+  fullNameLabel: "Full name",
+  fullNamePlaceholder: "Ada Lovelace",
+  emailLabel: "Email",
+  emailPlaceholder: "you@company.com",
+  passwordLabel: "Password",
+  passwordPlaceholder: "••••••••",
+  newPasswordLabel: "New password",
+  newPasswordPlaceholder: "At least 10 characters",
+  confirmPasswordLabel: "Confirm password",
+  confirmPasswordPlaceholder: "Repeat it",
+  currentPasswordLabel: "Current password",
+  firstNameLabel: "First name",
+  firstNamePlaceholder: "Ada",
+  lastNameLabel: "Last name",
+  lastNamePlaceholder: "Lovelace",
+  phoneLabel: "Phone number",
+  phonePlaceholder: "+1 (555) 000-0000",
+  invitedEmailLabel: "Invited email",
+  forgotLink: "Forgot?",
+  otpInsteadLink: "Email me a one-time code instead",
+  footTextSignIn: "New here?",
+  footActionSignIn: "Create an account",
+  footTextSignUp: "Already have an account?",
+  footActionSignUp: "Sign in",
+  resendQuestion: "Did not get it?",
+  resendCta: "Resend code",
+  oauthPrimaryLabel: "Continue with Google",
+  oauthContinueWith: "Continue with",
+  blockedTitleDisabled: "Sign-in is turned off",
+  blockedTitleUnavailable: "Sign-in unavailable",
+  blockedBodyDisabled: "Authentication is currently disabled for this application.",
+  blockedBodyUnavailable: "No sign-in methods are enabled for this application.",
+  blockedHint: "Contact the site owner if you think this is a mistake.",
+  signOutCta: "Sign out",
+  addPhotoLink: "Add photo",
+  changePhotoLink: "Change",
+  photoUploading: "Uploading…",
+  photoUpdated: "Photo updated",
+  editingLabel: "Editing",
+  uploadPhotoCta: "Upload photo",
+  replacePhotoCta: "Replace photo",
+  photoHint: "PNG or JPG, up to 2 MB.",
+  doneCta: "Done",
+  cancelCta: "Cancel",
+  editAccountCta: "Edit account",
+  saveChangesCta: "Save changes",
+  emailChangeHint: "We will send a verification link to the new address.",
+  passwordSectionTitle: "Password",
+  passwordChangedHint: "Last changed three months ago.",
+  changePasswordCta: "Change password",
+  updatePasswordCta: "Update password",
+  twoFaTitle: "Two-factor authentication",
+  twoFaHintOff: "Add a second step when signing in.",
+  twoFaHintOn: "Enabled with an authenticator app.",
+  twoFaScanHint: "Scan with your authenticator app, then enter the 6-digit code.",
+  connectedTitle: "Connected accounts",
+  connectedHint: "Sign in with any provider you connect here.",
+  addAnotherLabel: "Add another",
+  disconnectCta: "Disconnect",
+  notConnectedLabel: "Not connected",
+  deleteAccountCta: "Delete account",
+  deleteAccountConfirmCta: "Permanently delete account",
+  deletePanelBody: "This removes your profile, sessions and connected providers. It cannot be undone.",
+  deleteConfirmLabel: "Type DELETE to confirm",
+  deleteConfirmPlaceholder: "DELETE",
+  savedNote: "Saved",
+  passwordUpdatedNote: "Password updated",
+  changeEmailTitle: "Email",
+  newEmailLabel: "New email",
+  changeEmailCta: "Send verification code",
+  changeUsernameTitle: "Username",
+  newUsernameLabel: "New username",
+  changeUsernameCta: "Send verification code",
+  genericErrorMessage: "Something went wrong. Please try again.",
+  rateLimitedMessage: "Too many attempts. Try again in 5 minutes or reset your password.",
+  codeSentNeutral: "If an eligible account exists, a code has been sent.",
+  invalidEmailError: "Enter a valid email address.",
+  requiredError: "This cannot be empty.",
+  passwordMinError: "Use at least 10 characters.",
+  passwordMatchError: "Both passwords must match.",
+  codeIncompleteError: "Enter all six digits.",
+  invalidPhoneError: "Enter a valid phone number.",
+  notYetSupported: "Not yet supported",
+  alreadySignedInTitle: "You are already signed in",
+  alreadySignedInSub: "Continue where you left off, or sign out to use another account.",
+  alreadySignedInSubPrefix: "Signed in as",
+  continueHint: "Continuing takes you to your account.",
+  consentPrefix: "By continuing you agree to our",
+  consentJoin: "and",
+  termsLabel: "Terms",
+  privacyLabel: "Privacy Policy",
+  emailUnchangedError: "That is already your email address.",
+  emailUpdatedNote: "Email updated",
+  changeEmailCtaShort: "Change email",
+  changeEmailHint: "We will send a code to your current address to confirm it is you.",
+  changeEmailConfirmHint: "Enter the code we sent, and your email becomes",
+  changeEmailElsewhereHint: "Your email is changed below, with a verification step.",
+  confirmChangeCta: "Confirm change",
+  codeLabel: "Verification code",
+  brandingLabel: "Auth by Singlebase",
+  linkRequiresSignIn: "Sign in first, then link a provider.",
+  oauthCallbackTitle: "Finishing sign-in",
+  oauthCallbackSub: "One moment while we complete your sign-in.",
+  oauthDenied: "Sign-in was cancelled or denied."
+};
+function ms(r) {
+  return r ? { ...Ae, ...r } : Ae;
+}
+var bs = Object.defineProperty, fs = Object.getOwnPropertyDescriptor, ve = (r, t, e, s) => {
+  for (var i = fs(t, e), h = r.length - 1, c; h >= 0; h--)
+    (c = r[h]) && (i = c(t, e, i) || i);
+  return i && bs(t, e, i), i;
+}, x, T, U, L, A;
+class $ extends ss {
+  constructor() {
+    super(...arguments);
+    o(this, x, null);
+    o(this, T, {});
+    o(this, U);
+    o(this, L);
+    o(this, A);
+    b(this, "auth", new gs(this));
+    /** Config keys already applied, so a later render does not fight the host. */
+    b(this, "appliedConfig", /* @__PURE__ */ new Set());
+  }
+  get client() {
+    return n(this, x);
+  }
+  set client(e) {
+    l(this, x, e);
+  }
+  get messages() {
+    return n(this, T);
+  }
+  set messages(e) {
+    l(this, T, e);
+  }
+  get theme() {
+    return n(this, U);
+  }
+  set theme(e) {
+    l(this, U, e);
+  }
+  get density() {
+    return n(this, L);
+  }
+  set density(e) {
+    l(this, L, e);
+  }
+  get fieldStyle() {
+    return n(this, A);
+  }
+  set fieldStyle(e) {
+    l(this, A, e);
+  }
+  /**
+   * Resolution order: an explicit `.client`, then the page's default
+   * SinglebaseClient()'s auth.
+   *
+   * That fallback is what lets several widgets sit on one page — a header
+   * sign-in, a modal, an account panel — and share one session with no
+   * wiring, since SinglebaseClient() is cached per project. A page talking to
+   * two projects sets `.client` on the widgets belonging to the second.
+   *
+   * Reading `.auth` is also what *constructs* auth: a page that only drops
+   * in a widget initializes it with no bootstrap code at all.
+   */
+  get resolvedClient() {
+    var e;
+    return this.client ? this.client : ((e = hs()) == null ? void 0 : e.auth) ?? null;
+  }
+  /** Page-wide UI config from SinglebaseClient({ authui }), if there is one. */
+  get uiConfig() {
+    var e;
+    return ((e = this.resolvedClient) == null ? void 0 : e.authui) ?? null;
+  }
+  /**
+   * Config messages sit *under* the element's own, so a page-wide translation
+   * can be overridden per widget without repeating the whole bag.
+   */
+  get msg() {
+    var s;
+    const e = (s = this.uiConfig) == null ? void 0 : s.messages;
+    return ms(e ? { ...e, ...this.messages } : this.messages);
+  }
+  /**
+   * Copies the page-wide config onto this element.
+   *
+   * An attribute present in markup always wins — that is the whole precedence
+   * rule, and it is checked per key rather than wholesale, so a widget can
+   * override one thing and inherit the rest. Keys the element does not have
+   * are skipped, which is how one config can serve every singlebase-authui-*
+   * element without any of them knowing about the others.
+   */
+  applyUIConfig() {
+    const e = this.uiConfig;
+    if (e) {
+      for (const s of ds) {
+        const i = e[s];
+        i !== void 0 && s in this && (this.hasAttribute(cs(s)) || this.appliedConfig.has(s) || (this.appliedConfig.add(s), this[s] = i));
+      }
+      for (const [s, i] of Object.entries(e.tokens ?? {}))
+        s.startsWith("--") && (this.style.getPropertyValue(s) || this.style.setProperty(s, i));
+    }
+  }
+  // ── public API mirrored from the client, for host/SPA code ──
+  isAuthenticated() {
+    var e;
+    return ((e = this.resolvedClient) == null ? void 0 : e.isAuthenticated()) ?? !1;
+  }
+  getUser() {
+    var e;
+    return ((e = this.resolvedClient) == null ? void 0 : e.getUser()) ?? null;
+  }
+  async refreshSession() {
+    var e;
+    return (e = this.resolvedClient) == null ? void 0 : e.refreshSession();
+  }
+  async logout() {
+    var e;
+    await ((e = this.resolvedClient) == null ? void 0 : e.logout());
+  }
+  willUpdate(e) {
+    super.willUpdate(e), this.auth.bind(this.resolvedClient), this.applyUIConfig();
+  }
+}
+x = new WeakMap(), T = new WeakMap(), U = new WeakMap(), L = new WeakMap(), A = new WeakMap(), b($, "styles", [ns, os]);
+ve([
+  p({ attribute: !1 })
+], $.prototype, "client");
+ve([
+  p({ attribute: !1 })
+], $.prototype, "messages");
+ve([
+  p({ reflect: !0 })
+], $.prototype, "theme");
+ve([
+  p({ reflect: !0 })
+], $.prototype, "density");
+ve([
+  p({ reflect: !0, attribute: "field-style" })
+], $.prototype, "fieldStyle");
+class Se {
+  constructor(t) {
+    b(this, "host");
+    b(this, "client", null);
+    b(this, "cache", /* @__PURE__ */ new WeakMap());
+    b(this, "settings", null);
+    b(this, "error", null);
+    this.host = t, t.addController(this);
+  }
+  hostConnected() {
+  }
+  load(t, e) {
+    if (e) {
+      this.settings = e;
+      return;
+    }
+    if (!t || t === this.client) return;
+    this.client = t;
+    let s = this.cache.get(t);
+    s || (s = t.getSettings(), this.cache.set(t, s)), s.then((i) => {
+      this.settings = i, this.error = null, this.host.requestUpdate();
+    }).catch((i) => {
+      this.error = i, this.host.requestUpdate();
+    });
+  }
+}
+const vs = [
+  "load",
+  "success",
+  "error",
+  "signin",
+  "signup",
+  "signout",
+  "session",
+  "account-updated",
+  "password-change",
+  "email-change",
+  "username-change",
+  "expired",
+  "navigate",
+  "goto"
+], ws = {
+  load: "auth:ready",
+  signin: "auth:signin",
+  signup: "auth:signup",
+  session: "auth:session",
+  "account-updated": "auth:profile-update",
+  signout: "auth:signout",
+  error: "auth:error",
+  navigate: "auth:navigate"
+};
+function Me(r) {
+  return "on" + r.replace(/(^|-)([a-z])/g, (t, e, s) => s.toUpperCase());
+}
+class $s {
+  constructor(t) {
+    b(this, "unsubscribes", []);
+    b(this, "client", null);
+    this.host = t, t.addController(this);
+  }
+  bind(t) {
+    t !== this.client && (this.release(), this.client = t, t && (this.unsubscribes = vs.map(
+      (e) => t.on(e, (s) => this.publish(e, s))
+    )));
+  }
+  publish(t, e) {
+    const s = this.host[Me(t)];
+    if (typeof s == "function")
+      try {
+        s.call(this.host, e);
+      } catch (c) {
+        console.error(`[singlebase] ${Me(t)} threw:`, c);
+      }
+    const i = { detail: e, bubbles: !0, composed: !0 };
+    this.host.dispatchEvent(new CustomEvent(`singlebase-${t}`, i));
+    const h = ws[t];
+    h && this.host.dispatchEvent(new CustomEvent(h, i));
+  }
+  release() {
+    this.unsubscribes.forEach((t) => t()), this.unsubscribes = [];
+  }
+  hostDisconnected() {
+    this.release(), this.client = null;
+  }
+}
+var ys = Object.defineProperty, Es = Object.getOwnPropertyDescriptor, Ce = (r, t, e, s) => {
+  for (var i = Es(t, e), h = r.length - 1, c; h >= 0; h--)
+    (c = r[h]) && (i = c(t, e, i) || i);
+  return i && ys(t, e, i), i;
+}, M, N, I;
+class we extends $ {
+  constructor() {
+    super(...arguments);
+    o(this, M, "idle");
+    o(this, N, "");
+    o(this, I, "");
+    b(this, "abortController", null);
+  }
+  get phase() {
+    return n(this, M);
+  }
+  set phase(e) {
+    l(this, M, e);
+  }
+  get formError() {
+    return n(this, N);
+  }
+  set formError(e) {
+    l(this, N, e);
+  }
+  get noticeMessage() {
+    return n(this, I);
+  }
+  set noticeMessage(e) {
+    l(this, I, e);
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this.abortController) == null || e.abort();
+  }
+  get signal() {
+    var e;
+    return (e = this.abortController) == null || e.abort(), this.abortController = new AbortController(), this.abortController.signal;
+  }
+  /** Runs task, tracking idle→submitting→success/error and mapping errors to a message. */
+  async run(e) {
+    this.phase = "submitting", this.formError = "";
+    try {
+      await e(), this.phase = "success";
+    } catch (s) {
+      if (this.isAbortError(s)) return;
+      this.phase = "error", this.formError = this.describeError(s);
+    }
+  }
+  isAbortError(e) {
+    return e instanceof DOMException && e.name === "AbortError";
+  }
+  describeError(e) {
+    if (e instanceof ye) {
+      const s = is(e.code);
+      return s === "disable_retry_show_rate_limited" ? this.msg.rateLimitedMessage : s === "generic_credentials_message" ? this.msg.genericErrorMessage : this.msg.genericErrorMessage;
+    }
+    return this.msg.genericErrorMessage;
+  }
+  get submitting() {
+    return this.phase === "submitting";
+  }
+  /** aria-live region for async status — spec requires one per form. */
+  renderStatus() {
+    return a`
+      <div
+        role="status"
+        aria-live="polite"
+        style="position:absolute;width:1px;height:1px;overflow:hidden;"
+      >
+        ${this.phase === "submitting" ? "Submitting…" : ""}
+        ${this.phase === "success" ? "Done." : ""}
+      </div>
+      ${this.formError ? a`<p class="banner" role="alert">${this.formError}</p>` : null}
+      ${this.noticeMessage ? a`<p class="notice" role="status">${this.noticeMessage}</p>` : null}
+    `;
+  }
+}
+M = new WeakMap(), N = new WeakMap(), I = new WeakMap();
+Ce([
+  m()
+], we.prototype, "phase");
+Ce([
+  m()
+], we.prototype, "formError");
+Ce([
+  m()
+], we.prototype, "noticeMessage");
+function qe(r) {
+  return [r == null ? void 0 : r.first_name, r == null ? void 0 : r.last_name].filter(Boolean).join(" ").trim();
+}
+function Ge(r) {
+  const t = qe(r);
+  if (t)
+    return t.split(/\s+/).map((s) => s[0]).join("").slice(0, 2).toUpperCase();
+  const e = (r == null ? void 0 : r.email) ?? "";
+  return e ? e[0].toUpperCase() : "·";
+}
+var Ss = Object.defineProperty, Cs = Object.getOwnPropertyDescriptor, v = (r, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? Cs(t, e) : t, h = r.length - 1, c; h >= 0; h--)
+    (c = r[h]) && (i = (s ? c(t, e, i) : c(i)) || i);
+  return s && i && Ss(t, e, i), i;
+};
+const Ps = { profile_photo: !0 }, ks = ".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp";
+var F, D, B, R, H, j, q, G, V, K, Y, W, z, J, Q, X, Z, tt, et, st, it, at, rt, nt, ot, lt, Fe;
+let f = (Fe = class extends we {
+  constructor() {
+    super(...arguments);
+    o(this, F, "");
+    o(this, D, "");
+    o(this, B, null);
+    o(this, R, "singlebase-oauth-nonce");
+    o(this, H, "");
+    o(this, j, "");
+    o(this, q, !1);
+    o(this, G, "");
+    o(this, V, "");
+    o(this, K, "");
+    o(this, Y, "");
+    o(this, W, "");
+    o(this, z, 0);
+    o(this, J, "");
+    o(this, Q, "");
+    o(this, X, "");
+    o(this, Z, "");
+    o(this, tt, "");
+    o(this, et, "request");
+    o(this, st, "");
+    o(this, it, "");
+    o(this, at, "");
+    o(this, rt, "");
+    o(this, nt, "");
+    o(this, ot, "");
+    o(this, lt, "");
+    b(this, "settingsCtl", new Se(this));
+    b(this, "flashTimer");
+    b(this, "uidBase", `sb-acct-${Math.random().toString(36).slice(2, 8)}`);
+    // ── profile photo ─────────────────────────────────────────
+    b(this, "uploadClientFor", null);
+    b(this, "uploadClientCache", null);
+    b(this, "onChoosePhoto", () => {
+      var t;
+      this.formError = "", (t = this.renderRoot.querySelector("singlebase-uploader")) == null || t.open();
+    });
+    b(this, "onPhotoSelected", () => {
+      this.photoBusy = !0, this.toast = "";
+    });
+    /** The server has set the photo; read the account back to get its URL. */
+    b(this, "onPhotoUploaded", async (t) => {
+      var i;
+      const { completed: e, failed: s } = t.detail;
+      try {
+        e.length ? (await ((i = this.resolvedClient) == null ? void 0 : i.getAccount()), this.photoFailed = "", this.toast = this.msg.photoUpdated) : s.length && (this.formError = s[0].error || this.msg.genericErrorMessage);
+      } catch (h) {
+        this.formError = this.describeError(h);
+      } finally {
+        this.photoBusy = !1;
+      }
+    });
+    b(this, "onPhotoProblem", (t) => {
+      this.photoBusy = !1, this.formError = t.detail.message;
+    });
+  }
+  get logoText() {
+    return n(this, F);
+  }
+  set logoText(t) {
+    l(this, F, t);
+  }
+  get logoUrl() {
+    return n(this, D);
+  }
+  set logoUrl(t) {
+    l(this, D, t);
+  }
+  get settings() {
+    return n(this, B);
+  }
+  set settings(t) {
+    l(this, B, t);
+  }
+  get nonceStorageKey() {
+    return n(this, R);
+  }
+  set nonceStorageKey(t) {
+    l(this, R, t);
+  }
+  get editMode() {
+    return n(this, H);
+  }
+  set editMode(t) {
+    l(this, H, t);
+  }
+  get toast() {
+    return n(this, j);
+  }
+  set toast(t) {
+    l(this, j, t);
+  }
+  get photoBusy() {
+    return n(this, q);
+  }
+  set photoBusy(t) {
+    l(this, q, t);
+  }
+  get photoFailed() {
+    return n(this, G);
+  }
+  set photoFailed(t) {
+    l(this, G, t);
+  }
+  get profileSaved() {
+    return n(this, V);
+  }
+  set profileSaved(t) {
+    l(this, V, t);
+  }
+  get passSaved() {
+    return n(this, K);
+  }
+  set passSaved(t) {
+    l(this, K, t);
+  }
+  get profileError() {
+    return n(this, Y);
+  }
+  set profileError(t) {
+    l(this, Y, t);
+  }
+  get newPassError() {
+    return n(this, W);
+  }
+  set newPassError(t) {
+    l(this, W, t);
+  }
+  get deleteStage() {
+    return n(this, z);
+  }
+  set deleteStage(t) {
+    l(this, z, t);
+  }
+  get confirmText() {
+    return n(this, J);
+  }
+  set confirmText(t) {
+    l(this, J, t);
+  }
+  get dFirst() {
+    return n(this, Q);
+  }
+  set dFirst(t) {
+    l(this, Q, t);
+  }
+  get dLast() {
+    return n(this, X);
+  }
+  set dLast(t) {
+    l(this, X, t);
+  }
+  get dPhone() {
+    return n(this, Z);
+  }
+  set dPhone(t) {
+    l(this, Z, t);
+  }
+  get dEmail() {
+    return n(this, tt);
+  }
+  set dEmail(t) {
+    l(this, tt, t);
+  }
+  get emailStep() {
+    return n(this, et);
+  }
+  set emailStep(t) {
+    l(this, et, t);
+  }
+  get dNewEmail() {
+    return n(this, st);
+  }
+  set dNewEmail(t) {
+    l(this, st, t);
+  }
+  get emailCode() {
+    return n(this, it);
+  }
+  set emailCode(t) {
+    l(this, it, t);
+  }
+  get emailError() {
+    return n(this, at);
+  }
+  set emailError(t) {
+    l(this, at, t);
+  }
+  get emailSaved() {
+    return n(this, rt);
+  }
+  set emailSaved(t) {
+    l(this, rt, t);
+  }
+  get curPass() {
+    return n(this, nt);
+  }
+  set curPass(t) {
+    l(this, nt, t);
+  }
+  get newPass() {
+    return n(this, ot);
+  }
+  set newPass(t) {
+    l(this, ot, t);
+  }
+  get confirmPass() {
+    return n(this, lt);
+  }
+  set confirmPass(t) {
+    l(this, lt, t);
+  }
+  uid(t) {
+    return `${this.uidBase}-${t}`;
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this.settingsCtl.load(this.resolvedClient, this.settings);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), clearTimeout(this.flashTimer);
+  }
+  flash(t, e) {
+    this[t] = e, clearTimeout(this.flashTimer), this.flashTimer = setTimeout(() => {
+      this[t] = "";
+    }, 2600);
+  }
+  /** Matches the guest screens: image when given one, else the text label. */
+  renderLogo() {
+    return this.logoUrl ? a`<img
+        part="logo"
+        src=${this.logoUrl}
+        alt=${this.logoText}
+        style="display:block;align-self:flex-start;height:var(--sb-logo-height,20px);width:auto;max-width:100%"
+      />` : this.logoText ? a`<div class="logo-dot" part="logo">${this.logoText}</div>` : d;
+  }
+  get user() {
+    const t = this.auth.state;
+    return t.status === "authenticated" ? t.user : null;
+  }
+  get fullName() {
+    return qe(this.user);
+  }
+  get initials() {
+    return Ge(this.user);
+  }
+  /**
+   * The upload API bound to the same dispatcher as this widget's auth client,
+   * so the photo goes to the same project with the same bearer — including on
+   * a page where this widget was given its own `.client`.
+   */
+  get uploadClient() {
+    const t = this.resolvedClient;
+    return t ? (this.uploadClientFor !== t && (this.uploadClientFor = t, this.uploadClientCache = { files: as(t.dispatcher) }), this.uploadClientCache) : null;
+  }
+  startProfileEdit() {
+    const t = this.user;
+    t && (this.dFirst = t.first_name ?? "", this.dLast = t.last_name ?? "", this.dPhone = t.phone ?? "", this.dEmail = t.email, this.profileError = "", this.profileSaved = "", this.passSaved = "", this.toast = "", this.editMode = "profile");
+  }
+  async onSaveProfile() {
+    const t = this.resolvedClient;
+    if (t) {
+      if (!this.dFirst.trim() || !this.dLast.trim()) {
+        this.profileError = "First and last name cannot be empty.";
+        return;
+      }
+      if (this.dPhone.replace(/\D/g, "").length < 7) {
+        this.profileError = this.msg.invalidPhoneError;
+        return;
+      }
+      await this.run(async () => {
+        await t.updateAccount(
+          { first_name: this.dFirst, last_name: this.dLast, phone: this.dPhone },
+          this.signal
+        ), this.editMode = "", this.flash("profileSaved", this.msg.savedNote);
+      });
+    }
+  }
+  startPassEdit() {
+    this.curPass = "", this.newPass = "", this.confirmPass = "", this.newPassError = "", this.passSaved = "", this.profileSaved = "", this.toast = "", this.editMode = "password";
+  }
+  async onChangePass() {
+    const t = this.resolvedClient;
+    if (t) {
+      if (!this.curPass) {
+        this.newPassError = "Enter your current password.";
+        return;
+      }
+      if (this.newPass.length < 10) {
+        this.newPassError = this.msg.passwordMinError;
+        return;
+      }
+      if (this.newPass !== this.confirmPass) {
+        this.newPassError = this.msg.passwordMatchError;
+        return;
+      }
+      await this.run(async () => {
+        await t.changePassword({ password: this.newPass }, this.signal), this.editMode = "", this.curPass = "", this.newPass = "", this.confirmPass = "", this.flash("passSaved", this.msg.passwordUpdatedNote);
+      });
+    }
+  }
+  // ── email change ─────────────────────────────────────────
+  startEmailEdit() {
+    this.emailStep = "request", this.dNewEmail = "", this.emailCode = "", this.emailError = "", this.emailSaved = "", this.toast = "", this.editMode = "email";
+  }
+  /**
+   * Step one: ask for a code. The code goes to the address on file, not to
+   * the new one — that is what proves the person asking already controls the
+   * account rather than merely knowing an address.
+   */
+  async onRequestEmailCode() {
+    const t = this.resolvedClient;
+    if (!(!t || !this.user)) {
+      if (!this.dNewEmail.includes("@")) {
+        this.emailError = this.msg.invalidEmailError;
+        return;
+      }
+      if (this.dNewEmail.toLowerCase() === this.user.email.toLowerCase()) {
+        this.emailError = this.msg.emailUnchangedError;
+        return;
+      }
+      await this.run(async () => {
+        await t.requestCode({ email: this.user.email, purpose: "email_change" }, this.signal), this.emailStep = "confirm", this.emailError = "";
+      });
+    }
+  }
+  /** Step two: confirm the code together with the new address. */
+  async onConfirmEmailChange() {
+    const t = this.resolvedClient;
+    if (!(!t || !this.user)) {
+      if (this.emailCode.length < 6) {
+        this.emailError = this.msg.codeIncompleteError;
+        return;
+      }
+      await this.run(async () => {
+        await t.changeEmail(
+          { email: this.user.email, code: this.emailCode, new_email: this.dNewEmail },
+          this.signal
+        ), this.editMode = "", this.emailCode = "", this.dNewEmail = "", this.flash("emailSaved", this.msg.emailUpdatedNote);
+      });
+    }
+  }
+  renderEmailSection() {
+    var s;
+    const t = this.editMode !== "email", e = this.editMode !== "" && this.editMode !== "email";
+    return a`
+      <div class="rule"></div>
+      <div class="section">
+        <h3 class="sec-title">${this.msg.changeEmailTitle}</h3>
+        ${t ? a`
+                <div class="between">
+                  <p class="hint">${((s = this.user) == null ? void 0 : s.email) ?? ""}</p>
+                  <div class="btn-row-end">
+                    ${this.emailSaved ? a`<span role="status" class="saved-note">${this.emailSaved}</span>` : d}
+                    <button
+                      type="button"
+                      class="edit-link"
+                      ?disabled=${e}
+                      @click=${this.startEmailEdit}
+                    >
+                      ${this.msg.changeEmailCtaShort}
+                    </button>
+                  </div>
+                </div>
+              ` : this.emailStep === "request" ? a`
+                  <div class="edit-card">
+                    <div class="field">
+                      <label for=${this.uid("newemail")}>${this.msg.newEmailLabel}</label>
+                      <input
+                        id=${this.uid("newemail")}
+                        type="email"
+                        part="input"
+                        .value=${this.dNewEmail}
+                        placeholder=${this.msg.emailPlaceholder}
+                        aria-invalid=${this.emailError ? "true" : "false"}
+                        ?disabled=${this.submitting}
+                        @input=${(i) => {
+      this.dNewEmail = i.target.value, this.emailError = "";
+    }}
+                      />
+                      <p class="hint">${this.msg.changeEmailHint}</p>
+                    </div>
+                    ${this.emailError ? a`<p class="err">${this.emailError}</p>` : d}
+                    <div class="edit-actions">
+                      <button
+                        type="button"
+                        class="primary-sm"
+                        ?disabled=${this.submitting}
+                        @click=${this.onRequestEmailCode}
+                      >
+                        ${this.submitting ? a`<span class="spinner"></span>` : d}
+                        <span>${this.msg.changeEmailCta}</span>
+                      </button>
+                      <button
+                        type="button"
+                        class="ghost-sm"
+                        @click=${() => {
+      this.editMode = "", this.emailError = "";
+    }}
+                      >
+                        ${this.msg.cancelCta}
+                      </button>
+                    </div>
+                  </div>
+                ` : a`
+                  <div class="edit-card">
+                    <p class="hint">${this.msg.codeSentNeutral}</p>
+                    <div class="field">
+                      <label for=${this.uid("emailcode")}>${this.msg.codeLabel}</label>
+                      <input
+                        id=${this.uid("emailcode")}
+                        type="text"
+                        inputmode="numeric"
+                        autocomplete="one-time-code"
+                        part="input"
+                        .value=${this.emailCode}
+                        placeholder="000000"
+                        aria-invalid=${this.emailError ? "true" : "false"}
+                        ?disabled=${this.submitting}
+                        @input=${(i) => {
+      this.emailCode = i.target.value.replace(/\D/g, "").slice(0, 6), this.emailError = "";
+    }}
+                      />
+                      <p class="hint">${this.msg.changeEmailConfirmHint} ${this.dNewEmail}</p>
+                    </div>
+                    ${this.emailError ? a`<p class="err">${this.emailError}</p>` : d}
+                    <div class="edit-actions">
+                      <button
+                        type="button"
+                        class="primary-sm"
+                        ?disabled=${this.submitting}
+                        @click=${this.onConfirmEmailChange}
+                      >
+                        ${this.submitting ? a`<span class="spinner"></span>` : d}
+                        <span>${this.msg.confirmChangeCta}</span>
+                      </button>
+                      <button
+                        type="button"
+                        class="ghost-sm"
+                        @click=${() => {
+      this.editMode = "", this.emailError = "";
+    }}
+                      >
+                        ${this.msg.cancelCta}
+                      </button>
+                    </div>
+                  </div>
+                `}
+      </div>
+    `;
+  }
+  async onSignOut() {
+    const t = this.resolvedClient;
+    t && await this.run(async () => {
+      await t.signOut();
+    });
+  }
+  async onConnectProvider(t) {
+    const e = this.resolvedClient, s = this.auth.state;
+    !e || s.status !== "authenticated" || await this.run(async () => {
+      var c;
+      const i = await e.createOAuthNonce(this.signal);
+      (c = globalThis.sessionStorage) == null || c.setItem(this.nonceStorageKey, i);
+      const { oauth_redirect_url: h } = await e.startOAuth(
+        {
+          provider: t,
+          nonce: i,
+          intent: "link",
+          id_token: s.session.id_token,
+          refresh_token: s.session.refresh_token
+        },
+        this.signal
+      );
+      globalThis.location.assign(h);
+    });
+  }
+  get availableProviders() {
+    const t = this.settings ?? this.settingsCtl.settings;
+    if (!t || !t.oauth_settings.enabled) return [];
+    const e = {
+      google: "G",
+      github: "GH",
+      linkedin: "in",
+      facebook: "f"
+    };
+    return Object.entries(t.oauth_providers).filter(([, s]) => s.enabled).map(([s, i]) => ({
+      id: s,
+      name: i.provider_name,
+      mark: e[s] ?? i.provider_name.slice(0, 2)
+    }));
+  }
+  // ── sections ──────────────────────────────────────────────
+  renderIdentity() {
+    const t = this.user, e = this.editMode !== "" && this.editMode !== "avatar", s = t != null && t.profile_photo && t.profile_photo !== this.photoFailed ? t.profile_photo : "";
+    return a`
+      <div class="acct-nav">
+        <div class="acct-who">
+          <div class="avatar-col">
+            <div class="avatar ${s ? "has-photo" : ""}" part="avatar">
+              ${s ? a`<img
+                      src=${s}
+                      alt=""
+                      part="avatar-image"
+                      @error=${() => this.photoFailed = s}
+                    />` : this.initials}
+            </div>
+            <button
+              type="button"
+              class="edit-link"
+              style="font-size:12px"
+              ?disabled=${this.photoBusy || e}
+              @click=${this.onChoosePhoto}
+            >
+              ${this.photoBusy ? this.msg.photoUploading : t != null && t.profile_photo ? this.msg.changePhotoLink : this.msg.addPhotoLink}
+            </button>
+            <singlebase-uploader
+              style="display:none"
+              view="button"
+              max-files="1"
+              branding="false"
+              accept=${ks}
+              .client=${this.uploadClient}
+              .options=${Ps}
+              @singlebase-upload-selected=${this.onPhotoSelected}
+              @singlebase-upload-complete=${this.onPhotoUploaded}
+              @singlebase-upload-error=${this.onPhotoProblem}
+              @singlebase-upload-rejected=${this.onPhotoProblem}
+            ></singlebase-uploader>
+          </div>
+          <div class="acct-who-text">
+            <div class="acct-name">${this.fullName || "—"}</div>
+            <div class="acct-email">${(t == null ? void 0 : t.email) ?? ""}</div>
+          </div>
+        </div>
+        <button type="button" class="link-sm" ?disabled=${this.submitting} @click=${this.onSignOut}>
+          ${this.msg.signOutCta}
+        </button>
+      </div>
+    `;
+  }
+  renderProfileSection() {
+    const t = this.user;
+    if (!t) return d;
+    const e = this.editMode !== "profile", s = this.editMode !== "" && this.editMode !== "profile", i = [
+      [this.msg.firstNameLabel, t.first_name || "—"],
+      [this.msg.lastNameLabel, t.last_name || "—"],
+      [this.msg.phoneLabel, t.phone || "—"],
+      [this.msg.emailLabel, t.email || "—"]
+    ];
+    return a`
+      <div class="section">
+        ${e ? a`
+                <div class="sum-list">
+                  ${i.map(
+      ([h, c]) => a`
+                      <div class="sum-row">
+                        <span class="sum-label">${h}</span>
+                        <span class="sum-value">${c}</span>
+                      </div>
+                    `
+    )}
+                </div>
+                <div class="btn-row-end">
+                  ${this.profileSaved ? a`<span role="status" class="saved-note">${this.profileSaved}</span>` : d}
+                  <button
+                    type="button"
+                    class="edit-link"
+                    ?disabled=${s}
+                    @click=${this.startProfileEdit}
+                  >
+                    ${this.msg.editAccountCta}
+                  </button>
+                </div>
+              ` : a`
+                <div class="edit-card">
+                  <div class="two-up">
+                    <div class="field">
+                      <label for=${this.uid("first")}>${this.msg.firstNameLabel}</label>
+                      <input
+                        id=${this.uid("first")}
+                        type="text"
+                        part="input"
+                        .value=${this.dFirst}
+                        placeholder=${this.msg.firstNamePlaceholder}
+                        ?disabled=${this.submitting}
+                        @input=${(h) => {
+      this.dFirst = h.target.value, this.profileError = "";
+    }}
+                      />
+                    </div>
+                    <div class="field">
+                      <label for=${this.uid("last")}>${this.msg.lastNameLabel}</label>
+                      <input
+                        id=${this.uid("last")}
+                        type="text"
+                        part="input"
+                        .value=${this.dLast}
+                        placeholder=${this.msg.lastNamePlaceholder}
+                        ?disabled=${this.submitting}
+                        @input=${(h) => {
+      this.dLast = h.target.value, this.profileError = "";
+    }}
+                      />
+                    </div>
+                  </div>
+                  <div class="field">
+                    <label for=${this.uid("phone")}>${this.msg.phoneLabel}</label>
+                    <input
+                      id=${this.uid("phone")}
+                      type="tel"
+                      part="input"
+                      .value=${this.dPhone}
+                      placeholder=${this.msg.phonePlaceholder}
+                      ?disabled=${this.submitting}
+                      @input=${(h) => {
+      this.dPhone = h.target.value, this.profileError = "";
+    }}
+                    />
+                  </div>
+                  <div class="field">
+                    <label for=${this.uid("email")}>${this.msg.emailLabel}</label>
+                    <input
+                      id=${this.uid("email")}
+                      type="email"
+                      part="input"
+                      .value=${this.dEmail}
+                      disabled
+                      title=${this.msg.notYetSupported}
+                    />
+                    <p class="hint">${this.msg.changeEmailElsewhereHint}</p>
+                  </div>
+                  ${this.profileError ? a`<p class="err">${this.profileError}</p>` : d}
+                  <div class="edit-actions">
+                    <button
+                      type="button"
+                      class="primary-sm"
+                      ?disabled=${this.submitting}
+                      @click=${this.onSaveProfile}
+                    >
+                      ${this.submitting ? a`<span class="spinner"></span>` : d}
+                      <span>${this.msg.saveChangesCta}</span>
+                    </button>
+                    <button
+                      type="button"
+                      class="ghost-sm"
+                      @click=${() => {
+      this.editMode = "", this.profileError = "";
+    }}
+                    >
+                      ${this.msg.cancelCta}
+                    </button>
+                  </div>
+                </div>
+              `}
+      </div>
+    `;
+  }
+  renderPasswordSection() {
+    const t = this.editMode !== "password", e = this.editMode !== "" && this.editMode !== "password";
+    return a`
+      <div class="rule"></div>
+      <div class="section">
+        <h3 class="sec-title">${this.msg.passwordSectionTitle}</h3>
+        ${t ? a`
+                <div class="between">
+                  <p class="hint">${this.msg.passwordChangedHint}</p>
+                  <div class="btn-row-end">
+                    ${this.passSaved ? a`<span role="status" class="saved-note">${this.passSaved}</span>` : d}
+                    <button
+                      type="button"
+                      class="edit-link"
+                      ?disabled=${e}
+                      @click=${this.startPassEdit}
+                    >
+                      ${this.msg.changePasswordCta}
+                    </button>
+                  </div>
+                </div>
+              ` : a`
+                <div class="edit-card">
+                  <div class="field">
+                    <label for=${this.uid("curpass")}>${this.msg.currentPasswordLabel}</label>
+                    <input
+                      id=${this.uid("curpass")}
+                      type="password"
+                      part="input"
+                      .value=${this.curPass}
+                      placeholder=${this.msg.passwordPlaceholder}
+                      ?disabled=${this.submitting}
+                      @input=${(s) => {
+      this.curPass = s.target.value, this.newPassError = "";
+    }}
+                    />
+                  </div>
+                  <div class="field">
+                    <label for=${this.uid("newpass")}>${this.msg.newPasswordLabel}</label>
+                    <input
+                      id=${this.uid("newpass")}
+                      type="password"
+                      part="input"
+                      .value=${this.newPass}
+                      placeholder=${this.msg.newPasswordPlaceholder}
+                      aria-invalid=${this.newPassError ? "true" : "false"}
+                      ?disabled=${this.submitting}
+                      @input=${(s) => {
+      this.newPass = s.target.value, this.newPassError = "";
+    }}
+                    />
+                  </div>
+                  <div class="field">
+                    <label for=${this.uid("confirmpass")}>Confirm new password</label>
+                    <input
+                      id=${this.uid("confirmpass")}
+                      type="password"
+                      part="input"
+                      .value=${this.confirmPass}
+                      placeholder=${this.msg.confirmPasswordPlaceholder}
+                      aria-invalid=${this.newPassError ? "true" : "false"}
+                      ?disabled=${this.submitting}
+                      @input=${(s) => {
+      this.confirmPass = s.target.value, this.newPassError = "";
+    }}
+                    />
+                    ${this.newPassError ? a`<p class="err">${this.newPassError}</p>` : d}
+                  </div>
+                  <div class="edit-actions">
+                    <button
+                      type="button"
+                      class="primary-sm"
+                      ?disabled=${this.submitting}
+                      @click=${this.onChangePass}
+                    >
+                      ${this.submitting ? a`<span class="spinner"></span>` : d}
+                      <span>${this.msg.updatePasswordCta}</span>
+                    </button>
+                    <button type="button" class="ghost-sm" @click=${() => this.editMode = ""}>
+                      ${this.msg.cancelCta}
+                    </button>
+                  </div>
+                </div>
+              `}
+      </div>
+    `;
+  }
+  /** Layout preserved from the mock; no enrolment operation exists yet. */
+  renderTwoFactorSection() {
+    return a`
+      <div class="rule"></div>
+      <div class="section">
+        <div class="between">
+          <div>
+            <h3 class="sec-title">${this.msg.twoFaTitle}</h3>
+            <p class="hint">${this.msg.twoFaHintOff}</p>
+          </div>
+          <button
+            type="button"
+            class="switch"
+            aria-pressed="false"
+            aria-label=${`${this.msg.twoFaTitle} (${this.msg.notYetSupported})`}
+            disabled
+            title=${this.msg.notYetSupported}
+          >
+            <span class="knob"></span>
+          </button>
+        </div>
+        <p class="disabled-note">
+          ${this.msg.notYetSupported} — enrolling a second factor is not part of the current API.
+        </p>
+      </div>
+    `;
+  }
+  renderConnectedSection() {
+    const t = this.availableProviders;
+    return t.length === 0 ? d : a`
+      <div class="rule"></div>
+      <div class="section">
+        <h3 class="sec-title">${this.msg.connectedTitle}</h3>
+        <p class="hint">${this.msg.connectedHint}</p>
+        <span class="sub-label">${this.msg.addAnotherLabel}</span>
+        <div class="tile-grid">
+          ${t.map(
+      (e) => a`
+              <button
+                type="button"
+                class="tile"
+                aria-label=${`Connect ${e.name}`}
+                ?disabled=${this.submitting}
+                @click=${() => this.onConnectProvider(e.id)}
+              >
+                <span class="tile-mark">${e.mark}</span>
+                <span class="tile-name">${e.name}</span>
+                <span class="tile-plus">+</span>
+              </button>
+            `
+    )}
+        </div>
+        <p class="disabled-note">
+          ${this.msg.notYetSupported} — listing or disconnecting linked providers is not part of the
+          current API.
+        </p>
+      </div>
+    `;
+  }
+  renderDangerSection() {
+    return a`
+      <div class="rule"></div>
+      <div class="section">
+        ${this.deleteStage === 0 ? a`<button
+                type="button"
+                class="danger-link"
+                disabled
+                title=${this.msg.notYetSupported}
+              >
+                ${this.msg.deleteAccountCta}
+              </button>` : d}
+        <p class="disabled-note">
+          ${this.msg.notYetSupported} — account deletion is not part of the current API.
+        </p>
+      </div>
+    `;
+  }
+  render() {
+    return this.user ? a`
+      <div class="acct-root">
+        ${this.renderLogo()} ${this.renderIdentity()}
+        <div class="acct-body">
+          ${this.toast ? a`<div class="notice" role="status">${this.toast}</div>` : d}
+          ${this.formError ? a`<div class="banner" role="alert">${this.formError}</div>` : d}
+          ${this.renderProfileSection()} ${this.renderEmailSection()}
+          ${this.renderPasswordSection()}
+          ${d}
+          ${this.renderConnectedSection()}
+          ${d}
+        </div>
+      </div>
+    ` : a`<p class="disabled-note">Not signed in.</p>`;
+  }
+}, F = new WeakMap(), D = new WeakMap(), B = new WeakMap(), R = new WeakMap(), H = new WeakMap(), j = new WeakMap(), q = new WeakMap(), G = new WeakMap(), V = new WeakMap(), K = new WeakMap(), Y = new WeakMap(), W = new WeakMap(), z = new WeakMap(), J = new WeakMap(), Q = new WeakMap(), X = new WeakMap(), Z = new WeakMap(), tt = new WeakMap(), et = new WeakMap(), st = new WeakMap(), it = new WeakMap(), at = new WeakMap(), rt = new WeakMap(), nt = new WeakMap(), ot = new WeakMap(), lt = new WeakMap(), Fe);
+v([
+  p({ attribute: "logo-text" })
+], f.prototype, "logoText", 1);
+v([
+  p({ attribute: "logo-url" })
+], f.prototype, "logoUrl", 1);
+v([
+  p({ attribute: !1 })
+], f.prototype, "settings", 1);
+v([
+  p({ attribute: "nonce-storage-key" })
+], f.prototype, "nonceStorageKey", 1);
+v([
+  m()
+], f.prototype, "editMode", 1);
+v([
+  m()
+], f.prototype, "toast", 1);
+v([
+  m()
+], f.prototype, "photoBusy", 1);
+v([
+  m()
+], f.prototype, "photoFailed", 1);
+v([
+  m()
+], f.prototype, "profileSaved", 1);
+v([
+  m()
+], f.prototype, "passSaved", 1);
+v([
+  m()
+], f.prototype, "profileError", 1);
+v([
+  m()
+], f.prototype, "newPassError", 1);
+v([
+  m()
+], f.prototype, "deleteStage", 1);
+v([
+  m()
+], f.prototype, "confirmText", 1);
+v([
+  m()
+], f.prototype, "dFirst", 1);
+v([
+  m()
+], f.prototype, "dLast", 1);
+v([
+  m()
+], f.prototype, "dPhone", 1);
+v([
+  m()
+], f.prototype, "dEmail", 1);
+v([
+  m()
+], f.prototype, "emailStep", 1);
+v([
+  m()
+], f.prototype, "dNewEmail", 1);
+v([
+  m()
+], f.prototype, "emailCode", 1);
+v([
+  m()
+], f.prototype, "emailError", 1);
+v([
+  m()
+], f.prototype, "emailSaved", 1);
+v([
+  m()
+], f.prototype, "curPass", 1);
+v([
+  m()
+], f.prototype, "newPass", 1);
+v([
+  m()
+], f.prototype, "confirmPass", 1);
+f = v([
+  fe("singlebase-authui-account")
+], f);
+var _s = Object.defineProperty, Os = Object.getOwnPropertyDescriptor, C = (r, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? Os(t, e) : t, h = r.length - 1, c; h >= 0; h--)
+    (c = r[h]) && (i = (s ? c(t, e, i) : c(i)) || i);
+  return s && i && _s(t, e, i), i;
+}, ht, dt, ct, ut, pt, gt, mt, De;
+let E = (De = class extends we {
+  constructor() {
+    super(...arguments);
+    o(this, ht, "signout");
+    o(this, dt, "signin");
+    o(this, ct, "");
+    o(this, ut, "");
+    o(this, pt, !1);
+    o(this, gt, null);
+    o(this, mt, "singlebase-oauth-nonce");
+    b(this, "settingsCtl", new Se(this));
+  }
+  get type() {
+    return n(this, ht);
+  }
+  set type(t) {
+    l(this, ht, t);
+  }
+  get intent() {
+    return n(this, dt);
+  }
+  set intent(t) {
+    l(this, dt, t);
+  }
+  get provider() {
+    return n(this, ct);
+  }
+  set provider(t) {
+    l(this, ct, t);
+  }
+  get providerName() {
+    return n(this, ut);
+  }
+  set providerName(t) {
+    l(this, ut, t);
+  }
+  get embedded() {
+    return n(this, pt);
+  }
+  set embedded(t) {
+    l(this, pt, t);
+  }
+  get settings() {
+    return n(this, gt);
+  }
+  set settings(t) {
+    l(this, gt, t);
+  }
+  get nonceStorageKey() {
+    return n(this, mt);
+  }
+  set nonceStorageKey(t) {
+    l(this, mt, t);
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this.type === "oauth" && this.settingsCtl.load(this.resolvedClient, this.settings);
+  }
+  get effectiveSettings() {
+    return this.settings ?? this.settingsCtl.settings;
+  }
+  // ── oauth ────────────────────────────────────────────────
+  get providers() {
+    const t = this.effectiveSettings;
+    if (!t || !t.oauth_settings.enabled) return [];
+    if (!(this.intent === "signup" ? t.oauth_settings.allow_signup : t.oauth_settings.allow_signin) && this.intent !== "link") return [];
+    const s = {
+      google: "G",
+      github: "GH",
+      linkedin: "in",
+      facebook: "f"
+    };
+    return Object.entries(t.oauth_providers).filter(([, i]) => i.enabled).map(([i, h]) => ({
+      id: i,
+      name: h.provider_name,
+      mark: s[i] ?? h.provider_name.slice(0, 2)
+    }));
+  }
+  /** Shared by the oauth and link flows: nonce, start, redirect. */
+  async startOAuth(t, e, s = !1) {
+    const i = this.resolvedClient;
+    if (!i) return;
+    let h, c;
+    if (s) {
+      const w = this.auth.state;
+      if (w.status !== "authenticated") {
+        this.formError = this.msg.linkRequiresSignIn, this.phase = "error";
+        return;
+      }
+      h = w.session.id_token, c = w.session.refresh_token;
+    }
+    await this.run(async () => {
+      var $e;
+      const w = await i.createOAuthNonce(this.signal);
+      ($e = globalThis.sessionStorage) == null || $e.setItem(this.nonceStorageKey, w);
+      const { oauth_redirect_url: y } = await i.startOAuth(
+        {
+          provider: t,
+          nonce: w,
+          intent: e,
+          ...s ? { id_token: h, refresh_token: c } : {}
+        },
+        this.signal
+      );
+      globalThis.location.assign(y);
+    });
+  }
+  renderOAuth() {
+    const t = this.providers;
+    if (t.length === 0) return d;
+    const [e, ...s] = t;
+    return a`
+      <div class="stack">
+        ${this.formError ? a`<div class="banner" part="banner" role="alert">${this.formError}</div>` : d}
+
+        <button
+          type="button"
+          class="oauth-primary"
+          part="oauth-button"
+          ?disabled=${this.submitting}
+          @click=${() => this.startOAuth(e.id, this.intent)}
+        >
+          <span class="g-mark">${e.mark}</span>
+          <span>${this.msg.oauthContinueWith} ${e.name}</span>
+        </button>
+
+        ${s.length ? a`
+                <div class="icon-row">
+                  ${s.map(
+      (i) => a`
+                      <button
+                        type="button"
+                        class="icon-btn"
+                        part="oauth-button"
+                        aria-label=${`${this.msg.oauthContinueWith} ${i.name}`}
+                        title=${`${this.msg.oauthContinueWith} ${i.name}`}
+                        ?disabled=${this.submitting}
+                        @click=${() => this.startOAuth(i.id, this.intent)}
+                      >
+                        <span class="tile-mark">${i.mark}</span>
+                      </button>
+                    `
+    )}
+                </div>
+              ` : d}
+      </div>
+    `;
+  }
+  // ── link ─────────────────────────────────────────────────
+  renderLink() {
+    return a`
+      <div class="stack">
+        ${this.renderStatus()}
+        <button
+          type="button"
+          class="secondary"
+          part="oauth-button"
+          ?disabled=${this.submitting}
+          @click=${() => this.startOAuth(this.provider, "link", !0)}
+        >
+          ${this.submitting ? a`<span class="spinner"></span>` : d}
+          <span>${this.msg.oauthContinueWith} ${this.providerName || this.provider}</span>
+        </button>
+      </div>
+    `;
+  }
+  // ── signout ──────────────────────────────────────────────
+  async onSignOut() {
+    const t = this.resolvedClient;
+    t && await this.run(async () => {
+      await t.signOut();
+    });
+  }
+  renderSignOut() {
+    return this.embedded ? a`<button
+        type="button"
+        class="link-sm"
+        part="button-signout"
+        ?disabled=${this.submitting}
+        @click=${this.onSignOut}
+      >
+        ${this.msg.signOutCta}
+      </button>` : a`
+      <div class="stack">
+        ${this.formError ? a`<p class="banner" role="alert">${this.formError}</p>` : d}
+        <button
+          type="button"
+          class="link-sm"
+          part="button-signout"
+          ?disabled=${this.submitting}
+          @click=${this.onSignOut}
+        >
+          ${this.msg.signOutCta}
+        </button>
+      </div>
+    `;
+  }
+  render() {
+    return this.type === "oauth" ? this.renderOAuth() : this.type === "link" ? this.renderLink() : this.renderSignOut();
+  }
+}, ht = new WeakMap(), dt = new WeakMap(), ct = new WeakMap(), ut = new WeakMap(), pt = new WeakMap(), gt = new WeakMap(), mt = new WeakMap(), De);
+C([
+  p()
+], E.prototype, "type", 1);
+C([
+  p()
+], E.prototype, "intent", 1);
+C([
+  p()
+], E.prototype, "provider", 1);
+C([
+  p({ attribute: "provider-name" })
+], E.prototype, "providerName", 1);
+C([
+  p({ type: Boolean })
+], E.prototype, "embedded", 1);
+C([
+  p({ attribute: !1 })
+], E.prototype, "settings", 1);
+C([
+  p({ attribute: "nonce-storage-key" })
+], E.prototype, "nonceStorageKey", 1);
+E = C([
+  fe("singlebase-authui-buttons")
+], E);
+var Ve = Object.defineProperty, xs = Object.getOwnPropertyDescriptor, Ts = (r, t, e) => t in r ? Ve(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, g = (r, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? xs(t, e) : t, h = r.length - 1, c; h >= 0; h--)
+    (c = r[h]) && (i = (s ? c(t, e, i) : c(i)) || i);
+  return s && i && Ve(t, e, i), i;
+}, Us = (r, t, e) => Ts(r, t + "", e);
+const Ke = [
+  "signin",
+  "signup",
+  "forgot",
+  "verify",
+  "otp",
+  "newpass",
+  "invite"
+], Ye = ["account"], Ls = [...Ke, ...Ye, "oauth-callback"];
+function Ne(r) {
+  return Ke.includes(r);
+}
+function As(r) {
+  return Ye.includes(r);
+}
+function Ie(r) {
+  return Ls.includes(r);
+}
+const P = {
+  // An absent attribute must mean "default" (true), not false. Lit calls
+  // fromAttribute(null) when an attribute is *removed*, so returning false
+  // there would make removing `allow-oauth="false"` leave the flag off
+  // forever instead of restoring the default.
+  fromAttribute: (r) => r === null ? !0 : r !== "false",
+  toAttribute: (r) => r ? null : "false"
+};
+var bt, ft, vt, wt, $t, yt, Et, St, Ct, Pt, kt, _t, Ot, xt, Tt, Ut, Lt, At, Mt, Nt, It, Ft, Dt, Bt, Rt, Ht, jt, qt, Gt, Vt, Kt, Yt, Wt, zt, Jt, Qt, Xt, Zt, te, ee, se, ie, ae, re, ne, oe, le, Be;
+let u = (Be = class extends $ {
+  constructor() {
+    super(...arguments);
+    o(this, bt, "signin");
+    o(this, ft, "");
+    o(this, vt, !1);
+    o(this, wt, null);
+    o(this, $t, !0);
+    o(this, yt, !0);
+    o(this, Et, !0);
+    o(this, St, !0);
+    o(this, Ct, !0);
+    o(this, Pt, !0);
+    o(this, kt, "card");
+    o(this, _t, "bottom");
+    o(this, Ot, !1);
+    o(this, xt, "");
+    o(this, Tt, "");
+    o(this, Ut, "");
+    o(this, Lt, "");
+    o(this, At, "");
+    o(this, Mt, !0);
+    o(this, Nt, "");
+    o(this, It, "");
+    o(this, Ft, "");
+    o(this, Dt, "singlebase-oauth-nonce");
+    o(this, Bt, "");
+    o(this, Rt, "");
+    o(this, Ht, "");
+    o(this, jt, 0);
+    o(this, qt, "");
+    o(this, Gt, "");
+    o(this, Vt, "");
+    o(this, Kt, "");
+    o(this, Yt, "");
+    o(this, Wt, "");
+    o(this, zt, "");
+    o(this, Jt, "");
+    o(this, Qt, "");
+    o(this, Xt, ["", "", "", "", "", ""]);
+    o(this, Zt, "signin_code");
+    o(this, te, !1);
+    o(this, ee, "");
+    o(this, se, "");
+    o(this, ie, "");
+    o(this, ae, "");
+    o(this, re, "");
+    o(this, ne, 0);
+    o(this, oe, !1);
+    b(this, "settingsCtl", new Se(this));
+    b(this, "bridge", new $s(this));
+    b(this, "uidBase", `sb-${Math.random().toString(36).slice(2, 8)}`);
+    b(this, "gotoUnsubscribe");
+    b(this, "gotoClient", null);
+    o(this, le, !1);
+    b(this, "abortController", null);
+    b(this, "onContinue", () => {
+      this.followRedirect() || (this.dispatchEvent(
+        new CustomEvent("singlebase-continue", {
+          detail: { user: this.getUser() },
+          bubbles: !0,
+          composed: !0
+        })
+      ), this.goto("account"));
+    });
+    b(this, "onInterstitialSignOut", async () => {
+      var t;
+      await ((t = this.resolvedClient) == null ? void 0 : t.logout()), this.goto("signin");
+    });
+  }
+  get initialScreen() {
+    return n(this, bt);
+  }
+  set initialScreen(t) {
+    l(this, bt, t);
+  }
+  get screen() {
+    return n(this, ft);
+  }
+  set screen(t) {
+    l(this, ft, t);
+  }
+  get noAccountView() {
+    return n(this, vt);
+  }
+  set noAccountView(t) {
+    l(this, vt, t);
+  }
+  get settings() {
+    return n(this, wt);
+  }
+  set settings(t) {
+    l(this, wt, t);
+  }
+  get authEnabled() {
+    return n(this, $t);
+  }
+  set authEnabled(t) {
+    l(this, $t, t);
+  }
+  get allowEmailSignin() {
+    return n(this, yt);
+  }
+  set allowEmailSignin(t) {
+    l(this, yt, t);
+  }
+  get allowEmailSignup() {
+    return n(this, Et);
+  }
+  set allowEmailSignup(t) {
+    l(this, Et, t);
+  }
+  get allowEmailOtp() {
+    return n(this, St);
+  }
+  set allowEmailOtp(t) {
+    l(this, St, t);
+  }
+  get allowOauth() {
+    return n(this, Ct);
+  }
+  set allowOauth(t) {
+    l(this, Ct, t);
+  }
+  get allowAccountCreation() {
+    return n(this, Pt);
+  }
+  set allowAccountCreation(t) {
+    l(this, Pt, t);
+  }
+  get layout() {
+    return n(this, kt);
+  }
+  set layout(t) {
+    l(this, kt, t);
+  }
+  get oauthPlacement() {
+    return n(this, _t);
+  }
+  set oauthPlacement(t) {
+    l(this, _t, t);
+  }
+  get stepped() {
+    return n(this, Ot);
+  }
+  set stepped(t) {
+    l(this, Ot, t);
+  }
+  get logoText() {
+    return n(this, xt);
+  }
+  set logoText(t) {
+    l(this, xt, t);
+  }
+  get logoUrl() {
+    return n(this, Tt);
+  }
+  set logoUrl(t) {
+    l(this, Tt, t);
+  }
+  get brandLine() {
+    return n(this, Ut);
+  }
+  set brandLine(t) {
+    l(this, Ut, t);
+  }
+  get brandFoot() {
+    return n(this, Lt);
+  }
+  set brandFoot(t) {
+    l(this, Lt, t);
+  }
+  get signInTitle() {
+    return n(this, At);
+  }
+  set signInTitle(t) {
+    l(this, At, t);
+  }
+  get branding() {
+    return n(this, Mt);
+  }
+  set branding(t) {
+    l(this, Mt, t);
+  }
+  get redirectUrl() {
+    return n(this, Nt);
+  }
+  set redirectUrl(t) {
+    l(this, Nt, t);
+  }
+  get tosUrl() {
+    return n(this, It);
+  }
+  set tosUrl(t) {
+    l(this, It, t);
+  }
+  get privacyUrl() {
+    return n(this, Ft);
+  }
+  set privacyUrl(t) {
+    l(this, Ft, t);
+  }
+  get nonceStorageKey() {
+    return n(this, Dt);
+  }
+  set nonceStorageKey(t) {
+    l(this, Dt, t);
+  }
+  get inviteEmail() {
+    return n(this, Bt);
+  }
+  set inviteEmail(t) {
+    l(this, Bt, t);
+  }
+  get inviteOrg() {
+    return n(this, Rt);
+  }
+  set inviteOrg(t) {
+    l(this, Rt, t);
+  }
+  get inviteCode() {
+    return n(this, Ht);
+  }
+  set inviteCode(t) {
+    l(this, Ht, t);
+  }
+  get step() {
+    return n(this, jt);
+  }
+  set step(t) {
+    l(this, jt, t);
+  }
+  get method() {
+    return n(this, qt);
+  }
+  set method(t) {
+    l(this, qt, t);
+  }
+  get email() {
+    return n(this, Gt);
+  }
+  set email(t) {
+    l(this, Gt, t);
+  }
+  get password() {
+    return n(this, Vt);
+  }
+  set password(t) {
+    l(this, Vt, t);
+  }
+  get name() {
+    return n(this, Kt);
+  }
+  set name(t) {
+    l(this, Kt, t);
+  }
+  get firstName() {
+    return n(this, Yt);
+  }
+  set firstName(t) {
+    l(this, Yt, t);
+  }
+  get lastName() {
+    return n(this, Wt);
+  }
+  set lastName(t) {
+    l(this, Wt, t);
+  }
+  get phone() {
+    return n(this, zt);
+  }
+  set phone(t) {
+    l(this, zt, t);
+  }
+  get newPass() {
+    return n(this, Jt);
+  }
+  set newPass(t) {
+    l(this, Jt, t);
+  }
+  get confirmPass() {
+    return n(this, Qt);
+  }
+  set confirmPass(t) {
+    l(this, Qt, t);
+  }
+  get code() {
+    return n(this, Xt);
+  }
+  set code(t) {
+    l(this, Xt, t);
+  }
+  get verifyNext() {
+    return n(this, Zt);
+  }
+  set verifyNext(t) {
+    l(this, Zt, t);
+  }
+  get loading() {
+    return n(this, te);
+  }
+  set loading(t) {
+    l(this, te, t);
+  }
+  get banner() {
+    return n(this, ee);
+  }
+  set banner(t) {
+    l(this, ee, t);
+  }
+  get notice() {
+    return n(this, se);
+  }
+  set notice(t) {
+    l(this, se, t);
+  }
+  get emailError() {
+    return n(this, ie);
+  }
+  set emailError(t) {
+    l(this, ie, t);
+  }
+  get passError() {
+    return n(this, ae);
+  }
+  set passError(t) {
+    l(this, ae, t);
+  }
+  get newPassError() {
+    return n(this, re);
+  }
+  set newPassError(t) {
+    l(this, re, t);
+  }
+  get attempts() {
+    return n(this, ne);
+  }
+  set attempts(t) {
+    l(this, ne, t);
+  }
+  get needsMfaCode() {
+    return n(this, oe);
+  }
+  set needsMfaCode(t) {
+    l(this, oe, t);
+  }
+  uid(t) {
+    return `${this.uidBase}-${t}`;
+  }
+  willUpdate(t) {
+    super.willUpdate(t), this.settingsCtl.load(this.resolvedClient, this.settings), this.bridge.bind(this.resolvedClient), this.bindGoto(this.resolvedClient);
+  }
+  disconnectedCallback() {
+    var t, e;
+    super.disconnectedCallback(), (t = this.gotoUnsubscribe) == null || t.call(this), this.gotoUnsubscribe = void 0, this.gotoClient = null, (e = this.abortController) == null || e.abort();
+  }
+  /**
+   * Subscribes to auth.goto() so a host can drive every widget on the page
+   * with one call. Bound here rather than in connectedCallback because the
+   * app usually creates its SinglebaseAuth() instance *after* the widget
+   * upgrades — at connect time there is often no client to subscribe to yet.
+   */
+  bindGoto(t) {
+    var i;
+    if (t === this.gotoClient || ((i = this.gotoUnsubscribe) == null || i.call(this), this.gotoUnsubscribe = void 0, this.gotoClient = t, !t)) return;
+    const e = t.on("goto", ({ screen: h }) => {
+      Ie(h) && this.goto(h);
+    }), s = t.on("signin", () => {
+      this.followRedirect();
+    });
+    this.gotoUnsubscribe = () => {
+      e(), s();
+    };
+  }
+  /** Shows a screen. The SPA-facing counterpart of the `screen` property. */
+  goto(t) {
+    this.screen !== t && (this.screen = t, this.step = 0, this.banner = "", this.notice = "", this.dispatchEvent(
+      new CustomEvent("singlebase-screen-change", {
+        detail: { screen: t },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  // ── derived config: explicit props unless auth.settings says otherwise ──
+  get cfg() {
+    const t = this.settings ?? this.settingsCtl.settings;
+    if (!t)
+      return {
+        authEnabled: this.authEnabled,
+        allowEmailSignin: this.allowEmailSignin,
+        allowEmailSignup: this.allowEmailSignup && this.allowAccountCreation,
+        allowEmailOtp: this.allowEmailOtp,
+        allowOauth: this.allowOauth,
+        mfa: !1
+      };
+    const e = t.auth_settings, s = e.second_factor === "email_otp";
+    return {
+      authEnabled: t.enabled && e.enabled && this.authEnabled,
+      allowEmailSignin: e.allow_signin && this.allowEmailSignin,
+      allowEmailSignup: e.allow_signup && this.allowEmailSignup && this.allowAccountCreation,
+      allowEmailOtp: this.allowEmailOtp && e.allow_signin && !s,
+      allowOauth: t.oauth_settings.enabled && this.allowOauth,
+      mfa: s
+    };
+  }
+  /** The screen the host asked for, before any guarding is applied. */
+  get requestedScreen() {
+    const t = this.screen || this.initialScreen || "signin";
+    return Ie(t) ? t : "signin";
+  }
+  /**
+   * Resolves the screen actually rendered.
+   *
+   * This is the single place navigation is decided, so a protected screen
+   * cannot be reached by setting an attribute, editing the URL, or calling
+   * goto() — every route runs through the same auth check. The guest
+   * fallbacks below additionally reflect what the project has enabled.
+   */
+  get activeScreen() {
+    if (this.isOAuthCallback) return "oauth-callback";
+    const t = this.auth.state.status === "authenticated", e = this.requestedScreen;
+    if (As(e))
+      return t ? e : "signin";
+    if (t)
+      return this.screen !== "" || this.initialScreen !== "signin" ? e : "account";
+    const s = this.cfg;
+    let i = e;
+    return i === "signup" && !s.allowEmailSignup && (i = "signin"), (i === "forgot" || i === "newpass") && !s.allowEmailSignin && (i = "signin"), i === "otp" && !s.allowEmailOtp && (i = "signin"), i === "signin" && !s.allowEmailSignin && s.allowEmailOtp && (i = "otp"), i;
+  }
+  /** True when a signed-in user is sitting on a guest screen (spec: offer continue/sign out). */
+  get showsSignedInInterstitial() {
+    return this.auth.state.status === "authenticated" && Ne(this.activeScreen);
+  }
+  // ── redirect ──────────────────────────────────────────────
+  /**
+   * The post-login destination, or null when there is none.
+   *
+   * Only same-origin targets are accepted. A login widget that forwards to
+   * an attacker-chosen host is a textbook open redirect, and the `redirect`
+   * parameter it reads comes straight off the URL bar, so it is untrusted
+   * input by definition.
+   */
+  get redirectTarget() {
+    var t;
+    return ls(
+      this.redirectUrl || this.redirectParam,
+      (t = globalThis.location) == null ? void 0 : t.href,
+      (e) => console.warn(`[singlebase] ${e}`)
+    );
+  }
+  get redirectParam() {
+    var e;
+    const t = new URLSearchParams(((e = globalThis.location) == null ? void 0 : e.search) ?? "");
+    return t.get("redirect") ?? t.get("next") ?? "";
+  }
+  /** Navigates to the post-login destination if there is a safe one. */
+  followRedirect() {
+    var e;
+    const t = this.redirectTarget;
+    return t ? ((e = globalThis.location) == null || e.assign(t), !0) : !1;
+  }
+  get isOAuthCallback() {
+    var e;
+    const t = new URLSearchParams(((e = globalThis.location) == null ? void 0 : e.search) ?? "");
+    return t.has("access_code") || t.has("error");
+  }
+  get callbackDone() {
+    return n(this, le);
+  }
+  set callbackDone(t) {
+    l(this, le, t);
+  }
+  /** Strips the provider's parameters so a reload cannot replay the exchange. */
+  cleanCallbackUrl() {
+    var s;
+    const t = (s = globalThis.location) == null ? void 0 : s.href;
+    if (!t || !globalThis.history) return;
+    const e = new URL(t);
+    e.searchParams.delete("access_code"), e.searchParams.delete("error"), globalThis.history.replaceState({}, "", e.toString());
+  }
+  /**
+   * Completes the provider round trip. Runs once per landing: the URL is
+   * cleaned immediately so a refresh cannot resend a single-use access code.
+   */
+  async handleOAuthCallback() {
+    var c, w;
+    if (this.callbackDone) return;
+    this.callbackDone = !0;
+    const t = new URLSearchParams(((c = globalThis.location) == null ? void 0 : c.search) ?? ""), e = t.get("access_code"), s = t.get("error"), i = this.resolvedClient;
+    if (s) {
+      this.cleanCallbackUrl(), this.banner = this.msg.oauthDenied;
+      return;
+    }
+    if (!e || !i) return;
+    const h = (w = globalThis.sessionStorage) == null ? void 0 : w.getItem(this.nonceStorageKey);
+    if (this.cleanCallbackUrl(), !h) {
+      this.banner = this.msg.genericErrorMessage;
+      return;
+    }
+    await this.withLoading(async () => {
+      var y;
+      await i.completeOAuth({ access_code: e, nonce: h }, this.signal()), (y = globalThis.sessionStorage) == null || y.removeItem(this.nonceStorageKey);
+    });
+  }
+  /** The small logo above a screen title: image when given one, else text. */
+  renderLogo() {
+    return this.logoUrl ? a`<img class="logo-img" part="logo" src=${this.logoUrl} alt=${this.logoText} />` : this.logoText ? a`<div class="logo-dot" part="logo">${this.logoText}</div>` : d;
+  }
+  /** The larger logo in the split layout's brand panel. */
+  renderBrandMark() {
+    return this.logoUrl ? a`<img class="brand-img" part="logo" src=${this.logoUrl} alt=${this.logoText} />` : this.logoText ? a`<div class="brand-mark" part="logo">${this.logoText}</div>` : d;
+  }
+  renderBranding() {
+    return this.branding ? a`<div class="branding" part="branding">
+      <a href="https://singlebase.cloud" target="_blank" rel="noopener noreferrer"
+        >${this.msg.brandingLabel}</a
+      >
+    </div>` : d;
+  }
+  /** Every screen renders inside this, so the credit appears once and only once. */
+  panel(t) {
+    return a`<div class="panel">${t}${this.renderBranding()}</div>`;
+  }
+  renderOAuthCallback() {
+    return a`
+      <div class="stack">
+        <div class="head">
+          ${this.renderLogo()}
+          <h2 class="title" part="title">${this.msg.oauthCallbackTitle}</h2>
+          <p class="sub">${this.msg.oauthCallbackSub}</p>
+        </div>
+        ${this.banner ? a`<div class="banner" part="banner" role="alert">${this.banner}</div>` : a`<div class="stack" style="align-items:center;">
+                <span class="spinner" part="spinner"></span>
+              </div>`}
+        ${this.banner ? a`<button type="button" class="ghost" @click=${() => this.goto("signin")}>
+                <span>${this.msg.backCta}</span>
+              </button>` : d}
+      </div>
+    `;
+  }
+  setScreen(t, e = {}) {
+    const s = this.screen !== t;
+    this.screen = t, this.banner = "", this.emailError = "", this.passError = "", Object.assign(this, e), s && this.dispatchEvent(
+      new CustomEvent("singlebase-screen-change", {
+        detail: { screen: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // ── submit ────────────────────────────────────────────────
+  async withLoading(t) {
+    this.loading = !0, this.banner = "";
+    try {
+      await t();
+    } catch (e) {
+      this.banner = this.describeError(e);
+    } finally {
+      this.loading = !1;
+    }
+  }
+  describeError(t) {
+    if (t instanceof ye) {
+      if (t.code === "AUTH_RATE_LIMITED") return this.msg.rateLimitedMessage;
+      if (t.code === "INVALID_TOKEN") return "That code is not valid. Check it and try again.";
+    }
+    return this.msg.genericErrorMessage;
+  }
+  get codeValue() {
+    return this.code.join("");
+  }
+  async onSubmit(t) {
+    t == null || t.preventDefault();
+    const e = this.resolvedClient;
+    if (!e) return;
+    const s = this.activeScreen;
+    if (this.cfg, s === "forgot" || s === "otp") {
+      if (!this.email.includes("@")) {
+        this.emailError = this.msg.invalidEmailError;
+        return;
+      }
+      const i = s === "forgot" ? "password_reset" : "signin";
+      await this.withLoading(async () => {
+        await e.requestCode({ email: this.email, purpose: i }, this.signal()), this.notice = this.msg.codeSentNeutral, this.screen = "verify", this.verifyNext = s === "forgot" ? "newpass" : "signin_code", this.code = ["", "", "", "", "", ""];
+      });
+      return;
+    }
+    if (s === "verify") {
+      if (this.codeValue.length < 6) {
+        this.banner = this.msg.codeIncompleteError;
+        return;
+      }
+      if (this.verifyNext === "newpass") {
+        this.setScreen("newpass", { notice: "" });
+        return;
+      }
+      await this.withLoading(async () => {
+        await e.signIn(
+          { email: this.email, grant_type: "code", code: this.codeValue },
+          this.signal()
+        ), this.notice = "";
+      });
+      return;
+    }
+    if (s === "newpass") {
+      if (this.newPass.length < 10) {
+        this.newPassError = this.msg.passwordMinError;
+        return;
+      }
+      if (this.newPass !== this.confirmPass) {
+        this.newPassError = this.msg.passwordMatchError;
+        return;
+      }
+      await this.withLoading(async () => {
+        await e.resetPassword(
+          { email: this.email, code: this.codeValue, new_password: this.newPass },
+          this.signal()
+        ), this.newPass = "", this.confirmPass = "";
+      });
+      return;
+    }
+    if (s === "invite") {
+      if (!this.firstName.trim() || !this.lastName.trim()) {
+        this.banner = "Enter your first and last name.";
+        return;
+      }
+      if (this.phone.replace(/\D/g, "").length < 7) {
+        this.banner = this.msg.invalidPhoneError;
+        return;
+      }
+      if (this.password.length < 10) {
+        this.passError = this.msg.passwordMinError;
+        return;
+      }
+      const i = this.inviteCode || this.codeValue;
+      if (i.length < 6) {
+        this.banner = this.msg.codeIncompleteError;
+        return;
+      }
+      await this.withLoading(async () => {
+        await e.acceptInvite(
+          {
+            email: this.inviteEmail,
+            grant_type: "code",
+            purpose: "invite",
+            code: i,
+            password: this.password,
+            phone: this.phone
+          },
+          this.signal()
+        );
+      });
+      return;
+    }
+    if (this.stepped && (s === "signup" && this.step < 2 || s === "signin" && this.step < 1)) {
+      if (!this.email.includes("@")) {
+        this.emailError = this.msg.invalidEmailError;
+        return;
+      }
+      this.step += 1;
+      return;
+    }
+    if (!this.email.includes("@")) {
+      this.emailError = this.msg.invalidEmailError;
+      return;
+    }
+    if (s === "signup") {
+      if (this.password.length < 8) {
+        this.passError = "Password must be at least 8 characters.";
+        return;
+      }
+      const [i, ...h] = this.name.trim().split(/\s+/);
+      await this.withLoading(async () => {
+        const c = await e.signUp(
+          {
+            email: this.email,
+            password: this.password,
+            first_name: i || this.name,
+            last_name: h.join(" ") || "—"
+          },
+          this.signal()
+        ), w = rs({
+          next_action: c.next_action,
+          next_operation: c.next_operation
+        });
+        this.setScreen("signin", {
+          notice: "Account created. Sign in to continue.",
+          step: 0,
+          password: "",
+          needsMfaCode: w === "signin_with_code"
+        });
+      });
+      return;
+    }
+    if (this.password.length < 8) {
+      this.attempts += 1, this.passError = "Password must be at least 8 characters.", this.banner = this.attempts >= 3 ? this.msg.rateLimitedMessage : "";
+      return;
+    }
+    await this.withLoading(async () => {
+      try {
+        await e.signIn(
+          {
+            email: this.email,
+            password: this.password,
+            ...this.needsMfaCode ? { code: this.codeValue } : {}
+          },
+          this.signal()
+        ), this.step = 0;
+      } catch (i) {
+        if (i instanceof ye && i.code === "CODE_REQUIRED") {
+          this.needsMfaCode = !0, await e.requestCode({ email: this.email, purpose: "signin" }, this.signal()), this.notice = this.msg.codeSentNeutral;
+          return;
+        }
+        if (i instanceof ye && i.code === "INVALID_CREDENTIALS") {
+          this.attempts += 1, this.banner = this.attempts >= 3 ? this.msg.rateLimitedMessage : "That email and password do not match.";
+          return;
+        }
+        throw i;
+      }
+    });
+  }
+  signal() {
+    var t;
+    return (t = this.abortController) == null || t.abort(), this.abortController = new AbortController(), this.abortController.signal;
+  }
+  onCodeInput(t, e) {
+    var w;
+    const i = e.target.value.replace(/\D/g, "");
+    if (i.length > 1) {
+      this.fillCode(t, i);
+      return;
+    }
+    const h = i.slice(-1), c = this.code.slice();
+    c[t] = h, this.code = c, this.banner = "", h && ((w = this.renderRoot.querySelectorAll(
+      ".code-row input, .code-row-sm input"
+    )[t + 1]) == null || w.focus());
+  }
+  onCodePaste(t, e) {
+    var i;
+    const s = (((i = e.clipboardData) == null ? void 0 : i.getData("text")) ?? "").replace(/\D/g, "");
+    s && (e.preventDefault(), this.fillCode(t, s));
+  }
+  fillCode(t, e) {
+    const s = this.code.slice();
+    for (let h = 0; h < e.length && t + h < s.length; h += 1)
+      s[t + h] = e[h];
+    this.code = s, this.banner = "";
+    const i = Math.min(t + e.length, s.length - 1);
+    this.updateComplete.then(() => {
+      var c;
+      (c = this.renderRoot.querySelectorAll(
+        ".code-row input, .code-row-sm input"
+      )[i]) == null || c.focus();
+    });
+  }
+  async onResend() {
+    const t = this.resolvedClient;
+    if (!t || this.loading) return;
+    const e = this.verifyNext === "newpass" ? "password_reset" : "signin";
+    await this.withLoading(async () => {
+      await t.requestCode({ email: this.email, purpose: e }, this.signal()), this.notice = "New code sent.", this.code = ["", "", "", "", "", ""];
+    });
+  }
+  goBack() {
+    if (this.step > 0 && ["forgot", "verify", "otp", "newpass"].indexOf(this.activeScreen) < 0) {
+      this.step -= 1, this.banner = "", this.notice = "";
+      return;
+    }
+    this.setScreen("signin", { step: 0, notice: "", code: ["", "", "", "", "", ""] });
+  }
+  // ── copy helpers (mirror the mock's titles/subs/ctas maps) ──
+  titleFor(t) {
+    const e = this.msg;
+    switch (t) {
+      case "signup":
+        return e.signUpTitle;
+      case "forgot":
+        return e.forgotTitle;
+      case "verify":
+        return e.verifyTitle;
+      case "otp":
+        return e.otpTitle;
+      case "newpass":
+        return e.newPassTitle;
+      case "invite":
+        return e.inviteTitle;
+      default:
+        return this.signInTitle || e.signInTitle;
+    }
+  }
+  subFor(t) {
+    const e = this.msg, s = this.cfg;
+    switch (t) {
+      case "signup":
+        return e.signUpSub;
+      case "forgot":
+        return e.forgotSub;
+      case "verify":
+        return `We sent a 6-digit code to ${this.email || "your inbox"}. It expires in 10 minutes.`;
+      case "otp":
+        return e.otpSub;
+      case "newpass":
+        return `Your code is confirmed. Set a new password for ${this.email || "your account"}.`;
+      case "invite":
+        return `${this.inviteOrg || "Acme"} invited you to join. Set up your account to continue.`;
+      default:
+        return !s.allowEmailSignin && !s.allowEmailOtp ? e.signInSubOauthOnly : s.allowOauth ? e.signInSubEmailAndOauth : e.signInSubEmailOnly;
+    }
+  }
+  ctaFor(t) {
+    const e = this.msg;
+    if (this.stepped && (t === "signup" && this.step < 2 || t === "signin" && this.step < 1))
+      return e.continueCta;
+    switch (t) {
+      case "signup":
+        return e.signUpCta;
+      case "forgot":
+        return e.forgotCta;
+      case "verify":
+        return e.verifyCta;
+      case "otp":
+        return e.otpCta;
+      case "newpass":
+        return e.newPassCta;
+      case "invite":
+        return e.inviteCta;
+      default:
+        return e.signInCta;
+    }
+  }
+  stepPct() {
+    if (!this.stepped) return 100;
+    const t = this.activeScreen === "signup" ? 3 : 2;
+    return Math.round((this.step + 1) / t * 100);
+  }
+  // ── render pieces ─────────────────────────────────────────
+  renderPrimary(t) {
+    return a`
+      <button type="submit" class="primary" part="button-primary" ?disabled=${this.loading}>
+        ${this.loading ? a`<span class="spinner" part="spinner"></span>` : d}
+        <span>${t}</span>
+      </button>
+    `;
+  }
+  renderEmailField(t) {
+    return a`
+      <div class="field">
+        <label for=${t}>${this.msg.emailLabel}</label>
+        <input
+          id=${t}
+          type="email"
+          part="input"
+          .value=${this.email}
+          placeholder=${this.msg.emailPlaceholder}
+          aria-invalid=${this.emailError ? "true" : "false"}
+          ?disabled=${this.loading}
+          @input=${(e) => {
+      this.email = e.target.value, this.emailError = "", this.banner = "";
+    }}
+        />
+        ${this.emailError ? a`<p class="err">${this.emailError}</p>` : d}
+      </div>
+    `;
+  }
+  renderPasswordField(t, e) {
+    return a`
+      <div class="field">
+        <div class="label-row">
+          <label for=${t}>${this.msg.passwordLabel}</label>
+          ${e ? a`<button
+                  type="button"
+                  class="link-sm"
+                  @click=${() => this.setScreen("forgot", { step: 0 })}
+                >
+                  ${this.msg.forgotLink}
+                </button>` : d}
+        </div>
+        <input
+          id=${t}
+          type="password"
+          part="input"
+          .value=${this.password}
+          placeholder=${this.msg.passwordPlaceholder}
+          aria-invalid=${this.passError ? "true" : "false"}
+          ?disabled=${this.loading}
+          @input=${(s) => {
+      this.password = s.target.value, this.passError = "", this.banner = "";
+    }}
+        />
+        ${this.passError ? a`<p class="err">${this.passError}</p>` : d}
+      </div>
+    `;
+  }
+  renderCodeRow(t = !1) {
+    return a`
+      <div class=${t ? "code-row-sm" : "code-row"} role="group" aria-label="Verification code">
+        ${this.code.map(
+      (e, s) => a`
+            <input
+              type="text"
+              inputmode="numeric"
+              maxlength="1"
+              part="code-box"
+              aria-label=${`Digit ${s + 1}`}
+              autocomplete=${s === 0 ? "one-time-code" : "off"}
+              .value=${e}
+              ?disabled=${this.loading}
+              @input=${(i) => this.onCodeInput(s, i)}
+              @paste=${(i) => this.onCodePaste(s, i)}
+            />
+          `
+    )}
+      </div>
+    `;
+  }
+  /** The email/password method accordion body for signin, signup and otp. */
+  renderEmailMethodBody(t) {
+    const e = this.cfg, s = this.stepped, i = t === "signup" && (!s || this.step === 0), h = t === "signup" && (!s || this.step === 1) || t === "signin" && (!s || this.step === 0) || t === "otp", c = t === "signup" && (!s || this.step === 2) || t === "signin" && (!s || this.step === 1), w = t === "signin" && e.allowEmailSignin && e.allowEmailOtp && (!s || this.step === 0);
+    return a`
+      ${i ? a`
+              <div class="field">
+                <label for=${this.uid("name")}>${this.msg.fullNameLabel}</label>
+                <input
+                  id=${this.uid("name")}
+                  type="text"
+                  part="input"
+                  .value=${this.name}
+                  placeholder=${this.msg.fullNamePlaceholder}
+                  ?disabled=${this.loading}
+                  @input=${(y) => this.name = y.target.value}
+                />
+              </div>
+            ` : d}
+      ${h ? this.renderEmailField(this.uid("email")) : d}
+      ${c ? this.renderPasswordField(this.uid("pass"), e.allowEmailSignin && t === "signin") : d}
+      ${this.needsMfaCode && t === "signin" ? a`
+              <div class="field">
+                <span class="label">Verification code</span>
+                ${this.renderCodeRow(!0)}
+              </div>
+            ` : d}
+      ${this.renderPrimary(this.ctaFor(t))}
+      ${w ? a`<button
+              type="button"
+              class="edit-link"
+              @click=${() => this.setScreen("otp", { step: 0 })}
+            >
+              ${this.msg.otpInsteadLink}
+            </button>` : d}
+    `;
+  }
+  renderAccordion(t) {
+    const e = this.cfg, s = t === "signin" && e.allowEmailSignin || t === "signup" && e.allowEmailSignup || t === "otp" && e.allowEmailOtp, i = e.allowOauth;
+    if (!s && !i) return d;
+    const h = s && i, c = s ? i && this.method || "email" : "oauth", w = c === "email", y = c === "oauth", $e = t === "signup" ? this.msg.emailMethodTitleSignUp : this.msg.emailMethodTitle, ze = t === "otp" ? this.msg.emailMethodMetaOtp : t === "signup" ? this.msg.emailMethodMetaSignUp : this.msg.emailMethodMeta, Pe = (Oe, Je, Qe, Xe, Ze, xe) => a`
+      <div class="acc-item ${Oe ? "open" : ""} ${h ? "" : "bare"}" part="acc-item">
+        ${h ? a`
+                <button
+                  type="button"
+                  class="acc-head"
+                  aria-expanded=${Oe ? "true" : "false"}
+                  aria-controls=${this.uid(`acc-${xe}`)}
+                  @click=${Ze}
+                >
+                  <span class="chev" aria-hidden="true">›</span>
+                  <span class="acc-title">${Je}</span>
+                  <span class="acc-meta">${Qe}</span>
+                </button>
+              ` : d}
+        <div class="acc-body" id=${this.uid(`acc-${xe}`)}>
+          <div class="acc-clip">
+            <div class="acc-inner">${Xe}</div>
+          </div>
+        </div>
+      </div>
+    `, ke = s ? Pe(
+      w,
+      $e,
+      ze,
+      this.renderEmailMethodBody(t),
+      () => this.method = w ? "" : "email",
+      "email"
+    ) : d, _e = i ? Pe(
+      y,
+      this.msg.oauthMethodTitle,
+      this.msg.oauthMethodMeta,
+      a`<singlebase-authui-buttons
+            type="oauth"
+            embedded
+            theme=${k(this.theme)}
+            density=${k(this.density)}
+            field-style=${k(this.fieldStyle)}
+            .client=${this.resolvedClient}
+            .messages=${this.messages}
+            .settings=${this.settings ?? this.settingsCtl.settings}
+            intent=${t === "signup" ? "signup" : "signin"}
+          ></singlebase-authui-buttons>`,
+      () => this.method = y ? "" : "oauth",
+      "oauth"
+    ) : d;
+    return a`
+      <div class="acc-wrap">
+        ${this.oauthPlacement === "top" ? a`${_e}${ke}` : a`${ke}${_e}`}
+      </div>
+    `;
+  }
+  renderScreenBody(t) {
+    return this.cfg, ["signin", "signup", "otp"].indexOf(t) >= 0 ? this.renderAccordion(t) : t === "forgot" ? a`<div class="fields">${this.renderEmailField(this.uid("reset"))}</div>` : t === "verify" ? a`
+        ${this.renderCodeRow()}
+        <div class="resend-row">
+          <span class="hint">${this.msg.resendQuestion}</span>
+          <button type="button" class="link-sm" ?disabled=${this.loading} @click=${this.onResend}>
+            ${this.msg.resendCta}
+          </button>
+        </div>
+      ` : t === "newpass" ? a`
+        <div class="fields">
+          <div class="field">
+            <label for=${this.uid("newpass")}>${this.msg.newPasswordLabel}</label>
+            <input
+              id=${this.uid("newpass")}
+              type="password"
+              part="input"
+              .value=${this.newPass}
+              placeholder=${this.msg.newPasswordPlaceholder}
+              aria-invalid=${this.newPassError ? "true" : "false"}
+              ?disabled=${this.loading}
+              @input=${(s) => {
+      this.newPass = s.target.value, this.newPassError = "";
+    }}
+            />
+          </div>
+          <div class="field">
+            <label for=${this.uid("confirmpass")}>${this.msg.confirmPasswordLabel}</label>
+            <input
+              id=${this.uid("confirmpass")}
+              type="password"
+              part="input"
+              .value=${this.confirmPass}
+              placeholder=${this.msg.confirmPasswordPlaceholder}
+              aria-invalid=${this.newPassError ? "true" : "false"}
+              ?disabled=${this.loading}
+              @input=${(s) => {
+      this.confirmPass = s.target.value, this.newPassError = "";
+    }}
+            />
+            ${this.newPassError ? a`<p class="err">${this.newPassError}</p>` : d}
+          </div>
+        </div>
+      ` : t === "invite" ? a`
+        <div class="fields">
+          <div class="invite-box">
+            <span class="invite-label">${this.msg.invitedEmailLabel}</span>
+            <span class="invite-email">${this.inviteEmail}</span>
+          </div>
+          ${this.inviteCode ? d : a`<div class="field">
+                  <span class="label">Invite code</span>
+                  ${this.renderCodeRow(!0)}
+                </div>`}
+          <div class="two-up">
+            <div class="field">
+              <label for=${this.uid("first")}>${this.msg.firstNameLabel}</label>
+              <input
+                id=${this.uid("first")}
+                type="text"
+                part="input"
+                .value=${this.firstName}
+                placeholder=${this.msg.firstNamePlaceholder}
+                ?disabled=${this.loading}
+                @input=${(s) => this.firstName = s.target.value}
+              />
+            </div>
+            <div class="field">
+              <label for=${this.uid("last")}>${this.msg.lastNameLabel}</label>
+              <input
+                id=${this.uid("last")}
+                type="text"
+                part="input"
+                .value=${this.lastName}
+                placeholder=${this.msg.lastNamePlaceholder}
+                ?disabled=${this.loading}
+                @input=${(s) => this.lastName = s.target.value}
+              />
+            </div>
+          </div>
+          <div class="field">
+            <label for=${this.uid("phone")}>${this.msg.phoneLabel}</label>
+            <input
+              id=${this.uid("phone")}
+              type="tel"
+              part="input"
+              .value=${this.phone}
+              placeholder=${this.msg.phonePlaceholder}
+              ?disabled=${this.loading}
+              @input=${(s) => this.phone = s.target.value}
+            />
+          </div>
+          <div class="field">
+            <label for=${this.uid("invitepass")}>${this.msg.passwordLabel}</label>
+            <input
+              id=${this.uid("invitepass")}
+              type="password"
+              part="input"
+              .value=${this.password}
+              placeholder=${this.msg.newPasswordPlaceholder}
+              aria-invalid=${this.passError ? "true" : "false"}
+              ?disabled=${this.loading}
+              @input=${(s) => {
+      this.password = s.target.value, this.passError = "";
+    }}
+            />
+            ${this.passError ? a`<p class="err">${this.passError}</p>` : d}
+          </div>
+        </div>
+      ` : d;
+  }
+  renderGuest(t) {
+    const e = this.cfg, s = ["forgot", "verify", "newpass", "invite"].indexOf(t) >= 0, i = this.stepped && this.step > 0 || ["forgot", "verify", "otp", "newpass"].indexOf(t) >= 0, h = t === "signin" && e.allowEmailSignup || t === "signup" && e.allowEmailSignin, c = this.stepped && (t === "signin" || t === "signup");
+    return a`
+      <form class="stack" @submit=${this.onSubmit} novalidate>
+        <div class="head">
+          ${this.layout !== "split" ? this.renderLogo() : d}
+          <h2 class="title" part="title">${this.titleFor(t)}</h2>
+          <p class="sub">${this.subFor(t)}</p>
+        </div>
+
+        ${c ? a`<div class="step-bar">
+                <div class="step-fill" style="width:${this.stepPct()}%"></div>
+              </div>` : d}
+        ${this.banner ? a`<div class="banner" part="banner" role="alert">${this.banner}</div>` : d}
+        ${this.notice ? a`<div class="notice" part="notice" role="status">${this.notice}</div>` : d}
+        ${this.renderScreenBody(t)}
+        ${s || i ? a`
+                <div class="actions">
+                  ${s ? this.renderPrimary(this.ctaFor(t)) : d}
+                  ${i ? a`<button type="button" class="ghost" @click=${this.goBack}>
+                          ${this.msg.backCta}
+                        </button>` : d}
+                </div>
+              ` : d}
+        ${h ? a`
+                <p class="foot">
+                  <span
+                    >${t === "signup" ? this.msg.footTextSignUp : this.msg.footTextSignIn}</span
+                  >
+                  <button
+                    type="button"
+                    class="link"
+                    @click=${() => this.setScreen(t === "signup" ? "signin" : "signup", {
+      step: 0,
+      notice: ""
+    })}
+                  >
+                    ${t === "signup" ? this.msg.footActionSignUp : this.msg.footActionSignIn}
+                  </button>
+                </p>
+              ` : d}
+        ${this.renderConsent()}
+
+        <span class="sr-only" role="status" aria-live="polite">
+          ${this.loading ? "Submitting…" : ""}
+        </span>
+      </form>
+    `;
+  }
+  renderBlocked() {
+    const e = !this.cfg.authEnabled;
+    return a`
+      <div class="stack">
+        <div class="head">
+          ${this.layout !== "split" ? this.renderLogo() : d}
+          <h2 class="title" part="title">
+            ${e ? this.msg.blockedTitleDisabled : this.msg.blockedTitleUnavailable}
+          </h2>
+          <p class="sub">
+            ${e ? this.msg.blockedBodyDisabled : this.msg.blockedBodyUnavailable}
+          </p>
+        </div>
+        <div class="notice" part="notice" role="status">${this.msg.blockedHint}</div>
+      </div>
+    `;
+  }
+  /**
+   * Shown when a signed-in visitor lands on a guest screen. Rather than
+   * presenting a sign-in form to someone already signed in, offer the two
+   * things they could actually want: carry on, or switch accounts.
+   */
+  renderSignedIn() {
+    const t = this.auth.state.status === "authenticated" ? this.auth.state.user : null, e = this.redirectTarget;
+    return a`
+      <div class="stack">
+        <div class="head">
+          ${this.renderLogo()}
+          <h2 class="title" part="title">${this.msg.alreadySignedInTitle}</h2>
+          <p class="sub">
+            ${t != null && t.email ? `${this.msg.alreadySignedInSubPrefix} ${t.email}.` : this.msg.alreadySignedInSub}
+          </p>
+        </div>
+
+        <div class="actions">
+          <button type="button" class="primary" part="button-primary" @click=${this.onContinue}>
+            <span>${this.msg.continueCta}</span>
+          </button>
+          <button type="button" class="ghost" @click=${this.onInterstitialSignOut}>
+            <span>${this.msg.signOutCta}</span>
+          </button>
+        </div>
+
+        ${e ? d : a`<p class="hint">${this.msg.continueHint}</p>`}
+      </div>
+    `;
+  }
+  /** The Terms/Privacy consent line, rendered only when the host supplies a link. */
+  renderConsent() {
+    if (!this.tosUrl && !this.privacyUrl) return d;
+    const t = this.tosUrl ? a`<a class="link-sm" href=${this.tosUrl} target="_blank" rel="noopener noreferrer"
+          >${this.msg.termsLabel}</a
+        >` : d, e = this.privacyUrl ? a`<a class="link-sm" href=${this.privacyUrl} target="_blank" rel="noopener noreferrer"
+          >${this.msg.privacyLabel}</a
+        >` : d;
+    return a`
+      <p class="hint" part="consent">
+        ${this.msg.consentPrefix}
+        ${t}${this.tosUrl && this.privacyUrl ? a` ${this.msg.consentJoin} ` : d}${e}.
+      </p>
+    `;
+  }
+  render() {
+    const t = this.activeScreen;
+    if (t === "oauth-callback")
+      return this.handleOAuthCallback(), this.panel(this.renderOAuthCallback());
+    if (t === "account")
+      return this.noAccountView ? d : this.panel(a`
+        <singlebase-authui-account
+          theme=${k(this.theme)}
+          density=${k(this.density)}
+          field-style=${k(this.fieldStyle)}
+          .client=${this.resolvedClient}
+          .messages=${this.messages}
+          logo-text=${this.logoText}
+          logo-url=${this.logoUrl}
+        ></singlebase-authui-account>
+      `);
+    if (this.showsSignedInInterstitial)
+      return this.noAccountView ? d : this.panel(this.renderSignedIn());
+    const e = this.cfg, s = !e.allowEmailSignin && !e.allowEmailOtp && !e.allowOauth, i = !e.authEnabled || s && Ne(t);
+    return a`
+      ${this.layout === "split" ? a`
+              <div class="brand-panel">
+                ${this.renderBrandMark()}
+                ${this.brandLine ? a`<div class="brand-copy">${this.brandLine}</div>` : d}
+                ${this.brandFoot ? a`<div class="brand-foot">${this.brandFoot}</div>` : d}
+              </div>
+            ` : d}
+      ${this.panel(i ? this.renderBlocked() : this.renderGuest(t))}
+    `;
+  }
+}, bt = new WeakMap(), ft = new WeakMap(), vt = new WeakMap(), wt = new WeakMap(), $t = new WeakMap(), yt = new WeakMap(), Et = new WeakMap(), St = new WeakMap(), Ct = new WeakMap(), Pt = new WeakMap(), kt = new WeakMap(), _t = new WeakMap(), Ot = new WeakMap(), xt = new WeakMap(), Tt = new WeakMap(), Ut = new WeakMap(), Lt = new WeakMap(), At = new WeakMap(), Mt = new WeakMap(), Nt = new WeakMap(), It = new WeakMap(), Ft = new WeakMap(), Dt = new WeakMap(), Bt = new WeakMap(), Rt = new WeakMap(), Ht = new WeakMap(), jt = new WeakMap(), qt = new WeakMap(), Gt = new WeakMap(), Vt = new WeakMap(), Kt = new WeakMap(), Yt = new WeakMap(), Wt = new WeakMap(), zt = new WeakMap(), Jt = new WeakMap(), Qt = new WeakMap(), Xt = new WeakMap(), Zt = new WeakMap(), te = new WeakMap(), ee = new WeakMap(), se = new WeakMap(), ie = new WeakMap(), ae = new WeakMap(), re = new WeakMap(), ne = new WeakMap(), oe = new WeakMap(), le = new WeakMap(), Be);
+Us(u, "styles", [
+  ...$.styles,
+  je`
+      /* the mock's root */
+      :host {
+        display: flex;
+        width: 100%;
+        box-sizing: border-box;
+        background: var(--sb-surface, #ffffff);
+        color: var(--sb-ink, #16181a);
+        border: 1px solid var(--sb-border, #e4e6e9);
+        border-radius: calc(var(--sb-radius, 4px) + 4px);
+        overflow: hidden;
+      }
+
+      .brand-panel {
+        flex: 0 0 40%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 24px;
+        padding: var(--sb-pad, 20px);
+        background: var(--sb-surface-alt, #fafafa);
+        border-right: 1px solid var(--sb-border, #e4e6e9);
+      }
+
+      /* A flex column would stretch an image to full width and wreck its
+         aspect ratio, so both logos opt out of the cross-axis stretch. */
+      .logo-img {
+        display: block;
+        align-self: flex-start;
+        height: var(--sb-logo-height, 20px);
+        width: auto;
+        max-width: 100%;
+        margin-bottom: 6px;
+      }
+
+      .brand-img {
+        display: block;
+        align-self: flex-start;
+        height: var(--sb-brand-logo-height, 28px);
+        width: auto;
+        max-width: 100%;
+      }
+
+      .brand-mark {
+        font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+        font-size: 13px;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: var(--sb-ink, #16181a);
+      }
+
+      .brand-copy {
+        font-size: 20px;
+        line-height: 1.35;
+        letter-spacing: -0.01em;
+        color: var(--sb-ink, #16181a);
+        text-wrap: pretty;
+      }
+
+      .brand-foot {
+        font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+        font-size: 11px;
+        color: var(--sb-muted-ink, #61666c);
+      }
+
+      .branding {
+        margin-top: 18px;
+        text-align: center;
+        font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+        font-size: 10.5px;
+        letter-spacing: 0.06em;
+        color: var(--sb-muted-ink, #61666c);
+      }
+
+      .branding a {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      .branding a:hover {
+        color: var(--sb-ink, #16181a);
+        text-decoration: underline;
+        text-underline-offset: 3px;
+      }
+
+      /* the mock's panel */
+      .panel {
+        flex: 1;
+        min-width: 0;
+        padding: var(--sb-pad, 20px);
+      }
+
+      @media (max-width: 520px) {
+        :host {
+          flex-direction: column;
+        }
+        .brand-panel {
+          flex: 0 0 auto;
+          border-right: none;
+          border-bottom: 1px solid var(--sb-border, #e4e6e9);
+        }
+      }
+    `
+]);
+g([
+  p({ attribute: "initial-screen" })
+], u.prototype, "initialScreen", 1);
+g([
+  p({ reflect: !0 })
+], u.prototype, "screen", 1);
+g([
+  p({ type: Boolean, attribute: "no-account-view" })
+], u.prototype, "noAccountView", 1);
+g([
+  p({ attribute: !1 })
+], u.prototype, "settings", 1);
+g([
+  p({ converter: P, attribute: "auth-enabled" })
+], u.prototype, "authEnabled", 1);
+g([
+  p({ converter: P, attribute: "allow-email-signin" })
+], u.prototype, "allowEmailSignin", 1);
+g([
+  p({ converter: P, attribute: "allow-email-signup" })
+], u.prototype, "allowEmailSignup", 1);
+g([
+  p({ converter: P, attribute: "allow-email-otp" })
+], u.prototype, "allowEmailOtp", 1);
+g([
+  p({ converter: P, attribute: "allow-oauth" })
+], u.prototype, "allowOauth", 1);
+g([
+  p({ converter: P, attribute: "allow-account-creation" })
+], u.prototype, "allowAccountCreation", 1);
+g([
+  p()
+], u.prototype, "layout", 1);
+g([
+  p({ attribute: "oauth-placement" })
+], u.prototype, "oauthPlacement", 1);
+g([
+  p({ type: Boolean })
+], u.prototype, "stepped", 1);
+g([
+  p({ attribute: "logo-text" })
+], u.prototype, "logoText", 1);
+g([
+  p({ attribute: "logo-url" })
+], u.prototype, "logoUrl", 1);
+g([
+  p({ attribute: "brand-line" })
+], u.prototype, "brandLine", 1);
+g([
+  p({ attribute: "brand-foot" })
+], u.prototype, "brandFoot", 1);
+g([
+  p({ attribute: "sign-in-title" })
+], u.prototype, "signInTitle", 1);
+g([
+  p({ converter: P, attribute: "branding" })
+], u.prototype, "branding", 1);
+g([
+  p({ attribute: "redirect-url" })
+], u.prototype, "redirectUrl", 1);
+g([
+  p({ attribute: "tos-url" })
+], u.prototype, "tosUrl", 1);
+g([
+  p({ attribute: "privacy-url" })
+], u.prototype, "privacyUrl", 1);
+g([
+  p({ attribute: "nonce-storage-key" })
+], u.prototype, "nonceStorageKey", 1);
+g([
+  p({ attribute: "invite-email" })
+], u.prototype, "inviteEmail", 1);
+g([
+  p({ attribute: "invite-org" })
+], u.prototype, "inviteOrg", 1);
+g([
+  p({ attribute: "invite-code" })
+], u.prototype, "inviteCode", 1);
+g([
+  m()
+], u.prototype, "step", 1);
+g([
+  m()
+], u.prototype, "method", 1);
+g([
+  m()
+], u.prototype, "email", 1);
+g([
+  m()
+], u.prototype, "password", 1);
+g([
+  m()
+], u.prototype, "name", 1);
+g([
+  m()
+], u.prototype, "firstName", 1);
+g([
+  m()
+], u.prototype, "lastName", 1);
+g([
+  m()
+], u.prototype, "phone", 1);
+g([
+  m()
+], u.prototype, "newPass", 1);
+g([
+  m()
+], u.prototype, "confirmPass", 1);
+g([
+  m()
+], u.prototype, "code", 1);
+g([
+  m()
+], u.prototype, "verifyNext", 1);
+g([
+  m()
+], u.prototype, "loading", 1);
+g([
+  m()
+], u.prototype, "banner", 1);
+g([
+  m()
+], u.prototype, "notice", 1);
+g([
+  m()
+], u.prototype, "emailError", 1);
+g([
+  m()
+], u.prototype, "passError", 1);
+g([
+  m()
+], u.prototype, "newPassError", 1);
+g([
+  m()
+], u.prototype, "attempts", 1);
+g([
+  m()
+], u.prototype, "needsMfaCode", 1);
+g([
+  m()
+], u.prototype, "callbackDone", 1);
+u = g([
+  fe("singlebase-authui")
+], u);
+var Ms = Object.defineProperty, Ns = Object.getOwnPropertyDescriptor, Ee = (r, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? Ns(t, e) : t, h = r.length - 1, c; h >= 0; h--)
+    (c = r[h]) && (i = (s ? c(t, e, i) : c(i)) || i);
+  return s && i && Ms(t, e, i), i;
+};
+const Is = ["loading", "authenticated", "unauthenticated"];
+var he, de, ce, Re;
+let O = (Re = class extends $ {
+  constructor() {
+    super(...arguments);
+    o(this, he, "");
+    o(this, de, null);
+    o(this, ce, "unauthenticated");
+    b(this, "warnedFor", null);
+  }
+  get slot() {
+    return n(this, he);
+  }
+  set slot(t) {
+    l(this, he, t);
+  }
+  get predicate() {
+    return n(this, de);
+  }
+  set predicate(t) {
+    l(this, de, t);
+  }
+  get onMismatch() {
+    return n(this, ce);
+  }
+  set onMismatch(t) {
+    l(this, ce, t);
+  }
+  createRenderRoot() {
+    return this;
+  }
+  /** The state this guard currently resolves to, after applying the predicate. */
+  get activeState() {
+    const t = this.auth.state.status;
+    if (t === "loading") return "loading";
+    if (t !== "authenticated") return "unauthenticated";
+    if (!this.predicate) return "authenticated";
+    this.warnOnce(this.predicate);
+    const e = this.auth.state.user;
+    return us(e, this.predicate) ? "authenticated" : this.onMismatch === "hidden" ? "hidden" : "unauthenticated";
+  }
+  /** Surfaces a malformed predicate once, rather than silently never matching. */
+  warnOnce(t) {
+    const e = JSON.stringify(t);
+    if (this.warnedFor !== e) {
+      this.warnedFor = e;
+      for (const s of ps(t))
+        console.warn(`[singlebase] <singlebase-authui-guard> predicate: ${s}`);
+    }
+  }
+  render() {
+    const t = this.activeState;
+    if (this.slot) {
+      const e = Is.includes(this.slot) && this.slot === t;
+      return this.toggleAttribute("hidden", !e), a`<slot></slot>`;
+    }
+    this.toggleAttribute("hidden", !1);
+    for (const e of Array.from(this.children)) {
+      const s = e.getAttribute("slot");
+      e.toggleAttribute("hidden", s !== t);
+    }
+    return a`<slot></slot>`;
+  }
+}, he = new WeakMap(), de = new WeakMap(), ce = new WeakMap(), Re);
+Ee([
+  p({ reflect: !0 })
+], O.prototype, "slot", 1);
+Ee([
+  p({
+    converter: {
+      fromAttribute: (r) => {
+        if (!r) return null;
+        try {
+          return JSON.parse(r);
+        } catch {
+          return console.error("[singlebase] guard predicate is not valid JSON:", r), null;
+        }
+      },
+      toAttribute: (r) => r ? JSON.stringify(r) : null
+    }
+  })
+], O.prototype, "predicate", 1);
+Ee([
+  p({ attribute: "on-mismatch" })
+], O.prototype, "onMismatch", 1);
+O = Ee([
+  fe("singlebase-authui-guard")
+], O);
+var We = Object.defineProperty, Fs = Object.getOwnPropertyDescriptor, Ds = (r, t, e) => t in r ? We(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, _ = (r, t, e, s) => {
+  for (var i = s > 1 ? void 0 : s ? Fs(t, e) : t, h = r.length - 1, c; h >= 0; h--)
+    (c = r[h]) && (i = (s ? c(t, e, i) : c(i)) || i);
+  return s && i && We(t, e, i), i;
+}, Bs = (r, t, e) => Ds(r, t + "", e);
+const Rs = "profile_photo";
+var ue, pe, ge, me, be, He;
+let S = (He = class extends $ {
+  constructor() {
+    super(...arguments);
+    o(this, ue, "");
+    o(this, pe, "");
+    o(this, ge, !1);
+    o(this, me, "");
+    o(this, be, !1);
+  }
+  get path() {
+    return n(this, ue);
+  }
+  set path(t) {
+    l(this, ue, t);
+  }
+  get fallback() {
+    return n(this, pe);
+  }
+  set fallback(t) {
+    l(this, pe, t);
+  }
+  get avatar() {
+    return n(this, ge);
+  }
+  set avatar(t) {
+    l(this, ge, t);
+  }
+  get alt() {
+    return n(this, me);
+  }
+  set alt(t) {
+    l(this, me, t);
+  }
+  get imageFailed() {
+    return n(this, be);
+  }
+  set imageFailed(t) {
+    l(this, be, t);
+  }
+  willUpdate(t) {
+    super.willUpdate(t), (t.has("path") || t.has("avatar")) && (this.imageFailed = !1);
+  }
+  get profile() {
+    const t = this.auth.state;
+    return t.status === "authenticated" ? t.user : null;
+  }
+  /** The resolved value as a string, or "" when there is nothing to show. */
+  get textValue() {
+    const t = this.profile;
+    if (!t || !this.path) return "";
+    const e = Le(t, this.path);
+    return e == null || e === "" ? "" : Array.isArray(e) ? e.filter((s) => s != null).join(", ") : typeof e == "object" ? "" : String(e);
+  }
+  get avatarSrc() {
+    const t = this.profile;
+    if (!t) return "";
+    const e = Le(t, this.path || Rs);
+    return typeof e == "string" ? e : "";
+  }
+  render() {
+    if (this.auth.state.status === "loading") return d;
+    if (this.avatar) return this.renderAvatar();
+    const t = this.textValue;
+    return t ? a`<span part="text">${t}</span>` : this.fallback ? a`<span part="text">${this.fallback}</span>` : d;
+  }
+  renderAvatar() {
+    const t = this.profile;
+    if (!t) return d;
+    const e = this.avatarSrc;
+    return e && !this.imageFailed ? a`<img
+        part="avatar-image"
+        src=${e}
+        alt=${this.alt}
+        @error=${() => this.imageFailed = !0}
+      />` : a`<span
+      part="avatar-initials"
+      class="initials"
+      aria-hidden=${this.alt ? "false" : "true"}
+      >${Ge(t)}</span
+    >`;
+  }
+}, ue = new WeakMap(), pe = new WeakMap(), ge = new WeakMap(), me = new WeakMap(), be = new WeakMap(), He);
+Bs(S, "styles", [
+  ...$.styles,
+  je`
+      /* Text sits in a sentence; an avatar is a box the host sizes. */
+      :host {
+        display: inline;
+      }
+
+      :host([avatar]) {
+        display: inline-block;
+        width: 42px;
+        height: 42px;
+        vertical-align: middle;
+      }
+
+      img,
+      .initials {
+        display: block;
+        width: 100%;
+        height: 100%;
+        border-radius: inherit;
+        box-sizing: border-box;
+      }
+
+      img {
+        object-fit: cover;
+      }
+
+      /* Matches the avatar in the account view. */
+      .initials {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--sb-surface-alt, #fafafa);
+        border: 1px dashed var(--sb-border, #e4e6e9);
+        font-family: var(--sb-mono, "Geist Mono", ui-monospace, monospace);
+        font-size: 0.8em;
+        color: var(--sb-muted-ink, #61666c);
+        user-select: none;
+      }
+    `
+]);
+_([
+  p()
+], S.prototype, "path", 1);
+_([
+  p()
+], S.prototype, "fallback", 1);
+_([
+  p({ type: Boolean, reflect: !0 })
+], S.prototype, "avatar", 1);
+_([
+  p()
+], S.prototype, "alt", 1);
+_([
+  m()
+], S.prototype, "imageFailed", 1);
+S = _([
+  fe("singlebase-authui-display")
+], S);
+export {
+  gs as A,
+  Se as S,
+  f as a,
+  E as b,
+  S as c,
+  O as d,
+  u as e,
+  Ae as f,
+  qe as g,
+  Ne as h,
+  Ge as i,
+  As as j,
+  Ie as k,
+  ms as r
+};
+//# sourceMappingURL=display-8HEcKYR4.js.map