@rhinestone/1auth 0.6.9 → 0.7.0

package/dist/index.js

@@ -344,25 +344,19 @@ var SPINNER_RADIUS = (SPINNER_SIZE - SPINNER_STROKE) / 2;
 var SPINNER_CIRCUMFERENCE = 2 * Math.PI * SPINNER_RADIUS;
 var SPINNER_ARC_FRACTION = 0.17;
 var SPINNER_ARC = SPINNER_CIRCUMFERENCE * SPINNER_ARC_FRACTION;
+var SPINNER_SPIN_DURATION_MS = 800;
 var LOADING_MODAL_WIDTH = 380;
 var LOADING_MODAL_PADDING = 12;
 var LOADING_MODAL_RADIUS = 16;
-var LOADING_MOBILE_BREAKPOINT = 640;
-var LOADING_CARD_GAP = 16;
 var LOADING_BODY_GAP = 12;
 var LOADING_ICON_PADDING = 12;
 var LOADING_TITLE_BLOCK_GAP = 4;
-var LOADING_FOOTER_GAP = 4;
 var LOADING_TITLE_FONT_SIZE = 20;
 var LOADING_TITLE_FONT_WEIGHT = 700;
 var LOADING_SUBTITLE_FONT_SIZE = 12;
 var LOADING_SUBTITLE_FONT_WEIGHT = 500;
-var LOADING_FOOTER_FONT_SIZE = 11;
-var LOADING_FOOTER_FONT_WEIGHT = 500;
 var LOADING_LINE_HEIGHT = "normal";
 var LOADING_FONT_FAMILY = "'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
