@authon/js 0.3.0 → 0.3.1

package/dist/index.cjs

@@ -37,11 +37,46 @@ var AuthonMfaRequiredError = class extends Error {
   }
 };
 
-// src/modal.ts
-var import_shared2 = require("@authon/shared");
+// ../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>`,
@@ -55,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]
@@ -66,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;
@@ -73,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);
     }
@@ -94,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;
@@ -117,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;
@@ -168,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;
@@ -198,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">
@@ -239,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 " : ""}
@@ -257,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>` : ""}
@@ -265,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() {
@@ -288,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);
@@ -296,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 {
@@ -390,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;
@@ -425,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");
@@ -441,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) => {
@@ -480,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());
+    }
   }
 };
 
@@ -1008,6 +1593,10 @@ 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);
@@ -1350,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);
@@ -1643,6 +2278,30 @@ var Authon = class {
     });
     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);