@auth-link/web 1.1.0 → 3.0.0

package/dist/index.js

@@ -1633,333 +1633,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 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;
-  try {
-    origin = new URL(String(qr.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 backendProtocol(url) {
-  return url.protocol === "https:" || url.protocol === "http:" && ["localhost", "127.0.0.1", "[::1]"].includes(url.hostname);
-}
-async function limitedJson(response) {
-  const reader = response.body?.getReader();
-  if (!reader) fail("INVALID_RESPONSE");
-  const chunks = [];
-  let size = 0;
-  try {
-    for (; ; ) {
-      const { done, value } = await reader.read();
-      if (done) break;
-      size += value.length;
-      if (size > 65536) {
-        await reader.cancel();
-        fail("RESPONSE_TOO_LARGE");
-      }
-      chunks.push(value);
-    }
-  } finally {
-    reader.releaseLock();
-  }
-  const bytes = new Uint8Array(size);
-  let at = 0;
-  for (const chunk of chunks) {
-    bytes.set(chunk, at);
-    at += chunk.length;
-  }
-  try {
-    return JSON.parse(new TextDecoder("utf-8", { fatal: true }).decode(bytes));
-  } catch {
-    return fail("INVALID_RESPONSE");
-  }
+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 createBackendCall(options) {
-  if ("apiKey" in options || "secret" in options) fail("SERVER_SECRET_FORBIDDEN");
-  const base = options.baseUrl ?? "/api/authlink";
-  const allowedOrigins = new Set(options.allowedBackendOrigins ?? []);
-  for (const origin of allowedOrigins) {
-    let url;
-    try {
-      url = new URL(origin);
-    } catch {
-      return fail("INVALID_BACKEND_ORIGIN");
-    }
-    if (url.origin !== origin || url.hostname.includes("*") || !backendProtocol(url)) fail("INVALID_BACKEND_ORIGIN");
-  }
-  const credentials = options.credentials ?? (options.accessToken ? "omit" : "same-origin");
-  if (!["omit", "same-origin", "include"].includes(credentials)) fail("INVALID_CREDENTIALS");
-  const csrfHeaderName = options.csrfHeaderName ?? "X-CSRF-Token";
-  const reserved = /* @__PURE__ */ new Set(["accept", "content-type", "authorization", "idempotency-key"]);
+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 {
-    new Headers([[csrfHeaderName, "test"]]);
+    payload = JSON.parse(ticket.qr);
+    origin = new URL(String(payload.origin));
   } catch {
-    return fail("INVALID_CSRF_HEADER");
-  }
-  if (reserved.has(csrfHeaderName.toLowerCase())) fail("INVALID_CSRF_HEADER");
-  reserved.add(csrfHeaderName.toLowerCase());
-  const call = async (path, body, signal, key) => {
-    if (typeof window === "undefined") fail("BROWSER_REQUIRED");
-    let url;
-    try {
-      url = new URL(base.replace(/\/+$/, "") + path, window.location.href);
-    } catch {
-      return fail("INVALID_BASE_URL");
-    }
-    if (url.username || url.password || url.search || url.hash || !backendProtocol(url)) fail("INVALID_BASE_URL");
-    if (url.origin !== window.location.origin && !allowedOrigins.has(url.origin)) fail("BACKEND_ORIGIN_NOT_ALLOWED");
-    signal?.throwIfAborted();
-    const controller = new AbortController();
-    const cancel = () => controller.abort(signal?.reason);
-    signal?.addEventListener("abort", cancel, { once: true });
-    const timeout = setTimeout(() => controller.abort(), 1e4);
-    try {
-      const headers = new Headers(typeof options.headers === "function" ? await abortable(Promise.resolve().then(options.headers), controller.signal) : options.headers);
-      for (const name of reserved) if (headers.has(name)) fail("RESERVED_HEADER");
-      headers.set("Accept", "application/json");
-      headers.set("Content-Type", "application/json");
-      if (key) headers.set("Idempotency-Key", key);
-      if (options.csrfToken) {
-        const csrf = await abortable(Promise.resolve().then(options.csrfToken), controller.signal);
-        if (typeof csrf !== "string" || !csrf.trim() || csrf.length > 1024 || /[\r\n]/.test(csrf)) fail("CSRF_REQUIRED");
-        headers.set(csrfHeaderName, csrf);
-      } else if (!options.accessToken || credentials !== "omit") fail("CSRF_REQUIRED");
-      if (options.accessToken) {
-        const accessToken = await abortable(Promise.resolve().then(options.accessToken), controller.signal);
-        if (typeof accessToken !== "string" || !accessToken || /\s/.test(accessToken)) fail("ACCESS_TOKEN_REQUIRED");
-        headers.set("Authorization", `Bearer ${accessToken}`);
-      }
-      controller.signal.throwIfAborted();
-      const response = await (options.fetch ?? globalThis.fetch)(url, {
-        method: "POST",
-        credentials,
-        redirect: "error",
-        cache: "no-store",
-        signal: controller.signal,
-        headers,
-        body: JSON.stringify(body)
-      });
-      if (!response.ok) {
-        let code = "";
-        try {
-          code = String(object(await limitedJson(response)).code ?? "").replace(/^AUTHLINK_/, "");
-        } catch {
-        }
-        if (["CONFIRMATION_CODE_INVALID", "CONFIRMATION_CODE_LOCKED", "APPROVAL_REQUIRED", "REQUEST_EXPIRED", "PASSCODE_INVALID", "PASSCODE_USED", "PASSCODE_LOCKED", "OTP_NOT_CONFIGURED"].includes(code)) fail(code);
-        fail(response.status === 401 || response.status === 403 ? "CMS_UNAUTHORIZED" : "CMS_REQUEST_FAILED");
-      }
-      return await limitedJson(response);
-    } catch (error) {
-      if (error instanceof AuthLinkError) throw error;
-      if (signal?.aborted) throw signal.reason;
-      return fail("NETWORK_ERROR");
-    } finally {
-      clearTimeout(timeout);
-      signal?.removeEventListener("abort", cancel);
-    }
-  };
-  return call;
-}
-function createAuthLinkClient(options) {
-  const call = createBackendCall(options);
-  return {
-    async create(mode, { idempotencyKey, signal }) {
-      if (!["bind", "confirm"].includes(mode) || !token.test(idempotencyKey)) fail("INVALID_CREATE_OPTIONS");
-      return validateTicket(await call("/requests", { purpose: mode }, signal, idempotencyKey), mode, options.authLinkOrigin);
-    },
-    async result(ticket, signal, confirmationCode) {
-      if (!token.test(ticket.requestId)) fail("INVALID_TICKET");
-      if (typeof confirmationCode !== "string" || !/^[0-9]{6}$/.test(confirmationCode)) fail("CONFIRMATION_CODE_REQUIRED");
-      return await call(`/requests/${ticket.requestId}/result`, { confirmationCode }, signal);
-    }
-  };
-}
-function requestKey() {
-  const bytes = globalThis.crypto.getRandomValues(new Uint8Array(32));
-  return btoa(String.fromCharCode(...bytes)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-}
-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
@@ -2392,35 +2095,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(
@@ -2430,18 +2118,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",
@@ -2449,283 +2137,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
-  };
-}
-var openAuthLinkBind = (options) => openAuthLink({ ...options, mode: "bind" });
-var openAuthLinkConfirm = (options) => openAuthLink({ ...options, mode: "confirm" });
-
-// 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 createPasscodeClient(options) {
-  const call = createBackendCall(options);
-  return {
-    async verify(passcode, signal) {
-      if (!/^[0-9]{6}$/.test(passcode)) throw new AuthLinkError("PASSCODE_INVALID");
-      return validateOTPResult(await call("/auth", { passcode }, signal));
-    }
-  };
-}
-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");
@@ -2744,94 +2223,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));
@@ -2839,18 +2367,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),
@@ -2858,29 +2385,21 @@ 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");
 export {
   AuthLinkError,
-  createAuthLinkClient,
-  createPasscodeClient,
-  initialSnapshot,
-  observeRequest,
-  openAuthLink,
-  openAuthLinkBind,
-  openAuthLinkConfirm,
-  openPasscode,
-  qrImage,
-  requestKey,
-  supportedLocales,
-  validateTicket
+  openBind,
+  openVerify,
+  supportedLocales
 };
 //# sourceMappingURL=index.js.map