@authon/js 0.2.1 → 0.3.1

package/dist/index.cjs

@@ -21,15 +21,62 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Authon: () => Authon,
+  AuthonMfaRequiredError: () => AuthonMfaRequiredError,
+  generateQrSvg: () => generateQrSvg,
   getProviderButtonConfig: () => getProviderButtonConfig
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/modal.ts
-var import_shared2 = require("@authon/shared");
+// src/types.ts
+var AuthonMfaRequiredError = class extends Error {
+  mfaToken;
+  constructor(mfaToken) {
+    super("MFA verification required");
+    this.name = "AuthonMfaRequiredError";
+    this.mfaToken = mfaToken;
+  }
+};
+
+// ../shared/dist/index.js
+var PROVIDER_DISPLAY_NAMES = {
+  google: "Google",
+  apple: "Apple",
+  kakao: "Kakao",
+  naver: "Naver",
+  facebook: "Facebook",
+  github: "GitHub",
+  discord: "Discord",
+  x: "X",
+  line: "LINE",
+  microsoft: "Microsoft"
+};
+var PROVIDER_COLORS = {
+  google: { bg: "#ffffff", text: "#1f1f1f" },
+  apple: { bg: "#000000", text: "#ffffff" },
+  kakao: { bg: "#FEE500", text: "#191919" },
+  naver: { bg: "#03C75A", text: "#ffffff" },
+  facebook: { bg: "#1877F2", text: "#ffffff" },
+  github: { bg: "#24292e", text: "#ffffff" },
+  discord: { bg: "#5865F2", text: "#ffffff" },
+  x: { bg: "#000000", text: "#ffffff" },
+  line: { bg: "#06C755", text: "#ffffff" },
+  microsoft: { bg: "#ffffff", text: "#1f1f1f" }
+};
+var DEFAULT_BRANDING = {
+  primaryColorStart: "#7c3aed",
+  primaryColorEnd: "#4f46e5",
+  lightBg: "#ffffff",
+  lightText: "#111827",
+  darkBg: "#0f172a",
+  darkText: "#f1f5f9",
+  borderRadius: 12,
+  showEmailPassword: true,
+  showDivider: true,
+  showSecuredBy: true,
+  locale: "en"
+};
 
 // src/providers.ts