-var LOGO_WIDTH = 72;
-var LOGO_HEIGHT = 16;
 var BRAND_PURPLE = "#685bff";
 var LIGHT_TOKENS = {
   bgPrimary: "#ffffff",
@@ -376,7 +370,6 @@ var DARK_TOKENS = {
   textPrimary: "#e4e4e7",
   textSecondary: "#9f9fa9"
 };
-var FOOTER_TEXT_COLOR = "#71717b";
 var LOADING_TITLE = "Loading...";
 var LOADING_SUBTITLE = "This will only take a few moments, do not close the window.";
 
@@ -386,7 +379,36 @@ var POPUP_HEIGHT = 600;
 var DEFAULT_EMBED_WIDTH = `${LOADING_MODAL_WIDTH}px`;
 var DEFAULT_EMBED_HEIGHT = "500px";
 var DEFAULT_PROVIDER_URL = "https://passkey.1auth.box";
+function currentWindowOrigin() {
+  if (typeof window === "undefined") return null;
+  const origin = window.location?.origin;
+  return typeof origin === "string" && origin.length > 0 ? origin : null;
+}
+function appendParentOriginParam(params) {
+  const origin = currentWindowOrigin();
+  if (origin) params.set("parentOrigin", origin);
+}
 var MAX_LABEL_LEN = 20;
+var DEFAULT_BACKDROP_COLOR = "#000000";
+var DEFAULT_BACKDROP_OPACITY = 0.4;
+var DEFAULT_BACKDROP_BLUR = 8;
+var HEX_COLOR_RE = /^#[0-9a-fA-F]{6}$/;
+function resolveBackdropStyle(params) {
+  const rawColor = params.get("backdropColor");
+  const hex = (rawColor && HEX_COLOR_RE.test(rawColor) ? rawColor : DEFAULT_BACKDROP_COLOR).slice(1);
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const clampNumber = (key, min, max, fallback) => {
+    const raw = params.get(key);
+    if (!raw) return fallback;
+    const n = Number(raw);
+    return Number.isFinite(n) ? Math.min(max, Math.max(min, n)) : fallback;
+  };
+  const opacity = clampNumber("backdropOpacity", 0, 1, DEFAULT_BACKDROP_OPACITY);
+  const blur = clampNumber("backdropBlur", 0, 40, DEFAULT_BACKDROP_BLUR);
+  return { background: `rgba(${r}, ${g}, ${b}, ${opacity})`, blur };
+}
 function generateModalNonce() {
   if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return crypto.randomUUID();
@@ -510,6 +532,15 @@ var OneAuthClient = class {
     // "Restore will override" warnings and "emitting session_request:N
     // without any listeners" errors on the second and later txs.
     this.eoaDialogState = null;
+    // Hidden iframe that warms the dialog ahead of the first real open (see
+    // `prewarm()`). The passkey app runs on a long-lived server (not serverless),
+    // so there is no backend cold-start to hide — what stays expensive is the
+    // *browser-side* cost of a freshly created cross-origin iframe: downloading
+    // the dialog HTML + JS bundle, parsing it, hydrating React, and loading the
+    // font. Loading that bundle once into a parked hidden iframe lets the real
+    // open hit the HTTP cache (Next.js chunks/fonts are immutable-cached) over an
+    // already-warm connection, so the SDK preload overlay is shown only briefly.
+    this.prewarmState = null;
     // Serialises concurrent `requestWithWallet` calls — they would otherwise
     // both try to drive the same iframe and cross-resolve each other.
     this.eoaSerialQueue = Promise.resolve();
@@ -523,6 +554,15 @@ var OneAuthClient = class {
       if (dialogUrl !== providerUrl) {
         this.injectPreconnect(dialogUrl);
       }
+      if (this.config.prewarm) {
+        const warm = () => void this.prewarm();
+        const ric = window.requestIdleCallback;
+        if (typeof ric === "function") {
+          ric(warm, { timeout: 2e3 });
+        } else {
+          setTimeout(warm, 200);
+        }
+      }
     }
     const initOperation = this.createTelemetryOperation("client", {
       hasClientId: !!this.config.clientId,
@@ -756,6 +796,18 @@ var OneAuthClient = class {
     if (primary) {
       params.set("accent", primary);
     }
+    const backdrop = theme.backdrop;
+    if (backdrop) {
+      if (backdrop.color) {
+        params.set("backdropColor", backdrop.color);
+      }
+      if (backdrop.opacity !== void 0) {
+        params.set("backdropOpacity", String(backdrop.opacity));
+      }
+      if (backdrop.blur !== void 0) {
+        params.set("backdropBlur", String(backdrop.blur));
+      }
+    }
     return params.toString();
   }
   /**
@@ -994,9 +1046,7 @@ var OneAuthClient = class {
     if (options?.flow === "create-account") {
       params.set("switch", "1");
     }
-    if (typeof window !== "undefined" && window.location?.origin) {
-      params.set("parentOrigin", window.location.origin);
-    }
+    appendParentOriginParam(params);
     this.appendTelemetryParams(params, telemetry);
     const themeParams = this.getThemeParams(options?.theme);
     if (themeParams) {
@@ -1077,9 +1127,7 @@ var OneAuthClient = class {
     if (this.config.clientId) {
       params.set("clientId", this.config.clientId);
     }
-    if (typeof window !== "undefined" && window.location?.origin) {
-      params.set("parentOrigin", window.location.origin);
-    }
+    appendParentOriginParam(params);
     this.appendTelemetryParams(params, telemetry);
     const themeParams = this.getThemeParams(options?.theme);
     if (themeParams) {
@@ -1210,10 +1258,13 @@ var OneAuthClient = class {
       themeParsed.forEach((value, key) => params.set(key, value));
     }
     const url = `${dialogUrl}/dialog/account?${params.toString()}`;
+    const accessTokenResult = await this.fetchAccessToken();
+    const initMessage = { mode: "iframe" };
+    if (accessTokenResult.ok) {
+      initMessage.auth = { accessToken: accessTokenResult.accessToken };
+    }
     const { dialog, iframe, cleanup } = this.createModalDialog(url);
-    const ready = await this.waitForDialogReady(dialog, iframe, cleanup, {
-      mode: "iframe"
-    });
+    const ready = await this.waitForDialogReady(dialog, iframe, cleanup, initMessage);
     if (!ready) return;
     const dialogOrigin = this.getDialogOrigin();
     return new Promise((resolve) => {
@@ -1398,6 +1449,7 @@ var OneAuthClient = class {
     }
     const dialogUrl = this.getDialogUrl();
     const params = new URLSearchParams({ mode: "iframe" });
+    appendParentOriginParam(params);
     this.appendTelemetryParams(params, telemetry);
     const themeParams = this.getThemeParams(options.theme);
     if (themeParams) {
@@ -1444,6 +1496,7 @@ var OneAuthClient = class {
         targetChains,
         status: result.status ? String(result.status) : void 0
       });
+      await this.waitForDialogClose(dialog, cleanup);
     } else {
       this.emitTelemetry(
         result.error?.code === "USER_CANCELLED" ? "dialog.cancelled" : "grant_permission.failed",
@@ -1625,6 +1678,7 @@ var OneAuthClient = class {
     });
     const dialogUrl = this.getDialogUrl();
     const params = new URLSearchParams({ mode: "iframe" });
+    appendParentOriginParam(params);
     this.appendTelemetryParams(params, telemetry);
     const themeParams = this.getThemeParams(options?.theme);
     if (themeParams) {
@@ -1795,6 +1849,7 @@ var OneAuthClient = class {
     let prepareResponse;
     const dialogUrl = this.getDialogUrl();
     const params = new URLSearchParams({ mode: "iframe" });
+    appendParentOriginParam(params);
     this.appendTelemetryParams(params, telemetry);
     const themeParams = this.getThemeParams();
     if (themeParams) {
@@ -2071,6 +2126,10 @@ var OneAuthClient = class {
           expiresAt: refreshedData.expiresAt,
           intentOp: refreshedData.intentOp,
           digestResult: refreshedData.digestResult,
+          // A refreshed quote mints a fresh binding — it MUST replace the old
+          // one, or execute would verify the new intentOp against a stale
+          // binding and reject (once enforce mode is on).
+          binding: refreshedData.binding,
           auth: refreshedAuth
         };
         return {
@@ -2080,6 +2139,7 @@ var OneAuthClient = class {
           originMessages: refreshedData.originMessages,
           transaction: refreshedData.transaction,
           digestResult: refreshedData.digestResult,
+          binding: refreshedData.binding,
           // Dialog-executed intents read auth from dialog state — ship the
           // rebound bundle with the refresh so PASSKEY_REFRESH_COMPLETE
           // updates it alongside the quote.
@@ -2144,6 +2204,7 @@ var OneAuthClient = class {
             userId: prepareResponse.userId,
             intentOp: prepareResponse.intentOp,
             digestResult: prepareResponse.digestResult,
+            binding: prepareResponse.binding,
             tier: prepareResult.tier,
             auth: sponsorshipTokens,
             telemetry: this.telemetryPayload(telemetry)
@@ -2274,6 +2335,7 @@ var OneAuthClient = class {
           userId: prepareResponse.userId,
           intentOp: prepareResponse.intentOp,
           digestResult: prepareResponse.digestResult,
+          binding: prepareResponse.binding,
           tier: prepareResult.tier,
           ...authReady && { auth: authReady },
           telemetry: this.telemetryPayload(telemetry)
@@ -2447,6 +2509,8 @@ var OneAuthClient = class {
             calls: prepareResponse.calls,
             expiresAt: prepareResponse.expiresAt,
             digestResult: prepareResponse.digestResult,
+            // Opaque prepare->execute binding, forwarded unchanged.
+            binding: prepareResponse.binding,
             // Signature from dialog
             signature: signingResult.signature,
             passkey: signingResult.passkey,
@@ -2772,6 +2836,7 @@ var OneAuthClient = class {
     };
     const dialogUrl = this.getDialogUrl();
     const params = new URLSearchParams({ mode: "iframe" });
+    appendParentOriginParam(params);
     this.appendTelemetryParams(params, telemetry);
     const themeParams = this.getThemeParams();
     if (themeParams) {
@@ -2888,6 +2953,7 @@ var OneAuthClient = class {
         batchIntents: prepareResponse.intents,
         batchFailedIntents: prepareResponse.failedIntents,
         challenge: prepareResponse.challenge,
+        binding: prepareResponse.binding,
         username: options.username,
         accountAddress: prepareResponse.accountAddress,
         userId: prepareResponse.userId,
@@ -2931,6 +2997,7 @@ var OneAuthClient = class {
         batchIntents: prepareResponse.intents,
         batchFailedIntents: prepareResponse.failedIntents,
         challenge: prepareResponse.challenge,
+        binding: prepareResponse.binding,
         username: options.username,
         accountAddress: prepareResponse.accountAddress,
         userId: prepareResponse.userId,
@@ -2998,6 +3065,7 @@ var OneAuthClient = class {
                 batchIntents: refreshed.intents,
                 batchFailedIntents: refreshed.failedIntents,
                 challenge: refreshed.challenge,
+                binding: refreshed.binding,
                 expiresAt: refreshed.expiresAt,
                 auth: refreshedAuth
               };
@@ -3005,6 +3073,7 @@ var OneAuthClient = class {
                 type: "PASSKEY_REFRESH_COMPLETE",
                 batchIntents: refreshed.intents,
                 challenge: refreshed.challenge,
+                binding: refreshed.binding,
                 expiresAt: refreshed.expiresAt,
                 auth: refreshedAuth
               }, dialogOrigin);
@@ -3433,6 +3502,82 @@ var OneAuthClient = class {
     } catch {
     }
   }
+  /**
+   * Warm the dialog ahead of the first user interaction.
+   *
+   * `preconnect` (run in the constructor) only warms DNS/TLS. This goes
+   * further: it loads the dialog into a hidden, off-screen iframe so the
+   * browser downloads and parses the dialog HTML + JS bundle and the font, and
+   * keeps the cross-origin connection alive. When the user later opens a real
+   * auth/sign dialog, the fresh iframe serves those bytes from cache over the
+   * warm connection and paints far sooner — so the SDK preload overlay is shown
+   * only briefly (or imperceptibly) instead of covering a full cold load.
+   *
+   * It loads a dedicated `/dialog/warm` route, NOT a real flow route. That
+   * matters for two reasons:
+   *   - **No side effects.** The real `/dialog/auth` route runs the signup
+   *     flow on mount (identity probe → `POST /api/auth/register?step=start`),
+   *     which writes an `AuthChallenge` row and counts against the register
+   *     rate limiter. Warming must never create backend auth state for a user
+   *     who hasn't acted, so the warm route renders nothing and runs no flow.
+   *   - **No message cross-talk.** The warm route posts no `PASSKEY_READY` /
+   *     `PASSKEY_RENDERED`, so a slow warm can never satisfy a visible modal's
+   *     readiness listener and drive it to `PASSKEY_INIT` at the wrong moment.
+   * The warm route still pulls the shared Next.js framework + main + dialog
+   * layout chunks (the bulk of every flow's bundle), so the real open is fast.
+   *
+   * Best called on a *likely-intent* signal — `pointerenter`/`focus` of your
+   * "Sign in" / "Pay" button — rather than on page load, so visitors who never
+   * authenticate don't pay for a cross-origin iframe. Pass `prewarm: true` in
+   * the client config to have the SDK schedule this once on an idle callback.
+   *
+   * Idempotent: repeated calls return the same in-flight/settled promise.
+   * Resolves `true` once the hidden iframe's document has loaded, `false` on
+   * timeout or failure. Never throws and never blocks a real dialog open — a
+   * failed prewarm just means the next open does a normal (cold) load.
+   *
+   * @returns Whether the dialog became warm.
+   */
+  async prewarm() {
+    if (typeof document === "undefined") return false;
+    if (this.prewarmState) return this.prewarmState.ready;
+    const warmUrl = `${this.getDialogUrl()}/dialog/warm`;
+    const iframe = document.createElement("iframe");
+    iframe.setAttribute("aria-hidden", "true");
+    iframe.setAttribute("tabindex", "-1");
+    iframe.title = "1auth dialog prewarm";
+    iframe.style.cssText = "position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0;border:0;pointer-events:none;";
+    const ready = new Promise((resolve) => {
+      let settled = false;
+      const finish = (value) => {
+        if (settled) return;
+        settled = true;
+        clearTimeout(timer);
+        resolve(value);
+      };
+      iframe.onload = () => finish(true);
+      iframe.onerror = () => finish(false);
+      const timer = setTimeout(() => finish(false), 1e4);
+    });
+    iframe.src = warmUrl;
+    document.body.appendChild(iframe);
+    this.prewarmState = { iframe, ready };
+    return ready;
+  }
+  /**
+   * Tear down the hidden prewarm iframe created by {@link prewarm}.
+   *
+   * The HTTP cache that prewarm populated survives teardown, so a subsequent
+   * open is still bundle-warm; this only releases the parked frame (and its
+   * keep-alive connection). Call it when auth is no longer likely on the
+   * current view. Safe to call when nothing is warmed.
+   */
+  destroyPrewarm() {
+    const state = this.prewarmState;
+    if (!state) return;
+    this.prewarmState = null;
+    state.iframe.remove();
+  }
   /**
    * Wait for the dialog iframe to signal ready, but defer sending `PASSKEY_INIT`
    * until the caller decides the time is right.
@@ -3815,10 +3960,15 @@ var OneAuthClient = class {
       return { ok: true, dialog: dialog2, iframe: iframe2 };
     }
     const dialogUrl = this.getDialogUrl();
+    const params = new URLSearchParams({ mode: "iframe" });
+    appendParentOriginParam(params);
     const themeParams = this.getThemeParams(theme);
-    const parentOrigin = typeof window !== "undefined" ? window.location.origin : "";
-    const parentOriginParam = parentOrigin ? `&parentOrigin=${encodeURIComponent(parentOrigin)}` : "";
-    const signingUrl = `${dialogUrl}/dialog/sign-eoa?mode=iframe${parentOriginParam}${themeParams ? `&${themeParams}` : ""}`;
+    if (themeParams) {
+      new URLSearchParams(themeParams).forEach((value, key) => {
+        params.set(key, value);
+      });
+    }
+    const signingUrl = `${dialogUrl}/dialog/sign-eoa?${params.toString()}`;
     const { dialog, iframe, destroy } = this.createModalDialog(signingUrl, {
       persistent: true
     });
@@ -3923,6 +4073,7 @@ var OneAuthClient = class {
     });
     const dialogUrl = this.getDialogUrl();
     const params = new URLSearchParams({ mode: "iframe" });
+    appendParentOriginParam(params);
     this.appendTelemetryParams(params, telemetry);
     const themeParams = this.getThemeParams(options?.theme);
     if (themeParams) {
@@ -4065,6 +4216,7 @@ var OneAuthClient = class {
     });
     const dialogUrl = this.getDialogUrl();
     const params = new URLSearchParams({ mode: "iframe" });
+    appendParentOriginParam(params);
     this.appendTelemetryParams(params, telemetry);
     const themeParams = this.getThemeParams(options?.theme);
     if (themeParams) {
@@ -4518,17 +4670,17 @@ var OneAuthClient = class {
   /**
    * Create and open a full-viewport `<dialog>` containing a passkey iframe.
    *
-   * The SDK owns only the hidden outer shell; all visible UI (backdrop,
-   * card, animations, close button) is rendered by the passkey app inside the
-   * iframe. This approach means design changes can be shipped server-side
-   * without updating SDK consumers.
+   * The SDK owns the browser `<dialog>` plus a minimal generic preload shell
+   * that appears immediately on click. The passkey iframe owns all branded and
+   * origin-specific UI (TitleBar, trust icon, action cards); the shell is
+   * removed as soon as the iframe reports that its centered card has painted.
    *
    * Lifecycle:
-   *   1. A themed "Loading…" overlay is injected and shown immediately while the
-   *      iframe loads, matching the exact visual structure of the passkey app's
-   *      TitleBar + IndeterminateLoader so the transition is seamless.
-   *   2. When the iframe sends `PASSKEY_RENDERED`, the overlay fades out and
-   *      the iframe becomes fully visible.
+   *   1. A themed generic preload shell is injected and shown immediately
+   *      while the iframe loads. It intentionally contains no TitleBar or
+   *      origin chrome so that UI has a single implementation in apps/passkey.
+   *   2. When the iframe sends `PASSKEY_RENDERED`, the overlay is removed and
+   *      the iframe becomes fully visible in the same frame.
    *   3. The returned `cleanup` function tears down all event listeners,
    *      disconnects the MutationObserver, closes the `<dialog>`, and removes
    *      it from the DOM. It is idempotent — safe to call multiple times.
@@ -4550,12 +4702,10 @@ var OneAuthClient = class {
     const dialogUrl = this.getDialogUrl();
     const hostUrl = new URL(dialogUrl);
     const urlParams = new URL(url, window.location.href).searchParams;
+    const { background: backdropBackground, blur: backdropBlur } = resolveBackdropStyle(urlParams);
     const themeMode = urlParams.get("theme") || "light";
     const isDark = themeMode === "dark" || themeMode !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches;
     const theme = isDark ? DARK_TOKENS : LIGHT_TOKENS;
-    const { bgPrimary, borderColor, textPrimary, textSecondary } = theme;
-    const textFooter = FOOTER_TEXT_COLOR;
-    const spinnerColor = BRAND_PURPLE;
     const dialog = document.createElement("dialog");
     dialog.dataset.passkey = "";
     if (options?.hidden) {
@@ -4566,16 +4716,6 @@ var OneAuthClient = class {
     document.body.appendChild(dialog);
     const style = document.createElement("style");
     style.textContent = `
-      /* Load Inter so the overlay's title/subtitle widths match the
-         iframe (which loads Inter via next/font). Without this, host
-         pages on Arial / system-ui produce wider text that wraps to two
-         lines and breaks the visual match with the Figma. font-display:
-         swap renders immediately with a fallback and swaps when Inter
-         is ready \u2014 usually well before PASSKEY_RENDERED fires, but the
-         overlay is short-lived either way so a single-frame swap is
-         acceptable. */
-      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');
-
       dialog[data-passkey] {
         position: fixed;
         top: 0;
@@ -4613,103 +4753,143 @@ var OneAuthClient = class {
         backdrop-filter: none;
         -webkit-backdrop-filter: none;
       }
-      dialog[data-passkey] iframe {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        border: 0;
-        background-color: transparent;
-        color-scheme: normal;
-        pointer-events: auto;
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
-      }
       dialog[data-passkey] [data-passkey-overlay] {
         position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        inset: 0;
         display: flex;
         align-items: center;
         justify-content: center;
-        background: rgba(0, 0, 0, 0.4);
-        backdrop-filter: blur(8px);
-        -webkit-backdrop-filter: blur(8px);
+        background: ${backdropBackground};
+        backdrop-filter: blur(${backdropBlur}px);
+        -webkit-backdrop-filter: blur(${backdropBlur}px);
         z-index: 1;
-        /* Purely a visual loading screen \u2014 never intercept clicks.
-           If the iframe's X button or backdrop-dismiss area happens to
-           be reachable while the overlay is still painting (slow CI
-           runners, redirect remounts), the click goes straight through
-           instead of being trapped by the SDK preload. The previous
-           rAF-deferred display:none lost this race in GitHub Actions
-           \u2014 dialog-close.spec.ts repeatedly hit
-           "<div data-passkey-overlay> intercepts pointer events". */
         pointer-events: none;
-        animation: _1auth-backdrop-in 0.2s ease-out;
       }
       dialog[data-passkey][data-passkey-hidden] [data-passkey-overlay] {
         display: none;
       }
-      dialog[data-passkey] [data-passkey-card] {
+      dialog[data-passkey] [data-passkey-preload-card] {
         width: ${LOADING_MODAL_WIDTH}px;
+        max-width: 100%;
+        overflow: hidden;
+        border-radius: ${LOADING_MODAL_RADIUS}px;
+        background: ${theme.bgPrimary};
+        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24), 0 2px 12px rgba(0, 0, 0, 0.12);
+        font-family: ${LOADING_FONT_FAMILY};
+        line-height: ${LOADING_LINE_HEIGHT};
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+      }
+      dialog[data-passkey] [data-passkey-preload-body] {
         box-sizing: border-box;
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        align-items: center;
+        gap: ${LOADING_BODY_GAP}px;
         padding: ${LOADING_MODAL_PADDING}px;
         border-radius: ${LOADING_MODAL_RADIUS}px;
-        box-shadow: inset 0 0 0 1px ${borderColor};
-        animation: _1auth-card-in 0.2s cubic-bezier(0.32, 0.72, 0, 1);
-        max-height: 100dvh;
-        overflow-y: auto;
+        background: ${theme.bgPrimary};
+      }
+      dialog[data-passkey] [data-passkey-preload-spinner-wrap] {
+        display: flex;
+        align-items: center;
+        padding: ${LOADING_ICON_PADDING}px;
+      }
+      dialog[data-passkey] [data-passkey-preload-spinner] {
+        position: relative;
+        width: ${SPINNER_SIZE}px;
+        height: ${SPINNER_SIZE}px;
+      }
+      dialog[data-passkey] [data-passkey-preload-spinner] svg {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        color: ${BRAND_PURPLE};
+        animation: _1auth-spin ${SPINNER_SPIN_DURATION_MS}ms linear infinite;
+      }
+      dialog[data-passkey] [data-passkey-preload-copy] {
         display: flex;
+        width: 100%;
         flex-direction: column;
-        gap: ${LOADING_CARD_GAP}px;
-        font-family: ${LOADING_FONT_FAMILY};
-        /* line-height: normal must be set on the card so the host page's
-           Tailwind preflight (line-height: 1.5 on <body>) doesn't bleed
-           into our card via inheritance \u2014 that's what made the SDK preload
-           render taller than the iframe screen. */
+        align-items: center;
+        gap: ${LOADING_TITLE_BLOCK_GAP}px;
+        text-align: center;
+      }
+      dialog[data-passkey] [data-passkey-preload-title] {
+        margin: 0;
+        color: ${theme.textPrimary};
+        font-size: ${LOADING_TITLE_FONT_SIZE}px;
+        font-weight: ${LOADING_TITLE_FONT_WEIGHT};
         line-height: ${LOADING_LINE_HEIGHT};
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
       }
-      @media (max-width: ${LOADING_MOBILE_BREAKPOINT - 1}px) {
+      dialog[data-passkey] [data-passkey-preload-subtitle] {
+        margin: 0;
+        color: ${theme.textSecondary};
+        font-size: ${LOADING_SUBTITLE_FONT_SIZE}px;
+        font-weight: ${LOADING_SUBTITLE_FONT_WEIGHT};
+        line-height: ${LOADING_LINE_HEIGHT};
+      }
+      @media (max-width: 639px) {
         dialog[data-passkey] [data-passkey-overlay] {
           align-items: flex-end;
         }
-        dialog[data-passkey] [data-passkey-card] {
+        dialog[data-passkey] [data-passkey-preload-card] {
           width: 100%;
-          border-bottom-left-radius: 0;
           border-bottom-right-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+        dialog[data-passkey] [data-passkey-preload-body] {
           padding-bottom: calc(${LOADING_MODAL_PADDING}px + env(safe-area-inset-bottom));
-          animation: _1auth-card-slide 0.3s cubic-bezier(0.32, 0.72, 0, 1);
         }
       }
-      @keyframes _1auth-backdrop-in {
-        from { opacity: 0; } to { opacity: 1; }
-      }
-      @keyframes _1auth-card-in {
-        from { opacity: 0; transform: scale(0.96) translateY(8px); }
-        to { opacity: 1; transform: scale(1) translateY(0); }
-      }
-      @keyframes _1auth-card-slide {
-        from { transform: translate3d(0, 100%, 0); }
-        to { transform: translate3d(0, 0, 0); }
-      }
       @keyframes _1auth-spin {
         from { transform: rotate(0deg); }
         to { transform: rotate(360deg); }
       }
+      dialog[data-passkey] iframe {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        background-color: transparent;
+        color-scheme: normal;
+        pointer-events: auto;
+        backdrop-filter: blur(${backdropBlur}px);
+        -webkit-backdrop-filter: blur(${backdropBlur}px);
+        transition: none;
+      }
     `;
     dialog.appendChild(style);
     const overlay = document.createElement("div");
     overlay.dataset.passkeyOverlay = "";
+    const preloadCard = document.createElement("div");
+    preloadCard.dataset.passkeyPreloadCard = "";
+    const preloadBody = document.createElement("div");
+    preloadBody.dataset.passkeyPreloadBody = "";
+    const spinnerWrap = document.createElement("div");
+    spinnerWrap.dataset.passkeyPreloadSpinnerWrap = "";
+    const spinner = document.createElement("div");
+    spinner.dataset.passkeyPreloadSpinner = "";
     const spinnerCenter = SPINNER_SIZE / 2;
     const spinnerGap = SPINNER_CIRCUMFERENCE - SPINNER_ARC;
-    const spinnerSvg = `<svg style="position:absolute;inset:0;width:100%;height:100%;animation:_1auth-spin 0.8s linear infinite;color:${spinnerColor}" viewBox="0 0 ${SPINNER_SIZE} ${SPINNER_SIZE}" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="${spinnerCenter}" cy="${spinnerCenter}" r="${SPINNER_RADIUS}" stroke="currentColor" opacity="0.3" stroke-width="${SPINNER_STROKE}"/><circle cx="${spinnerCenter}" cy="${spinnerCenter}" r="${SPINNER_RADIUS}" stroke="currentColor" stroke-width="${SPINNER_STROKE}" stroke-linecap="round" stroke-dasharray="${SPINNER_ARC} ${spinnerGap}" transform="rotate(-90 ${spinnerCenter} ${spinnerCenter})"/></svg>`;
-    const rhinestoneLogo = `<svg width="${LOGO_WIDTH}" height="${LOGO_HEIGHT}" viewBox="0 0 72 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M10.4767 14.815C9.80706 15.3364 9.0433 15.7628 8.08753 15.8207C7.91561 15.8312 7.74321 15.8312 7.5713 15.8207C6.616 15.7628 5.85177 15.336 5.18212 14.815C4.56047 14.3303 3.87765 13.648 3.10071 12.871L2.9713 12.7416C2.19483 11.9647 1.51153 11.2818 1.02777 10.6602C0.505414 9.99055 0.0790608 9.22679 0.0211784 8.27102C0.0106814 8.0991 0.0106814 7.9267 0.0211784 7.75479C0.0790608 6.79949 0.505884 6.03526 1.02683 5.36561C1.51153 4.74349 2.19388 4.06114 2.97083 3.2842L3.03577 3.21926L3.10024 3.15479C3.87718 2.37784 4.56 1.69502 5.18165 1.21079C5.85177 0.689374 6.61647 0.26255 7.57177 0.205138C7.74368 0.194641 7.91608 0.194641 8.088 0.205138C9.04377 0.26255 9.80753 0.689374 10.4772 1.21079C11.0993 1.69502 11.7816 2.37784 12.5586 3.15431L12.6885 3.2842C13.4649 4.06067 14.1478 4.74349 14.632 5.36561C15.1534 6.03526 15.5802 6.79902 15.6381 7.75479C15.6485 7.92671 15.6485 8.09879 15.6381 8.27102C15.5802 9.22632 15.1534 9.99055 14.632 10.6602C14.1478 11.2818 13.4649 11.9647 12.6885 12.7416L12.6235 12.8061L12.5586 12.871C11.7821 13.6475 11.0993 14.3308 10.4772 14.8146M1.58306 8.17643C1.64518 9.20326 2.47718 10.0353 4.14212 11.7002C5.80706 13.3647 6.64 14.1971 7.66588 14.2588C7.77506 14.2654 7.88424 14.2654 7.99341 14.2588C9.0193 14.1967 9.85224 13.3647 11.5167 11.6997C13.1812 10.0348 14.0136 9.20279 14.0758 8.17596C14.0821 8.06688 14.0821 7.95752 14.0758 7.84843C14.0136 6.82255 13.1816 5.98961 11.5167 4.32514C9.85177 2.66067 9.01977 1.8282 7.99341 1.76608C7.88433 1.75974 7.77497 1.75974 7.66588 1.76608C6.63953 1.8282 5.80706 2.6602 4.14212 4.32514C2.47765 5.98961 1.64518 6.82208 1.58306 7.84843C1.57672 7.95752 1.57672 8.06735 1.58306 8.17643Z" fill="${textFooter}"/><path d="M3.65796 8.01173C3.65796 7.84138 3.7789 7.69549 3.94455 7.65597C4.78502 7.45502 5.44714 7.1402 6.0029 6.64797C6.16666 6.50271 6.32102 6.34836 6.46596 6.18491C6.95819 5.62914 7.27302 4.96702 7.47396 4.12655C7.49245 4.04577 7.53761 3.97356 7.60215 3.92157C7.66669 3.86958 7.74685 3.84084 7.82972 3.83997C8.00008 3.83997 8.14596 3.96044 8.18549 4.12655C8.3869 4.96702 8.70125 5.62914 9.19349 6.18491C9.33874 6.34836 9.4931 6.50271 9.65655 6.64797C10.2123 7.1402 10.8744 7.45502 11.7154 7.65597C11.7961 7.67455 11.8682 7.71975 11.9201 7.78428C11.972 7.84881 12.0006 7.92892 12.0015 8.01173C12.0006 8.09454 11.972 8.17465 11.9201 8.23918C11.8682 8.30371 11.7961 8.34891 11.7154 8.3675C10.8744 8.56844 10.2128 8.88326 9.65655 9.37549C9.4931 9.52075 9.33874 9.6751 9.19349 9.83855C8.70125 10.3943 8.38643 11.0564 8.18549 11.8969C8.16699 11.9777 8.12184 12.0499 8.0573 12.1019C7.99276 12.1539 7.91259 12.1826 7.82972 12.1835C7.74685 12.1826 7.66669 12.1539 7.60215 12.1019C7.53761 12.0499 7.49245 11.9777 7.47396 11.8969C7.27302 11.0564 6.95819 10.3943 6.46596 9.83855C6.32069 9.67537 6.16608 9.52076 6.0029 9.37549C5.44714 8.88326 4.78502 8.56844 3.94455 8.3675C3.86376 8.349 3.79156 8.30384 3.73957 8.23931C3.68758 8.17477 3.65883 8.0946 3.65796 8.01173Z" fill="${textFooter}"/><path d="M30.1186 4.56946C30.1186 5.08193 30.5031 5.44476 31.08 5.44476C31.6569 5.44476 32.0306 5.08193 32.0306 4.56946C32.0306 4.04711 31.6569 3.70593 31.08 3.70593C30.5031 3.70593 30.1186 4.04711 30.1186 4.56993M30.3106 6.00946V11.3422H31.8494V6.00946H30.3106ZM25.9115 11.3422H24.3732V3.87676H25.9115V6.86311C26.1572 6.35111 26.7129 5.84946 27.5035 5.84946C28.7958 5.84946 29.3835 6.68146 29.3835 8.13182V11.3422H27.8447V8.30264C27.8447 7.53464 27.5031 7.14029 26.9158 7.14029C26.2532 7.14029 25.9115 7.67346 25.9115 8.44146V11.3422ZM21.4682 11.3422H19.9304V6.00946H21.4687L21.1977 7.23299C21.1939 7.25002 21.1941 7.26767 21.1981 7.28464C21.202 7.30161 21.2098 7.31747 21.2207 7.33106C21.2316 7.34465 21.2455 7.35561 21.2612 7.36315C21.2769 7.3707 21.2941 7.37462 21.3115 7.37464C21.3657 7.37464 21.4127 7.33699 21.4268 7.28429C21.656 6.44193 22.3482 5.92429 23.0602 5.92429C23.3379 5.92429 23.5087 5.94546 23.6264 5.96664V7.38546C23.4061 7.36702 23.1853 7.35635 22.9642 7.35346C22.2913 7.35346 21.4687 7.66264 21.4687 9.34782L21.4682 11.3422ZM34.4626 11.3422H32.9242V6.00946H34.4631L34.4414 6.90546C34.6871 6.38311 35.264 5.84946 36.0546 5.84946C37.3473 5.84946 37.9346 6.68146 37.9346 8.13182V11.3422H36.3962V8.30264C36.3962 7.53464 36.0546 7.14029 35.4668 7.14029C34.8047 7.14029 34.4626 7.67346 34.4626 8.44146V11.3422Z" fill="${textFooter}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M38.7355 8.68664C38.7355 10.3186 39.7506 11.513 41.4489 11.513C42.9548 11.513 43.7567 10.6918 43.9915 9.78499L42.56 9.51864C42.464 9.89182 42.0899 10.3398 41.4381 10.3398C40.7652 10.3398 40.2099 9.74217 40.1991 9.02782H44.0024C44.0344 8.89982 44.0555 8.71864 44.0555 8.47346C44.0555 6.92711 42.9016 5.83911 41.4598 5.83911C39.9534 5.83911 38.7355 7.04382 38.7355 8.68664ZM42.56 8.11064H40.2527C40.267 7.80585 40.3982 7.51829 40.6191 7.30777C40.8399 7.09724 41.1335 6.97995 41.4386 6.98029C42.0362 6.98029 42.5812 7.42829 42.56 8.11064Z" fill="${textFooter}"/><path d="M47.1016 11.513C45.8946 11.513 44.7732 11.097 44.5487 9.85982L45.9802 9.64664C46.1511 10.201 46.5355 10.4358 47.0805 10.4358C47.5826 10.4358 47.8494 10.201 47.8494 9.89182C47.8494 9.62499 47.6466 9.44382 47.1016 9.33746L46.5995 9.23064C45.5101 9.00664 44.8264 8.50546 44.8264 7.62029C44.8264 6.56429 45.7449 5.83911 47.0805 5.83911C48.3412 5.83911 49.2706 6.42546 49.3986 7.52382L47.9887 7.73746C47.9242 7.21511 47.5609 6.91629 47.0805 6.91629C46.5892 6.91629 46.3322 7.18264 46.3322 7.49229C46.3322 7.73699 46.5035 7.90829 46.9628 8.00429L47.4649 8.09982C48.7365 8.35582 49.3986 8.86782 49.3986 9.84899C49.3986 10.8626 48.3732 11.513 47.1016 11.513Z" fill="${textFooter}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M54.4423 8.67582C54.4423 10.2118 55.5214 11.513 57.2197 11.513C58.9181 11.513 60.008 10.2118 60.008 8.67582C60.008 7.12946 58.9186 5.83911 57.2197 5.83911C55.5209 5.83911 54.4423 7.12946 54.4423 8.67582ZM58.4588 8.67582C58.4588 9.65699 57.8715 10.1266 57.2197 10.1266C56.5788 10.1266 55.991 9.65746 55.991 8.67582C55.991 7.70546 56.5788 7.21464 57.2197 7.21464C57.8715 7.21464 58.4588 7.69464 58.4588 8.67582Z" fill="${textFooter}"/><path d="M62.4071 11.3421H60.8692V6.00937H62.4071L62.3859 6.90536C62.6316 6.38301 63.2085 5.84937 63.9991 5.84937C65.2918 5.84937 65.8791 6.68137 65.8791 8.13172V11.3421H64.3407V8.30254C64.3407 7.53454 63.9991 7.14019 63.4113 7.14019C62.7492 7.14019 62.4071 7.67336 62.4071 8.44137V11.3421Z" fill="${textFooter}"/><path fill-rule="evenodd" clip-rule="evenodd" d="M66.68 8.68664C66.68 10.3186 67.6951 11.513 69.3934 11.513C70.8998 11.513 71.7012 10.6918 71.936 9.78499L70.5045 9.51864C70.4085 9.89182 70.0344 10.3398 69.3826 10.3398C68.7097 10.3398 68.1544 9.74217 68.1435 9.02782H71.9468C71.9788 8.89982 72 8.71864 72 8.47346C72 6.92711 70.8461 5.83911 69.4043 5.83911C67.8979 5.83911 66.68 7.04382 66.68 8.68664ZM70.5045 8.11064H68.1972C68.2111 7.80581 68.3422 7.51812 68.563 7.30754C68.7839 7.09696 69.0775 6.97973 69.3826 6.98029C69.9812 6.98029 70.5257 7.42829 70.5045 8.11064Z" fill="${textFooter}"/><path d="M52.4418 9.04852V7.26217H53.968V6.00005H52.4418V4.42029H50.9124V6.00005H49.8042V7.26217H50.9124V9.10923C50.9124 9.25511 50.9044 9.43394 50.9266 9.59958C50.9647 9.88194 51.0753 10.3384 51.4691 10.7313C51.8626 11.1243 52.32 11.2349 52.6023 11.2725C52.8216 11.3017 53.0654 11.3012 53.2197 11.3008L53.8743 11.3026V9.86923H53.256C52.8687 9.86923 52.6748 9.86923 52.5543 9.74876C52.4414 9.63582 52.4414 9.45793 52.4418 9.11488V9.04852Z" fill="${textFooter}"/></svg>`;
-    overlay.innerHTML = `<div data-passkey-card style="background:${bgPrimary}"><div style="display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:${LOADING_CARD_GAP}px"><div style="display:flex;width:100%;flex-direction:column;align-items:center;gap:${LOADING_BODY_GAP}px"><div style="display:flex;align-items:center;padding:${LOADING_ICON_PADDING}px"><div style="position:relative;width:${SPINNER_SIZE}px;height:${SPINNER_SIZE}px">${spinnerSvg}</div></div><div style="display:flex;width:100%;flex-direction:column;align-items:center;gap:${LOADING_TITLE_BLOCK_GAP}px;text-align:center"><p style="margin:0;font-size:${LOADING_TITLE_FONT_SIZE}px;font-weight:${LOADING_TITLE_FONT_WEIGHT};color:${textPrimary};line-height:${LOADING_LINE_HEIGHT}">${LOADING_TITLE}</p><p style="margin:0;font-size:${LOADING_SUBTITLE_FONT_SIZE}px;font-weight:${LOADING_SUBTITLE_FONT_WEIGHT};color:${textSecondary};line-height:${LOADING_LINE_HEIGHT}">${LOADING_SUBTITLE}</p></div></div><div style="display:flex;width:100%;align-items:center;justify-content:center;gap:${LOADING_FOOTER_GAP}px"><span style="font-size:${LOADING_FOOTER_FONT_SIZE}px;font-weight:${LOADING_FOOTER_FONT_WEIGHT};color:${textFooter};line-height:${LOADING_LINE_HEIGHT}">Powered by</span>` + rhinestoneLogo + `</div></div></div>`;
+    spinner.innerHTML = `<svg viewBox="0 0 ${SPINNER_SIZE} ${SPINNER_SIZE}" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><circle cx="${spinnerCenter}" cy="${spinnerCenter}" r="${SPINNER_RADIUS}" stroke="currentColor" opacity="0.3" stroke-width="${SPINNER_STROKE}"/><circle cx="${spinnerCenter}" cy="${spinnerCenter}" r="${SPINNER_RADIUS}" stroke="currentColor" stroke-width="${SPINNER_STROKE}" stroke-linecap="round" stroke-dasharray="${SPINNER_ARC} ${spinnerGap}" transform="rotate(-90 ${spinnerCenter} ${spinnerCenter})"/></svg>`;
+    spinnerWrap.appendChild(spinner);
+    const preloadCopy = document.createElement("div");
+    preloadCopy.dataset.passkeyPreloadCopy = "";
+    const preloadTitle = document.createElement("p");
+    preloadTitle.dataset.passkeyPreloadTitle = "";
+    preloadTitle.textContent = LOADING_TITLE;
+    const preloadSubtitle = document.createElement("p");
+    preloadSubtitle.dataset.passkeyPreloadSubtitle = "";
+    preloadSubtitle.textContent = LOADING_SUBTITLE;
+    preloadCopy.append(preloadTitle, preloadSubtitle);
+    preloadBody.append(spinnerWrap, preloadCopy);
+    preloadCard.appendChild(preloadBody);
+    overlay.appendChild(preloadCard);
     dialog.appendChild(overlay);
     const iframe = document.createElement("iframe");
     iframe.setAttribute(
@@ -4729,21 +4909,23 @@ var OneAuthClient = class {
     );
     iframe.setAttribute("title", "Passkey");
     iframe.style.opacity = "0";
-    let overlayHidden = false;
-    const hideOverlay = () => {
-      if (overlayHidden) return;
-      overlayHidden = true;
+    let revealed = false;
+    let readyFailsafe;
+    const revealIframe = () => {
+      if (revealed) return;
+      revealed = true;
+      clearTimeout(readyFailsafe);
       iframe.style.opacity = "1";
-      overlay.style.pointerEvents = "none";
-      requestAnimationFrame(() => {
-        overlay.style.display = "none";
-      });
+      overlay.style.display = "none";
     };
-    const overlayFailsafe = setTimeout(hideOverlay, 8e3);
+    const revealFailsafe = setTimeout(revealIframe, 8e3);
     const handleMessage = (event) => {
       if (event.origin !== hostUrl.origin) return;
-      if (event.data?.type === "PASSKEY_RENDERED" || event.data?.type === "PASSKEY_READY") {
-        hideOverlay();
+      if (event.source !== iframe.contentWindow) return;
+      if (event.data?.type === "PASSKEY_RENDERED") {
+        revealIframe();
+      } else if (event.data?.type === "PASSKEY_READY" && !revealed && readyFailsafe === void 0) {
+        readyFailsafe = setTimeout(revealIframe, 1e3);
       }
       if (event.data?.type === "PASSKEY_DISCONNECT") {
         localStorage.removeItem("1auth-user");
@@ -4771,7 +4953,13 @@ var OneAuthClient = class {
     document.addEventListener("keydown", handleEscape);
     const reveal = () => {
       delete dialog.dataset.passkeyHidden;
+      if (!revealed) {
+        revealed = true;
+        clearTimeout(readyFailsafe);
+        clearTimeout(revealFailsafe);
+      }
       iframe.style.opacity = "1";
+      overlay.style.display = "none";
     };
     if (options?.hidden) {
       dialog.show();
@@ -4782,7 +4970,8 @@ var OneAuthClient = class {
     const destroy = () => {
       if (cleanedUp) return;
       cleanedUp = true;
-      clearTimeout(overlayFailsafe);
+      clearTimeout(revealFailsafe);
+      clearTimeout(readyFailsafe);
       inertObserver.disconnect();
       viewportInfoCleanup();
       window.removeEventListener("message", handleMessage);
@@ -5088,19 +5277,20 @@ var OneAuthClient = class {
           return;
         }
         if (data?.type === "PASSKEY_GRANT_PERMISSION_RESULT") {
-          teardown();
-          cleanup();
           if (data.success) {
+            teardown();
             resolve({ success: true, ...data.data ?? {} });
-          } else {
-            resolve({
-              success: false,
-              error: data.error ?? data.data?.error ?? {
-                code: "GRANT_PERMISSION_FAILED",
-                message: "Permission grant failed"
-              }
-            });
+            return;
           }
+          teardown();
+          cleanup();
+          resolve({
+            success: false,
+            error: data.error ?? data.data?.error ?? {
+              code: "GRANT_PERMISSION_FAILED",
+              message: "Permission grant failed"
+            }
+          });
         } else if (data?.type === "PASSKEY_CLOSE") {
           teardown();
           cleanup();