@auth-link/web 1.1.0 → 3.0.0

package/dist/react.js

@@ -2,7 +2,7 @@
 "use client";
 
 // src/react.tsx
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 
 // node_modules/qrcode-generator/dist/qrcode.mjs
 var qrcode = function(typeNumber, errorCorrectionLevel) {
@@ -1639,195 +1639,36 @@ var qrcode_default = qrcode;
 var stringToBytes = qrcode.stringToBytes;
 
 // src/core.ts
-var token = /^[A-Za-z0-9_-]{43}$/;
 var AuthLinkError = class extends Error {
+  code;
   constructor(code) {
     super(code);
-    this.code = code;
     this.name = "AuthLinkError";
+    this.code = code;
   }
-  code;
 };
-function fail(code) {
-  throw new AuthLinkError(code);
+function deadline(value) {
+  const at = typeof value === "string" ? Date.parse(value) : NaN;
+  if (!Number.isFinite(at) || at <= Date.now()) throw new AuthLinkError("INVALID_EXPIRY");
+  return at;
 }
-function object(value) {
-  if (!value || typeof value !== "object" || Array.isArray(value)) fail("INVALID_RESPONSE");
-  return value;
-}
-function validateDisplayCode(value) {
-  const m = object(value);
-  const span = Date.parse(String(m.validUntil)) - Date.parse(String(m.serverTime));
-  if (typeof m.value !== "string" || !/^\d{6}$/.test(m.value) || m.periodSeconds !== 30 || !Number.isFinite(span) || span <= 0 || span > 3e4 || "seed" in m || "secret" in m || "key" in m) fail("INVALID_DISPLAY_CODE");
-  return { value: m.value, serverTime: String(m.serverTime), validUntil: String(m.validUntil), periodSeconds: 30 };
-}
-function validateTicket(value, expectedMode, trustedOrigin) {
-  const m = object(value);
-  if ("pairing" in m || "seed" in m || "apiKey" in m) fail("SERVER_SECRET_FORBIDDEN");
-  if (typeof m.requestId !== "string" || !token.test(m.requestId) || !["bind", "confirm"].includes(String(m.purpose)) || expectedMode && m.purpose !== expectedMode || typeof m.qr !== "string" || m.qr.length > 4096 || typeof m.pairingCode !== "string" || !/^\d{6}$/.test(m.pairingCode)) fail("INVALID_TICKET");
-  let qr;
-  try {
-    qr = object(JSON.parse(m.qr));
-  } catch {
-    return fail("INVALID_QR");
-  }
-  let origin;
+function bindingImage(ticket, expectedOrigin) {
+  if (typeof ticket.qr !== "string" || ticket.qr.length > 4096) throw new AuthLinkError("INVALID_QR");
+  if (deadline(ticket.expiresAt) > Date.now() + 36e5) throw new AuthLinkError("INVALID_EXPIRY");
+  let payload, origin;
   try {
-    origin = new URL(String(qr.origin));
+    payload = JSON.parse(ticket.qr);
+    origin = new URL(String(payload.origin));
   } catch {
-    return fail("INVALID_QR");
-  }
-  if (qr.v !== 1 || qr.requestId !== m.requestId || typeof qr.token !== "string" || !token.test(qr.token) || origin.protocol !== "https:" || origin.origin !== qr.origin || origin.origin.length > 512 || origin.username || origin.password || trustedOrigin && origin.origin !== trustedOrigin) fail("UNTRUSTED_QR");
-  const displayCode = m.displayCode === void 0 ? void 0 : validateDisplayCode(m.displayCode);
-  const expiry = Date.parse(String(m.expiresAt));
-  const now = displayCode ? Date.parse(displayCode.serverTime) : Date.now();
-  if (!Number.isFinite(expiry) || expiry > now + 36e4) fail("INVALID_EXPIRY");
-  return {
-    requestId: m.requestId,
-    purpose: m.purpose,
-    qr: m.qr,
-    pairingCode: m.pairingCode,
-    expiresAt: String(m.expiresAt),
-    ...displayCode ? { displayCode } : {}
-  };
-}
-function qrImage(ticket) {
-  const value = validateTicket(ticket);
-  const payload = JSON.parse(value.qr);
-  const qr = qrcode_default(0, "M");
-  qr.addData(JSON.stringify({ v: 1, origin: payload.origin, requestId: payload.requestId, token: payload.token }), "Byte");
-  qr.make();
-  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(qr.createSvgTag({ cellSize: 4, margin: 16, scalable: true }))}`;
-}
-function initialSnapshot() {
-  return { status: "idle", code: null, secondsRemaining: 0, codeSecondsRemaining: 0, error: null };
-}
-function abortable(promise, signal) {
-  signal.throwIfAborted();
-  let cancel;
-  const abort = new Promise((_, reject) => {
-    cancel = () => reject(signal.reason);
-    signal.addEventListener("abort", cancel, { once: true });
-  });
-  return Promise.race([promise, abort]).finally(() => signal.removeEventListener("abort", cancel));
-}
-async function observeRequest(input, options) {
-  const { client, signal, onUpdate } = options;
-  let ticket;
-  try {
-    ticket = validateTicket(input, options.expectedMode);
-  } catch (error) {
-    if (!signal.aborted) options.onError?.(error);
-    return;
-  }
-  const expiry = Date.parse(ticket.expiresAt);
-  const deadline = performance.now() + Math.max(0, expiry - Date.now());
-  let ended = false, busy = false;
-  let done;
-  const finished = new Promise((resolve) => {
-    done = resolve;
-  });
-  const controller = new AbortController();
-  const cancel = () => {
-    ended = true;
-    controller.abort();
-    done();
-  };
-  signal.addEventListener("abort", cancel, { once: true });
-  let snapshot = initialSnapshot();
-  const remaining = () => Math.max(0, (deadline - performance.now()) / 1e3);
-  const tick = () => {
-    if (ended || signal.aborted) return;
-    if (remaining() <= 0) {
-      ended = true;
-      controller.abort();
-      onUpdate({ ...snapshot, status: "expired", code: null, submitting: false });
-      void Promise.resolve().then(() => options.onExpired?.()).catch(() => options.onError?.(new AuthLinkError("CALLBACK_FAILED")));
-      done();
-      return;
-    }
-    snapshot = {
-      ...snapshot,
-      status: "pending",
-      code: ticket.pairingCode,
-      secondsRemaining: Math.ceil(remaining()),
-      codeSecondsRemaining: Math.ceil(remaining()),
-      submitting: busy
-    };
-    onUpdate(snapshot);
-  };
-  const submit = async (confirmationCode) => {
-    if (ended || signal.aborted || busy) return;
-    if (!/^[0-9]{6}$/.test(confirmationCode)) {
-      snapshot = { ...snapshot, error: new AuthLinkError("CONFIRMATION_CODE_REQUIRED") };
-      tick();
-      return;
-    }
-    if (remaining() <= 0) {
-      tick();
-      return;
-    }
-    busy = true;
-    snapshot = { ...snapshot, error: null };
-    tick();
-    try {
-      const value = object(await abortable(client.result(ticket, controller.signal, confirmationCode), controller.signal));
-      if (ended || signal.aborted) return;
-      if (value.requestId !== ticket.requestId) fail("REQUEST_MISMATCH");
-      if (value.status === "confirmed") {
-        if (!token.test(String(value.verificationId)) || value.authenticationPolicy !== "device-presence.v1" || value.expiresAt !== ticket.expiresAt || value.purpose !== ticket.purpose || remaining() <= 0 || "action" in value || "transactionHash" in value) fail("INVALID_CONFIRMATION");
-        ended = true;
-        onUpdate({ ...snapshot, status: "confirmed", code: null, submitting: false });
-        try {
-          await options.onConfirmed?.(value);
-        } catch {
-          options.onError?.(new AuthLinkError("CALLBACK_FAILED"));
-        }
-        done();
-      } else if (value.status === "rejected" || value.status === "expired") {
-        ended = true;
-        onUpdate({ ...snapshot, status: value.status, code: null, submitting: false });
-        try {
-          if (value.status === "rejected") await options.onRejected?.({ status: "rejected", code: "REJECTED", requestId: ticket.requestId, purpose: ticket.purpose });
-          else await options.onExpired?.();
-        } catch {
-          options.onError?.(new AuthLinkError("CALLBACK_FAILED"));
-        } finally {
-          done();
-        }
-      } else {
-        fail("CONFIRMATION_NOT_READY");
-      }
-    } catch (error) {
-      if (!ended && !signal.aborted) {
-        const raw = error instanceof Error ? error : new AuthLinkError("NETWORK_ERROR");
-        const code = raw.message.replace(/^AUTHLINK_/, "");
-        const failure = ["CONFIRMATION_CODE_LOCKED", "CONFIRMATION_CODE_INVALID", "APPROVAL_REQUIRED", "REQUEST_EXPIRED"].includes(code) ? new AuthLinkError(code) : raw;
-        snapshot = { ...snapshot, error: failure };
-        if (code === "CONFIRMATION_CODE_LOCKED" || code === "REQUEST_EXPIRED") {
-          ended = true;
-          onUpdate({ ...snapshot, code: null, submitting: false, status: code === "REQUEST_EXPIRED" ? "expired" : "error" });
-          if (code === "REQUEST_EXPIRED") void Promise.resolve().then(() => options.onExpired?.()).catch(() => options.onError?.(new AuthLinkError("CALLBACK_FAILED")));
-          else options.onError?.(failure);
-          done();
-        } else options.onError?.(failure);
-      }
-    } finally {
-      busy = false;
-      tick();
-    }
-  };
-  tick();
-  options.onReady?.(submit);
-  const timer = setInterval(tick, 1e3);
-  if (signal.aborted) cancel();
-  try {
-    await finished;
-  } finally {
-    clearInterval(timer);
-    controller.abort();
-    signal.removeEventListener("abort", cancel);
+    throw new AuthLinkError("INVALID_QR");
   }
+  const token = /^[A-Za-z0-9_-]{43}$/;
+  const loopback = ["localhost", "127.0.0.1", "[::1]"].includes(origin.hostname);
+  if (payload.v !== 1 || typeof payload.requestId !== "string" || !token.test(payload.requestId) || typeof payload.token !== "string" || !token.test(payload.token) || origin.origin !== payload.origin || origin.protocol !== "https:" && !(origin.protocol === "http:" && loopback) || expectedOrigin !== void 0 && expectedOrigin !== origin.origin) throw new AuthLinkError("INVALID_QR");
+  const image = qrcode_default(0, "M");
+  image.addData(JSON.stringify({ v: 1, origin: origin.origin, requestId: payload.requestId, token: payload.token }), "Byte");
+  image.make();
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(image.createSvgTag({ cellSize: 4, margin: 16, scalable: true }))}`;
 }
 
 // src/locales/en.json
@@ -2259,35 +2100,20 @@ function getMessages(locale) {
 
 // src/view.ts
 var node = (tag, props, ...children) => ({ tag, props, children });
-function resolveVariant(variant) {
-  return variant === "B" || variant === "C" ? variant : "A";
-}
+var digits = (value) => value.replace(/[^0-9]/g, "");
 function widgetView(options) {
-  const { snapshot: s, mode, retry, refresh } = options;
-  const locale = resolveLocale(options.locale), variant = resolveVariant(options.variant);
-  const l = getMessages(locale);
-  const pending = s.status === "pending", hasQr = pending && (mode === "bind" || Boolean(options.showQr)) && Boolean(options.qr);
-  const status = { idle: l.loading, pending: options.passcodeMode ? l.otpWaiting : l.waiting, confirmed: l.confirmed, rejected: l.rejected, expired: l.expired, error: l.error }[s.status];
-  const expiring = pending && s.secondsRemaining <= 30;
-  const expiryTime = `00:${String(Math.max(0, Math.ceil(s.secondsRemaining))).padStart(2, "0")}`;
-  const statusNode = () => node(
-    "p",
-    {
-      class: "authlink-status",
-      role: s.status === "error" ? "alert" : "status",
-      "data-expiring": String(expiring)
-    },
-    node("span", { class: "authlink-status-dot", "aria-hidden": "true" }),
-    expiring ? l.expiring : status,
-    ...expiring ? [node("span", { class: "authlink-expiry", "aria-hidden": "true" }, ` \xB7 ${expiryTime}`)] : []
-  );
-  const cancel = () => options.close ? [node("button", {
-    type: "button",
-    class: "authlink-cancel",
-    "data-authlink-focus": "cancel",
-    onClick: options.close
-  }, l.cancel)] : [];
+  const { snapshot: s, mode } = options, locale = resolveLocale(options.locale), l = getMessages(locale);
+  const pending = s.status === "pending", hasQr = pending && mode === "bind" && Boolean(options.qr);
+  const expiring = pending && s.secondsRemaining !== void 0 && s.secondsRemaining <= 30;
+  const status = s.status === "pending" ? l.otpWaiting : l[s.status];
+  const remaining = s.secondsRemaining ?? 0;
+  const expiryTime = `${String(Math.floor(remaining / 60)).padStart(2, "0")}:${String(remaining % 60).padStart(2, "0")}`;
   const children = [node("h3", { class: "authlink-title" }, l[mode])];
+  const errorNode = s.error ? node(
+    "p",
+    { class: "authlink-input-error", role: "alert" },
+    ["PASSCODE_LOCKED", "RATE_LIMITED", "AUTHLINK_PASSCODE_LOCKED"].includes(s.error.message) ? l.codeLocked : l.otpError
+  ) : void 0;
   if (hasQr) children.push(node("p", { class: "authlink-subtitle" }, l.scan));
   if (pending) {
     const qr = hasQr ? [node(
@@ -2297,18 +2123,18 @@ function widgetView(options) {
       node("figcaption", { class: "authlink-qr-caption" }, l.scan)
     )] : [];
     const detail = [
-      node("p", { class: "authlink-help" }, options.passcodeMode ? l.otpHelp : l.help),
+      node("p", { class: "authlink-help" }, l.otpHelp),
       node(
         "form",
         { class: "authlink-code-form", onSubmit: (event) => {
           event.preventDefault();
           const input = event.currentTarget.querySelector("input");
-          if (input) void options.submitCode?.(input.value);
+          if (input) void options.submitCode(input.value);
         } },
-        node("label", { for: "authlink-confirmation-code" }, options.passcodeMode ? l.otpCode : l.confirmationCode),
+        node("label", { for: "authlink-passcode" }, l.otpCode),
         node("input", {
-          id: "authlink-confirmation-code",
-          name: options.passcodeMode ? "passcode" : "confirmationCode",
+          id: "authlink-passcode",
+          name: "passcode",
           type: "text",
           inputmode: "numeric",
           autocomplete: "one-time-code",
@@ -2316,272 +2142,74 @@ function widgetView(options) {
           maxlength: 6,
           minlength: 6,
           required: true,
-          "data-authlink-focus": "confirmation-code",
-          value: options.inputCode ?? "",
-          onInput: (event) => options.setCode?.(event.target.value)
+          ...s.submitting ? { disabled: true } : {},
+          "data-authlink-focus": "passcode",
+          value: options.inputCode,
+          onInput: (event) => {
+            const input = event.target, original = input.value;
+            const start = input.selectionStart ?? original.length, end = input.selectionEnd ?? start;
+            const code = digits(original).slice(0, 6);
+            if (original !== code) {
+              input.value = code;
+              input.setSelectionRange(Math.min(6, digits(original.slice(0, start)).length), Math.min(6, digits(original.slice(0, end)).length));
+            }
+            options.setCode(code);
+          },
+          onPaste: (event) => {
+            if (!event.clipboardData) return;
+            event.preventDefault();
+            const input = event.target, pasted = digits(event.clipboardData.getData("text"));
+            if (!pasted) return;
+            const start = input.selectionStart ?? input.value.length, end = input.selectionEnd ?? start;
+            const before = input.value.slice(0, start), after = input.value.slice(end);
+            const insert = pasted.slice(0, Math.max(0, 6 - before.length - after.length));
+            input.value = before + insert + after;
+            input.setSelectionRange(before.length + insert.length, before.length + insert.length);
+            options.setCode(input.value);
+          }
         }),
-        node(
-          "button",
-          { type: "submit", class: "authlink-button", ...s.submitting ? { disabled: true } : {} },
-          s.submitting ? l.loading : l.submitCode
-        )
-      ),
-      ...s.error ? [node("p", { class: "authlink-input-error", role: "alert" }, options.passcodeMode ? s.error.message === "OTP_NOT_CONFIGURED" ? l.otpSetup : l.otpError : l.codeError)] : []
+        node("button", { type: "submit", class: "authlink-button", ...s.submitting ? { disabled: true } : {} }, s.submitting ? l.loading : l.submitCode)
+      )
     ];
-    children.push(node("div", { class: "authlink-body" }, ...qr, node("div", { class: "authlink-details" }, ...detail)));
-    if (variant === "A") children.push(node("div", { class: "authlink-footer" }, statusNode()));
-    if (variant === "B") children.push(node("div", { class: "authlink-footer" }, statusNode(), ...cancel()));
-    if (variant === "C") children.push(node("div", { class: "authlink-footer" }, statusNode(), ...cancel()));
-  } else {
-    children.push(statusNode());
-    if (s.error?.message === "CONFIRMATION_CODE_LOCKED") children.push(node("p", { class: "authlink-input-error", role: "alert" }, l.codeLocked));
-    if (s.status === "error" && s.error?.message !== "CONFIRMATION_CODE_LOCKED") children.push(node("button", {
-      type: "button",
-      class: "authlink-button",
-      "data-authlink-focus": "retry",
-      onClick: retry
-    }, l.retry));
-    if (refresh && ["expired", "rejected", "error"].includes(s.status)) children.push(node("button", {
-      type: "button",
-      class: "authlink-button",
-      "data-authlink-focus": "refresh",
-      onClick: refresh
-    }, l.refresh));
+    children.push(node("div", { class: "authlink-body" }, ...qr, node("div", { class: "authlink-details" }, ...detail, ...errorNode ? [errorNode] : [])));
   }
-  return node("section", {
-    lang: locale,
-    class: `authlink-widget ${options.className ?? ""}`.trim(),
-    "data-status": s.status,
-    "data-variant": variant,
-    "data-has-qr": String(hasQr),
-    "aria-label": l[mode]
-  }, ...children);
+  if (!pending && errorNode) children.push(errorNode);
+  children.push(node("div", { class: "authlink-footer" }, node(
+    "p",
+    { class: "authlink-status", role: "status", "data-expiring": String(expiring) },
+    node("span", { class: "authlink-status-dot", "aria-hidden": "true" }),
+    expiring ? l.expiring : status,
+    ...expiring ? [node("span", { class: "authlink-expiry", "aria-hidden": "true" }, ` \xB7 ${expiryTime}`)] : []
+  )));
+  if (s.status === "expired" && options.refresh) children.push(node("button", {
+    type: "button",
+    class: "authlink-button",
+    ...s.submitting ? { disabled: true } : {},
+    onClick: options.refresh
+  }, s.submitting ? l.loading : l.refresh));
+  return node("section", { lang: locale, class: "authlink-widget", "data-status": s.status, "data-has-qr": String(hasQr), "aria-label": l[mode] }, ...children);
 }
 
 // src/modal.ts
-function element(value, svg = false) {
+function element(value) {
   if (typeof value === "string") return document.createTextNode(value);
-  svg ||= value.tag === "svg";
-  const result = svg ? document.createElementNS("http://www.w3.org/2000/svg", value.tag) : document.createElement(value.tag);
+  const result = document.createElement(value.tag);
   for (const [key, v] of Object.entries(value.props)) {
     if (key.startsWith("on") && typeof v === "function") result.addEventListener(key.slice(2).toLowerCase(), v);
     else if (v !== void 0 && v !== null) result.setAttribute(key, String(v));
   }
-  result.append(...value.children.map((child) => element(child, svg)));
+  result.append(...value.children.map(element));
   return result;
 }
-function openAuthLink(options) {
+function open(options, mode) {
   if (typeof document === "undefined" || !document.body) throw new AuthLinkError("BROWSER_REQUIRED");
-  const mode = options.mode ?? options.ticket.purpose;
-  const ticket = validateTicket(options.ticket, mode);
+  if (typeof options.submit !== "function") throw new AuthLinkError("SUBMIT_REQUIRED");
+  const binding = mode === "bind" ? options : void 0;
+  let image = binding ? bindingImage(binding, binding.authLinkOrigin) : void 0;
+  let expires = options.expiresAt === void 0 ? void 0 : deadline(options.expiresAt);
   const dialog = document.createElement("dialog");
   if (typeof dialog.showModal !== "function") throw new AuthLinkError("DIALOG_UNSUPPORTED");
   const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-  dialog.className = `authlink-dialog ${options.className ?? ""}`.trim();
-  dialog.setAttribute("aria-modal", "true");
-  const header = document.createElement("div");
-  header.className = "authlink-header";
-  const brand = document.createElement("span");
-  brand.className = "authlink-brand";
-  brand.textContent = "AuthLink";
-  brand.tabIndex = -1;
-  const closeButton = document.createElement("button");
-  closeButton.type = "button";
-  closeButton.className = "authlink-close";
-  const closeIcon = document.createElement("span");
-  closeIcon.className = "authlink-close-icon";
-  closeIcon.setAttribute("aria-hidden", "true");
-  closeButton.append(closeIcon);
-  const content = document.createElement("div");
-  content.className = "authlink-modal-content";
-  header.append(brand, closeButton);
-  dialog.append(header, content);
-  let locale = options.locale, variant = resolveVariant(options.variant), snapshot = initialSnapshot(), closed = false;
-  let abort;
-  let inputCode = "";
-  let submitCode;
-  const image = qrImage(ticket);
-  let progressFill, progressFrame, progressDeadline = 0;
-  const motion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
-  const stopProgress = () => {
-    if (progressFrame !== void 0) window.cancelAnimationFrame(progressFrame);
-    progressFrame = void 0;
-  };
-  const drawProgress = () => {
-    stopProgress();
-    if (closed || !progressFill?.isConnected) return;
-    const remaining = Math.max(0, progressDeadline - performance.now());
-    progressFill.style.transform = `scaleX(${Math.min(1, remaining / 3e4)})`;
-    if (remaining > 0 && !motion?.matches && typeof window.requestAnimationFrame === "function") {
-      progressFrame = window.requestAnimationFrame(drawProgress);
-    }
-  };
-  const syncProgress = (remainingMs) => {
-    progressDeadline = performance.now() + remainingMs;
-    drawProgress();
-  };
-  motion?.addEventListener?.("change", drawProgress);
-  const render = () => {
-    if (closed) return;
-    const language = resolveLocale(locale), messages2 = getMessages(language);
-    dialog.lang = language;
-    dialog.setAttribute("aria-label", messages2[mode]);
-    dialog.dataset.variant = variant;
-    dialog.dataset.mode = mode;
-    dialog.dataset.hasQr = String(snapshot.status === "pending" && (mode === "bind" || Boolean(options.showQr)));
-    closeButton.setAttribute("aria-label", messages2.close);
-    const focused = document.activeElement;
-    const focusKey = focused instanceof HTMLElement && content.contains(focused) ? focused.dataset.authlinkFocus : void 0;
-    const next = element(widgetView({
-      mode,
-      locale,
-      variant,
-      snapshot,
-      qr: image,
-      showQr: options.showQr,
-      inputCode,
-      setCode: (code) => {
-        inputCode = code;
-      },
-      submitCode: (code) => submitCode?.(code) ?? Promise.resolve(),
-      retry,
-      refresh: options.onRefresh,
-      close: () => dispose(true)
-    }));
-    const oldCode = content.querySelector(".authlink-code");
-    const nextCode = next.querySelector(".authlink-code");
-    const codeChanged = Boolean(oldCode && nextCode && snapshot.code && oldCode.textContent !== nextCode.textContent);
-    if (oldCode && nextCode && oldCode.textContent === nextCode.textContent) {
-      oldCode.setAttribute("aria-label", nextCode.getAttribute("aria-label"));
-      nextCode.replaceWith(oldCode);
-    }
-    const oldProgress = content.querySelector(".authlink-progress");
-    const nextProgress = next.querySelector(".authlink-progress");
-    if (oldProgress && nextProgress) {
-      oldProgress.setAttribute("aria-valuenow", nextProgress.getAttribute("aria-valuenow"));
-      oldProgress.setAttribute("aria-label", nextProgress.getAttribute("aria-label"));
-      nextProgress.replaceWith(oldProgress);
-    }
-    const oldInput = content.querySelector("input[name=confirmationCode]");
-    const nextInput = next.querySelector("input[name=confirmationCode]");
-    if (oldInput && nextInput) nextInput.replaceWith(oldInput);
-    content.replaceChildren(next);
-    progressFill = content.querySelector(".authlink-progress-fill") ?? void 0;
-    drawProgress();
-    if (codeChanged && !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
-      nextCode?.animate?.([{ opacity: 0.5 }, { opacity: 1 }], { duration: 180, easing: "ease-out" });
-    }
-    if (focusKey) (Array.from(content.querySelectorAll("[data-authlink-focus]")).find((item) => item.dataset.authlinkFocus === focusKey) ?? brand).focus({ preventScroll: true });
-  };
-  const dispose = (notify) => {
-    if (closed) return;
-    closed = true;
-    abort?.abort();
-    stopProgress();
-    progressFill = void 0;
-    motion?.removeEventListener?.("change", drawProgress);
-    if (dialog.open) dialog.close();
-    dialog.remove();
-    if (!document.querySelector("dialog.authlink-dialog[open]")) {
-      if (document.body.style.overflow === "hidden") document.body.style.overflow = document.body.dataset.authlinkOverflow ?? "";
-      delete document.body.dataset.authlinkOverflow;
-    }
-    if (previousFocus?.isConnected) previousFocus.focus();
-    if (notify) options.onClose?.();
-  };
-  const delivered = /* @__PURE__ */ new Set();
-  const once = (status, callback) => {
-    if (delivered.has(status)) return;
-    delivered.add(status);
-    return callback();
-  };
-  const retry = () => {
-    if (closed) return;
-    abort?.abort();
-    abort = new AbortController();
-    snapshot = initialSnapshot();
-    render();
-    void observeRequest(ticket, {
-      client: options.client,
-      intervalMs: options.intervalMs,
-      expectedMode: mode,
-      signal: abort.signal,
-      onReady: (submit) => {
-        submitCode = submit;
-      },
-      onCodeTiming: syncProgress,
-      onUpdate: (value) => {
-        snapshot = value;
-        if (value.status !== "rejected") render();
-      },
-      onConfirmed: (value) => once("confirmed", () => {
-        dispose(false);
-        try {
-          return Promise.resolve(options.onConfirmed?.(value)).catch(() => options.onError?.(new AuthLinkError("CALLBACK_FAILED")));
-        } catch {
-          options.onError?.(new AuthLinkError("CALLBACK_FAILED"));
-        }
-      }),
-      onRejected: (value) => once("rejected", () => {
-        dispose(false);
-        try {
-          return Promise.resolve(options.onRejected?.(value)).catch(() => options.onError?.(new AuthLinkError("CALLBACK_FAILED")));
-        } catch {
-          options.onError?.(new AuthLinkError("CALLBACK_FAILED"));
-        }
-      }),
-      onExpired: () => once("expired", () => options.onExpired?.()),
-      onError: options.onError
-    });
-  };
-  closeButton.addEventListener("click", () => dispose(true));
-  dialog.addEventListener("cancel", (event) => {
-    event.preventDefault();
-    dispose(true);
-  });
-  dialog.addEventListener("close", () => dispose(true));
-  render();
-  document.body.append(dialog);
-  try {
-    dialog.showModal();
-  } catch (error) {
-    dialog.remove();
-    throw error;
-  }
-  brand.focus({ preventScroll: true });
-  if (document.body.dataset.authlinkOverflow === void 0) document.body.dataset.authlinkOverflow = document.body.style.overflow;
-  document.body.style.overflow = "hidden";
-  retry();
-  return {
-    close: () => dispose(true),
-    destroy: () => dispose(false),
-    setLocale: (value) => {
-      locale = value;
-      render();
-    },
-    setVariant: (value) => {
-      variant = resolveVariant(value);
-      render();
-    },
-    retry
-  };
-}
-
-// src/passcode.ts
-function validateOTPResult(value) {
-  if (!value || typeof value !== "object") throw new AuthLinkError("INVALID_RESPONSE");
-  const result = value;
-  const expiry = typeof result.expiresAt === "string" ? Date.parse(result.expiresAt) : NaN;
-  if (result.status !== "confirmed" || result.authenticationPolicy !== "device-totp.v1" || typeof result.verificationId !== "string" || !/^[A-Za-z0-9_-]{43}$/.test(result.verificationId) || !Number.isFinite(expiry) || expiry <= Date.now() || expiry > Date.now() + 9e4 || "requestId" in result || "state" in result || "businessId" in result) throw new AuthLinkError("INVALID_CONFIRMATION");
-  return result;
-}
-function openPasscode(options) {
-  if (typeof document === "undefined" || !document.body) throw new AuthLinkError("BROWSER_REQUIRED");
-  const deadline = Date.parse(options.expiresAt);
-  if (!Number.isFinite(deadline) || deadline <= Date.now() || deadline > Date.now() + 3e5) throw new AuthLinkError("INVALID_EXPIRY");
-  const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-  const dialog = document.createElement("dialog");
-  if (typeof dialog.showModal !== "function") throw new AuthLinkError("DIALOG_UNSUPPORTED");
   dialog.className = "authlink-dialog";
   dialog.setAttribute("aria-modal", "true");
   const header = document.createElement("div");
@@ -2600,94 +2228,143 @@ function openPasscode(options) {
   content.className = "authlink-modal-content";
   header.append(brand, close);
   dialog.append(header, content);
-  let locale = options.locale, variant = resolveVariant(options.variant), closed = false, busy = false, code = "", error;
-  const mode = options.bindingQr ? "bind" : "confirm";
-  let image;
-  if (options.bindingQr) {
-    let payload;
+  let locale = options.locale, closed = false, busy = false, code = "", error = null;
+  let abort, timer, expiredDelivered = false;
+  const notifyError = (cause) => {
+    const value = cause instanceof Error ? cause : new AuthLinkError("VERIFICATION_FAILED");
     try {
-      payload = JSON.parse(options.bindingQr);
+      options.onError?.(value);
     } catch {
-      throw new AuthLinkError("INVALID_TICKET");
     }
-    image = qrImage(validateTicket({ requestId: payload.requestId, purpose: "bind", qr: options.bindingQr, pairingCode: "000000", expiresAt: options.expiresAt }, "bind", options.authLinkOrigin));
-  }
-  const abort = new AbortController();
-  let timer;
+    return value;
+  };
+  const callback = (fn) => {
+    try {
+      void Promise.resolve(fn?.()).catch(() => notifyError(new AuthLinkError("CALLBACK_FAILED")));
+    } catch {
+      notifyError(new AuthLinkError("CALLBACK_FAILED"));
+    }
+  };
   const dispose = (notify) => {
     if (closed) return;
     closed = true;
-    abort.abort();
+    abort?.abort();
     clearInterval(timer);
+    if (dialog.open) dialog.close();
     dialog.remove();
-    previousFocus?.focus();
-    if (notify) options.onClose?.();
+    if (previousFocus?.isConnected) previousFocus.focus();
+    if (notify) callback(options.onClose);
   };
+  const expired = () => expires !== void 0 && Date.now() >= expires;
   const render = () => {
     if (closed) return;
     const l = getMessages(locale);
     dialog.lang = resolveLocale(locale);
-    dialog.dataset.variant = variant;
     dialog.dataset.mode = mode;
-    dialog.dataset.hasQr = String(Boolean(image));
+    dialog.dataset.hasQr = String(Boolean(image) && !expired());
     dialog.setAttribute("aria-label", l[mode]);
     close.setAttribute("aria-label", l.close);
-    const focused = content.contains(document.activeElement);
-    const remaining = Math.max(0, Math.ceil((deadline - Date.now()) / 1e3));
-    const snapshot = { status: remaining ? "pending" : "expired", code: null, secondsRemaining: remaining, codeSecondsRemaining: remaining, submitting: busy, error: error ?? null };
-    content.replaceChildren(element(widgetView({
+    const focused = document.activeElement;
+    const focusKey = focused instanceof HTMLElement && content.contains(focused) ? focused.dataset.authlinkFocus : void 0;
+    const oldInput = content.querySelector("input");
+    const next = element(widgetView({
       mode,
       locale,
-      variant,
-      passcodeMode: true,
-      snapshot,
+      snapshot: {
+        status: expired() ? "expired" : "pending",
+        submitting: busy,
+        error,
+        secondsRemaining: expires === void 0 ? void 0 : Math.max(0, Math.ceil((expires - Date.now()) / 1e3))
+      },
       qr: image,
-      showQr: Boolean(image),
       inputCode: code,
       setCode: (value) => {
         code = value;
       },
       submitCode: submit,
-      retry: () => {
-        error = void 0;
-        render();
-      },
-      close: () => dispose(true)
-    })));
-    if (focused) content.querySelector("input")?.focus();
+      refresh: binding?.onRefresh ? refresh : void 0
+    }));
+    const nextInput = next.querySelector("input");
+    if (oldInput && nextInput) {
+      oldInput.disabled = busy;
+      if (oldInput.value !== code) oldInput.value = code;
+      nextInput.replaceWith(oldInput);
+    }
+    content.replaceChildren(next);
+    if (focusKey) content.querySelector(`[data-authlink-focus="${focusKey}"]`)?.focus({ preventScroll: true });
   };
-  const submit = async (value) => {
-    if (closed || busy) return;
-    if (Date.now() >= deadline) {
+  const tick = () => {
+    if (closed) return;
+    if (expired() && !expiredDelivered) {
+      expiredDelivered = true;
+      abort?.abort();
+      busy = false;
       render();
+      callback(options.onExpired);
+    } else if (expires !== void 0) render();
+  };
+  const startTimer = () => {
+    clearInterval(timer);
+    if (expires !== void 0) timer = setInterval(tick, 1e3);
+  };
+  const submit = async (value) => {
+    if (closed || busy || expired()) {
+      tick();
       return;
     }
     if (!/^[0-9]{6}$/.test(value)) {
-      error = new AuthLinkError("PASSCODE_INVALID");
+      error = notifyError(new AuthLinkError("PASSCODE_INVALID"));
       render();
       return;
     }
     code = value;
     busy = true;
-    error = void 0;
+    error = null;
+    const current = new AbortController();
+    abort = current;
     render();
     try {
-      const result = validateOTPResult(await options.client.verify(value, abort.signal));
-      if (closed || abort.signal.aborted || Date.now() >= deadline) return;
-      try {
-        await options.onVerified?.(result);
-      } catch {
-        options.onError?.(new AuthLinkError("CALLBACK_FAILED"));
-      }
+      const pending = options.submit(value, { signal: current.signal });
+      if (!pending || typeof pending.then !== "function") throw new AuthLinkError("SUBMIT_MUST_RETURN_PROMISE");
+      await pending;
+      if (closed || current.signal.aborted || abort !== current) return;
       dispose(false);
+      callback(options.onSuccess);
     } catch (cause) {
-      if (!closed && !abort.signal.aborted) {
-        error = cause instanceof Error ? cause : new AuthLinkError("NETWORK_ERROR");
-        options.onError?.(error);
+      if (!closed && !current.signal.aborted && abort === current) error = notifyError(cause);
+    } finally {
+      if (!closed && abort === current) {
+        busy = false;
+        render();
       }
+    }
+  };
+  const refresh = async () => {
+    if (closed || busy || !binding?.onRefresh || !expired()) return;
+    busy = true;
+    error = null;
+    expiredDelivered = true;
+    clearInterval(timer);
+    const current = new AbortController();
+    abort?.abort();
+    abort = current;
+    render();
+    try {
+      const ticket = await binding.onRefresh({ signal: current.signal });
+      if (closed || current.signal.aborted || abort !== current) return;
+      const nextImage = bindingImage(ticket, binding.authLinkOrigin), nextDeadline = deadline(ticket.expiresAt);
+      image = nextImage;
+      expires = nextDeadline;
+      code = "";
+      expiredDelivered = false;
+      startTimer();
+    } catch (cause) {
+      if (!closed && !current.signal.aborted && abort === current) error = notifyError(cause);
     } finally {
-      busy = false;
-      render();
+      if (!closed && abort === current) {
+        busy = false;
+        render();
+      }
     }
   };
   close.addEventListener("click", () => dispose(true));
@@ -2695,18 +2372,17 @@ function openPasscode(options) {
     event.preventDefault();
     dispose(true);
   });
+  dialog.addEventListener("close", () => dispose(true));
   document.body.append(dialog);
   render();
-  dialog.showModal();
+  try {
+    dialog.showModal();
+  } catch (cause) {
+    dispose(false);
+    throw cause;
+  }
   content.querySelector("input")?.focus();
-  timer = setInterval(() => {
-    if (closed) return;
-    if (Date.now() >= deadline) {
-      render();
-      clearInterval(timer);
-      void Promise.resolve(options.onExpired?.()).catch(() => options.onError?.(new AuthLinkError("CALLBACK_FAILED")));
-    }
-  }, 1e3);
+  startTimer();
   return {
     close: () => dispose(true),
     destroy: () => dispose(false),
@@ -2714,127 +2390,62 @@ function openPasscode(options) {
       locale = value;
       render();
     },
-    setVariant: (value) => {
-      variant = resolveVariant(value);
-      render();
-    },
     retry: () => {
-      error = void 0;
-      render();
+      if (!closed && !busy) {
+        error = null;
+        tick();
+        render();
+      }
     }
   };
 }
+var openVerify = (options) => open(options, "confirm");
+var openBind = (options) => open(options, "bind");
 
 // src/react.tsx
 import { jsx } from "react/jsx-runtime";
-function AuthLinkPasscode(props) {
-  const latest = useRef(props);
-  latest.current = props;
-  const modal = useRef(void 0);
-  useEffect(() => {
-    const handle = openPasscode({
-      ...props,
-      onVerified: (value) => latest.current.onVerified?.(value),
-      onExpired: () => latest.current.onExpired?.(),
-      onClose: () => latest.current.onClose?.(),
-      onError: (value) => latest.current.onError?.(value)
-    });
-    modal.current = handle;
-    return () => {
-      handle.destroy();
-      if (modal.current === handle) modal.current = void 0;
-    };
-  }, [props.client, props.expiresAt, props.bindingQr, props.authLinkOrigin]);
-  useEffect(() => {
-    modal.current?.setLocale(props.locale);
-  }, [props.locale]);
-  useEffect(() => {
-    modal.current?.setVariant(props.variant);
-  }, [props.variant]);
-  return null;
-}
-function useAuthLink(options) {
+function Prompt({ options, bind }) {
   const latest = useRef(options);
   latest.current = options;
-  const submit = useRef(void 0);
-  const delivered = useRef(/* @__PURE__ */ new Set());
-  const [snapshot, setSnapshot] = useState(initialSnapshot);
-  const [attempt, setAttempt] = useState(0);
-  const retry = useCallback(() => setAttempt((value) => value + 1), []);
-  const { ticket, client, intervalMs, mode } = options;
-  useEffect(() => {
-    const abort = new AbortController();
-    setSnapshot(initialSnapshot());
-    const once = (status, callback) => {
-      const key = `${ticket.requestId}:${status}`;
-      if (delivered.current.has(key)) return;
-      delivered.current.add(key);
-      return callback();
-    };
-    void observeRequest(ticket, {
-      client,
-      intervalMs,
-      expectedMode: mode,
-      signal: abort.signal,
-      onReady: (fn) => {
-        submit.current = fn;
-      },
-      onUpdate: setSnapshot,
-      onConfirmed: (result) => once("confirmed", () => latest.current.onConfirmed?.(result)),
-      onRejected: (result) => once("rejected", () => latest.current.onRejected?.(result)),
-      onExpired: () => once("expired", () => latest.current.onExpired?.()),
-      onError: (error) => latest.current.onError?.(error)
-    });
-    return () => abort.abort();
-  }, [ticket, client, intervalMs, mode, attempt]);
-  return { snapshot, retry, submitCode: (code) => submit.current?.(code) ?? Promise.resolve() };
-}
-function Widget(props) {
-  const latest = useRef(props);
-  latest.current = props;
   const modal = useRef(void 0);
-  const delivered = useRef(/* @__PURE__ */ new Set());
-  const hasRefresh = Boolean(props.onRefresh);
+  const binding = bind ? options : void 0;
+  const hasRefresh = Boolean(binding?.onRefresh);
   useEffect(() => {
-    const once = (status, callback) => {
-      const key = `${props.ticket.requestId}:${status}`;
-      if (delivered.current.has(key)) return;
-      delivered.current.add(key);
-      return callback();
-    };
-    const handle = openAuthLink({
-      ...props,
-      onConfirmed: (result) => once("confirmed", () => latest.current.onConfirmed?.(result)),
-      onRejected: (result) => once("rejected", () => latest.current.onRejected?.(result)),
-      onExpired: () => once("expired", () => latest.current.onExpired?.()),
+    const common = {
+      expiresAt: options.expiresAt,
+      locale: latest.current.locale,
+      submit: (code, context) => latest.current.submit(code, context),
+      onSuccess: () => latest.current.onSuccess?.(),
+      onClose: () => latest.current.onClose?.(),
       onError: (error) => latest.current.onError?.(error),
-      onRefresh: hasRefresh ? () => latest.current.onRefresh?.() : void 0,
-      onClose: () => latest.current.onClose?.()
-    });
+      onExpired: () => latest.current.onExpired?.()
+    };
+    const handle = bind ? openBind({
+      ...common,
+      qr: binding.qr,
+      expiresAt: binding.expiresAt,
+      authLinkOrigin: binding.authLinkOrigin,
+      onRefresh: hasRefresh ? (context) => latest.current.onRefresh(context) : void 0
+    }) : openVerify(common);
     modal.current = handle;
     return () => {
       handle.destroy();
       if (modal.current === handle) modal.current = void 0;
     };
-  }, [props.ticket, props.client, props.intervalMs, props.mode, props.showQr, props.className, hasRefresh]);
+  }, [bind, options.expiresAt, binding?.qr, binding?.authLinkOrigin, hasRefresh]);
   useEffect(() => {
-    modal.current?.setLocale(props.locale);
-  }, [props.locale]);
-  useEffect(() => {
-    modal.current?.setVariant(props.variant);
-  }, [props.variant]);
+    modal.current?.setLocale(options.locale);
+  }, [options.locale]);
   return null;
 }
-function AuthLinkBind(props) {
-  return /* @__PURE__ */ jsx(Widget, { ...props, mode: "bind" });
+function AuthLinkVerify(props) {
+  return /* @__PURE__ */ jsx(Prompt, { options: props, bind: false });
 }
-function AuthLinkConfirm(props) {
-  return /* @__PURE__ */ jsx(Widget, { ...props, mode: "confirm" });
+function AuthLinkBind(props) {
+  return /* @__PURE__ */ jsx(Prompt, { options: props, bind: true });
 }
 export {
   AuthLinkBind,
-  AuthLinkConfirm,
-  AuthLinkPasscode,
-  useAuthLink
+  AuthLinkVerify
 };
 //# sourceMappingURL=react.js.map