-var import_shared = require("@authon/shared");
 var PROVIDER_ICONS = {
   google: `<svg viewBox="0 0 24 24" width="20" height="20"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>`,
   apple: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>`,
@@ -43,10 +90,10 @@ var PROVIDER_ICONS = {
   microsoft: `<svg viewBox="0 0 24 24" width="20" height="20"><rect fill="#F25022" x="1" y="1" width="10" height="10"/><rect fill="#7FBA00" x="13" y="1" width="10" height="10"/><rect fill="#00A4EF" x="1" y="13" width="10" height="10"/><rect fill="#FFB900" x="13" y="13" width="10" height="10"/></svg>`
 };
 function getProviderButtonConfig(provider) {
-  const colors = import_shared.PROVIDER_COLORS[provider];
+  const colors = PROVIDER_COLORS[provider];
   return {
     provider,
-    label: `Continue with ${import_shared.PROVIDER_DISPLAY_NAMES[provider]}`,
+    label: `Continue with ${PROVIDER_DISPLAY_NAMES[provider]}`,
     bgColor: colors.bg,
     textColor: colors.text,
     iconSvg: PROVIDER_ICONS[provider]
@@ -54,6 +101,30 @@ function getProviderButtonConfig(provider) {
 }
 
 // src/modal.ts
+function hexToRgba(hex, alpha) {
+  const h = hex.replace("#", "");
+  const r = parseInt(h.substring(0, 2), 16);
+  const g = parseInt(h.substring(2, 4), 16);
+  const b = parseInt(h.substring(4, 6), 16);
+  return `rgba(${r},${g},${b},${alpha})`;
+}
+var WALLET_OPTIONS = [
+  { id: "pexus", name: "Pexus", color: "#7c3aed" },
+  { id: "metamask", name: "MetaMask", color: "#f6851b" },
+  { id: "phantom", name: "Phantom", color: "#ab9ff2" }
+];
+function walletIconSvg(id) {
+  switch (id) {
+    case "pexus":
+      return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="6" fill="#7c3aed"/><path d="M7 8h4v8H7V8zm6 0h4v8h-4V8z" fill="#fff"/></svg>`;
+    case "metamask":
+      return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="6" fill="#f6851b"/><path d="M17.2 4L12 8.5l1 .7L17.2 4zM6.8 4l5.1 5.3-1-0.6L6.8 4zM16 16.2l-1.4 2.1 3 .8.8-2.9h-2.4zM5.6 16.2l.9 2.8 3-.8-1.4-2h-2.5z" fill="#fff"/></svg>`;
+    case "phantom":
+      return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="6" fill="#ab9ff2"/><circle cx="9" cy="11" r="1.5" fill="#fff"/><circle cx="15" cy="11" r="1.5" fill="#fff"/><path d="M6 12c0-3.3 2.7-6 6-6s6 2.7 6 6v2c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2v-2z" stroke="#fff" stroke-width="1.5" fill="none"/></svg>`;
+    default:
+      return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect width="24" height="24" rx="6" fill="#666"/><text x="12" y="16" text-anchor="middle" fill="#fff" font-size="12">${id[0]?.toUpperCase() ?? "W"}</text></svg>`;
+  }
+}
 var ModalRenderer = class {
   shadowRoot = null;
   hostElement = null;
@@ -61,19 +132,38 @@ var ModalRenderer = class {
   mode;
   theme;
   branding;
+  themeObserver = null;
+  mediaQueryListener = null;
   enabledProviders = [];
   currentView = "signIn";
   onProviderClick;
   onEmailSubmit;
   onClose;
+  onWeb3WalletSelect;
+  onPasswordlessSubmit;
+  onOtpVerify;
+  onPasskeyClick;
   escHandler = null;
+  // Overlay state
+  currentOverlay = "none";
+  selectedWallet = "";
+  overlayEmail = "";
+  overlayError = "";
   constructor(options) {
     this.mode = options.mode;
     this.theme = options.theme || "auto";
-    this.branding = { ...import_shared2.DEFAULT_BRANDING, ...options.branding };
+    this.branding = { ...DEFAULT_BRANDING, ...options.branding };
     this.onProviderClick = options.onProviderClick;
     this.onEmailSubmit = options.onEmailSubmit;
     this.onClose = options.onClose;
+    this.onWeb3WalletSelect = options.onWeb3WalletSelect || (() => {
+    });
+    this.onPasswordlessSubmit = options.onPasswordlessSubmit || (() => {
+    });
+    this.onOtpVerify = options.onOtpVerify || (() => {
+    });
+    this.onPasskeyClick = options.onPasskeyClick || (() => {
+    });
     if (options.mode === "embedded" && options.containerId) {
       this.containerElement = document.getElementById(options.containerId);
     }
@@ -82,17 +172,20 @@ var ModalRenderer = class {
     this.enabledProviders = providers;
   }
   setBranding(branding) {
-    this.branding = { ...import_shared2.DEFAULT_BRANDING, ...branding };
+    this.branding = { ...DEFAULT_BRANDING, ...branding };
   }
   open(view = "signIn") {
     if (this.shadowRoot && this.hostElement) {
+      this.hideOverlay();
       this.switchView(view);
     } else {
       this.currentView = view;
+      this.currentOverlay = "none";
       this.render(view);
     }
   }
   close() {
+    this.stopThemeObserver();
     if (this.escHandler) {
       document.removeEventListener("keydown", this.escHandler);
       this.escHandler = null;
@@ -105,6 +198,46 @@ var ModalRenderer = class {
     if (this.containerElement) {
       this.containerElement.innerHTML = "";
     }
+    this.currentOverlay = "none";
+  }
+  /** Update theme at runtime without destroying form state */
+  setTheme(theme) {
+    this.theme = theme;
+    this.updateThemeCSS();
+    if (theme === "auto") {
+      this.startThemeObserver();
+    } else {
+      this.stopThemeObserver();
+    }
+  }
+  updateThemeCSS() {
+    if (!this.shadowRoot) return;
+    const styleEl = this.shadowRoot.getElementById("authon-theme-style");
+    if (styleEl) {
+      styleEl.textContent = this.buildCSS();
+    }
+  }
+  startThemeObserver() {
+    this.stopThemeObserver();
+    if (typeof document === "undefined" || typeof window === "undefined") return;
+    this.themeObserver = new MutationObserver(() => this.updateThemeCSS());
+    this.themeObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-theme", "class"]
+    });
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    this.mediaQueryListener = () => this.updateThemeCSS();
+    mq.addEventListener("change", this.mediaQueryListener);
+  }
+  stopThemeObserver() {
+    if (this.themeObserver) {
+      this.themeObserver.disconnect();
+      this.themeObserver = null;
+    }
+    if (this.mediaQueryListener) {
+      window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", this.mediaQueryListener);
+      this.mediaQueryListener = null;
+    }
   }
   showError(message) {
     if (!this.shadowRoot) return;
@@ -156,6 +289,47 @@ var ModalRenderer = class {
     if (!this.shadowRoot) return;
     this.shadowRoot.getElementById("authon-loading-overlay")?.remove();
   }
+  // ── Flow Overlay Public API ──
+  showOverlay(overlay) {
+    this.currentOverlay = overlay;
+    this.overlayError = "";
+    this.renderOverlay();
+  }
+  hideOverlay() {
+    this.currentOverlay = "none";
+    this.overlayError = "";
+    if (!this.shadowRoot) return;
+    this.shadowRoot.getElementById("flow-overlay")?.remove();
+  }
+  showWeb3Success(walletId, address) {
+    this.selectedWallet = walletId;
+    this.overlayError = "";
+    const truncated = address.length > 10 ? `${address.slice(0, 6)}...${address.slice(-4)}` : address;
+    this.currentOverlay = "web3-success";
+    this.renderOverlayWithData({ truncatedAddress: truncated, walletId });
+  }
+  showPasswordlessSent() {
+    this.overlayError = "";
+    this.currentOverlay = "passwordless-sent";
+    this.renderOverlay();
+  }
+  showOtpInput(email) {
+    this.overlayEmail = email;
+    this.overlayError = "";
+    this.currentOverlay = "otp-input";
+    this.renderOverlay();
+  }
+  showPasskeySuccess() {
+    this.overlayError = "";
+    this.currentOverlay = "passkey-success";
+    this.renderOverlay();
+  }
+  showOverlayError(message) {
+    this.overlayError = message;
+    if (this.currentOverlay !== "none") {
+      this.renderOverlay();
+    }
+  }
   // ── Smooth view switch (no flicker) ──
   switchView(view) {
     if (!this.shadowRoot || view === this.currentView) return;
@@ -186,13 +360,16 @@ var ModalRenderer = class {
     this.shadowRoot.innerHTML = this.buildShell(view);
     this.attachInnerEvents(view);
     this.attachShellEvents();
+    if (this.theme === "auto") {
+      this.startThemeObserver();
+    }
   }
   // ── HTML builders ──
   /** Shell = style + backdrop + modal-container (stable across view switches) */
   buildShell(view) {
     const popupWrapper = this.mode === "popup" ? `<div class="backdrop" id="backdrop"></div>` : "";
     return `
-      <style>${this.buildCSS()}</style>
+      <style id="authon-theme-style">${this.buildCSS()}</style>
       ${popupWrapper}
       <div class="modal-container" role="dialog" aria-modal="true">
         <div id="modal-inner" class="modal-inner">
@@ -227,6 +404,35 @@ var ModalRenderer = class {
           ${isSignUp ? '<p class="password-hint">Must contain uppercase, lowercase, and a number (min 8 chars)</p>' : ""}
           <button type="submit" class="submit-btn">${isSignUp ? "Sign up" : "Sign in"}</button>
         </form>` : "";
+    const hasMethodAbove = showProviders && this.enabledProviders.length > 0 || b.showEmailPassword !== false;
+    const hasMethodBelow = b.showWeb3 || b.showPasswordless || b.showPasskey;
+    const methodDivider = hasMethodAbove && hasMethodBelow ? `<div class="divider"><span>or</span></div>` : "";
+    const methodButtons = [];
+    if (b.showWeb3) {
+      methodButtons.push(`<button class="auth-method-btn web3-btn" id="web3-btn">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/><path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/><path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"/>
+        </svg>
+        <span>Connect Wallet</span>
+      </button>`);
+    }
+    if (b.showPasswordless) {
+      methodButtons.push(`<button class="auth-method-btn passwordless-btn" id="passwordless-btn">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+        </svg>
+        <span>Continue with Magic Link</span>
+      </button>`);
+    }
+    if (b.showPasskey) {
+      methodButtons.push(`<button class="auth-method-btn passkey-btn" id="passkey-btn">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="10" cy="7" r="4"/><path d="M10.3 15H7a4 4 0 0 0-4 4v2"/><path d="M21.7 13.3 19 11"/><path d="m21 15-2.5-1.5"/><path d="m17 17 2.5-1.5"/><path d="M22 9v6a1 1 0 0 1-1 1h-.5"/><circle cx="18" cy="9" r="3"/>
+        </svg>
+        <span>Sign in with Passkey</span>
+      </button>`);
+    }
+    const authMethods = methodButtons.length > 0 ? `<div class="auth-methods">${methodButtons.join("")}</div>` : "";
     const footer = b.termsUrl || b.privacyUrl ? `<div class="footer">
           ${b.termsUrl ? `<a href="${b.termsUrl}" target="_blank">Terms of Service</a>` : ""}
           ${b.termsUrl && b.privacyUrl ? " \xB7 " : ""}
@@ -245,6 +451,8 @@ var ModalRenderer = class {
       ${showProviders ? `<div class="providers">${providerButtons}</div>` : ""}
       ${divider}
       ${emailForm}
+      ${methodDivider}
+      ${authMethods}
       <p class="switch-view">${subtitle} <a href="#" id="switch-link">${subtitleLink}</a></p>
       ${footer}
       ${b.showSecuredBy !== false ? `<div class="secured-by">Secured by <a href="https://authon.dev" target="_blank" rel="noopener noreferrer" class="secured-link">Authon</a></div>` : ""}
@@ -253,6 +461,11 @@ var ModalRenderer = class {
   isDark() {
     if (this.theme === "dark") return true;
     if (this.theme === "light") return false;
+    if (typeof document !== "undefined") {
+      const html = document.documentElement;
+      if (html.classList.contains("dark") || html.getAttribute("data-theme") === "dark") return true;
+      if (html.classList.contains("light") || html.getAttribute("data-theme") === "light") return false;
+    }
     return typeof window !== "undefined" && window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
   buildCSS() {
@@ -276,6 +489,10 @@ var ModalRenderer = class {
         --authon-border: ${borderColor};
         --authon-divider: ${dividerColor};
         --authon-input-bg: ${inputBg};
+        --authon-overlay-bg: ${hexToRgba(bg, 0.92)};
+        --authon-overlay-bg-solid: ${hexToRgba(bg, 0.97)};
+        --authon-backdrop-bg: rgba(0,0,0,${dark ? "0.7" : "0.5"});
+        --authon-shadow-opacity: ${dark ? "0.5" : "0.25"};
         --authon-radius: ${b.borderRadius ?? 12}px;
         --authon-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         font-family: var(--authon-font);
@@ -284,7 +501,7 @@ var ModalRenderer = class {
       * { box-sizing: border-box; margin: 0; padding: 0; }
       .backdrop {
         position: fixed; inset: 0; z-index: 99998;
-        background: rgba(0,0,0,${dark ? "0.7" : "0.5"}); backdrop-filter: blur(4px);
+        background: var(--authon-backdrop-bg); backdrop-filter: blur(4px);
         animation: fadeIn 0.2s ease;
       }
       .modal-container {
@@ -378,10 +595,154 @@ var ModalRenderer = class {
       }
       .secured-link { font-weight: 600; color: var(--authon-muted); text-decoration: none; }
       .secured-link:hover { text-decoration: underline; }
+
+      /* Auth method buttons */
+      .auth-methods { display: flex; flex-direction: column; gap: 8px; }
+      .auth-method-btn {
+        display: flex; align-items: center; justify-content: center; gap: 8px;
+        width: 100%; padding: 10px 16px;
+        border-radius: calc(var(--authon-radius) * 0.5);
+        font-size: 13px; font-weight: 500; cursor: pointer;
+        font-family: var(--authon-font); transition: opacity 0.15s, transform 0.1s;
+      }
+      .auth-method-btn:hover { opacity: 0.85; }
+      .auth-method-btn:active { transform: scale(0.98); }
+      /* Web3 -- purple */
+      .web3-btn {
+        background: ${dark ? "rgba(139,92,246,0.12)" : "rgba(139,92,246,0.08)"};
+        border: 1px solid ${dark ? "rgba(139,92,246,0.3)" : "rgba(139,92,246,0.25)"};
+        color: ${dark ? "#c4b5fd" : "#7c3aed"};
+      }
+      /* Passwordless -- cyan */
+      .passwordless-btn {
+        background: ${dark ? "rgba(6,182,212,0.12)" : "rgba(6,182,212,0.08)"};
+        border: 1px solid ${dark ? "rgba(6,182,212,0.3)" : "rgba(6,182,212,0.25)"};
+        color: ${dark ? "#67e8f9" : "#0891b2"};
+      }
+      /* Passkey -- amber */
+      .passkey-btn {
+        background: ${dark ? "rgba(245,158,11,0.12)" : "rgba(245,158,11,0.08)"};
+        border: 1px solid ${dark ? "rgba(245,158,11,0.3)" : "rgba(245,158,11,0.25)"};
+        color: ${dark ? "#fcd34d" : "#b45309"};
+      }
+
+      /* Flow overlay */
+      .flow-overlay {
+        position: absolute; inset: 0; z-index: 10;
+        background: var(--authon-overlay-bg-solid);
+        backdrop-filter: blur(2px);
+        border-radius: var(--authon-radius);
+        display: flex; flex-direction: column; align-items: center; justify-content: center;
+        gap: 12px; padding: 24px;
+        animation: fadeIn 0.2s ease;
+      }
+      .flow-overlay .cancel-link {
+        font-size: 12px; color: var(--authon-dim); cursor: pointer; border: none;
+        background: none; font-family: var(--authon-font); margin-top: 4px;
+      }
+      .flow-overlay .cancel-link:hover { text-decoration: underline; }
+      .flow-overlay .overlay-title {
+        font-size: 14px; font-weight: 600; color: var(--authon-text); text-align: center;
+      }
+      .flow-overlay .overlay-subtitle {
+        font-size: 12px; color: var(--authon-muted); text-align: center;
+      }
+      .flow-overlay .overlay-error {
+        padding: 6px 12px; margin-top: 4px;
+        background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
+        border-radius: calc(var(--authon-radius) * 0.33);
+        font-size: 12px; color: #ef4444; text-align: center; width: 100%;
+      }
+
+      /* Wallet picker */
+      .wallet-picker { display: flex; flex-direction: column; gap: 8px; width: 100%; }
+      .wallet-btn {
+        display: flex; align-items: center; gap: 10px;
+        width: 100%; padding: 10px 14px;
+        background: ${dark ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)"};
+        border: 1px solid ${dark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.08)"};
+        border-radius: calc(var(--authon-radius) * 0.5);
+        font-size: 13px; font-weight: 500; color: var(--authon-text);
+        cursor: pointer; font-family: var(--authon-font);
+        transition: opacity 0.15s;
+      }
+      .wallet-btn:hover { opacity: 0.8; }
+      .wallet-btn .wallet-icon { display: flex; align-items: center; flex-shrink: 0; }
+      .wallet-btn .wallet-icon svg { border-radius: 6px; }
+
+      /* Passwordless email input in overlay */
+      .pwless-form { display: flex; flex-direction: column; gap: 10px; width: 100%; }
+      .pwless-submit {
+        width: 100%; padding: 10px;
+        background: linear-gradient(135deg, #06b6d4, #0891b2);
+        color: #fff; border: none; border-radius: calc(var(--authon-radius) * 0.5);
+        font-size: 13px; font-weight: 600; cursor: pointer;
+        font-family: var(--authon-font); transition: opacity 0.15s;
+      }
+      .pwless-submit:hover { opacity: 0.9; }
+      .pwless-submit:disabled { opacity: 0.6; cursor: not-allowed; }
+
+      /* OTP input */
+      .otp-container { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
+      .otp-inputs { display: flex; gap: 8px; justify-content: center; }
+      .otp-digit {
+        width: 40px; height: 48px; text-align: center;
+        font-size: 20px; font-weight: 600; font-family: var(--authon-font);
+        background: var(--authon-input-bg); color: var(--authon-text);
+        border: 1px solid var(--authon-border);
+        border-radius: calc(var(--authon-radius) * 0.33);
+        outline: none; transition: border-color 0.15s;
+      }
+      .otp-digit:focus {
+        border-color: var(--authon-primary-start);
+        box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
+      }
+
+      /* Success check animation */
+      .success-check {
+        width: 48px; height: 48px; border-radius: 50%;
+        display: flex; align-items: center; justify-content: center;
+      }
+      .success-check svg path {
+        stroke-dasharray: 20;
+        stroke-dashoffset: 20;
+        animation: check-draw 0.4s ease-out 0.1s forwards;
+      }
+
+      /* Spinner */
+      .flow-spinner {
+        animation: spin 0.8s linear infinite;
+      }
+
+      /* Passkey verifying icon */
+      .passkey-icon-pulse {
+        width: 48px; height: 48px; border-radius: 50%;
+        display: flex; align-items: center; justify-content: center;
+        background: rgba(245,158,11,0.15);
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+
+      /* Wallet connecting icon */
+      .wallet-connecting-icon {
+        width: 48px; height: 48px; border-radius: 12px;
+        display: flex; align-items: center; justify-content: center;
+        animation: pulse 1.5s ease-in-out infinite;
+      }
+      .wallet-connecting-icon svg { border-radius: 6px; }
+
+      /* Address badge */
+      .address-badge {
+        display: inline-flex; align-items: center; gap: 6px;
+        padding: 2px 10px; border-radius: 6px;
+        background: ${dark ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.03)"};
+        font-size: 11px; font-family: monospace; color: var(--authon-muted);
+      }
+      .address-badge .wallet-icon-sm svg { width: 16px; height: 16px; border-radius: 4px; }
+
       /* Loading overlay */
       #authon-loading-overlay {
         position: absolute; inset: 0; z-index: 10;
-        background: ${dark ? "rgba(15,23,42,0.92)" : "rgba(255,255,255,0.92)"};
+        background: var(--authon-overlay-bg);
         backdrop-filter: blur(2px);
         border-radius: var(--authon-radius);
         display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
@@ -413,11 +774,229 @@ var ModalRenderer = class {
       @keyframes blink { 0%,80%,100% { opacity: .2; } 40% { opacity: 1; } }
       @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
       @keyframes slideIn { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }
+      @keyframes check-draw { to { stroke-dashoffset: 0; } }
+      @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
       ${b.customCss || ""}
     `;
   }
+  // ── Flow Overlay Rendering ──
+  renderOverlay() {
+    this.renderOverlayWithData({});
+  }
+  renderOverlayWithData(data) {
+    if (!this.shadowRoot) return;
+    const container = this.shadowRoot.querySelector(".modal-container");
+    if (!container) return;
+    this.shadowRoot.getElementById("flow-overlay")?.remove();
+    if (this.currentOverlay === "none") return;
+    const overlay = document.createElement("div");
+    overlay.id = "flow-overlay";
+    overlay.className = "flow-overlay";
+    overlay.innerHTML = this.buildOverlayContent(data);
+    container.appendChild(overlay);
+    this.attachOverlayEvents(overlay);
+  }
+  buildOverlayContent(data) {
+    const dark = this.isDark();
+    const errorHtml = this.overlayError ? `<div class="overlay-error">${this.escapeHtml(this.overlayError)}</div>` : "";
+    switch (this.currentOverlay) {
+      case "web3-picker": {
+        const walletItems = WALLET_OPTIONS.map(
+          (w) => `<button class="wallet-btn" data-wallet="${w.id}">
+            <span class="wallet-icon">${walletIconSvg(w.id)}</span>
+            <span>${w.name}</span>
+          </button>`
+        ).join("");
+        return `
+          <div class="overlay-title" style="margin-bottom: 4px;">Select Wallet</div>
+          <div class="wallet-picker">${walletItems}</div>
+          ${errorHtml}
+          <button class="cancel-link" id="overlay-cancel">Cancel</button>
+        `;
+      }
+      case "web3-connecting": {
+        const wallet = WALLET_OPTIONS.find((w) => w.id === this.selectedWallet);
+        const walletName = wallet?.name ?? this.selectedWallet;
+        return `
+          <div class="wallet-connecting-icon">${walletIconSvg(this.selectedWallet)}</div>
+          <div style="display:flex;align-items:center;gap:8px;">
+            <svg class="flow-spinner" width="16" height="16" viewBox="0 0 16 16">
+              <circle cx="8" cy="8" r="6" fill="none" stroke="${wallet?.color ?? "#7c3aed"}" stroke-width="2" opacity="0.25"/>
+              <path d="M8 2a6 6 0 0 1 6 6" fill="none" stroke="${wallet?.color ?? "#7c3aed"}" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+            <span class="overlay-subtitle">Connecting ${this.escapeHtml(walletName)}...</span>
+          </div>
+          ${errorHtml}
+          <button class="cancel-link" id="overlay-cancel">Cancel</button>
+        `;
+      }
+      case "web3-success": {
+        const wallet = WALLET_OPTIONS.find((w) => w.id === (data.walletId || this.selectedWallet));
+        const walletColor = wallet?.color ?? "#8b5cf6";
+        const truncAddr = data.truncatedAddress || "0x...";
+        return `
+          <div class="success-check" style="background:linear-gradient(135deg, ${walletColor}, ${walletColor})">
+            <svg width="24" height="24" viewBox="0 0 20 20" fill="none">
+              <path d="M5 10l3.5 3.5L15 7" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+          <div class="overlay-title">Wallet Connected</div>
+          <div class="address-badge">
+            <span class="wallet-icon-sm">${walletIconSvg(data.walletId || this.selectedWallet)}</span>
+            <span>${this.escapeHtml(truncAddr)}</span>
+          </div>
+        `;
+      }
+      case "passwordless-input": {
+        return `
+          <div class="overlay-title">Enter your email</div>
+          <div class="pwless-form">
+            <input type="email" placeholder="you@example.com" class="input" id="pwless-email" autocomplete="email" />
+            <button class="pwless-submit" id="pwless-submit-btn">Send Magic Link</button>
+          </div>
+          ${errorHtml}
+          <button class="cancel-link" id="overlay-cancel">Cancel</button>
+        `;
+      }
+      case "passwordless-sending": {
+        return `
+          <svg class="flow-spinner" width="16" height="16" viewBox="0 0 16 16">
+            <circle cx="8" cy="8" r="6" fill="none" stroke="var(--authon-primary-start, #7c3aed)" stroke-width="2" opacity="0.25"/>
+            <path d="M8 2a6 6 0 0 1 6 6" fill="none" stroke="var(--authon-primary-start, #7c3aed)" stroke-width="2" stroke-linecap="round"/>
+          </svg>
+          <span class="overlay-subtitle">Sending magic link...</span>
+        `;
+      }
+      case "passwordless-sent": {
+        return `
+          <div class="success-check" style="background:linear-gradient(135deg, var(--authon-primary-start, #7c3aed), var(--authon-primary-end, #4f46e5))">
+            <svg width="24" height="24" viewBox="0 0 20 20" fill="none">
+              <path d="M5 10l3.5 3.5L15 7" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+          <div class="overlay-title">Magic link sent!</div>
+          <span class="overlay-subtitle">Check your email inbox</span>
+        `;
+      }
+      case "otp-input": {
+        const digitInputs = Array.from(
+          { length: 6 },
+          (_, i) => `<input type="text" inputmode="numeric" maxlength="1" class="otp-digit" data-idx="${i}" autocomplete="one-time-code" />`
+        ).join("");
+        return `
+          <div class="otp-container">
+            <div class="overlay-title">Enter verification code</div>
+            <span class="overlay-subtitle">6-digit code sent to ${this.escapeHtml(this.overlayEmail)}</span>
+            <div class="otp-inputs">${digitInputs}</div>
+            ${errorHtml}
+            <button class="cancel-link" id="overlay-cancel">Cancel</button>
+          </div>
+        `;
+      }
+      case "passkey-verifying": {
+        return `
+          <div class="passkey-icon-pulse">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--authon-primary-start, #7c3aed)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="10" cy="7" r="4"/><path d="M10.3 15H7a4 4 0 0 0-4 4v2"/>
+              <path d="M21.7 13.3 19 11"/><path d="m21 15-2.5-1.5"/><path d="m17 17 2.5-1.5"/>
+              <path d="M22 9v6a1 1 0 0 1-1 1h-.5"/><circle cx="18" cy="9" r="3"/>
+            </svg>
+          </div>
+          <span class="overlay-subtitle">Verifying identity...</span>
+          ${errorHtml}
+          <button class="cancel-link" id="overlay-cancel">Cancel</button>
+        `;
+      }
+      case "passkey-success": {
+        return `
+          <div class="success-check" style="background:linear-gradient(135deg, var(--authon-primary-start, #7c3aed), var(--authon-primary-end, #4f46e5))">
+            <svg width="24" height="24" viewBox="0 0 20 20" fill="none">
+              <path d="M5 10l3.5 3.5L15 7" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+          <div class="overlay-title">Identity verified!</div>
+        `;
+      }
+      default:
+        return "";
+    }
+  }
+  attachOverlayEvents(overlay) {
+    if (!this.shadowRoot) return;
+    const cancelBtn = overlay.querySelector("#overlay-cancel");
+    if (cancelBtn) {
+      cancelBtn.addEventListener("click", () => this.hideOverlay());
+    }
+    overlay.querySelectorAll(".wallet-btn").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const walletId = btn.dataset.wallet;
+        if (walletId) {
+          this.selectedWallet = walletId;
+          this.onWeb3WalletSelect(walletId);
+        }
+      });
+    });
+    const pwlessSubmit = overlay.querySelector("#pwless-submit-btn");
+    const pwlessEmail = overlay.querySelector("#pwless-email");
+    if (pwlessSubmit && pwlessEmail) {
+      setTimeout(() => pwlessEmail.focus(), 50);
+      const submitHandler = () => {
+        const email = pwlessEmail.value.trim();
+        if (!email) return;
+        this.overlayEmail = email;
+        this.showOverlay("passwordless-sending");
+        this.onPasswordlessSubmit(email);
+      };
+      pwlessSubmit.addEventListener("click", submitHandler);
+      pwlessEmail.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          submitHandler();
+        }
+      });
+    }
+    const otpDigits = overlay.querySelectorAll(".otp-digit");
+    if (otpDigits.length === 6) {
+      setTimeout(() => otpDigits[0].focus(), 50);
+      otpDigits.forEach((digit, idx) => {
+        digit.addEventListener("input", () => {
+          const val = digit.value.replace(/\D/g, "");
+          digit.value = val.slice(0, 1);
+          if (val && idx < 5) {
+            otpDigits[idx + 1].focus();
+          }
+          const code = Array.from(otpDigits).map((d) => d.value).join("");
+          if (code.length === 6) {
+            this.onOtpVerify(this.overlayEmail, code);
+          }
+        });
+        digit.addEventListener("keydown", (e) => {
+          if (e.key === "Backspace" && !digit.value && idx > 0) {
+            otpDigits[idx - 1].focus();
+            otpDigits[idx - 1].value = "";
+          }
+        });
+        digit.addEventListener("paste", (e) => {
+          e.preventDefault();
+          const pasted = (e.clipboardData?.getData("text") ?? "").replace(/\D/g, "").slice(0, 6);
+          if (pasted.length === 0) return;
+          for (let i = 0; i < 6; i++) {
+            otpDigits[i].value = pasted[i] || "";
+          }
+          const lastIdx = Math.min(pasted.length, 5);
+          otpDigits[lastIdx].focus();
+          if (pasted.length === 6) {
+            this.onOtpVerify(this.overlayEmail, pasted);
+          }
+        });
+      });
+    }
+  }
+  escapeHtml(str) {
+    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+  }
   // ── Event binding ──
-  /** Attach events to shell elements (backdrop, ESC) — called once */
+  /** Attach events to shell elements (backdrop, ESC) -- called once */
   attachShellEvents() {
     if (!this.shadowRoot) return;
     const backdrop = this.shadowRoot.getElementById("backdrop");
@@ -429,12 +1008,18 @@ var ModalRenderer = class {
     }
     if (this.mode === "popup") {
       this.escHandler = (e) => {
-        if (e.key === "Escape") this.onClose();
+        if (e.key === "Escape") {
+          if (this.currentOverlay !== "none") {
+            this.hideOverlay();
+          } else {
+            this.onClose();
+          }
+        }
       };
       document.addEventListener("keydown", this.escHandler);
     }
   }
-  /** Attach events to inner content (buttons, form, switch link) — called on each view */
+  /** Attach events to inner content (buttons, form, switch link) -- called on each view */
   attachInnerEvents(view) {
     if (!this.shadowRoot) return;
     this.shadowRoot.querySelectorAll(".provider-btn").forEach((btn) => {
@@ -468,6 +1053,18 @@ var ModalRenderer = class {
         this.open(view === "signIn" ? "signUp" : "signIn");
       });
     }
+    const web3Btn = this.shadowRoot.getElementById("web3-btn");
+    if (web3Btn) {
+      web3Btn.addEventListener("click", () => this.showOverlay("web3-picker"));
+    }
+    const pwlessBtn = this.shadowRoot.getElementById("passwordless-btn");
+    if (pwlessBtn) {
+      pwlessBtn.addEventListener("click", () => this.showOverlay("passwordless-input"));
+    }
+    const passkeyBtn = this.shadowRoot.getElementById("passkey-btn");
+    if (passkeyBtn) {
+      passkeyBtn.addEventListener("click", () => this.onPasskeyClick());
+    }
   }
 };
 
@@ -497,6 +1094,9 @@ var SessionManager = class {
       this.scheduleRefresh(tokens.expiresIn);
     }
   }
+  updateUser(user) {
+    this.user = user;
+  }
   clearSession() {
     this.accessToken = null;
     this.refreshToken = null;
@@ -558,6 +1158,404 @@ var SessionManager = class {
   }
 };
 
+// src/qrcode.ts
+var EXP = [];
+var LOG = new Array(256).fill(0);
+(() => {
+  let v = 1;
+  for (let i = 0; i < 255; i++) {
+    EXP[i] = v;
+    LOG[v] = i;
+    v <<= 1;
+    if (v & 256) v ^= 285;
+  }
+  for (let i = 255; i < 512; i++) EXP[i] = EXP[i - 255];
+})();
+var gfMul = (a, b) => a && b ? EXP[LOG[a] + LOG[b]] : 0;
+function rsEncode(data, ecLen) {
+  let g = [1];
+  for (let i = 0; i < ecLen; i++) {
+    const ng = new Array(g.length + 1).fill(0);
+    for (let j = 0; j < g.length; j++) {
+      ng[j] ^= gfMul(g[j], EXP[i]);
+      ng[j + 1] ^= g[j];
+    }
+    g = ng;
+  }
+  const rem = new Array(ecLen).fill(0);
+  for (const d of data) {
+    const fb = d ^ rem[0];
+    for (let j = 0; j < ecLen - 1; j++) {
+      rem[j] = rem[j + 1] ^ gfMul(g[ecLen - 1 - j], fb);
+    }
+    rem[ecLen - 1] = gfMul(g[0], fb);
+  }
+  return rem;
+}
+var VER = [
+  { total: 0, ec: 0, g1: 0, g1d: 0, g2: 0, g2d: 0, align: [] },
+  // dummy
+  { total: 26, ec: 7, g1: 1, g1d: 19, g2: 0, g2d: 0, align: [] },
+  { total: 44, ec: 10, g1: 1, g1d: 34, g2: 0, g2d: 0, align: [6, 18] },
+  { total: 70, ec: 15, g1: 1, g1d: 55, g2: 0, g2d: 0, align: [6, 22] },
+  { total: 100, ec: 20, g1: 1, g1d: 80, g2: 0, g2d: 0, align: [6, 26] },
+  { total: 134, ec: 26, g1: 1, g1d: 108, g2: 0, g2d: 0, align: [6, 30] },
+  { total: 172, ec: 18, g1: 2, g1d: 68, g2: 0, g2d: 0, align: [6, 34] },
+  { total: 196, ec: 20, g1: 2, g1d: 78, g2: 0, g2d: 0, align: [6, 22, 38] },
+  { total: 242, ec: 24, g1: 2, g1d: 97, g2: 0, g2d: 0, align: [6, 24, 42] },
+  { total: 292, ec: 30, g1: 2, g1d: 116, g2: 0, g2d: 0, align: [6, 26, 46] },
+  { total: 346, ec: 18, g1: 2, g1d: 68, g2: 2, g2d: 69, align: [6, 28, 50] },
+  { total: 404, ec: 20, g1: 4, g1d: 81, g2: 0, g2d: 0, align: [6, 30, 54] },
+  { total: 466, ec: 24, g1: 2, g1d: 92, g2: 2, g2d: 93, align: [6, 32, 58] },
+  { total: 532, ec: 26, g1: 4, g1d: 107, g2: 0, g2d: 0, align: [6, 34, 62] }
+];
+function dataCapacity(ver) {
+  const v = VER[ver];
+  return v.g1 * v.g1d + v.g2 * v.g2d;
+}
+function pickVersion(byteLen) {
+  for (let v = 1; v < VER.length; v++) {
+    const headerBits = 4 + (v <= 9 ? 8 : 16);
+    const available = dataCapacity(v) * 8 - headerBits;
+    if (byteLen * 8 <= available) return v;
+  }
+  throw new Error(`Data too long for QR code (${byteLen} bytes)`);
+}
+function encodeData(bytes, ver) {
+  const cap = dataCapacity(ver);
+  const countBits = ver <= 9 ? 8 : 16;
+  const bits = [];
+  const push = (val, len) => {
+    for (let i = len - 1; i >= 0; i--) bits.push(val >> i & 1);
+  };
+  push(4, 4);
+  push(bytes.length, countBits);
+  for (const b of bytes) push(b, 8);
+  push(0, Math.min(4, cap * 8 - bits.length));
+  while (bits.length % 8) bits.push(0);
+  const padBytes = [236, 17];
+  let pi = 0;
+  while (bits.length < cap * 8) {
+    push(padBytes[pi], 8);
+    pi ^= 1;
+  }
+  const cw = [];
+  for (let i = 0; i < bits.length; i += 8) {
+    let byte = 0;
+    for (let j = 0; j < 8; j++) byte = byte << 1 | bits[i + j];
+    cw.push(byte);
+  }
+  return cw;
+}
+function computeCodewords(ver, dataCW) {
+  const v = VER[ver];
+  const blocks = [];
+  const ecBlocks = [];
+  let offset = 0;
+  for (let i = 0; i < v.g1; i++) {
+    const block = dataCW.slice(offset, offset + v.g1d);
+    blocks.push(block);
+    ecBlocks.push(rsEncode(block, v.ec));
+    offset += v.g1d;
+  }
+  for (let i = 0; i < v.g2; i++) {
+    const block = dataCW.slice(offset, offset + v.g2d);
+    blocks.push(block);
+    ecBlocks.push(rsEncode(block, v.ec));
+    offset += v.g2d;
+  }
+  const result = [];
+  const maxDataLen = Math.max(v.g1d, v.g2d || 0);
+  for (let i = 0; i < maxDataLen; i++) {
+    for (const block of blocks) {
+      if (i < block.length) result.push(block[i]);
+    }
+  }
+  for (let i = 0; i < v.ec; i++) {
+    for (const block of ecBlocks) result.push(block[i]);
+  }
+  return result;
+}
+var UNSET = -1;
+var DARK = 1;
+var LIGHT = 0;
+function createMatrix(size) {
+  return Array.from({ length: size }, () => new Array(size).fill(UNSET));
+}
+function setModule(m, r, c, dark) {
+  if (r >= 0 && r < m.length && c >= 0 && c < m.length) m[r][c] = dark ? DARK : LIGHT;
+}
+function placeFinderPattern(m, row, col) {
+  for (let r = -1; r <= 7; r++) {
+    for (let c = -1; c <= 7; c++) {
+      const dark = r >= 0 && r <= 6 && c >= 0 && c <= 6 && (r === 0 || r === 6 || c === 0 || c === 6 || r >= 2 && r <= 4 && c >= 2 && c <= 4);
+      setModule(m, row + r, col + c, dark);
+    }
+  }
+}
+function placeAlignmentPattern(m, row, col) {
+  for (let r = -2; r <= 2; r++) {
+    for (let c = -2; c <= 2; c++) {
+      const dark = Math.abs(r) === 2 || Math.abs(c) === 2 || r === 0 && c === 0;
+      m[row + r][col + c] = dark ? DARK : LIGHT;
+    }
+  }
+}
+function isReserved(m, r, c) {
+  return m[r][c] !== UNSET;
+}
+function buildMatrix(ver, codewords) {
+  const size = ver * 4 + 17;
+  const m = createMatrix(size);
+  placeFinderPattern(m, 0, 0);
+  placeFinderPattern(m, 0, size - 7);
+  placeFinderPattern(m, size - 7, 0);
+  for (let i = 8; i < size - 8; i++) {
+    m[6][i] = i % 2 === 0 ? DARK : LIGHT;
+    m[i][6] = i % 2 === 0 ? DARK : LIGHT;
+  }
+  const ap = VER[ver].align;
+  if (ap.length > 0) {
+    for (const r of ap) {
+      for (const c of ap) {
+        if (r <= 8 && c <= 8) continue;
+        if (r <= 8 && c >= size - 8) continue;
+        if (r >= size - 8 && c <= 8) continue;
+        placeAlignmentPattern(m, r, c);
+      }
+    }
+  }
+  m[4 * ver + 9][8] = DARK;
+  for (let i = 0; i < 9; i++) {
+    if (m[8][i] === UNSET) m[8][i] = LIGHT;
+    if (m[i][8] === UNSET) m[i][8] = LIGHT;
+  }
+  for (let i = 0; i < 8; i++) {
+    if (m[8][size - 1 - i] === UNSET) m[8][size - 1 - i] = LIGHT;
+    if (m[size - 1 - i][8] === UNSET) m[size - 1 - i][8] = LIGHT;
+  }
+  if (ver >= 7) {
+    for (let i = 0; i < 6; i++) {
+      for (let j = 0; j < 3; j++) {
+        m[i][size - 11 + j] = LIGHT;
+        m[size - 11 + j][i] = LIGHT;
+      }
+    }
+  }
+  let bitIdx = 0;
+  const totalBits = codewords.length * 8;
+  let upward = true;
+  for (let right = size - 1; right >= 0; right -= 2) {
+    if (right === 6) right = 5;
+    for (let i = 0; i < size; i++) {
+      const row = upward ? size - 1 - i : i;
+      for (const dc of [0, -1]) {
+        const col = right + dc;
+        if (col < 0 || col >= size) continue;
+        if (isReserved(m, row, col)) continue;
+        if (bitIdx < totalBits) {
+          const byteIdx = bitIdx >> 3;
+          const bitPos = 7 - (bitIdx & 7);
+          m[row][col] = codewords[byteIdx] >> bitPos & 1;
+          bitIdx++;
+        } else {
+          m[row][col] = LIGHT;
+        }
+      }
+    }
+    upward = !upward;
+  }
+  return m;
+}
+var MASKS = [
+  (r, c) => (r + c) % 2 === 0,
+  (r) => r % 2 === 0,
+  (_, c) => c % 3 === 0,
+  (r, c) => (r + c) % 3 === 0,
+  (r, c) => (Math.floor(r / 2) + Math.floor(c / 3)) % 2 === 0,
+  (r, c) => r * c % 2 + r * c % 3 === 0,
+  (r, c) => (r * c % 2 + r * c % 3) % 2 === 0,
+  (r, c) => ((r + c) % 2 + r * c % 3) % 2 === 0
+];
+function applyMask(m, maskIdx, template) {
+  const size = m.length;
+  const result = m.map((row) => [...row]);
+  const fn = MASKS[maskIdx];
+  for (let r = 0; r < size; r++) {
+    for (let c = 0; c < size; c++) {
+      if (template[r][c] !== UNSET) continue;
+      if (fn(r, c)) result[r][c] ^= 1;
+    }
+  }
+  return result;
+}
+function penalty(m) {
+  const size = m.length;
+  let score = 0;
+  for (let r = 0; r < size; r++) {
+    let count = 1;
+    for (let c = 1; c < size; c++) {
+      if (m[r][c] === m[r][c - 1]) {
+        count++;
+      } else {
+        if (count >= 5) score += count - 2;
+        count = 1;
+      }
+    }
+    if (count >= 5) score += count - 2;
+  }
+  for (let c = 0; c < size; c++) {
+    let count = 1;
+    for (let r = 1; r < size; r++) {
+      if (m[r][c] === m[r - 1][c]) {
+        count++;
+      } else {
+        if (count >= 5) score += count - 2;
+        count = 1;
+      }
+    }
+    if (count >= 5) score += count - 2;
+  }
+  for (let r = 0; r < size - 1; r++) {
+    for (let c = 0; c < size - 1; c++) {
+      const v = m[r][c];
+      if (v === m[r][c + 1] && v === m[r + 1][c] && v === m[r + 1][c + 1]) score += 3;
+    }
+  }
+  const pat1 = [1, 0, 1, 1, 1, 0, 1, 0, 0, 0, 0];
+  const pat2 = [0, 0, 0, 0, 1, 0, 1, 1, 1, 0, 1];
+  for (let r = 0; r < size; r++) {
+    for (let c = 0; c <= size - 11; c++) {
+      let match1 = true, match2 = true;
+      for (let k = 0; k < 11; k++) {
+        if (m[r][c + k] !== pat1[k]) match1 = false;
+        if (m[r][c + k] !== pat2[k]) match2 = false;
+      }
+      if (match1 || match2) score += 40;
+    }
+  }
+  for (let c = 0; c < size; c++) {
+    for (let r = 0; r <= size - 11; r++) {
+      let match1 = true, match2 = true;
+      for (let k = 0; k < 11; k++) {
+        if (m[r + k][c] !== pat1[k]) match1 = false;
+        if (m[r + k][c] !== pat2[k]) match2 = false;
+      }
+      if (match1 || match2) score += 40;
+    }
+  }
+  let dark = 0;
+  for (let r = 0; r < size; r++) for (let c = 0; c < size; c++) if (m[r][c]) dark++;
+  const pct = dark * 100 / (size * size);
+  const prev5 = Math.floor(pct / 5) * 5;
+  const next5 = prev5 + 5;
+  score += Math.min(Math.abs(prev5 - 50) / 5, Math.abs(next5 - 50) / 5) * 10;
+  return score;
+}
+function bchEncode(data, gen, dataBits) {
+  let d = data << 15 - dataBits;
+  const genLen = Math.floor(Math.log2(gen)) + 1;
+  const totalBits = dataBits + (genLen - 1);
+  d = data << totalBits - dataBits;
+  for (let i = dataBits - 1; i >= 0; i--) {
+    if (d & 1 << i + genLen - 1) d ^= gen << i;
+  }
+  return data << genLen - 1 | d;
+}
+function placeFormatInfo(m, maskIdx) {
+  const size = m.length;
+  const data = 1 << 3 | maskIdx;
+  let format = bchEncode(data, 1335, 5);
+  format ^= 21522;
+  const bits = [];
+  for (let i = 14; i >= 0; i--) bits.push(format >> i & 1);
+  const hPos = [0, 1, 2, 3, 4, 5, 7, 8, size - 8, size - 7, size - 6, size - 5, size - 4, size - 3, size - 2];
+  for (let i = 0; i < 15; i++) m[8][hPos[i]] = bits[i];
+  const vPos = [size - 1, size - 2, size - 3, size - 4, size - 5, size - 6, size - 7, size - 8, 7, 5, 4, 3, 2, 1, 0];
+  for (let i = 0; i < 15; i++) m[vPos[i]][8] = bits[i];
+}
+function placeVersionInfo(m, ver) {
+  if (ver < 7) return;
+  const size = m.length;
+  let info = bchEncode(ver, 7973, 6);
+  for (let i = 0; i < 18; i++) {
+    const bit = info >> i & 1;
+    const r = Math.floor(i / 3);
+    const c = size - 11 + i % 3;
+    m[r][c] = bit;
+    m[c][r] = bit;
+  }
+}
+function generateQrSvg(text, moduleSize = 4) {
+  const bytes = Array.from(new TextEncoder().encode(text));
+  const ver = pickVersion(bytes.length);
+  const dataCW = encodeData(bytes, ver);
+  const allCW = computeCodewords(ver, dataCW);
+  const size = ver * 4 + 17;
+  const template = createMatrix(size);
+  placeFinderPattern(template, 0, 0);
+  placeFinderPattern(template, 0, size - 7);
+  placeFinderPattern(template, size - 7, 0);
+  for (let i = 8; i < size - 8; i++) {
+    template[6][i] = LIGHT;
+    template[i][6] = LIGHT;
+  }
+  const ap = VER[ver].align;
+  for (const r of ap) {
+    for (const c of ap) {
+      if (r <= 8 && c <= 8) continue;
+      if (r <= 8 && c >= size - 8) continue;
+      if (r >= size - 8 && c <= 8) continue;
+      for (let dr = -2; dr <= 2; dr++) for (let dc = -2; dc <= 2; dc++) template[r + dr][c + dc] = LIGHT;
+    }
+  }
+  template[4 * ver + 9][8] = LIGHT;
+  for (let i = 0; i < 9; i++) {
+    if (template[8][i] === UNSET) template[8][i] = LIGHT;
+    if (template[i][8] === UNSET) template[i][8] = LIGHT;
+  }
+  for (let i = 0; i < 8; i++) {
+    if (template[8][size - 1 - i] === UNSET) template[8][size - 1 - i] = LIGHT;
+    if (template[size - 1 - i][8] === UNSET) template[size - 1 - i][8] = LIGHT;
+  }
+  if (ver >= 7) {
+    for (let i = 0; i < 6; i++) for (let j = 0; j < 3; j++) {
+      template[i][size - 11 + j] = LIGHT;
+      template[size - 11 + j][i] = LIGHT;
+    }
+  }
+  const base = buildMatrix(ver, allCW);
+  let bestMask = 0;
+  let bestScore = Infinity;
+  for (let mask = 0; mask < 8; mask++) {
+    const masked = applyMask(base, mask, template);
+    placeFormatInfo(masked, mask);
+    placeVersionInfo(masked, ver);
+    const s = penalty(masked);
+    if (s < bestScore) {
+      bestScore = s;
+      bestMask = mask;
+    }
+  }
+  const final = applyMask(base, bestMask, template);
+  placeFormatInfo(final, bestMask);
+  placeVersionInfo(final, ver);
+  const quiet = 4;
+  const total = size + quiet * 2;
+  const px = total * moduleSize;
+  let svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${total} ${total}" width="${px}" height="${px}" shape-rendering="crispEdges">`;
+  svg += `<rect width="${total}" height="${total}" fill="#fff"/>`;
+  for (let r = 0; r < size; r++) {
+    for (let c = 0; c < size; c++) {
+      if (final[r][c] === DARK) {
+        svg += `<rect x="${c + quiet}" y="${r + quiet}" width="1" height="1" fill="#000"/>`;
+      }
+    }
+  }
+  svg += "</svg>";
+  return svg;
+}
+
 // src/authon.ts
 var Authon = class {
   publishableKey;
@@ -595,15 +1593,26 @@ var Authon = class {
     await this.ensureInitialized();
     this.getModal().open("signUp");
   }
+  /** Update theme at runtime without destroying form state */
+  setTheme(theme) {
+    this.getModal().setTheme(theme);
+  }
   async signInWithOAuth(provider, options) {
     await this.ensureInitialized();
     await this.startOAuthFlow(provider, options);
   }
   async signInWithEmail(email, password) {
-    const tokens = await this.apiPost("/v1/auth/signin", { email, password });
-    this.session.setSession(tokens);
-    this.emit("signedIn", tokens.user);
-    return tokens.user;
+    const res = await this.apiPost(
+      "/v1/auth/signin",
+      { email, password }
+    );
+    if (res.mfaRequired && res.mfaToken) {
+      this.emit("mfaRequired", res.mfaToken);
+      throw new AuthonMfaRequiredError(res.mfaToken);
+    }
+    this.session.setSession(res);
+    this.emit("signedIn", res.user);
+    return res.user;
   }
   async signUpWithEmail(email, password, meta) {
     const tokens = await this.apiPost("/v1/auth/signup", {
@@ -631,6 +1640,258 @@ var Authon = class {
     set.add(listener);
     return () => set.delete(listener);
   }
+  // ── MFA ──
+  async setupMfa() {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to setup MFA");
+    const res = await this.apiPostAuth("/v1/auth/mfa/totp/setup", void 0, token);
+    return { ...res, qrCodeSvg: generateQrSvg(res.qrCodeUri) };
+  }
+  async verifyMfaSetup(code) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to verify MFA setup");
+    await this.apiPostAuth("/v1/auth/mfa/totp/verify-setup", { code }, token);
+  }
+  async verifyMfa(mfaToken, code) {
+    const res = await this.apiPost("/v1/auth/mfa/verify", { mfaToken, code });
+    this.session.setSession(res);
+    this.emit("signedIn", res.user);
+    return res.user;
+  }
+  async disableMfa(code) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to disable MFA");
+    await this.apiPostAuth("/v1/auth/mfa/disable", { code }, token);
+  }
+  async getMfaStatus() {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to get MFA status");
+    const res = await fetch(`${this.config.apiUrl}/v1/auth/mfa/status`, {
+      headers: {
+        "x-api-key": this.publishableKey,
+        Authorization: `Bearer ${token}`
+      },
+      credentials: "include"
+    });
+    if (!res.ok) throw new Error(await this.parseApiError(res, "/v1/auth/mfa/status"));
+    return res.json();
+  }
+  async regenerateBackupCodes(code) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to regenerate backup codes");
+    const res = await this.apiPostAuth(
+      "/v1/auth/mfa/backup-codes/regenerate",
+      { code },
+      token
+    );
+    return res.backupCodes;
+  }
+  // ── Passwordless ──
+  async sendMagicLink(email) {
+    await this.apiPost("/v1/auth/passwordless/magic-link", { email });
+  }
+  async sendEmailOtp(email) {
+    await this.apiPost("/v1/auth/passwordless/email-otp", { email });
+  }
+  async verifyPasswordless(options) {
+    const res = await this.apiPost("/v1/auth/passwordless/verify", options);
+    this.session.setSession(res);
+    this.emit("signedIn", res.user);
+    return res.user;
+  }
+  // ── Passkeys ──
+  async registerPasskey(name) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to register a passkey");
+    const options = await this.apiPostAuth(
+      "/v1/auth/passkeys/register/options",
+      name ? { name } : void 0,
+      token
+    );
+    const credential = await navigator.credentials.create({
+      publicKey: this.deserializeCreationOptions(options.options)
+    });
+    const attestation = credential.response;
+    const result = await this.apiPostAuth(
+      "/v1/auth/passkeys/register/verify",
+      {
+        id: credential.id,
+        rawId: this.bufferToBase64url(credential.rawId),
+        type: credential.type,
+        response: {
+          attestationObject: this.bufferToBase64url(attestation.attestationObject),
+          clientDataJSON: this.bufferToBase64url(attestation.clientDataJSON)
+        }
+      },
+      token
+    );
+    this.emit("passkeyRegistered", result);
+    return result;
+  }
+  async authenticateWithPasskey(email) {
+    const options = await this.apiPost(
+      "/v1/auth/passkeys/authenticate/options",
+      email ? { email } : void 0
+    );
+    const credential = await navigator.credentials.get({
+      publicKey: this.deserializeRequestOptions(options.options)
+    });
+    const assertion = credential.response;
+    const res = await this.apiPost("/v1/auth/passkeys/authenticate/verify", {
+      id: credential.id,
+      rawId: this.bufferToBase64url(credential.rawId),
+      type: credential.type,
+      response: {
+        authenticatorData: this.bufferToBase64url(assertion.authenticatorData),
+        clientDataJSON: this.bufferToBase64url(assertion.clientDataJSON),
+        signature: this.bufferToBase64url(assertion.signature),
+        userHandle: assertion.userHandle ? this.bufferToBase64url(assertion.userHandle) : void 0
+      }
+    });
+    this.session.setSession(res);
+    this.emit("signedIn", res.user);
+    return res.user;
+  }
+  async listPasskeys() {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to list passkeys");
+    return this.apiGetAuth("/v1/auth/passkeys", token);
+  }
+  async renamePasskey(passkeyId, name) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to rename a passkey");
+    return this.apiPatchAuth(`/v1/auth/passkeys/${passkeyId}`, { name }, token);
+  }
+  async revokePasskey(passkeyId) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to revoke a passkey");
+    await this.apiDeleteAuth(`/v1/auth/passkeys/${passkeyId}`, token);
+  }
+  // ── Web3 ──
+  async web3GetNonce(address, chain, walletType, chainId) {
+    return this.apiPost("/v1/auth/web3/nonce", {
+      address,
+      chain,
+      walletType,
+      ...chainId != null ? { chainId } : {}
+    });
+  }
+  async web3Verify(message, signature, address, chain, walletType) {
+    const res = await this.apiPost("/v1/auth/web3/verify", {
+      message,
+      signature,
+      address,
+      chain,
+      walletType
+    });
+    this.session.setSession(res);
+    this.emit("signedIn", res.user);
+    return res.user;
+  }
+  async listWallets() {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to list wallets");
+    return this.apiGetAuth("/v1/auth/web3/wallets", token);
+  }
+  async linkWallet(params) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to link a wallet");
+    const wallet = await this.apiPostAuth("/v1/auth/web3/wallets/link", params, token);
+    this.emit("web3Connected", wallet);
+    return wallet;
+  }
+  async unlinkWallet(walletId) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to unlink a wallet");
+    await this.apiDeleteAuth(`/v1/auth/web3/wallets/${walletId}`, token);
+  }
+  // ── User Profile ──
+  async updateProfile(data) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to update profile");
+    const user = await this.apiPatchAuth("/v1/auth/me", data, token);
+    this.session.updateUser(user);
+    return user;
+  }
+  // ── Session Management ──
+  async listSessions() {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to list sessions");
+    return this.apiGetAuth("/v1/auth/me/sessions", token);
+  }
+  async revokeSession(sessionId) {
+    const token = this.session.getToken();
+    if (!token) throw new Error("Must be signed in to revoke a session");
+    await this.apiDeleteAuth(`/v1/auth/me/sessions/${sessionId}`, token);
+  }
+  // ── Organizations ──
+  organizations = {
+    list: async () => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to list organizations");
+      return this.apiGetAuth("/v1/auth/organizations", token);
+    },
+    create: async (params) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to create an organization");
+      return this.apiPostAuth("/v1/auth/organizations", params, token);
+    },
+    get: async (orgId) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to get organization");
+      return this.apiGetAuth(`/v1/auth/organizations/${orgId}`, token);
+    },
+    update: async (orgId, params) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to update organization");
+      return this.apiPatchAuth(`/v1/auth/organizations/${orgId}`, params, token);
+    },
+    delete: async (orgId) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to delete organization");
+      await this.apiDeleteAuth(`/v1/auth/organizations/${orgId}`, token);
+    },
+    getMembers: async (orgId) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to get organization members");
+      return this.apiGetAuth(`/v1/auth/organizations/${orgId}/members`, token);
+    },
+    invite: async (orgId, params) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to invite a member");
+      return this.apiPostAuth(`/v1/auth/organizations/${orgId}/invitations`, params, token);
+    },
+    getInvitations: async (orgId) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to get invitations");
+      return this.apiGetAuth(`/v1/auth/organizations/${orgId}/invitations`, token);
+    },
+    acceptInvitation: async (token) => {
+      const authToken = this.session.getToken();
+      if (!authToken) throw new Error("Must be signed in to accept an invitation");
+      return this.apiPostAuth(`/v1/auth/organizations/invitations/${token}/accept`, void 0, authToken);
+    },
+    rejectInvitation: async (token) => {
+      const authToken = this.session.getToken();
+      if (!authToken) throw new Error("Must be signed in to reject an invitation");
+      await this.apiPostAuth(`/v1/auth/organizations/invitations/${token}/reject`, void 0, authToken);
+    },
+    removeMember: async (orgId, memberId) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to remove a member");
+      await this.apiDeleteAuth(`/v1/auth/organizations/${orgId}/members/${memberId}`, token);
+    },
+    updateMemberRole: async (orgId, memberId, role) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to update member role");
+      return this.apiPatchAuth(`/v1/auth/organizations/${orgId}/members/${memberId}`, { role }, token);
+    },
+    leave: async (orgId) => {
+      const token = this.session.getToken();
+      if (!token) throw new Error("Must be signed in to leave organization");
+      await this.apiPostAuth(`/v1/auth/organizations/${orgId}/leave`, void 0, token);
+    }
+  };
   destroy() {
     this.modal?.close();
     this.session.destroy();
@@ -678,7 +1939,53 @@ var Authon = class {
             this.emit("error", err instanceof Error ? err : new Error(msg));
           });
         },
-        onClose: () => this.modal?.close()
+        onClose: () => this.modal?.close(),
+        onWeb3WalletSelect: async (walletId) => {
+          const chain = walletId === "phantom" ? "solana" : "evm";
+          try {
+            this.modal?.showOverlay?.("web3-connecting");
+            const address = await this.getWalletAddress(walletId);
+            const { message } = await this.web3GetNonce(address, chain, walletId);
+            const signature = await this.requestWalletSignature(walletId, message);
+            await this.web3Verify(message, signature, address, chain, walletId);
+            this.modal?.showWeb3Success(walletId, address);
+            setTimeout(() => this.modal?.close(), 2500);
+          } catch (err) {
+            this.modal?.showOverlayError(err instanceof Error ? err.message : String(err));
+          }
+        },
+        onPasswordlessSubmit: async (email) => {
+          try {
+            const method = this.branding?.passwordlessMethod ?? "magic_link";
+            if (method === "email_otp" || method === "both") {
+              await this.sendEmailOtp(email);
+              this.modal?.showOtpInput(email);
+            } else {
+              await this.sendMagicLink(email);
+              this.modal?.showPasswordlessSent();
+            }
+          } catch (err) {
+            this.modal?.showOverlayError(err instanceof Error ? err.message : String(err));
+          }
+        },
+        onOtpVerify: async (email, code) => {
+          try {
+            await this.verifyPasswordless({ email, code });
+            this.modal?.close();
+          } catch (err) {
+            this.modal?.showOverlayError(err instanceof Error ? err.message : String(err));
+          }
+        },
+        onPasskeyClick: async () => {
+          try {
+            this.modal?.showOverlay?.("passkey-verifying");
+            await this.authenticateWithPasskey();
+            this.modal?.showPasskeySuccess();
+            setTimeout(() => this.modal?.close(), 2500);
+          } catch (err) {
+            this.modal?.showOverlayError(err instanceof Error ? err.message : String(err));
+          }
+        }
       });
     }
     if (this.branding) this.modal.setBranding(this.branding);
@@ -921,6 +2228,130 @@ var Authon = class {
     if (!res.ok) throw new Error(await this.parseApiError(res, path));
     return res.json();
   }
+  async apiPostAuth(path, body, token) {
+    const res = await fetch(`${this.config.apiUrl}${path}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": this.publishableKey,
+        Authorization: `Bearer ${token}`
+      },
+      credentials: "include",
+      body: body ? JSON.stringify(body) : void 0
+    });
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
+    return res.json();
+  }
+  async apiGetAuth(path, token) {
+    const res = await fetch(`${this.config.apiUrl}${path}`, {
+      headers: {
+        "x-api-key": this.publishableKey,
+        Authorization: `Bearer ${token}`
+      },
+      credentials: "include"
+    });
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
+    return res.json();
+  }
+  async apiPatchAuth(path, body, token) {
+    const res = await fetch(`${this.config.apiUrl}${path}`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": this.publishableKey,
+        Authorization: `Bearer ${token}`
+      },
+      credentials: "include",
+      body: body ? JSON.stringify(body) : void 0
+    });
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
+    return res.json();
+  }
+  async apiDeleteAuth(path, token) {
+    const res = await fetch(`${this.config.apiUrl}${path}`, {
+      method: "DELETE",
+      headers: {
+        "x-api-key": this.publishableKey,
+        Authorization: `Bearer ${token}`
+      },
+      credentials: "include"
+    });
+    if (!res.ok) throw new Error(await this.parseApiError(res, path));
+  }
+  // ── Wallet helpers ──
+  async getWalletAddress(walletId) {
+    if (walletId === "phantom") {
+      const provider2 = window.solana;
+      if (!provider2?.isPhantom) throw new Error("Phantom wallet not detected. Please install it from phantom.app");
+      const resp = await provider2.connect();
+      return resp.publicKey.toString();
+    }
+    const provider = window.ethereum;
+    if (!provider) throw new Error(`${walletId} wallet not detected. Please install it.`);
+    const accounts = await provider.request({ method: "eth_requestAccounts" });
+    return accounts[0];
+  }
+  async requestWalletSignature(walletId, message) {
+    if (walletId === "phantom") {
+      const provider2 = window.solana;
+      const encoded = new TextEncoder().encode(message);
+      const signed = await provider2.signMessage(encoded, "utf8");
+      return Array.from(new Uint8Array(signed.signature)).map((b) => b.toString(16).padStart(2, "0")).join("");
+    }
+    const provider = window.ethereum;
+    const accounts = await provider.request({ method: "eth_requestAccounts" });
+    return provider.request({ method: "personal_sign", params: [message, accounts[0]] });
+  }
+  // ── WebAuthn helpers ──
+  bufferToBase64url(buffer) {
+    const bytes = new Uint8Array(buffer);
+    let binary = "";
+    for (let i = 0; i < bytes.length; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+  }
+  base64urlToBuffer(base64url) {
+    const base64 = base64url.replace(/-/g, "+").replace(/_/g, "/");
+    const padded = base64 + "=".repeat((4 - base64.length % 4) % 4);
+    const binary = atob(padded);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes.buffer;
+  }
+  deserializeCreationOptions(options) {
+    const opts = { ...options };
+    if (typeof opts.challenge === "string") {
+      opts.challenge = this.base64urlToBuffer(opts.challenge);
+    }
+    if (opts.user && typeof opts.user.id === "string") {
+      opts.user.id = this.base64urlToBuffer(
+        opts.user.id
+      );
+    }
+    if (Array.isArray(opts.excludeCredentials)) {
+      opts.excludeCredentials = opts.excludeCredentials.map((c) => ({
+        ...c,
+        id: typeof c.id === "string" ? this.base64urlToBuffer(c.id) : c.id
+      }));
+    }
+    return opts;
+  }
+  deserializeRequestOptions(options) {
+    const opts = { ...options };
+    if (typeof opts.challenge === "string") {
+      opts.challenge = this.base64urlToBuffer(opts.challenge);
+    }
+    if (Array.isArray(opts.allowCredentials)) {
+      opts.allowCredentials = opts.allowCredentials.map((c) => ({
+        ...c,
+        id: typeof c.id === "string" ? this.base64urlToBuffer(c.id) : c.id
+      }));
+    }
+    return opts;
+  }
   async parseApiError(res, path) {
     try {
       const body = await res.json();
@@ -938,6 +2369,8 @@ var Authon = class {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Authon,
+  AuthonMfaRequiredError,
+  generateQrSvg,
   getProviderButtonConfig
 });
 //# sourceMappingURL=index.cjs.map