@elvix.is/sdk 0.5.5 → 0.5.7

package/dist/react.js

@@ -204,6 +204,7 @@ import { useState as useState2 } from "react";
 var DEFAULT_COPY = {
   subtitle: "Pick how you want to continue.",
   googleButton: "Continue with Google",
+  passkeyButton: "Continue with passkey",
   emailPlaceholder: "you@example.com",
   sendCodeButton: "Send code",
   sendingLabel: "Sending\u2026",
@@ -272,6 +273,179 @@ function isSameOrigin(baseUrl) {
   }
 }
 
+// src/react/passkey.ts
+function b64urlToBuf(b64url) {
+  const b64 = b64url.replace(/-/g, "+").replace(/_/g, "/");
+  const pad = b64.length % 4 === 0 ? "" : "=".repeat(4 - b64.length % 4);
+  const bin = atob(b64 + pad);
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+  return bytes.buffer;
+}
+function bufToB64url(buf) {
+  const bytes = new Uint8Array(buf);
+  let bin = "";
+  for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
+  return btoa(bin).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+}
+async function runPasskeySignIn(baseUrl, clientId) {
+  if (!clientId) return { ok: false, error: "missing_client_id", message: "ElvixProvider needs a clientId." };
+  if (typeof window === "undefined" || !window.PublicKeyCredential || !navigator.credentials?.get) {
+    return { ok: false, error: "passkey_unsupported", message: "This browser can't use passkeys." };
+  }
+  const credentials = isSameOrigin(baseUrl) ? "include" : "omit";
+  let options;
+  try {
+    const res = await fetch(`${baseUrl}/api/auth/passkey/sign-in/start`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      credentials,
+      body: JSON.stringify({ intent: "app", clientId })
+    });
+    const body = await res.json();
+    if (!res.ok || !body.success || !body.data?.options) {
+      return { ok: false, error: body.errorMessage ?? "passkey_start_failed" };
+    }
+    options = body.data.options;
+  } catch (e) {
+    return { ok: false, error: "network", message: e instanceof Error ? e.message : void 0 };
+  }
+  let assertion;
+  try {
+    const publicKey = {
+      challenge: b64urlToBuf(options.challenge),
+      timeout: options.timeout,
+      rpId: options.rpId,
+      userVerification: options.userVerification,
+      allowCredentials: options.allowCredentials?.map((c) => ({
+        id: b64urlToBuf(c.id),
+        type: c.type,
+        transports: c.transports
+      }))
+    };
+    const cred = await navigator.credentials.get({ publicKey });
+    if (!cred) return { ok: false, error: "passkey_cancelled" };
+    const resp = cred.response;
+    assertion = {
+      id: cred.id,
+      rawId: bufToB64url(cred.rawId),
+      type: "public-key",
+      clientExtensionResults: cred.getClientExtensionResults(),
+      authenticatorAttachment: cred.authenticatorAttachment ?? void 0,
+      response: {
+        clientDataJSON: bufToB64url(resp.clientDataJSON),
+        authenticatorData: bufToB64url(resp.authenticatorData),
+        signature: bufToB64url(resp.signature),
+        userHandle: resp.userHandle ? bufToB64url(resp.userHandle) : void 0
+      }
+    };
+  } catch (e) {
+    const name = e?.name;
+    if (name === "NotAllowedError" || name === "AbortError") {
+      return { ok: false, error: "passkey_cancelled" };
+    }
+    return { ok: false, error: "passkey_failed", message: e instanceof Error ? e.message : void 0 };
+  }
+  try {
+    const res = await fetch(`${baseUrl}/api/auth/passkey/sign-in/finish`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      credentials,
+      body: JSON.stringify({ intent: "app", clientId, ...assertion })
+    });
+    const body = await res.json();
+    if (!res.ok || !body.success) {
+      return { ok: false, error: body.errorMessage ?? "passkey_verify_failed" };
+    }
+    if (body.data?.token) setElvixToken(body.data.token);
+    return { ok: true, redirect: body.data?.redirect, token: body.data?.token };
+  } catch (e) {
+    return { ok: false, error: "network", message: e instanceof Error ? e.message : void 0 };
+  }
+}
+async function runPasskeyRegister(baseUrl, surface) {
+  if (typeof window === "undefined" || !window.PublicKeyCredential || !navigator.credentials?.create) {
+    return { ok: false, error: "passkey_unsupported", message: "This browser can't use passkeys." };
+  }
+  const init = authInit();
+  const reqInit = {
+    headers: { "content-type": "application/json", ...init.headers },
+    credentials: init.credentials
+  };
+  let options;
+  try {
+    const res = await fetch(`${baseUrl}/api/auth/passkey/register/start`, {
+      method: "POST",
+      ...reqInit,
+      body: JSON.stringify({ surface })
+    });
+    const body = await res.json();
+    if (!res.ok || !body.success || !body.data?.options) {
+      return { ok: false, error: body.errorMessage ?? "passkey_register_failed" };
+    }
+    options = body.data.options;
+  } catch (e) {
+    return { ok: false, error: "network", message: e instanceof Error ? e.message : void 0 };
+  }
+  let attestation;
+  try {
+    const publicKey = {
+      challenge: b64urlToBuf(options.challenge),
+      rp: options.rp,
+      user: {
+        id: b64urlToBuf(options.user.id),
+        name: options.user.name,
+        displayName: options.user.displayName
+      },
+      pubKeyCredParams: options.pubKeyCredParams,
+      timeout: options.timeout,
+      attestation: options.attestation,
+      authenticatorSelection: options.authenticatorSelection,
+      excludeCredentials: options.excludeCredentials?.map((c) => ({
+        id: b64urlToBuf(c.id),
+        type: c.type,
+        transports: c.transports
+      })),
+      extensions: options.extensions
+    };
+    const cred = await navigator.credentials.create({ publicKey });
+    if (!cred) return { ok: false, error: "passkey_cancelled" };
+    const resp = cred.response;
+    attestation = {
+      id: cred.id,
+      rawId: bufToB64url(cred.rawId),
+      type: "public-key",
+      clientExtensionResults: cred.getClientExtensionResults(),
+      authenticatorAttachment: cred.authenticatorAttachment ?? void 0,
+      response: {
+        clientDataJSON: bufToB64url(resp.clientDataJSON),
+        attestationObject: bufToB64url(resp.attestationObject),
+        transports: resp.getTransports?.() ?? void 0
+      }
+    };
+  } catch (e) {
+    const name = e?.name;
+    if (name === "NotAllowedError" || name === "AbortError") {
+      return { ok: false, error: "passkey_cancelled" };
+    }
+    return { ok: false, error: "passkey_register_failed", message: e instanceof Error ? e.message : void 0 };
+  }
+  try {
+    const res = await fetch(`${baseUrl}/api/auth/passkey/register/finish`, {
+      method: "POST",
+      ...reqInit,
+      body: JSON.stringify({ surface, response: attestation })
+    });
+    const body = await res.json();
+    if (!res.ok || !body.success) {
+      return { ok: false, error: body.errorMessage ?? "passkey_register_failed" };
+    }
+    return { ok: true };
+  } catch (e) {
+    return { ok: false, error: "network", message: e instanceof Error ? e.message : void 0 };
+  }
+}
+
 // src/react/elvix-sign-in.tsx
 import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ElvixSignIn({
@@ -310,6 +484,29 @@ function ElvixSignIn({
       `${ctx.baseUrl}/api/auth/google/start?intent=app&clientId=${encodeURIComponent(ctx.clientId)}`
     );
   }
+  async function startPasskey() {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await runPasskeySignIn(ctx.baseUrl, ctx.clientId);
+      if (!result.ok) {
+        if (result.error === "passkey_cancelled") {
+          onResult?.({ ok: false, error: result.error });
+          return;
+        }
+        return fail(result.error, result.message);
+      }
+      setStep("done");
+      onResult?.({
+        ok: true,
+        method: "passkey",
+        redirect: result.redirect ?? redirectAfterSignIn,
+        token: result.token
+      });
+    } finally {
+      setBusy(false);
+    }
+  }
   async function startOtp(e) {
     e.preventDefault();
     if (!email.trim()) return fail("invalid_input", copy.errorEnterEmail);
@@ -388,6 +585,17 @@ function ElvixSignIn({
           children: copy.googleButton
         }
       ),
+      app?.methodPasskey && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: startPasskey,
+          disabled: busy,
+          className: "elvix-btn elvix-btn-passkey",
+          "data-elvix-method": "passkey",
+          children: copy.passkeyButton
+        }
+      ),
       app?.methodEmailOtp && /* @__PURE__ */ jsxs2("form", { onSubmit: startOtp, "data-elvix-method": "email_otp", className: "elvix-otp-form", children: [
         /* @__PURE__ */ jsx3(
           "input",
@@ -428,492 +636,1693 @@ function ElvixSignIn({
 }
 
 // src/react/elvix-sign-in-form.tsx
-import { useMemo as useMemo2, useState as useState3 } from "react";
+import { ArrowLeft, Check, Fingerprint, Loader2, X as X2 } from "lucide-react";
+import { useCallback as useCallback3, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef3, useState as useState5 } from "react";
 
-// src/react/elvix-shield.tsx
+// src/react/elvix-logo.tsx
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-function ElvixShield({
-  size,
-  fill,
-  accent
-}) {
-  return /* @__PURE__ */ jsxs3("svg", { width: size, height: size, viewBox: "2 2 20 20", "aria-hidden": true, style: { display: "block" }, children: [
-    /* @__PURE__ */ jsx4(
-      "path",
+function ElvixLogo({ size = 22, withText = false, className }) {
+  const wordmarkSize = Math.round(size * 0.84);
+  return /* @__PURE__ */ jsxs3("div", { className: `inline-flex items-center gap-[7px] ${className ?? ""}`, "aria-label": "elvix", children: [
+    /* @__PURE__ */ jsxs3(
+      "svg",
       {
-        fill,
-        fillRule: "evenodd",
-        d: "M 6 2.5 C 4.34 2.5 3 3.84 3 5.5 L 3 12.5 C 3 17.5 7 20.7 12 22 C 17 20.7 21 17.5 21 12.5 L 21 5.5 C 21 3.84 19.66 2.5 18 2.5 L 6 2.5 Z M 12 8.4 C 9.79 8.4 8 10.19 8 12.4 C 8 14.61 9.79 16.4 12 16.4 C 13.21 16.4 14.3 15.86 15.04 15 L 13.6 13.77 C 13.21 14.23 12.64 14.5 12 14.5 C 11.04 14.5 10.21 13.86 9.91 13 L 15.95 13 C 15.98 12.8 16 12.6 16 12.4 C 16 10.19 14.21 8.4 12 8.4 Z M 9.91 11.8 L 14.09 11.8 C 13.79 10.94 12.96 10.3 12 10.3 C 11.04 10.3 10.21 10.94 9.91 11.8 Z"
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        "aria-hidden": "true",
+        style: { display: "block", overflow: "visible" },
+        children: [
+          /* @__PURE__ */ jsx4(
+            "path",
+            {
+              fill: "currentColor",
+              fillRule: "evenodd",
+              d: "\n            M 6 2.5\n            C 4.34 2.5 3 3.84 3 5.5\n            L 3 12.5\n            C 3 17.5 7 20.7 12 22\n            C 17 20.7 21 17.5 21 12.5\n            L 21 5.5\n            C 21 3.84 19.66 2.5 18 2.5\n            L 6 2.5\n            Z\n\n            M 12 8.4\n            C 9.79 8.4 8 10.19 8 12.4\n            C 8 14.61 9.79 16.4 12 16.4\n            C 13.21 16.4 14.3 15.86 15.04 15\n            L 13.6 13.77\n            C 13.21 14.23 12.64 14.5 12 14.5\n            C 11.04 14.5 10.21 13.86 9.91 13\n            L 15.95 13\n            C 15.98 12.8 16 12.6 16 12.4\n            C 16 10.19 14.21 8.4 12 8.4\n            Z\n\n            M 9.91 11.8\n            L 14.09 11.8\n            C 13.79 10.94 12.96 10.3 12 10.3\n            C 11.04 10.3 10.21 10.94 9.91 11.8\n            Z\n          "
+            }
+          ),
+          /* @__PURE__ */ jsx4("circle", { cx: "19.5", cy: "4.5", r: "2.4", fill: "#8e7dff" })
+        ]
       }
     ),
-    /* @__PURE__ */ jsx4("circle", { cx: "19.5", cy: "4.5", r: "2.4", fill: accent })
+    withText && /* @__PURE__ */ jsx4(
+      "span",
+      {
+        style: { fontSize: wordmarkSize, lineHeight: 1, letterSpacing: "-0.025em" },
+        className: "font-semibold lowercase",
+        children: "elvix"
+      }
+    )
   ] });
 }
 
-// src/react/elvix-secured-badge.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var ELVIX_URL = "https://elvix.is";
-var SIZE = {
-  sm: { height: 28, padX: 10, font: 11.5, icon: 14, gap: 6 },
-  md: { height: 32, padX: 12, font: 12.5, icon: 16, gap: 7 },
-  lg: { height: 36, padX: 14, font: 13, icon: 18, gap: 8 }
-};
-var TONE = {
-  white: {
-    light: { bg: "#ffffff", border: "#e4e4e7", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" },
-    dark: { bg: "#ffffff", border: "transparent", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" }
-  },
-  dark: {
-    light: { bg: "#0a0a0b", border: "rgba(0,0,0,0.1)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" },
-    dark: { bg: "#0a0a0b", border: "rgba(255,255,255,0.1)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" }
-  },
-  outline: {
-    light: { bg: "transparent", border: "rgba(0,0,0,0.15)", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" },
-    dark: { bg: "transparent", border: "rgba(142,125,255,0.4)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" }
+// src/react/elvix-recover-gate.tsx
+import { AnimatePresence, motion } from "framer-motion";
+import { CheckCircle2, EyeOff, LogOut, Undo2, X } from "lucide-react";
+import { useState as useState3 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function ElvixRecoverGate({
+  baseUrl,
+  appName,
+  state,
+  sinceAt,
+  onRestore,
+  onCancel,
+  onFail
+}) {
+  const [pane, setPane] = useState3("decide");
+  const [busy, setBusy] = useState3("none");
+  const [error, setError] = useState3(null);
+  const ninetyDaysMs = 90 * 24 * 60 * 60 * 1e3;
+  const daysLeft = (
+    // LEGACY: spine-lint-disable-next-line spine/enum-over-string
+    state === "soft_deleted_by_user" ? Math.max(
+      0,
+      Math.ceil(
+        (new Date(sinceAt).getTime() + ninetyDaysMs - Date.now()) / (24 * 60 * 60 * 1e3)
+      )
+    ) : null
+  );
+  async function decide(decision) {
+    if (busy !== "none") return;
+    setBusy(decision);
+    setError(null);
+    try {
+      const init = authInit();
+      const res = await fetch(`${baseUrl}/api/auth/recover-membership`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", ...init.headers },
+        credentials: init.credentials,
+        body: JSON.stringify({ decision })
+      });
+      const raw = await res.json().catch(() => ({}));
+      const errorKey = raw.errorKey ?? raw.errorMessage;
+      if (!res.ok || !raw.success) {
+        const msg = errorKey === "grace_expired" ? "The 90-day window to restore has closed." : errorKey === "unauthenticated" ? "Your session ended. Sign in again." : "Something went wrong. Try again.";
+        setError(msg);
+        onFail?.(msg);
+        return;
+      }
+      const redirect = raw.data?.redirect ?? "/";
+      if (decision === "restore") {
+        onRestore?.({ redirect });
+        if (!onRestore) setPane("done_restored");
+      } else {
+        onCancel?.({ redirect });
+        if (!onCancel) setPane("done_cancelled");
+      }
+    } catch {
+      const msg = "Network hiccup. Try again.";
+      setError(msg);
+      onFail?.(msg);
+    } finally {
+      setBusy("none");
+    }
   }
-};
-function ElvixSecuredBadge({
-  variant = "white",
-  size = "md",
-  theme = "dark",
-  accentColor = "#8e7dff",
-  href = ELVIX_URL,
-  className = "",
-  width,
-  height,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight
+  return /* @__PURE__ */ jsx5("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxs4(AnimatePresence, { mode: "wait", children: [
+    pane === "decide" && /* @__PURE__ */ jsx5(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -4 },
+        transition: { duration: 0.24, ease: [0.22, 0.61, 0.36, 1] },
+        children: /* @__PURE__ */ jsx5(
+          DecidePane,
+          {
+            appName,
+            state,
+            daysLeft,
+            busy,
+            error,
+            onRestore: () => void decide("restore"),
+            onCancel: () => void decide("cancel")
+          }
+        )
+      },
+      "decide"
+    ),
+    pane === "done_restored" && /* @__PURE__ */ jsx5(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -4 },
+        transition: { duration: 0.24, ease: [0.22, 0.61, 0.36, 1] },
+        children: /* @__PURE__ */ jsx5(
+          DonePane,
+          {
+            icon: "check",
+            title: `You're back on ${appName}.`,
+            body: "Your membership is active again. Continue to the app whenever you're ready."
+          }
+        )
+      },
+      "done_restored"
+    ),
+    pane === "done_cancelled" && /* @__PURE__ */ jsx5(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 6 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -4 },
+        transition: { duration: 0.24, ease: [0.22, 0.61, 0.36, 1] },
+        children: /* @__PURE__ */ jsx5(
+          DonePane,
+          {
+            icon: "logout",
+            title: "You're signed out.",
+            body: `You stayed off ${appName}. Come back any time.`
+          }
+        )
+      },
+      "done_cancelled"
+    )
+  ] }) });
+}
+function DecidePane({
+  appName,
+  state,
+  daysLeft,
+  busy,
+  error,
+  onRestore,
+  onCancel
 }) {
-  const s = SIZE[size];
-  const t = TONE[variant][theme];
-  const style = {
-    display: "inline-flex",
-    alignItems: "center",
-    gap: s.gap,
-    height: s.height,
-    paddingLeft: s.padX,
-    paddingRight: s.padX,
-    fontSize: s.font,
-    fontWeight: 500,
-    borderRadius: 9999,
-    background: t.bg,
-    border: `1px solid ${t.border}`,
-    color: t.brand,
-    textDecoration: "none",
-    userSelect: "none",
-    lineHeight: 1,
-    // Dimensional overrides win over the size preset above.
-    ...sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight })
-  };
-  return /* @__PURE__ */ jsxs4(
-    "a",
-    {
-      href,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className,
-      style,
-      "data-elvix-secured-badge": "",
-      children: [
-        /* @__PURE__ */ jsx5(ElvixShield, { size: s.icon, fill: t.shield, accent: accentColor }),
-        /* @__PURE__ */ jsxs4("span", { style: { display: "inline-flex", alignItems: "baseline", gap: 4 }, children: [
-          /* @__PURE__ */ jsx5("span", { style: { color: t.lead }, children: "Secured by" }),
-          /* @__PURE__ */ jsx5("span", { style: { color: t.brand, fontWeight: 600 }, children: "elvix" })
+  const isDeleted = state === "soft_deleted_by_user";
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx5(
+        "span",
+        {
+          className: "size-10 rounded-full inline-flex items-center justify-center shrink-0 " + (isDeleted ? "bg-red-500/15" : ""),
+          style: isDeleted ? void 0 : { background: "var(--elvix-primary-12)" },
+          children: isDeleted ? /* @__PURE__ */ jsx5(Undo2, { className: "size-5 text-red-500", strokeWidth: 2.2 }) : /* @__PURE__ */ jsx5(
+            EyeOff,
+            {
+              className: "size-5",
+              strokeWidth: 2.2,
+              style: { color: "var(--elvix-primary-strong)" }
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs4("div", { className: "text-[15px] font-semibold tracking-tight text-fg-1 leading-tight", children: [
+          "Welcome back to ",
+          appName
+        ] }),
+        /* @__PURE__ */ jsx5("p", { className: "text-[12.5px] text-fg-3 leading-[1.55] mt-1", children: isDeleted ? `You left ${appName} earlier. ${daysLeft != null ? `You have ${daysLeft} ${daysLeft === 1 ? "day" : "days"} left to come back.` : "You're still inside the restore window."} Restore your spot now or sign back out.` : `Your membership on ${appName} is on pause right now. Restore to pick up where you left off, or sign back out and stay away.` })
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ jsx5("p", { className: "text-[12px] text-red-500 leading-tight", children: error }) : null,
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onRestore,
+        disabled: busy !== "none",
+        autoFocus: true,
+        className: "w-full h-10 rounded-[10px] text-[14px] font-semibold tracking-tight cursor-pointer transition ring-1 ring-black/10 inline-flex items-center justify-center gap-1.5 disabled:opacity-60 disabled:cursor-not-allowed",
+        style: {
+          background: "var(--elvix-primary-strong)",
+          color: "var(--elvix-on-primary)",
+          backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%)",
+          boxShadow: "0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 3px -1px rgba(0,0,0,0.18), 0 0 0 1px rgba(25,28,33,0.08)"
+        },
+        children: busy === "restore" ? "Restoring\u2026" : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx5(Undo2, { className: "size-3.5" }),
+          isDeleted ? `Restore my spot on ${appName}` : `Bring me back on ${appName}`
         ] })
-      ]
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onCancel,
+        disabled: busy !== "none",
+        className: "w-full h-10 rounded-[10px] text-[13px] font-medium text-fg-2 hover:text-fg-1 hover:bg-surface-hover cursor-pointer transition inline-flex items-center justify-center gap-1.5 disabled:opacity-60 disabled:cursor-not-allowed",
+        children: busy === "cancel" ? "Signing you out\u2026" : /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx5(X, { className: "size-3.5" }),
+          "Not now, sign me out"
+        ] })
+      }
+    )
+  ] });
+}
+function DonePane({
+  icon,
+  title,
+  body
+}) {
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center text-center gap-4 py-2", children: [
+    /* @__PURE__ */ jsx5(
+      motion.span,
+      {
+        initial: { scale: 0.6, opacity: 0 },
+        animate: { scale: 1, opacity: 1 },
+        transition: { duration: 0.34, ease: [0.22, 0.61, 0.36, 1] },
+        className: "size-12 rounded-full inline-flex items-center justify-center",
+        style: { background: "var(--elvix-primary-12)" },
+        children: icon === "check" ? /* @__PURE__ */ jsx5(
+          CheckCircle2,
+          {
+            className: "size-7",
+            strokeWidth: 2.2,
+            style: { color: "var(--elvix-primary-strong)" }
+          }
+        ) : /* @__PURE__ */ jsx5(LogOut, { className: "size-7 text-fg-2", strokeWidth: 2.2 })
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "space-y-1 max-w-[320px]", children: [
+      /* @__PURE__ */ jsx5("div", { className: "text-[15px] font-semibold tracking-tight text-fg-1", children: title }),
+      /* @__PURE__ */ jsx5("div", { className: "text-[12.5px] text-fg-3 leading-[1.55]", children: body })
+    ] })
+  ] });
+}
+
+// src/react/google-one-tap.tsx
+import { memo, useCallback, useEffect as useEffect2, useRef, useState as useState4 } from "react";
+
+// src/react/spine-fetch.ts
+function unwrapEnvelope(input) {
+  if (!input || typeof input !== "object") return input;
+  const e = input;
+  if (!("success" in e)) return input;
+  const dataObject = e.data && typeof e.data === "object" && !Array.isArray(e.data) ? e.data : {};
+  const arrayData = Array.isArray(e.data) ? { data: e.data } : {};
+  return {
+    ok: Boolean(e.success),
+    error: e.errorKey ?? e.errorMessage ?? void 0,
+    ...dataObject,
+    ...arrayData
+  };
+}
+
+// src/react/google-one-tap.tsx
+import { jsxs as jsxs5 } from "react/jsx-runtime";
+var GIS_SRC = "https://accounts.google.com/gsi/client";
+var scriptPromise = null;
+function loadGisScript() {
+  if (typeof window === "undefined") return Promise.reject(new Error("ssr"));
+  if (window.google?.accounts?.id) return Promise.resolve();
+  if (scriptPromise) return scriptPromise;
+  scriptPromise = new Promise((resolve, reject) => {
+    const existing = document.querySelector(`script[src="${GIS_SRC}"]`);
+    if (existing) {
+      existing.addEventListener("load", () => resolve(), { once: true });
+      existing.addEventListener("error", () => reject(new Error("gis_load_failed")), {
+        once: true
+      });
+      return;
     }
+    const s = document.createElement("script");
+    s.src = GIS_SRC;
+    s.async = true;
+    s.defer = true;
+    s.onload = () => resolve();
+    s.onerror = () => reject(new Error("gis_load_failed"));
+    document.head.appendChild(s);
+  });
+  return scriptPromise;
+}
+var GoogleOneTap = memo(function GoogleOneTap2({
+  baseUrl,
+  clientId,
+  intent,
+  appClientId,
+  config,
+  /** When true, also render the GIS button (used for popup ux_mode). */
+  renderButton = false,
+  /** Visible-on-page slot for the rendered GIS button. */
+  buttonContainerRef
+}) {
+  const [err, setErr] = useState4(null);
+  const initialised = useRef(false);
+  const handleCredential = useCallback(
+    async (response) => {
+      try {
+        const res = await fetch(`${baseUrl}/api/auth/google/credential`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: isSameOrigin(baseUrl) ? "include" : "omit",
+          body: JSON.stringify({
+            credential: response.credential,
+            intent,
+            clientId: appClientId
+          })
+        });
+        const body = unwrapEnvelope(await res.json());
+        if (!res.ok || !body.ok) {
+          setErr(body.error ?? "Sign-in failed");
+          return;
+        }
+        if (body.token) setElvixToken(body.token);
+        if (body.redirect) {
+          window.location.assign(body.redirect);
+        }
+      } catch (e) {
+        setErr(e instanceof Error ? e.message : "Network error");
+      }
+    },
+    [baseUrl, intent, appClientId]
+  );
+  useEffect2(() => {
+    if (!clientId) return;
+    if (!config.oneTap && !renderButton) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        await loadGisScript();
+        if (cancelled) return;
+        const g = window.google?.accounts?.id;
+        if (!g) return;
+        if (!initialised.current) {
+          const initConfig = {
+            client_id: clientId,
+            callback: handleCredential,
+            auto_select: config.autoSelect,
+            use_fedcm_for_prompt: config.fedcm,
+            ux_mode: "popup",
+            itp_support: true,
+            cancel_on_tap_outside: false,
+            context: "signin"
+          };
+          if (config.hostedDomain) initConfig.hosted_domain = config.hostedDomain;
+          g.initialize(initConfig);
+          initialised.current = true;
+        }
+        if (renderButton && buttonContainerRef?.current) {
+          buttonContainerRef.current.innerHTML = "";
+          const measured = buttonContainerRef.current.clientWidth;
+          const safeWidth = Math.min(400, Math.max(240, measured || 360));
+          g.renderButton(buttonContainerRef.current, {
+            theme: "outline",
+            size: "large",
+            shape: "rectangular",
+            text: "continue_with",
+            logo_alignment: "left",
+            width: safeWidth
+          });
+        }
+        if (config.oneTap) {
+          g.prompt();
+        }
+      } catch (e) {
+        setErr(e instanceof Error ? e.message : "GIS load failed");
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    clientId,
+    config.oneTap,
+    config.autoSelect,
+    config.popup,
+    config.fedcm,
+    config.hostedDomain,
+    renderButton,
+    handleCredential,
+    buttonContainerRef
+  ]);
+  useEffect2(() => {
+    return () => {
+      const g = window.google?.accounts?.id;
+      if (g) g.cancel();
+    };
+  }, []);
+  if (err) {
+    return /* @__PURE__ */ jsxs5("p", { className: "text-[11.5px] text-red-400 bg-red-500/10 border border-red-500/20 rounded-[8px] px-3 py-2", children: [
+      "Google sign-in: ",
+      err
+    ] });
+  }
+  return null;
+});
+
+// src/react/otp-input.tsx
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useRef as useRef2
+} from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var OTP_LENGTH = 6;
+function OtpInput({
+  value,
+  onChange,
+  disabled,
+  autoFocus
+}) {
+  const refs = useRef2([]);
+  const digits = Array.from({ length: OTP_LENGTH }, (_, i) => value[i] ?? "");
+  useEffect3(() => {
+    if (autoFocus) refs.current[0]?.focus();
+  }, [autoFocus]);
+  const focus = useCallback2((i) => refs.current[i]?.focus(), []);
+  const onCharChange = useCallback2(
+    (i, e) => {
+      const stripped = e.target.value.replace(/\D/g, "");
+      if (stripped.length > 1) {
+        const fill = stripped.slice(0, OTP_LENGTH - i);
+        const next2 = [...digits];
+        for (let k = 0; k < fill.length; k += 1) {
+          next2[i + k] = fill[k];
+        }
+        const merged = next2.join("");
+        onChange(merged);
+        focus(Math.min(i + fill.length, OTP_LENGTH - 1));
+        return;
+      }
+      const ch = stripped.slice(-1);
+      const next = [...digits];
+      next[i] = ch;
+      onChange(next.join(""));
+      if (ch && i < OTP_LENGTH - 1) focus(i + 1);
+    },
+    [digits, onChange, focus]
+  );
+  const onKeyDown = useCallback2(
+    (i, e) => {
+      if (e.key === "Backspace" && !digits[i] && i > 0) {
+        e.preventDefault();
+        const next = [...digits];
+        next[i - 1] = "";
+        onChange(next.join(""));
+        focus(i - 1);
+      } else if (e.key === "ArrowLeft" && i > 0) {
+        focus(i - 1);
+      } else if (e.key === "ArrowRight" && i < OTP_LENGTH - 1) {
+        focus(i + 1);
+      }
+    },
+    [digits, onChange, focus]
+  );
+  const onPaste = useCallback2(
+    (e) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, OTP_LENGTH);
+      if (pasted) {
+        onChange(pasted);
+        focus(Math.min(pasted.length, OTP_LENGTH - 1));
+      }
+    },
+    [onChange, focus]
   );
+  return (
+    // 6-column grid keeps every box equal-width and never overflows
+    // its container, so the input fits cleanly inside an ElvixCard
+    // on the narrowest mobile viewports without a horizontal scroll.
+    // `aspect-square` keeps each box visually balanced as width
+    // shrinks. `max-w-12` caps the boxes at the original 48px on
+    // wide surfaces so they don't bloat on desktop.
+    /* @__PURE__ */ jsx6("div", { className: "grid grid-cols-6 gap-2 w-full", children: digits.map((d, i) => /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref: (el) => {
+          refs.current[i] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        autoComplete: "one-time-code",
+        maxLength: OTP_LENGTH,
+        value: d,
+        disabled,
+        onChange: (e) => onCharChange(i, e),
+        onKeyDown: (e) => onKeyDown(i, e),
+        onPaste,
+        onFocus: (e) => e.target.select(),
+        className: "w-full aspect-square min-w-0 max-w-12 mx-auto text-center text-[20px] font-semibold tabular-nums rounded-[10px] bg-surface border border-border-base text-fg-1 focus:outline-none focus:border-[#8e7dff] focus:ring-2 focus:ring-[#8e7dff]/20 transition disabled:opacity-50"
+      },
+      i
+    )) })
+  );
+}
+
+// src/react/username-rules.ts
+var USERNAME_MIN_LENGTH = 4;
+var USERNAME_MAX_LENGTH = 30;
+var RESERVED_USERNAMES = /* @__PURE__ */ new Set([
+  // system + routing
+  "admin",
+  "administrator",
+  "root",
+  "system",
+  "sys",
+  "api",
+  "auth",
+  "oauth",
+  "app",
+  "apps",
+  "account",
+  "accounts",
+  "billing",
+  "checkout",
+  "pay",
+  "payment",
+  "payments",
+  "brand",
+  "console",
+  "dashboard",
+  "dev",
+  "developer",
+  "developers",
+  "docs",
+  "documentation",
+  "explore",
+  "help",
+  "home",
+  "index",
+  "legal",
+  "privacy",
+  "terms",
+  "tos",
+  "cookies",
+  "cookie",
+  "imprint",
+  "login",
+  "signin",
+  "logout",
+  "signout",
+  "signup",
+  "register",
+  "me",
+  "my",
+  "profile",
+  "profiles",
+  "user",
+  "users",
+  "new",
+  "edit",
+  "create",
+  "delete",
+  "public",
+  "private",
+  "static",
+  "assets",
+  "settings",
+  "setting",
+  "preferences",
+  "support",
+  "contact",
+  "www",
+  "http",
+  "https",
+  "ftp",
+  "mail",
+  "next",
+  "_next",
+  "src",
+  "test",
+  "tests",
+  // brand
+  "elvix",
+  "edvone",
+  "axum",
+  "aixum",
+  "mithra",
+  "delvix",
+  "buildza",
+  "danceclub",
+  "pulse",
+  "pulseai",
+  // pseudo-paths / common reserved
+  "null",
+  "undefined",
+  "true",
+  "false"
+]);
+function usernameReason(raw) {
+  const v = raw.trim().toLowerCase();
+  if (v.length < USERNAME_MIN_LENGTH) return "too_short";
+  if (v.length > USERNAME_MAX_LENGTH) return "too_long";
+  if (!/^[a-z0-9._]+$/.test(v)) return "bad_chars";
+  if (!/^[a-z]/.test(v)) return "must_start_letter";
+  if (!/[a-z0-9]$/.test(v)) return "must_end_alnum";
+  if (/[._]{2}/.test(v)) return "no_double_special";
+  if (RESERVED_USERNAMES.has(v)) return "reserved";
+  return "ok";
+}
+function isValidUsername(raw) {
+  return usernameReason(raw) === "ok";
 }
 
 // src/react/elvix-sign-in-form.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function GoogleG({ size = 18 }) {
-  return /* @__PURE__ */ jsxs5("svg", { width: size, height: size, viewBox: "0 0 18 18", "aria-hidden": true, style: { display: "block" }, children: [
-    /* @__PURE__ */ jsx6(
-      "path",
-      {
-        fill: "#4285F4",
-        d: "M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62Z"
-      }
-    ),
-    /* @__PURE__ */ jsx6(
-      "path",
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var ELVIX_SITE_URL = "https://elvix.is";
+var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+var ELVIX_LIGHT_VARS = {
+  ["--canvas"]: "#fafafa",
+  ["--surface"]: "#ffffff",
+  ["--surface-2"]: "#f4f4f5",
+  ["--surface-hover"]: "rgba(0, 0, 0, 0.04)",
+  ["--surface-active"]: "rgba(0, 0, 0, 0.06)",
+  ["--border"]: "rgba(0, 0, 0, 0.08)",
+  ["--border-strong"]: "rgba(0, 0, 0, 0.14)",
+  ["--fg-1"]: "#18181b",
+  ["--fg-2"]: "#52525b",
+  ["--fg-3"]: "#71717a",
+  ["--placeholder"]: "#a1a1aa"
+};
+var ELVIX_DARK_VARS = {
+  ["--canvas"]: "#0a0a0b",
+  ["--surface"]: "#0d0d10",
+  ["--surface-2"]: "#08080a",
+  ["--surface-hover"]: "rgba(255, 255, 255, 0.04)",
+  ["--surface-active"]: "rgba(255, 255, 255, 0.06)",
+  ["--border"]: "rgba(255, 255, 255, 0.06)",
+  ["--border-strong"]: "rgba(255, 255, 255, 0.12)",
+  ["--fg-1"]: "#fafafa",
+  ["--fg-2"]: "#a1a1aa",
+  ["--fg-3"]: "#71717a",
+  ["--placeholder"]: "#52525b"
+};
+function ElvixSignInForm(props) {
+  const app = useElvixApp();
+  const resolved = {
+    ...props,
+    mode: props.mode ?? "interactive",
+    appName: props.appName ?? app?.appName ?? "your app",
+    logoUrl: props.logoUrl ?? app?.logoUrl ?? null,
+    logoUrlDark: props.logoUrlDark ?? app?.logoUrlDark ?? null,
+    brandColor: props.brandColor ?? app?.brandColor ?? "#5d4dff",
+    onBrandColor: props.onBrandColor ?? app?.onBrandColor ?? "#ffffff",
+    methodGoogle: props.methodGoogle ?? app?.methodGoogle ?? false,
+    methodEmailOtp: props.methodEmailOtp ?? app?.methodEmailOtp ?? true,
+    methodPasskey: props.methodPasskey ?? app?.methodPasskey ?? false,
+    methodUsername: props.methodUsername ?? app?.methodUsername ?? false,
+    privacyPolicyUrl: props.privacyPolicyUrl ?? app?.privacyPolicyUrl ?? null,
+    termsOfServiceUrl: props.termsOfServiceUrl ?? app?.termsOfServiceUrl ?? null,
+    intent: props.intent ?? "app",
+    clientId: props.clientId ?? app?.clientId ?? void 0,
+    layout: props.layout ?? app?.layout ?? "centered",
+    socialLayout: props.socialLayout ?? app?.socialLayout ?? "stacked",
+    presentation: props.presentation ?? app?.presentation ?? "card",
+    theme: props.theme ?? app?.theme ?? "light",
+    showHeader: props.showHeader ?? app?.showHeader ?? true,
+    transparentBg: props.transparentBg ?? app?.transparentBg ?? false,
+    signInVerb: props.signInVerb ?? app?.signInVerb ?? "signin",
+    googleConfig: props.googleConfig ?? app?.googleConfig ?? void 0,
+    googleClientId: props.googleClientId ?? app?.googleClientId ?? void 0,
+    websiteUrl: props.websiteUrl ?? app?.websiteUrl ?? null
+  };
+  const { framed = true, presentation = "card", theme = "light" } = resolved;
+  const card = /* @__PURE__ */ jsx7(AuthCard, { ...resolved });
+  let content = card;
+  if (presentation === "drawer") {
+    content = /* @__PURE__ */ jsx7(DrawerPresentation, { children: card });
+  } else if (presentation === "modal") {
+    content = /* @__PURE__ */ jsx7(ModalPresentation, { children: card });
+  }
+  const wrapped = (
+    // LEGACY: spine-lint-disable-next-line spine/enum-over-string
+    theme === "auto" ? content : /* @__PURE__ */ jsx7(
+      "div",
       {
-        fill: "#34A853",
-        d: "M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18Z"
+        className: framed ? "bg-canvas" : void 0,
+        style: theme === "dark" ? ELVIX_DARK_VARS : ELVIX_LIGHT_VARS,
+        children: content
       }
-    ),
-    /* @__PURE__ */ jsx6(
-      "path",
+    )
+  );
+  if (!framed) return wrapped;
+  return /* @__PURE__ */ jsx7(FramedPreview, { children: wrapped });
+}
+function DrawerPresentation({ children }) {
+  return /* @__PURE__ */ jsxs6("div", { className: "relative bg-surface-2 rounded-t-[20px] border-t border-x border-border-base shadow-[0_-12px_40px_-12px_rgba(0,0,0,0.18)] pt-2 pb-0 overflow-hidden", children: [
+    /* @__PURE__ */ jsx7("div", { className: "mx-auto mt-1 mb-3 h-1 w-9 rounded-full bg-border-strong" }),
+    /* @__PURE__ */ jsx7("div", { className: "px-3 pb-3", children })
+  ] });
+}
+function ModalPresentation({ children }) {
+  return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx7(
+      "div",
       {
-        fill: "#FBBC05",
-        d: "M3.97 10.72A5.4 5.4 0 0 1 3.68 9c0-.6.1-1.18.29-1.72V4.95H.96A9 9 0 0 0 0 9c0 1.45.35 2.83.96 4.05l3.01-2.33Z"
+        "aria-hidden": true,
+        className: "absolute inset-0 -m-4 rounded-[18px] bg-black/30 backdrop-blur-sm pointer-events-none"
       }
     ),
-    /* @__PURE__ */ jsx6(
-      "path",
+    /* @__PURE__ */ jsx7("div", { className: "relative", children })
+  ] });
+}
+function AuthCard(props) {
+  const { transparentBg = false } = props;
+  const cardClass = transparentBg ? "overflow-hidden" : "rounded-[14px] bg-surface shadow-[0_2px_8px_rgba(0,0,0,0.04),0_20px_40px_-20px_rgba(0,0,0,0.12)] border border-border-base overflow-hidden";
+  return /* @__PURE__ */ jsxs6("div", { className: cardClass, children: [
+    /* @__PURE__ */ jsx7("div", { className: transparentBg ? "px-1 py-1" : "px-7 py-7", children: /* @__PURE__ */ jsx7(AuthBody, { ...props }) }),
+    /* @__PURE__ */ jsx7(
+      "div",
       {
-        fill: "#EA4335",
-        d: "M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.59C13.46.89 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58Z"
+        className: (transparentBg ? "mt-3 " : "border-t border-border-base bg-surface-hover px-7 py-3 ") + "flex items-center justify-center",
+        children: /* @__PURE__ */ jsxs6(
+          "a",
+          {
+            href: ELVIX_SITE_URL,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "inline-flex items-center gap-1.5 pl-1.5 pr-2.5 py-1 rounded-full bg-surface ring-1 ring-border-base shadow-sm hover:bg-surface-hover hover:ring-border-strong transition",
+            children: [
+              /* @__PURE__ */ jsxs6("span", { className: "relative inline-flex items-center", children: [
+                /* @__PURE__ */ jsx7(ElvixLogo, { size: 12, className: "text-fg-1" }),
+                /* @__PURE__ */ jsx7(
+                  "span",
+                  {
+                    "aria-hidden": true,
+                    className: "absolute -right-px -top-px size-1 rounded-full bg-emerald-500 ring-1 ring-surface"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs6("span", { className: "text-[11px] tracking-tight leading-none", children: [
+                /* @__PURE__ */ jsx7("span", { className: "text-fg-3", children: "Secured by " }),
+                /* @__PURE__ */ jsx7("span", { className: "font-semibold text-fg-1", children: "elvix" })
+              ] })
+            ]
+          }
+        )
       }
     )
   ] });
 }
-function ElvixSignInForm({
-  onResult,
-  redirectAfterSignIn,
-  copy: copyProp,
-  className = "",
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  width,
-  height
+function AuthBody({
+  mode,
+  appName,
+  logoUrl,
+  logoUrlDark,
+  logoNode,
+  brandColor,
+  onBrandColor = "#ffffff",
+  methodGoogle,
+  methodEmailOtp,
+  methodPasskey,
+  methodUsername = false,
+  privacyPolicyUrl,
+  termsOfServiceUrl,
+  intent = "app",
+  clientId,
+  websiteUrl,
+  layout = "centered",
+  socialLayout = "stacked",
+  showHeader = true,
+  theme = "light",
+  signInVerb = "signin",
+  belowHeading,
+  belowMethods,
+  googleConfig,
+  googleClientId,
+  onAuthenticated,
+  onResult
 }) {
-  const ctx = useElvixContext();
-  const app = useElvixApp();
-  const copy = resolveCopy(app?.strings, copyProp);
-  const [step, setStep] = useState3("identify");
-  const [email, setEmail] = useState3("");
-  const [code, setCode] = useState3("");
-  const [challengeId, setChallengeId] = useState3(null);
-  const [busy, setBusy] = useState3(false);
-  const [error, setError] = useState3(null);
-  const brand = app?.brandColor || "#6c5ce7";
-  const onBrand = app?.onBrandColor || "#fff";
-  const appName = app?.appName ?? "your app";
-  const verb = app?.signInVerb === "login" ? "Log in" : "Sign in";
-  const defaultTitle = app?.appName ? `${verb} to ${app.appName}` : verb;
-  const title = copy.title ? fillCopy(copy.title, { app: app?.appName ?? "" }) : defaultTitle;
-  const submitLabel = copy.submitButton ?? verb;
-  const showGoogle = Boolean(app?.methodGoogle);
-  const showEmail = Boolean(app?.methodEmailOtp);
-  const showDivider = showGoogle && showEmail;
-  const logoSrc = app?.iconUrl || app?.logoUrl || null;
-  const privacyUrl = app?.privacyPolicyUrl || null;
-  const termsUrl = app?.termsOfServiceUrl || null;
-  const hasLegal = Boolean(privacyUrl || termsUrl);
-  const cardStyle = useMemo2(
-    () => ({
-      boxSizing: "border-box",
-      // Defaults first; the shared sizeStyle() overrides only the keys the host set,
-      // so the form keeps its width "100%" / maxWidth 400 defaults when unsized.
-      width: "100%",
-      maxWidth: 400,
-      ...sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight }),
-      margin: "0 auto",
-      display: "flex",
-      flexDirection: "column",
-      gap: 18,
-      background: "#fff",
-      color: "#18181b",
-      border: "1px solid rgba(0,0,0,0.08)",
-      borderRadius: 16,
-      boxShadow: "0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -12px rgba(0,0,0,0.18)",
-      padding: 28,
-      fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
-      textAlign: "center"
-    }),
-    [width, maxWidth, minWidth, height, minHeight, maxHeight]
+  const { baseUrl } = useElvixContext();
+  const isPreview = mode === "preview";
+  const anyMethod = methodGoogle || methodEmailOtp || methodPasskey || methodUsername;
+  const gisEnabled = !isPreview && methodGoogle && Boolean(googleConfig) && Boolean(
+    googleConfig?.oneTap || googleConfig?.popup || googleConfig?.autoSelect || googleConfig?.fedcm
   );
-  function fail(error2, message) {
-    setError(message ?? error2);
-    onResult?.({ ok: false, error: error2, message });
-  }
-  async function startGoogle() {
-    if (!ctx.clientId) return fail("missing_client_id", "ElvixProvider needs a clientId.");
-    window.location.assign(
-      `${ctx.baseUrl}/api/auth/google/start?intent=app&clientId=${encodeURIComponent(ctx.clientId)}`
-    );
-  }
-  async function startOtp(e) {
-    e.preventDefault();
-    if (!email.trim()) return fail("invalid_input", copy.errorEnterEmail);
-    setBusy(true);
+  const gisButtonRef = useRef3(null);
+  const useGisRenderedButton = gisEnabled && Boolean(googleClientId);
+  const [step, setStep] = useState5(
+    "identifier"
+  );
+  const [recoverState, setRecoverState] = useState5(null);
+  const [identifier, setIdentifier] = useState5("");
+  const [code, setCode] = useState5("");
+  const [challengeId, setChallengeId] = useState5(null);
+  const [sendingOtp, setSendingOtp] = useState5(false);
+  const [verifyingOtp, setVerifyingOtp] = useState5(false);
+  const [error, setError] = useState5(null);
+  const [resendIn, setResendIn] = useState5(0);
+  const [passkeyBusy, setPasskeyBusy] = useState5(false);
+  const [usernameValue, setUsernameValue] = useState5("");
+  const [usernameSuggestions, setUsernameSuggestions] = useState5([]);
+  const [usernameCheck, setUsernameCheck] = useState5({ kind: "idle" });
+  const [onboardingBusy, setOnboardingBusy] = useState5(null);
+  const [finalRedirect, setFinalRedirect] = useState5("/");
+  useEffect4(() => {
+    if (resendIn <= 0) return;
+    const t = setInterval(() => setResendIn((s) => Math.max(0, s - 1)), 1e3);
+    return () => clearInterval(t);
+  }, [resendIn]);
+  const reportError = useCallback3(
+    (code2, message) => {
+      setError(message);
+      onResult?.({
+        ok: false,
+        error: code2 ?? "unknown",
+        message
+      });
+    },
+    [onResult]
+  );
+  const applyLanding = useCallback3(
+    (body) => {
+      if (body.token) setElvixToken(body.token);
+      if (body.next_step === "username") {
+        setUsernameSuggestions(body.suggestions ?? []);
+        setUsernameValue(body.suggestions?.[0] ?? "");
+        setFinalRedirect(body.final ?? "/");
+        setStep("username");
+        return;
+      }
+      if (body.next_step === "passkey") {
+        setFinalRedirect(body.final ?? "/");
+        setStep("passkey");
+        return;
+      }
+      if (body.next_step === "recover" && body.recover) {
+        setRecoverState(body.recover);
+        setFinalRedirect(body.final ?? "/");
+        setStep("recover");
+        return;
+      }
+      const redirect = body.redirect ?? defaultRedirect(intent);
+      onResult?.({ ok: true, redirect });
+      if (onAuthenticated) {
+        onAuthenticated({ ok: true, redirect, token: body.token });
+        return;
+      }
+      window.location.href = redirect;
+    },
+    [intent, onAuthenticated, onResult]
+  );
+  useEffect4(() => {
+    if (isPreview) return;
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("onboarding") !== "1") return;
+    (async () => {
+      try {
+        const init = authInit();
+        const res = await fetch(`${baseUrl}/api/onboarding/state`, {
+          headers: init.headers,
+          credentials: init.credentials
+        });
+        if (!res.ok) return;
+        const body = unwrapEnvelope(await res.json());
+        if (body.ok) applyLanding(body);
+      } catch {
+      } finally {
+        const url = new URL(window.location.href);
+        url.searchParams.delete("onboarding");
+        url.searchParams.delete("next");
+        window.history.replaceState({}, "", url.toString());
+      }
+    })();
+  }, []);
+  const autoSubmittedCodeRef = useRef3("");
+  useEffect4(() => {
+    if (code.length < 6) autoSubmittedCodeRef.current = "";
+  }, [code]);
+  const identifierValid = useMemo2(() => {
+    const v = identifier.trim();
+    if (!v) return false;
+    if (v.includes("@")) return methodEmailOtp && EMAIL_RE.test(v);
+    if (methodUsername) return isValidUsername(v);
+    return false;
+  }, [identifier, methodEmailOtp, methodUsername]);
+  const identifierPlaceholder = methodEmailOtp && methodUsername ? "Email or username" : methodUsername ? "Username" : "Enter your email";
+  const ctaBase = brandColor;
+  const ctaFg = onBrandColor;
+  const ctaStyle = {
+    backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%)",
+    backgroundColor: ctaBase,
+    color: ctaFg,
+    boxShadow: "0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 3px -1px rgba(0,0,0,0.18), 0 0 0 1px rgba(25,28,33,0.08)"
+  };
+  const ctaLabelStyle = {
+    filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.18))"
+  };
+  const onSubmitIdentifier = useCallback3(
+    async (e) => {
+      e?.preventDefault();
+      if (!identifierValid || isPreview || sendingOtp) return;
+      setError(null);
+      setSendingOtp(true);
+      const v = identifier.trim();
+      try {
+        if (!v.includes("@")) {
+          const res2 = await fetch(`${baseUrl}/api/auth/identifier/resolve`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            credentials: isSameOrigin(baseUrl) ? "include" : "omit",
+            body: JSON.stringify({
+              username: v.toLowerCase(),
+              intent,
+              ...clientId ? { clientId } : {}
+            })
+          });
+          const body2 = unwrapEnvelope(await res2.json().catch(() => ({})));
+          if (!res2.ok || !body2.ok || !body2.challengeId) {
+            if (body2.error === "too_recent" || body2.error === "too_many") {
+              setResendIn(body2.retryAfterSeconds ?? 45);
+            }
+            reportError(body2.error, humanError(body2.error, body2.retryAfterSeconds));
+            return;
+          }
+          setChallengeId(body2.challengeId);
+          setStep("code");
+          setResendIn(45);
+          return;
+        }
+        const res = await fetch(`${baseUrl}/api/auth/otp/start`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: isSameOrigin(baseUrl) ? "include" : "omit",
+          body: JSON.stringify({ email: v, intent, clientId })
+        });
+        const body = unwrapEnvelope(await res.json().catch(() => ({})));
+        if (!res.ok || !body.ok || !body.challengeId) {
+          if (body.error === "too_recent" || body.error === "too_many") {
+            setResendIn(body.retryAfterSeconds ?? 30);
+          }
+          reportError(body.error, humanError(body.error, body.retryAfterSeconds));
+          return;
+        }
+        setChallengeId(body.challengeId);
+        setStep("code");
+        setResendIn(45);
+      } catch {
+        reportError("network_error", "Network hiccup. Try again.");
+      } finally {
+        setSendingOtp(false);
+      }
+    },
+    [identifier, identifierValid, isPreview, sendingOtp, intent, clientId, reportError, baseUrl]
+  );
+  const onSubmitCode = useCallback3(
+    async (e) => {
+      e?.preventDefault();
+      if (isPreview || verifyingOtp || code.length !== 6 || !challengeId) return;
+      setError(null);
+      setVerifyingOtp(true);
+      try {
+        const res = await fetch(`${baseUrl}/api/auth/otp/verify`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: isSameOrigin(baseUrl) ? "include" : "omit",
+          body: JSON.stringify({ challengeId, code })
+        });
+        const body = unwrapEnvelope(await res.json().catch(() => ({})));
+        if (!res.ok || !body.ok) {
+          reportError(body.error, humanError(body.error));
+          return;
+        }
+        applyLanding(body);
+      } catch {
+        reportError("network_error", "Network hiccup. Try again.");
+      } finally {
+        setVerifyingOtp(false);
+      }
+    },
+    [code, challengeId, isPreview, verifyingOtp, applyLanding, reportError, baseUrl]
+  );
+  useEffect4(() => {
+    if (step !== "code") return;
+    if (code.length !== 6) return;
+    if (verifyingOtp || isPreview || !challengeId) return;
+    if (autoSubmittedCodeRef.current === code) return;
+    autoSubmittedCodeRef.current = code;
+    void onSubmitCode();
+  }, [code, step, verifyingOtp, isPreview, challengeId, onSubmitCode]);
+  const onPasskey = useCallback3(async () => {
+    if (isPreview || passkeyBusy) return;
     setError(null);
+    setPasskeyBusy(true);
     try {
-      const res = await fetch(`${ctx.baseUrl}/api/auth/otp/start`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        credentials: isSameOrigin(ctx.baseUrl) ? "include" : "omit",
-        body: JSON.stringify({
-          email: email.trim(),
-          intent: "app",
-          clientId: ctx.clientId
-        })
-      });
-      const body = await res.json();
-      if (!res.ok || !body.success || !body.data?.challengeId) {
-        return fail(body.errorMessage ?? "otp_start_failed");
+      const result = await runPasskeySignIn(baseUrl, clientId);
+      if (!result.ok) {
+        if (result.error === "passkey_cancelled") {
+          onResult?.({ ok: false, error: result.error });
+          return;
+        }
+        reportError(result.error, result.message ?? humanError(result.error) ?? "Passkey verification failed.");
+        return;
       }
-      setChallengeId(body.data.challengeId);
-      setStep("code");
-    } catch (e2) {
-      fail("network", e2 instanceof Error ? e2.message : void 0);
+      applyLanding({ next_step: "done", redirect: result.redirect, token: result.token });
     } finally {
-      setBusy(false);
+      setPasskeyBusy(false);
     }
-  }
-  async function verifyOtp(e) {
-    e.preventDefault();
-    if (!challengeId) return;
-    if (code.trim().length !== 6) return fail("invalid_input", copy.errorEnterCode);
-    setBusy(true);
+  }, [isPreview, passkeyBusy, baseUrl, clientId, applyLanding, reportError, onResult]);
+  const usernameAbortRef = useRef3(null);
+  useEffect4(() => {
+    if (step !== "username") return;
+    const candidate = usernameValue.trim().toLowerCase();
+    if (!candidate) {
+      setUsernameCheck({ kind: "idle" });
+      return;
+    }
+    setUsernameCheck({ kind: "checking" });
+    const t = setTimeout(() => {
+      usernameAbortRef.current?.abort();
+      const ctrl = new AbortController();
+      usernameAbortRef.current = ctrl;
+      const init = authInit();
+      fetch(`${baseUrl}/api/onboarding/username/check?u=${encodeURIComponent(candidate)}`, {
+        signal: ctrl.signal,
+        headers: init.headers,
+        credentials: init.credentials
+      }).then((r) => r.json()).then((raw) => unwrapEnvelope(raw)).then((b) => {
+        if (b.ok === false) {
+          setUsernameCheck({ kind: "rejected", reason: b.reason ?? "invalid" });
+          return;
+        }
+        if (b.available) setUsernameCheck({ kind: "available" });
+        else setUsernameCheck({ kind: "rejected", reason: b.reason ?? "taken" });
+      }).catch((err) => {
+        if (err.name !== "AbortError") setUsernameCheck({ kind: "idle" });
+      });
+    }, 220);
+    return () => clearTimeout(t);
+  }, [usernameValue, step, baseUrl]);
+  const onSubmitUsername = useCallback3(
+    async (auto) => {
+      if (onboardingBusy || isPreview) return;
+      setError(null);
+      setOnboardingBusy(auto ? "skip" : "claim");
+      try {
+        const init = authInit();
+        const res = await fetch(`${baseUrl}/api/onboarding/username`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json", ...init.headers },
+          credentials: init.credentials,
+          body: JSON.stringify(auto ? {} : { username: usernameValue.trim().toLowerCase() })
+        });
+        const body = unwrapEnvelope(await res.json().catch(() => ({})));
+        if (!res.ok || !body.ok) {
+          reportError(body.error, humanError(body.error));
+          return;
+        }
+        applyLanding(body);
+      } catch {
+        reportError("network_error", "Network hiccup. Try again.");
+      } finally {
+        setOnboardingBusy(null);
+      }
+    },
+    [usernameValue, isPreview, onboardingBusy, applyLanding, reportError, baseUrl]
+  );
+  const onAddPasskey = useCallback3(async () => {
+    if (onboardingBusy || isPreview) return;
     setError(null);
+    setOnboardingBusy("add");
     try {
-      const res = await fetch(`${ctx.baseUrl}/api/auth/otp/verify`, {
-        method: "POST",
-        headers: { "content-type": "application/json" },
-        credentials: isSameOrigin(ctx.baseUrl) ? "include" : "omit",
-        body: JSON.stringify({ challengeId, code: code.trim() })
-      });
-      const body = await res.json();
-      if (!res.ok || !body.success) {
-        return fail(body.errorMessage ?? "otp_verify_failed");
+      const surface = intent === "app" ? "app" : intent;
+      const result = await runPasskeyRegister(baseUrl, surface);
+      if (!result.ok) {
+        if (result.error === "passkey_cancelled") return;
+        reportError(
+          result.error,
+          result.message ?? humanError(result.error) ?? "Passkey couldn't be added. Try again or skip for now."
+        );
+        return;
       }
-      if (body.data?.token) setElvixToken(body.data.token);
-      setStep("done");
-      onResult?.({
-        ok: true,
-        method: "email_otp",
-        redirect: body.data?.redirect ?? redirectAfterSignIn,
-        token: body.data?.token
-      });
-    } catch (e2) {
-      fail("network", e2 instanceof Error ? e2.message : void 0);
+      onResult?.({ ok: true, redirect: finalRedirect });
+      if (onAuthenticated) {
+        onAuthenticated({ ok: true, redirect: finalRedirect });
+        return;
+      }
+      window.location.href = finalRedirect;
     } finally {
-      setBusy(false);
+      setOnboardingBusy(null);
     }
-  }
-  const labelStyle = {
-    display: "block",
-    textAlign: "left",
-    fontSize: 12.5,
-    fontWeight: 500,
-    color: "#52525b",
-    marginBottom: 6
-  };
-  const inputStyle = {
-    boxSizing: "border-box",
-    width: "100%",
-    height: 44,
-    padding: "0 14px",
-    borderRadius: 10,
-    border: "1px solid rgba(0,0,0,0.14)",
-    background: "#fff",
-    color: "#18181b",
-    fontSize: 14,
-    outline: "none"
-  };
-  const primaryBtnStyle = {
-    boxSizing: "border-box",
-    width: "100%",
-    height: 44,
-    marginTop: 10,
-    border: "1px solid rgba(0,0,0,0.08)",
-    borderRadius: 10,
-    background: brand,
-    color: onBrand,
-    fontSize: 14,
-    fontWeight: 600,
-    cursor: busy ? "not-allowed" : "pointer",
-    opacity: busy ? 0.65 : 1,
-    backgroundImage: "linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%)",
-    boxShadow: "0 1px 0 rgba(255,255,255,0.06) inset, 0 2px 3px -1px rgba(0,0,0,0.18), 0 0 0 1px rgba(25,28,33,0.06)"
-  };
-  const googleBtnStyle = {
-    boxSizing: "border-box",
-    width: "100%",
-    height: 44,
-    display: "inline-flex",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: 10,
-    border: "1px solid rgba(0,0,0,0.14)",
-    borderRadius: 10,
-    background: "#fff",
-    color: "#18181b",
-    fontSize: 14,
-    fontWeight: 500,
-    cursor: busy ? "not-allowed" : "pointer",
-    opacity: busy ? 0.65 : 1
-  };
-  const tileTint = hexToRgba(brand, 0.12);
-  const root = `${className}`.trim() || void 0;
-  return /* @__PURE__ */ jsxs5("div", { className: root, style: cardStyle, "data-elvix-pane": step, children: [
-    /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12 }, children: [
-      /* @__PURE__ */ jsx6(
-        "div",
-        {
-          style: {
-            width: 52,
-            height: 52,
-            borderRadius: 14,
-            display: "grid",
-            placeItems: "center",
-            overflow: "hidden",
-            background: logoSrc ? "#fff" : tileTint,
-            border: "1px solid rgba(0,0,0,0.08)"
-          },
-          children: logoSrc ? (
-            // biome-ignore lint/a11y/useAltText: alt is set
-            /* @__PURE__ */ jsx6(
-              "img",
+  }, [intent, isPreview, onboardingBusy, finalRedirect, onAuthenticated, onResult, reportError, baseUrl]);
+  const onSkipPasskey = useCallback3(() => {
+    if (onboardingBusy) return;
+    setOnboardingBusy("skip");
+    onResult?.({ ok: true, redirect: finalRedirect });
+    if (onAuthenticated) {
+      onAuthenticated({ ok: true, redirect: finalRedirect });
+      return;
+    }
+    window.location.href = finalRedirect;
+  }, [onboardingBusy, finalRedirect, onAuthenticated, onResult]);
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    showHeader && /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "gap-3 mb-6 " + (layout === "left" ? "flex items-center text-left" : layout === "banner" ? "-mx-7 -mt-7 px-7 py-6 flex flex-col items-center text-center border-b border-border-base" : "flex flex-col items-center text-center"),
+        style: layout === "banner" ? { background: `linear-gradient(135deg, ${brandColor}24, ${brandColor}08)` } : void 0,
+        children: [
+          (() => {
+            const letter = /* @__PURE__ */ jsx7(
+              "div",
               {
-                src: logoSrc,
-                alt: appName,
-                style: { width: "100%", height: "100%", objectFit: "cover" }
+                className: "size-12 rounded-[10px] border border-border-base grid place-items-center overflow-hidden transition" + (websiteUrl ? " hover:border-border-strong hover:shadow-sm" : ""),
+                style: { background: `${brandColor}1a` },
+                children: /* @__PURE__ */ jsx7("span", { className: "text-[18px] font-semibold", style: { color: brandColor }, children: appName?.[0]?.toUpperCase() ?? "?" })
               }
-            )
-          ) : /* @__PURE__ */ jsx6("span", { style: { fontSize: 22, fontWeight: 700, color: brand }, children: appName.charAt(0).toUpperCase() || "?" })
-        }
-      ),
-      /* @__PURE__ */ jsxs5("div", { children: [
-        /* @__PURE__ */ jsx6("h2", { style: { margin: 0, fontSize: 19, fontWeight: 600, letterSpacing: "-0.01em" }, children: step === "code" ? "Check your inbox" : title }),
-        step !== "done" && /* @__PURE__ */ jsx6("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#71717a" }, children: step === "code" ? fillCopy(copy.codeSentSubtitle ?? "", { email }) : copy.subtitle })
-      ] })
-    ] }),
-    step === "done" && /* @__PURE__ */ jsx6("p", { style: { margin: 0, fontSize: 14, color: "#18181b" }, children: copy.signedInText }),
-    step === "identify" && /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: 14 }, children: [
-      showGoogle && /* @__PURE__ */ jsxs5(
-        "button",
+            );
+            const bareImg = (src) => /* @__PURE__ */ jsx7("img", { src, alt: appName, className: "h-10 w-auto max-w-[220px] object-contain" });
+            let inner;
+            if (logoNode) {
+              inner = /* @__PURE__ */ jsx7("div", { className: "inline-flex items-center justify-center min-h-12 max-w-[220px]", children: logoNode });
+            } else if (theme === "dark") {
+              inner = logoUrlDark ? bareImg(logoUrlDark) : letter;
+            } else if (theme === "auto" && logoUrlDark && logoUrl) {
+              inner = /* @__PURE__ */ jsxs6("picture", { children: [
+                /* @__PURE__ */ jsx7("source", { srcSet: logoUrlDark, media: "(prefers-color-scheme: dark)" }),
+                /* @__PURE__ */ jsx7(
+                  "img",
+                  {
+                    src: logoUrl,
+                    alt: appName,
+                    className: "h-10 w-auto max-w-[220px] object-contain"
+                  }
+                )
+              ] });
+            } else if (logoUrl) {
+              inner = bareImg(logoUrl);
+            } else {
+              inner = letter;
+            }
+            return websiteUrl ? /* @__PURE__ */ jsx7(
+              "a",
+              {
+                href: websiteUrl,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": `Visit ${appName} website`,
+                className: "cursor-pointer",
+                children: inner
+              }
+            ) : inner;
+          })(),
+          /* @__PURE__ */ jsxs6("div", { children: [
+            /* @__PURE__ */ jsx7("div", { className: "text-[18px] font-semibold tracking-tight text-fg-1", children: step === "code" ? "Check your inbox" : step === "username" ? "Pick a username" : step === "passkey" ? `${signInVerb === "login" ? "Log in" : "Sign in"} faster next time` : step === "recover" ? `Welcome back to ${recoverState?.appName ?? appName}` : `${signInVerb === "login" ? "Log in" : "Sign in"} to ${appName || "your app"}` }),
+            /* @__PURE__ */ jsx7("div", { className: "text-[12.5px] text-fg-3 mt-0.5", children: step === "code" ? `We sent a code to ${identifier}` : step === "username" ? `This is how people see you${appName ? ` on ${appName}` : ""}.` : step === "passkey" ? "Touch ID, Face ID, or your security key. No more email codes." : step === "recover" ? "Pick whether to come back or stay away." : "Pick how you want to continue." }),
+            step === "identifier" && belowHeading
+          ] })
+        ]
+      }
+    ),
+    step === "code" ? /* @__PURE__ */ jsxs6("form", { onSubmit: onSubmitCode, className: "space-y-3", children: [
+      /* @__PURE__ */ jsx7(
+        OtpInput,
         {
-          type: "button",
-          onClick: startGoogle,
-          disabled: busy,
-          style: googleBtnStyle,
-          "data-elvix-method": "google",
-          children: [
-            /* @__PURE__ */ jsx6(GoogleG, {}),
-            /* @__PURE__ */ jsx6("span", { children: copy.googleButton })
-          ]
+          value: code,
+          onChange: setCode,
+          disabled: isPreview || verifyingOtp,
+          autoFocus: true
         }
       ),
-      showDivider && /* @__PURE__ */ jsxs5(
-        "div",
+      /* @__PURE__ */ jsx7(
+        "button",
         {
-          "aria-hidden": true,
-          style: { display: "flex", alignItems: "center", gap: 12, color: "#a1a1aa" },
-          children: [
-            /* @__PURE__ */ jsx6("span", { style: { flex: 1, height: 1, background: "rgba(0,0,0,0.08)" } }),
-            /* @__PURE__ */ jsx6("span", { style: { fontSize: 11, fontWeight: 600, letterSpacing: "0.08em" }, children: "OR" }),
-            /* @__PURE__ */ jsx6("span", { style: { flex: 1, height: 1, background: "rgba(0,0,0,0.08)" } })
-          ]
+          type: "submit",
+          disabled: verifyingOtp || code.length !== 6,
+          className: "cursor-pointer w-full inline-flex items-center justify-center h-9 px-4 rounded-[10px] font-semibold text-[13px] tracking-tight transition hover:brightness-[0.94] active:brightness-[0.88] disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:brightness-100",
+          style: ctaStyle,
+          children: /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1.5", style: ctaLabelStyle, children: [
+            verifyingOtp ? /* @__PURE__ */ jsx7(Loader2, { className: "size-4 animate-spin" }) : "Verify",
+            !verifyingOtp && /* @__PURE__ */ jsx7("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7(
+              "path",
+              {
+                d: "M7.75 5L4.25 2.75V7.25L7.75 5Z",
+                fill: "currentColor",
+                stroke: "currentColor",
+                opacity: "0.6",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            ) })
+          ] })
         }
       ),
-      showEmail && /* @__PURE__ */ jsxs5("form", { onSubmit: startOtp, "data-elvix-method": "email_otp", children: [
-        /* @__PURE__ */ jsx6("label", { htmlFor: "elvix-email", style: labelStyle, children: "Email" }),
-        /* @__PURE__ */ jsx6(
-          "input",
+      /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between pt-1", children: [
+        /* @__PURE__ */ jsxs6(
+          "button",
           {
-            id: "elvix-email",
-            type: "email",
-            value: email,
-            onChange: (ev) => setEmail(ev.target.value),
-            placeholder: copy.emailPlaceholder,
-            required: true,
-            disabled: busy,
-            autoComplete: "email",
-            style: inputStyle
+            type: "button",
+            onClick: () => {
+              setStep("identifier");
+              setCode("");
+              setError(null);
+            },
+            className: "cursor-pointer inline-flex items-center gap-1 text-[12px] text-fg-2 hover:text-fg-1 hover:bg-surface-hover rounded-md px-2 -mx-2 py-1 transition",
+            children: [
+              /* @__PURE__ */ jsx7(ArrowLeft, { className: "size-3" }),
+              " Use a different email"
+            ]
           }
         ),
-        /* @__PURE__ */ jsx6("button", { type: "submit", disabled: busy, style: primaryBtnStyle, children: busy ? copy.sendingLabel : copy.sendCodeButton })
-      ] })
-    ] }),
-    step === "code" && /* @__PURE__ */ jsxs5("form", { onSubmit: verifyOtp, children: [
-      /* @__PURE__ */ jsx6("label", { htmlFor: "elvix-code", style: labelStyle, children: "Verification code" }),
-      /* @__PURE__ */ jsx6(
-        "input",
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            disabled: resendIn > 0 || sendingOtp,
+            onClick: () => onSubmitIdentifier(),
+            className: "cursor-pointer text-[12px] text-fg-2 hover:text-fg-1 disabled:opacity-50 disabled:cursor-not-allowed disabled:text-fg-3 transition",
+            children: resendIn > 0 ? `Resend in ${resendIn}s` : "Resend code"
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx7("p", { className: "text-[11.5px] text-red-400 text-center", children: error })
+    ] }) : step === "username" ? /* @__PURE__ */ jsxs6("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx7("label", { htmlFor: "onboarding-username", className: "block text-[12px] text-fg-3 mb-1.5", children: "Username" }),
+        /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx7("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-[14px] text-fg-3 pointer-events-none", children: "@" }),
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              id: "onboarding-username",
+              type: "text",
+              autoFocus: true,
+              autoComplete: "username",
+              value: usernameValue,
+              minLength: 4,
+              maxLength: 30,
+              onChange: (e) => setUsernameValue(e.target.value),
+              placeholder: "yourname",
+              disabled: onboardingBusy !== null,
+              className: "w-full h-11 pl-7 pr-10 rounded-[10px] bg-surface border border-border-strong text-[14px] text-fg-1 placeholder:text-placeholder focus:outline-none focus:border-[#8e7dff] focus:ring-2 focus:ring-[#8e7dff]/20 transition disabled:opacity-60 disabled:cursor-not-allowed"
+            }
+          ),
+          usernameCheck.kind === "checking" && /* @__PURE__ */ jsx7(Loader2, { className: "size-4 text-fg-3 absolute right-3 top-1/2 -translate-y-1/2 animate-spin pointer-events-none" }),
+          usernameCheck.kind === "available" && /* @__PURE__ */ jsx7(Check, { className: "size-4 text-emerald-500 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" }),
+          usernameCheck.kind === "rejected" && /* @__PURE__ */ jsx7(X2, { className: "size-4 text-red-500 absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none" })
+        ] }),
+        /* @__PURE__ */ jsxs6("p", { className: "text-[11px] mt-1.5 leading-relaxed min-h-[14px]", children: [
+          usernameCheck.kind === "idle" && /* @__PURE__ */ jsx7("span", { className: "text-fg-3", children: "4\u201330 chars, a\u2013z 0\u20139 . _ \u2014 must start with a letter." }),
+          usernameCheck.kind === "checking" && /* @__PURE__ */ jsx7("span", { className: "text-fg-3", children: "Checking\u2026" }),
+          usernameCheck.kind === "available" && /* @__PURE__ */ jsx7("span", { className: "text-emerald-500", children: "Looks good. This one's yours." }),
+          usernameCheck.kind === "rejected" && /* @__PURE__ */ jsx7("span", { className: "text-red-500", children: usernameReasonLabel(usernameCheck.reason) })
+        ] })
+      ] }),
+      usernameSuggestions.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx7("div", { className: "text-[11px] uppercase tracking-[0.08em] text-fg-3", children: "Suggestions" }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5 overflow-x-auto whitespace-nowrap pb-0.5 [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden", children: [
+          usernameSuggestions.slice(0, 3).map((s) => /* @__PURE__ */ jsxs6(
+            "button",
+            {
+              type: "button",
+              disabled: onboardingBusy !== null,
+              onClick: () => setUsernameValue(s),
+              className: "cursor-pointer shrink-0 inline-flex items-center h-7 px-2.5 rounded-full bg-surface-hover border border-border-base hover:border-border-strong hover:bg-surface-active transition text-[12px] text-fg-2 font-mono disabled:opacity-60 disabled:cursor-not-allowed",
+              children: [
+                "@",
+                s
+              ]
+            },
+            s
+          )),
+          /* @__PURE__ */ jsx7(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSubmitUsername(true),
+              disabled: onboardingBusy !== null,
+              className: "cursor-pointer shrink-0 inline-flex items-center gap-1 h-7 px-2.5 rounded-full border border-dashed border-border-base hover:border-border-strong hover:bg-surface-hover transition text-[12px] text-fg-3 hover:text-fg-1 disabled:opacity-60 disabled:cursor-not-allowed",
+              children: onboardingBusy === "skip" ? /* @__PURE__ */ jsx7(Loader2, { className: "size-3.5 animate-spin" }) : "Skip"
+            }
+          )
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx7("p", { className: "text-[11.5px] text-red-400", children: error }),
+      /* @__PURE__ */ jsx7(
+        "button",
         {
-          id: "elvix-code",
-          type: "text",
-          inputMode: "numeric",
-          pattern: "[0-9]*",
-          maxLength: 6,
-          value: code,
-          onChange: (ev) => setCode(ev.target.value.replace(/\D/g, "")),
-          placeholder: copy.codePlaceholder,
-          required: true,
-          disabled: busy,
-          autoComplete: "one-time-code",
-          autoFocus: true,
-          style: { ...inputStyle, letterSpacing: "0.3em", textAlign: "center", fontSize: 18 }
+          type: "button",
+          onClick: () => onSubmitUsername(false),
+          disabled: onboardingBusy !== null || usernameCheck.kind !== "available",
+          className: "cursor-pointer w-full inline-flex items-center justify-center h-9 px-4 rounded-[10px] font-semibold text-[13px] tracking-tight transition hover:brightness-[0.94] active:brightness-[0.88] disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:brightness-100",
+          style: ctaStyle,
+          children: /* @__PURE__ */ jsx7("span", { className: "inline-flex items-center gap-1.5", style: ctaLabelStyle, children: onboardingBusy === "claim" ? /* @__PURE__ */ jsx7(Loader2, { className: "size-4 animate-spin" }) : `Claim @${usernameValue || "yourname"}` })
+        }
+      )
+    ] }) : step === "passkey" ? /* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxs6("ul", { className: "text-[12.5px] text-fg-2 leading-relaxed space-y-1.5", children: [
+        /* @__PURE__ */ jsxs6("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx7("span", { className: "mt-1.5 size-1 rounded-full", style: { background: brandColor } }),
+          /* @__PURE__ */ jsx7("span", { children: "No more password or email codes" })
+        ] }),
+        /* @__PURE__ */ jsxs6("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx7("span", { className: "mt-1.5 size-1 rounded-full", style: { background: brandColor } }),
+          /* @__PURE__ */ jsx7("span", { children: "Phish-proof \u2014 works only on this site" })
+        ] }),
+        /* @__PURE__ */ jsxs6("li", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx7("span", { className: "mt-1.5 size-1 rounded-full", style: { background: brandColor } }),
+          /* @__PURE__ */ jsx7("span", { children: "Syncs across your devices via iCloud / Google / 1Password" })
+        ] })
+      ] }),
+      error && /* @__PURE__ */ jsx7("p", { className: "text-[11.5px] text-red-400", children: error }),
+      /* @__PURE__ */ jsx7(
+        "button",
+        {
+          type: "button",
+          onClick: onAddPasskey,
+          disabled: onboardingBusy !== null,
+          className: "cursor-pointer w-full inline-flex items-center justify-center h-9 px-4 rounded-[10px] font-semibold text-[13px] tracking-tight transition hover:brightness-[0.94] active:brightness-[0.88] disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:brightness-100",
+          style: ctaStyle,
+          children: /* @__PURE__ */ jsx7("span", { className: "inline-flex items-center gap-1.5", style: ctaLabelStyle, children: onboardingBusy === "add" ? /* @__PURE__ */ jsx7(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsxs6(Fragment3, { children: [
+            /* @__PURE__ */ jsx7(Fingerprint, { className: "size-4" }),
+            " Add a passkey"
+          ] }) })
         }
       ),
-      /* @__PURE__ */ jsx6("button", { type: "submit", disabled: busy, style: primaryBtnStyle, children: busy ? copy.verifyingLabel : submitLabel }),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
-          onClick: () => {
-            setStep("identify");
-            setCode("");
-            setError(null);
-          },
-          disabled: busy,
-          style: {
-            marginTop: 12,
-            background: "none",
-            border: "none",
-            color: "#71717a",
-            fontSize: 12.5,
-            cursor: busy ? "not-allowed" : "pointer"
+          onClick: onSkipPasskey,
+          disabled: onboardingBusy !== null,
+          className: "cursor-pointer w-full inline-flex items-center justify-center h-9 px-3 rounded-[8px] text-[13px] text-fg-2 hover:text-fg-1 hover:bg-surface-hover transition disabled:opacity-60 disabled:cursor-not-allowed",
+          children: onboardingBusy === "skip" ? /* @__PURE__ */ jsx7(Loader2, { className: "size-4 animate-spin" }) : "Skip for now"
+        }
+      )
+    ] }) : step === "recover" && recoverState ? (
+      // Recovery gateway — user just signed back in to an app where
+      // their membership is in a reversible off-state. Sign-in won't
+      // complete until they pick Restore or Cancel. The SDK
+      // component handles the API call; we just route the result
+      // (final redirect on restore, sign-in URL on cancel).
+      /* @__PURE__ */ jsx7(
+        ElvixRecoverGate,
+        {
+          baseUrl,
+          appName: recoverState.appName,
+          state: recoverState.state,
+          sinceAt: recoverState.sinceAt,
+          onRestore: ({ redirect }) => {
+            if (onAuthenticated) {
+              onAuthenticated({ ok: true, redirect });
+            } else {
+              window.location.href = redirect;
+            }
           },
-          children: "Use a different email"
+          onCancel: ({ redirect }) => {
+            window.location.href = redirect;
+          }
         }
       )
-    ] }),
-    error && /* @__PURE__ */ jsx6("p", { role: "alert", style: { margin: 0, fontSize: 12.5, color: "#dc2626" }, children: error }),
-    hasLegal && step !== "done" && /* @__PURE__ */ jsxs5("p", { style: { margin: 0, fontSize: 11.5, lineHeight: 1.5, color: "#a1a1aa" }, children: [
-      "By continuing, you agree to ",
-      appName,
-      "'s",
-      " ",
-      termsUrl && /* @__PURE__ */ jsx6(
-        "a",
+    ) : !anyMethod ? /* @__PURE__ */ jsx7("div", { className: "rounded-[10px] border border-dashed border-border-base bg-surface-hover py-8 px-4 text-center", children: /* @__PURE__ */ jsx7("p", { className: "text-[12.5px] text-fg-3", children: "Enable at least one method to preview the sign-in." }) }) : /* @__PURE__ */ jsxs6("form", { onSubmit: onSubmitIdentifier, className: "space-y-2", children: [
+      gisEnabled && googleClientId && /* @__PURE__ */ jsx7(
+        GoogleOneTap,
         {
-          href: termsUrl,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { color: "#71717a", textDecoration: "underline" },
-          children: "Terms of Service"
+          baseUrl,
+          clientId: googleClientId,
+          intent,
+          appClientId: clientId,
+          renderButton: useGisRenderedButton,
+          buttonContainerRef: gisButtonRef,
+          config: {
+            oneTap: googleConfig?.oneTap ?? false,
+            autoSelect: googleConfig?.autoSelect ?? false,
+            popup: googleConfig?.popup ?? false,
+            fedcm: googleConfig?.fedcm ?? false,
+            hostedDomain: googleConfig?.hostedDomain ?? ""
+          }
         }
       ),
-      termsUrl && privacyUrl && " \xB7 ",
-      privacyUrl && /* @__PURE__ */ jsx6(
-        "a",
+      (methodGoogle || methodPasskey) && /* @__PURE__ */ jsxs6(
+        "div",
         {
-          href: privacyUrl,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { color: "#71717a", textDecoration: "underline" },
-          children: "Privacy Policy"
+          className: socialLayout === "grid" && methodGoogle && methodPasskey ? "grid grid-cols-2 gap-2" : "space-y-2",
+          children: [
+            methodGoogle && (useGisRenderedButton ? (
+              // GIS-rendered button — respects ux_mode='popup' so the
+              // OAuth flow runs in a small window instead of a full-
+              // page redirect. Google styles this themselves; we
+              // reserve the slot at our button height so layout stays
+              // stable while GIS hydrates.
+              /* @__PURE__ */ jsx7(
+                "div",
+                {
+                  ref: gisButtonRef,
+                  className: "w-full min-h-10",
+                  "aria-label": "Continue with Google"
+                }
+              )
+            ) : /* @__PURE__ */ jsxs6(
+              "a",
+              {
+                href: isPreview ? "#" : `${baseUrl}/api/auth/google/start?intent=${intent}${clientId ? `&clientId=${clientId}` : ""}`,
+                onClick: isPreview ? (e) => e.preventDefault() : void 0,
+                className: "cursor-pointer w-full inline-flex items-center justify-center gap-2 h-10 rounded-[10px] font-medium text-[13px] border border-border-base bg-surface text-fg-1 hover:bg-surface-hover transition",
+                children: [
+                  /* @__PURE__ */ jsx7(GoogleGlyph, {}),
+                  socialLayout === "grid" && methodPasskey ? "Google" : "Continue with Google"
+                ]
+              }
+            )),
+            methodPasskey && /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                type: "button",
+                disabled: passkeyBusy,
+                onClick: isPreview ? void 0 : onPasskey,
+                className: "cursor-pointer w-full inline-flex items-center justify-center gap-2 h-10 rounded-[10px] font-medium text-[13px] border border-border-base bg-surface text-fg-1 hover:bg-surface-hover transition disabled:cursor-not-allowed disabled:opacity-60",
+                children: [
+                  passkeyBusy ? /* @__PURE__ */ jsx7(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx7(Fingerprint, { className: "size-4" }),
+                  socialLayout === "grid" && methodGoogle ? "Passkey" : "Continue with passkey"
+                ]
+              }
+            )
+          ]
         }
-      )
+      ),
+      (methodEmailOtp || methodUsername) && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+        (methodGoogle || methodPasskey) && /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-3 my-3", children: [
+          /* @__PURE__ */ jsx7("span", { className: "h-px flex-1 bg-border-base" }),
+          /* @__PURE__ */ jsx7("span", { className: "text-[11px] uppercase tracking-[0.08em] text-fg-3", children: "or" }),
+          /* @__PURE__ */ jsx7("span", { className: "h-px flex-1 bg-border-base" })
+        ] }),
+        /* @__PURE__ */ jsx7(
+          "input",
+          {
+            type: "text",
+            disabled: sendingOtp,
+            value: identifier,
+            onChange: (e) => setIdentifier(e.target.value),
+            placeholder: identifierPlaceholder,
+            "aria-label": identifierPlaceholder,
+            autoComplete: methodUsername ? "username" : "email",
+            inputMode: methodUsername ? "text" : "email",
+            className: "w-full h-10 px-3 rounded-[10px] bg-surface border border-border-strong text-[13px] text-fg-1 placeholder:text-placeholder focus:outline-none focus:border-[#8e7dff] focus:ring-2 focus:ring-[#8e7dff]/20 transition disabled:cursor-not-allowed"
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "submit",
+            disabled: !identifierValid || sendingOtp,
+            className: "cursor-pointer w-full inline-flex items-center justify-center h-9 px-4 mt-3 rounded-[10px] font-semibold text-[13px] tracking-tight transition hover:brightness-[0.94] active:brightness-[0.88] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:brightness-100",
+            style: ctaStyle,
+            children: /* @__PURE__ */ jsxs6("span", { className: "inline-flex items-center gap-1.5", style: ctaLabelStyle, children: [
+              sendingOtp ? /* @__PURE__ */ jsx7(Loader2, { className: "size-4 animate-spin" }) : "Continue",
+              !sendingOtp && /* @__PURE__ */ jsx7("svg", { width: "11", height: "10", viewBox: "0 0 11 10", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7(
+                "path",
+                {
+                  d: "M7.75 5L4.25 2.75V7.25L7.75 5Z",
+                  fill: "currentColor",
+                  stroke: "currentColor",
+                  opacity: "0.6",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            ] })
+          }
+        ),
+        error && /* @__PURE__ */ jsx7("p", { className: "text-[11.5px] text-red-400 text-center mt-1", children: error })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx6("div", { style: { display: "flex", justifyContent: "center", paddingTop: 2 }, children: /* @__PURE__ */ jsx6(ElvixSecuredBadge, { variant: "outline", theme: "light", size: "sm", accentColor: brand }) })
+    step === "identifier" && belowMethods,
+    /* @__PURE__ */ jsxs6("div", { className: "text-center mt-5 leading-[1.45]", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "text-[11.5px] text-placeholder", children: [
+        "By continuing, you agree to ",
+        appName || "the app",
+        "'s"
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "text-[11.5px] mt-1 flex items-center justify-center gap-1.5", children: [
+        /* @__PURE__ */ jsx7(LegalLink, { href: termsOfServiceUrl, children: "Terms of Service" }),
+        /* @__PURE__ */ jsx7("span", { className: "text-placeholder", children: "\xB7" }),
+        /* @__PURE__ */ jsx7(LegalLink, { href: privacyPolicyUrl, children: "Privacy Policy" })
+      ] })
+    ] })
   ] });
 }
-function hexToRgba(hex, alpha) {
-  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m) return hex;
-  let h = m[1];
-  if (h.length === 3)
-    h = h.split("").map((c) => c + c).join("");
-  const n = Number.parseInt(h, 16);
-  const r = n >> 16 & 255;
-  const g = n >> 8 & 255;
-  const b = n & 255;
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+function FramedPreview({ children }) {
+  const hDash = "repeating-linear-gradient(to right, rgba(0,0,0,0.22) 0 4px, transparent 4px 8px)";
+  const vDash = "repeating-linear-gradient(to bottom, rgba(0,0,0,0.22) 0 4px, transparent 4px 8px)";
+  const OVERSHOOT = 20;
+  return /* @__PURE__ */ jsxs6("div", { className: "relative bg-[#f5f5f6] dark:bg-surface-hover px-4 pt-4 pb-2", children: [
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute top-0 h-px pointer-events-none",
+        style: { left: -OVERSHOOT, right: -OVERSHOOT, backgroundImage: hDash }
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute bottom-0 h-px pointer-events-none",
+        style: { left: -OVERSHOOT, right: -OVERSHOOT, backgroundImage: hDash }
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute left-0 w-px pointer-events-none",
+        style: { top: -OVERSHOOT, bottom: -OVERSHOOT, backgroundImage: vDash }
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "absolute right-0 w-px pointer-events-none",
+        style: { top: -OVERSHOOT, bottom: -OVERSHOOT, backgroundImage: vDash }
+      }
+    ),
+    /* @__PURE__ */ jsx7("div", { className: "relative", children }),
+    /* @__PURE__ */ jsx7(
+      "div",
+      {
+        className: "relative mt-3 py-2.5 text-center text-[12px] font-medium text-fg-3",
+        style: {
+          backgroundImage: "repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,0.06) 6px 7px)"
+        },
+        children: "This is a preview"
+      }
+    )
+  ] });
+}
+function LegalLink({ href, children }) {
+  const base = "cursor-pointer font-semibold text-fg-2 underline underline-offset-2 decoration-fg-3/60 hover:text-fg-1 hover:decoration-fg-1 transition";
+  if (!href) return /* @__PURE__ */ jsx7("span", { className: base, children });
+  return /* @__PURE__ */ jsx7("a", { href, target: "_blank", rel: "noopener noreferrer", className: base, children });
+}
+function GoogleGlyph() {
+  return /* @__PURE__ */ jsxs6("svg", { viewBox: "0 0 18 18", className: "size-4", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx7(
+      "path",
+      {
+        fill: "#4285F4",
+        d: "M16.51 8.18c0-.58-.05-1.13-.15-1.66H9v3.14h4.21a3.6 3.6 0 0 1-1.56 2.36v1.96h2.52c1.47-1.36 2.34-3.36 2.34-5.8z"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "path",
+      {
+        fill: "#34A853",
+        d: "M9 17c2.1 0 3.87-.7 5.17-1.9l-2.52-1.96c-.7.47-1.6.74-2.65.74-2.04 0-3.77-1.38-4.38-3.23H2.02v2.03A8 8 0 0 0 9 17z"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "path",
+      {
+        fill: "#FBBC05",
+        d: "M4.62 10.65A4.8 4.8 0 0 1 4.36 9c0-.57.1-1.12.26-1.65V5.32H2.02A8 8 0 0 0 1 9c0 1.29.31 2.5.86 3.58l2.51-1.93z"
+      }
+    ),
+    /* @__PURE__ */ jsx7(
+      "path",
+      {
+        fill: "#EA4335",
+        d: "M9 4.77c1.14 0 2.17.4 2.98 1.17l2.23-2.23A7.84 7.84 0 0 0 9 1 8 8 0 0 0 1.86 5.32l2.51 1.93C5.23 5.17 6.96 4.77 9 4.77z"
+      }
+    )
+  ] });
+}
+function humanError(code, retryAfterSeconds) {
+  switch (code) {
+    case "too_recent":
+      return retryAfterSeconds ? `Wait ${retryAfterSeconds}s before requesting another code.` : "Wait a moment before requesting another code.";
+    case "too_many":
+      return retryAfterSeconds ? `Too many codes sent to this email. Try again in ${formatRetry(retryAfterSeconds)}.` : "Too many codes sent to this email. Try again later.";
+    case "invalid_code":
+      return "That code didn't work. Try again.";
+    case "expired":
+      return "That code expired. Send a new one.";
+    case "send_failed":
+      return "Couldn't send the email. Check the address.";
+    case "user_paused":
+      return "Your access has been paused. Contact support.";
+    case "user_banned":
+      return "Access denied.";
+    case "username_not_found":
+      return "No account with that username here.";
+    case "method_disabled":
+      return "That sign-in method isn't enabled for this app.";
+    default:
+      return "Something went wrong. Try again.";
+  }
+}
+function formatRetry(seconds) {
+  if (seconds < 60) return `${seconds}s`;
+  const m = Math.ceil(seconds / 60);
+  return m === 1 ? "1 minute" : `${m} minutes`;
+}
+function defaultRedirect(intent) {
+  switch (intent) {
+    case "console":
+      return "/console";
+    case "account":
+      return "/account";
+    default:
+      return "/";
+  }
+}
+function usernameReasonLabel(reason) {
+  switch (reason) {
+    case "blank":
+      return "Pick a username.";
+    case "too_short":
+      return "Min 4 characters.";
+    case "too_long":
+      return "Max 30 characters.";
+    case "only_numbers":
+      return "Cannot be all numbers.";
+    case "bad_start":
+      return "Must start with a letter.";
+    case "bad_chars":
+      return "Only a\u2013z, 0\u20139, dot, underscore.";
+    case "consecutive_special":
+      return "No two dots or underscores in a row.";
+    case "trailing_special":
+      return "Cannot end with a dot or underscore.";
+    case "taken":
+      return "That one's taken.";
+    default:
+      return "That username isn't valid.";
+  }
 }
 
 // src/react/elvix-sign-in-button.tsx
-import { useState as useState4 } from "react";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var ELVIX_URL2 = "https://elvix.is";
+import { useState as useState6 } from "react";
+
+// src/react/elvix-shield.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ElvixShield({
+  size,
+  fill,
+  accent
+}) {
+  return /* @__PURE__ */ jsxs7("svg", { width: size, height: size, viewBox: "2 2 20 20", "aria-hidden": true, style: { display: "block" }, children: [
+    /* @__PURE__ */ jsx8(
+      "path",
+      {
+        fill,
+        fillRule: "evenodd",
+        d: "M 6 2.5 C 4.34 2.5 3 3.84 3 5.5 L 3 12.5 C 3 17.5 7 20.7 12 22 C 17 20.7 21 17.5 21 12.5 L 21 5.5 C 21 3.84 19.66 2.5 18 2.5 L 6 2.5 Z M 12 8.4 C 9.79 8.4 8 10.19 8 12.4 C 8 14.61 9.79 16.4 12 16.4 C 13.21 16.4 14.3 15.86 15.04 15 L 13.6 13.77 C 13.21 14.23 12.64 14.5 12 14.5 C 11.04 14.5 10.21 13.86 9.91 13 L 15.95 13 C 15.98 12.8 16 12.6 16 12.4 C 16 10.19 14.21 8.4 12 8.4 Z M 9.91 11.8 L 14.09 11.8 C 13.79 10.94 12.96 10.3 12 10.3 C 11.04 10.3 10.21 10.94 9.91 11.8 Z"
+      }
+    ),
+    /* @__PURE__ */ jsx8("circle", { cx: "19.5", cy: "4.5", r: "2.4", fill: accent })
+  ] });
+}
+
+// src/react/elvix-sign-in-button.tsx
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var ELVIX_URL = "https://elvix.is";
 var PRESET_LABEL = {
   "sign-in-with-elvix": "Sign in with elvix",
   "continue-with-elvix": "Continue with elvix",
@@ -952,7 +2361,7 @@ function shieldColor(variant, theme) {
 }
 function ElvixSignInButton({
   clientId,
-  baseUrl = ELVIX_URL2,
+  baseUrl = ELVIX_URL,
   returnUrl,
   type = "standard",
   variant = "filled",
@@ -974,7 +2383,7 @@ function ElvixSignInButton({
   maxHeight
 }) {
   const sized = sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight });
-  const [embedOpen, setEmbedOpen] = useState4(false);
+  const [embedOpen, setEmbedOpen] = useState6(false);
   const isIcon = type === "icon";
   const resolvedLabel = label ?? PRESET_LABEL[preset];
   const tone = variantTone(variant, theme);
@@ -999,16 +2408,16 @@ function ElvixSignInButton({
     // Dimensional overrides win over the size preset above.
     ...sized
   };
-  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    /* @__PURE__ */ jsx7(ElvixShield, { size: ICON_SIZE[size], fill: shieldColor(variant, theme), accent: "#8e7dff" }),
-    isIcon ? null : /* @__PURE__ */ jsx7("span", { children: resolvedLabel })
+  const content = /* @__PURE__ */ jsxs8(Fragment4, { children: [
+    /* @__PURE__ */ jsx9(ElvixShield, { size: ICON_SIZE[size], fill: shieldColor(variant, theme), accent: "#8e7dff" }),
+    isIcon ? null : /* @__PURE__ */ jsx9("span", { children: resolvedLabel })
   ] });
   if (mode === "callback") {
-    return /* @__PURE__ */ jsx7("button", { type: "button", onClick, className, style, "aria-label": isIcon ? resolvedLabel : void 0, children: content });
+    return /* @__PURE__ */ jsx9("button", { type: "button", onClick, className, style, "aria-label": isIcon ? resolvedLabel : void 0, children: content });
   }
   if (mode === "embed") {
-    return /* @__PURE__ */ jsxs6("div", { "data-elvix-signin-button-embed": "", style: sized, children: [
-      !embedOpen && /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsxs8("div", { "data-elvix-signin-button-embed": "", style: sized, children: [
+      !embedOpen && /* @__PURE__ */ jsx9(
         "button",
         {
           type: "button",
@@ -1019,7 +2428,7 @@ function ElvixSignInButton({
           children: content
         }
       ),
-      embedOpen && /* @__PURE__ */ jsx7(
+      embedOpen && /* @__PURE__ */ jsx9(
         ElvixSignIn,
         {
           onResult: (r) => {
@@ -1036,18 +2445,95 @@ function ElvixSignInButton({
     const sep = base.includes("?") ? "&" : "?";
     return `${base}${sep}return=${encodeURIComponent(returnUrl)}`;
   })();
-  return /* @__PURE__ */ jsx7("a", { href: destination, className, style, "aria-label": isIcon ? resolvedLabel : void 0, children: content });
+  return /* @__PURE__ */ jsx9("a", { href: destination, className, style, "aria-label": isIcon ? resolvedLabel : void 0, children: content });
+}
+
+// src/react/elvix-secured-badge.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var ELVIX_URL2 = "https://elvix.is";
+var SIZE = {
+  sm: { height: 28, padX: 10, font: 11.5, icon: 14, gap: 6 },
+  md: { height: 32, padX: 12, font: 12.5, icon: 16, gap: 7 },
+  lg: { height: 36, padX: 14, font: 13, icon: 18, gap: 8 }
+};
+var TONE = {
+  white: {
+    light: { bg: "#ffffff", border: "#e4e4e7", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" },
+    dark: { bg: "#ffffff", border: "transparent", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" }
+  },
+  dark: {
+    light: { bg: "#0a0a0b", border: "rgba(0,0,0,0.1)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" },
+    dark: { bg: "#0a0a0b", border: "rgba(255,255,255,0.1)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" }
+  },
+  outline: {
+    light: { bg: "transparent", border: "rgba(0,0,0,0.15)", lead: "#71717a", brand: "#0a0a0b", shield: "#0a0a0b" },
+    dark: { bg: "transparent", border: "rgba(142,125,255,0.4)", lead: "#d4d4d8", brand: "#ffffff", shield: "#ffffff" }
+  }
+};
+function ElvixSecuredBadge({
+  variant = "white",
+  size = "md",
+  theme = "dark",
+  accentColor = "#8e7dff",
+  href = ELVIX_URL2,
+  className = "",
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight
+}) {
+  const s = SIZE[size];
+  const t = TONE[variant][theme];
+  const style = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: s.gap,
+    height: s.height,
+    paddingLeft: s.padX,
+    paddingRight: s.padX,
+    fontSize: s.font,
+    fontWeight: 500,
+    borderRadius: 9999,
+    background: t.bg,
+    border: `1px solid ${t.border}`,
+    color: t.brand,
+    textDecoration: "none",
+    userSelect: "none",
+    lineHeight: 1,
+    // Dimensional overrides win over the size preset above.
+    ...sizeStyle({ width, height, minWidth, maxWidth, minHeight, maxHeight })
+  };
+  return /* @__PURE__ */ jsxs9(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className,
+      style,
+      "data-elvix-secured-badge": "",
+      children: [
+        /* @__PURE__ */ jsx10(ElvixShield, { size: s.icon, fill: t.shield, accent: accentColor }),
+        /* @__PURE__ */ jsxs9("span", { style: { display: "inline-flex", alignItems: "baseline", gap: 4 }, children: [
+          /* @__PURE__ */ jsx10("span", { style: { color: t.lead }, children: "Secured by" }),
+          /* @__PURE__ */ jsx10("span", { style: { color: t.brand, fontWeight: 600 }, children: "elvix" })
+        ] })
+      ]
+    }
+  );
 }
 
 // src/react/hooks.ts
-import { useCallback, useEffect as useEffect2, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect5, useState as useState7 } from "react";
 var POLL_MS = 7e3;
 function useUserList(kind, opts) {
   const { applicationId, baseUrl = "", pollMs = POLL_MS } = opts;
-  const [slugs, setSlugs] = useState5([]);
-  const [loading, setLoading] = useState5(true);
-  const [error, setError] = useState5(null);
-  const refresh = useCallback(async () => {
+  const [slugs, setSlugs] = useState7([]);
+  const [loading, setLoading] = useState7(true);
+  const [error, setError] = useState7(null);
+  const refresh = useCallback4(async () => {
     setError(null);
     try {
       const res = await fetch(
@@ -1066,7 +2552,7 @@ function useUserList(kind, opts) {
       setLoading(false);
     }
   }, [applicationId, baseUrl, kind]);
-  useEffect2(() => {
+  useEffect5(() => {
     refresh();
     const id = setInterval(refresh, pollMs);
     return () => clearInterval(id);
@@ -1078,13 +2564,13 @@ var useUserScopes = (opts) => useUserList("scopes", opts);
 var useUserMemberships = (opts) => useUserList("memberships", opts);
 
 // src/react/lifecycle-watcher.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect6 } from "react";
 function ElvixLifecycleWatcher({
   baseUrl = "",
   pollMs = 7e3,
   onSignedOut
 }) {
-  useEffect3(() => {
+  useEffect6(() => {
     let cancelled = false;
     let fired = false;
     const poll = async () => {
@@ -1113,7 +2599,7 @@ function ElvixLifecycleWatcher({
 }
 
 // src/react/elvix-username.tsx
-import { useState as useState6 } from "react";
+import { useState as useState8 } from "react";
 
 // src/react/lib.ts
 async function appPost(opts, path, body) {
@@ -1171,7 +2657,7 @@ async function appDelete(opts, path) {
 }
 
 // src/react/elvix-username.tsx
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function ElvixUsername({
   onResult,
   width,
@@ -1183,10 +2669,10 @@ function ElvixUsername({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [value, setValue] = useState6("");
-  const [busy, setBusy] = useState6(false);
-  const [error, setError] = useState6(null);
-  const [done, setDone] = useState6(null);
+  const [value, setValue] = useState8("");
+  const [busy, setBusy] = useState8(false);
+  const [error, setError] = useState8(null);
+  const [done, setDone] = useState8(null);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -1206,17 +2692,17 @@ function ElvixUsername({
     onResult?.(result);
   }
   if (done) {
-    return /* @__PURE__ */ jsx8(ElvixCard, { title: "Username saved", ...sizeProps, children: /* @__PURE__ */ jsxs7("p", { children: [
+    return /* @__PURE__ */ jsx11(ElvixCard, { title: "Username saved", ...sizeProps, children: /* @__PURE__ */ jsxs10("p", { children: [
       "You are now ",
-      /* @__PURE__ */ jsxs7("strong", { children: [
+      /* @__PURE__ */ jsxs10("strong", { children: [
         "@",
         done
       ] }),
       "."
     ] }) });
   }
-  return /* @__PURE__ */ jsx8(ElvixCard, { title: "Choose a username", ...sizeProps, children: /* @__PURE__ */ jsxs7("form", { onSubmit: submit, className: "elvix-form", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(ElvixCard, { title: "Choose a username", ...sizeProps, children: /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: "elvix-form", children: [
+    /* @__PURE__ */ jsx11(
       "input",
       {
         type: "text",
@@ -1229,14 +2715,14 @@ function ElvixUsername({
         className: "elvix-input"
       }
     ),
-    /* @__PURE__ */ jsx8("button", { type: "submit", disabled: busy || value.length < 4, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Claim" }),
-    error && /* @__PURE__ */ jsx8("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx11("button", { type: "submit", disabled: busy || value.length < 4, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Claim" }),
+    error && /* @__PURE__ */ jsx11("p", { role: "alert", className: "elvix-error", children: error })
   ] }) });
 }
 
 // src/react/elvix-avatar.tsx
-import { useState as useState7 } from "react";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function ElvixAvatar({
   onResult,
   width,
@@ -1248,9 +2734,9 @@ function ElvixAvatar({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [busy, setBusy] = useState7(false);
-  const [error, setError] = useState7(null);
-  const [preview, setPreview] = useState7(null);
+  const [busy, setBusy] = useState9(false);
+  const [error, setError] = useState9(null);
+  const [preview, setPreview] = useState9(null);
   async function onFile(e) {
     const file = e.target.files?.[0];
     if (!file || !ctx.app) return;
@@ -1273,8 +2759,8 @@ function ElvixAvatar({
     if (!result.ok) setError(result.error);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs8(ElvixCard, { title: "Avatar", ...sizeProps, children: [
-    preview && /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs11(ElvixCard, { title: "Avatar", ...sizeProps, children: [
+    preview && /* @__PURE__ */ jsx12(
       "img",
       {
         src: preview,
@@ -1282,15 +2768,15 @@ function ElvixAvatar({
         style: { width: 96, height: 96, borderRadius: "50%", objectFit: "cover", marginBottom: 12 }
       }
     ),
-    /* @__PURE__ */ jsx9("input", { type: "file", accept: "image/png,image/jpeg,image/webp", onChange: onFile, disabled: busy }),
-    busy && /* @__PURE__ */ jsx9("p", { children: "Uploading\u2026" }),
-    error && /* @__PURE__ */ jsx9("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx12("input", { type: "file", accept: "image/png,image/jpeg,image/webp", onChange: onFile, disabled: busy }),
+    busy && /* @__PURE__ */ jsx12("p", { children: "Uploading\u2026" }),
+    error && /* @__PURE__ */ jsx12("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-banner.tsx
-import { useState as useState8 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function ElvixBanner({
   onResult,
   width,
@@ -1302,9 +2788,9 @@ function ElvixBanner({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [busy, setBusy] = useState8(false);
-  const [error, setError] = useState8(null);
-  const [preview, setPreview] = useState8(null);
+  const [busy, setBusy] = useState10(false);
+  const [error, setError] = useState10(null);
+  const [preview, setPreview] = useState10(null);
   async function onFile(e) {
     const file = e.target.files?.[0];
     if (!file || !ctx.app) return;
@@ -1327,8 +2813,8 @@ function ElvixBanner({
     if (!result.ok) setError(result.error);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs9(ElvixCard, { title: "Banner", ...sizeProps, children: [
-    preview && /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs12(ElvixCard, { title: "Banner", ...sizeProps, children: [
+    preview && /* @__PURE__ */ jsx13(
       "img",
       {
         src: preview,
@@ -1336,15 +2822,15 @@ function ElvixBanner({
         style: { width: "100%", aspectRatio: "16/9", objectFit: "cover", borderRadius: 10, marginBottom: 12 }
       }
     ),
-    /* @__PURE__ */ jsx10("input", { type: "file", accept: "image/png,image/jpeg,image/webp", onChange: onFile, disabled: busy }),
-    busy && /* @__PURE__ */ jsx10("p", { children: "Uploading\u2026" }),
-    error && /* @__PURE__ */ jsx10("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx13("input", { type: "file", accept: "image/png,image/jpeg,image/webp", onChange: onFile, disabled: busy }),
+    busy && /* @__PURE__ */ jsx13("p", { children: "Uploading\u2026" }),
+    error && /* @__PURE__ */ jsx13("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-identity-form.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useState as useState11 } from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function ElvixIdentityForm({
   initialName = "",
   initialBio = "",
@@ -1358,11 +2844,11 @@ function ElvixIdentityForm({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [name, setName] = useState9(initialName);
-  const [bio, setBio] = useState9(initialBio);
-  const [busy, setBusy] = useState9(false);
-  const [error, setError] = useState9(null);
-  const [saved, setSaved] = useState9(false);
+  const [name, setName] = useState11(initialName);
+  const [bio, setBio] = useState11(initialBio);
+  const [busy, setBusy] = useState11(false);
+  const [error, setError] = useState11(null);
+  const [saved, setSaved] = useState11(false);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -1378,24 +2864,24 @@ function ElvixIdentityForm({
     else setSaved(true);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsx11(ElvixCard, { title: "Identity", ...sizeProps, children: /* @__PURE__ */ jsxs10("form", { onSubmit: submit, className: "elvix-form", children: [
-    /* @__PURE__ */ jsxs10("label", { children: [
+  return /* @__PURE__ */ jsx14(ElvixCard, { title: "Identity", ...sizeProps, children: /* @__PURE__ */ jsxs13("form", { onSubmit: submit, className: "elvix-form", children: [
+    /* @__PURE__ */ jsxs13("label", { children: [
       "Name",
-      /* @__PURE__ */ jsx11("input", { value: name, onChange: (e) => setName(e.target.value), maxLength: 80, disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx14("input", { value: name, onChange: (e) => setName(e.target.value), maxLength: 80, disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsxs10("label", { children: [
+    /* @__PURE__ */ jsxs13("label", { children: [
       "Bio",
-      /* @__PURE__ */ jsx11("textarea", { value: bio, onChange: (e) => setBio(e.target.value), maxLength: 500, rows: 3, disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx14("textarea", { value: bio, onChange: (e) => setBio(e.target.value), maxLength: 500, rows: 3, disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsx11("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
-    saved && /* @__PURE__ */ jsx11("p", { className: "elvix-muted", children: "Saved." }),
-    error && /* @__PURE__ */ jsx11("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx14("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
+    saved && /* @__PURE__ */ jsx14("p", { className: "elvix-muted", children: "Saved." }),
+    error && /* @__PURE__ */ jsx14("p", { role: "alert", className: "elvix-error", children: error })
   ] }) });
 }
 
 // src/react/elvix-region.tsx
-import { useState as useState10 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 function ElvixRegion({
   initialCountry = "",
   initialTimezone = "",
@@ -1409,11 +2895,11 @@ function ElvixRegion({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [country, setCountry] = useState10(initialCountry);
-  const [timezone, setTimezone] = useState10(initialTimezone);
-  const [busy, setBusy] = useState10(false);
-  const [error, setError] = useState10(null);
-  const [saved, setSaved] = useState10(false);
+  const [country, setCountry] = useState12(initialCountry);
+  const [timezone, setTimezone] = useState12(initialTimezone);
+  const [busy, setBusy] = useState12(false);
+  const [error, setError] = useState12(null);
+  const [saved, setSaved] = useState12(false);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -1429,24 +2915,24 @@ function ElvixRegion({
     else setSaved(true);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsx12(ElvixCard, { title: "Region", ...sizeProps, children: /* @__PURE__ */ jsxs11("form", { onSubmit: submit, className: "elvix-form", children: [
-    /* @__PURE__ */ jsxs11("label", { children: [
+  return /* @__PURE__ */ jsx15(ElvixCard, { title: "Region", ...sizeProps, children: /* @__PURE__ */ jsxs14("form", { onSubmit: submit, className: "elvix-form", children: [
+    /* @__PURE__ */ jsxs14("label", { children: [
       "Country (ISO-2)",
-      /* @__PURE__ */ jsx12("input", { value: country, onChange: (e) => setCountry(e.target.value.toUpperCase()), maxLength: 2, pattern: "[A-Z]{2}", disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx15("input", { value: country, onChange: (e) => setCountry(e.target.value.toUpperCase()), maxLength: 2, pattern: "[A-Z]{2}", disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsxs11("label", { children: [
+    /* @__PURE__ */ jsxs14("label", { children: [
       "Timezone",
-      /* @__PURE__ */ jsx12("input", { value: timezone, onChange: (e) => setTimezone(e.target.value), placeholder: "Europe/Berlin", disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx15("input", { value: timezone, onChange: (e) => setTimezone(e.target.value), placeholder: "Europe/Berlin", disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsx12("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
-    saved && /* @__PURE__ */ jsx12("p", { className: "elvix-muted", children: "Saved." }),
-    error && /* @__PURE__ */ jsx12("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx15("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
+    saved && /* @__PURE__ */ jsx15("p", { className: "elvix-muted", children: "Saved." }),
+    error && /* @__PURE__ */ jsx15("p", { role: "alert", className: "elvix-error", children: error })
   ] }) });
 }
 
 // src/react/elvix-languages.tsx
-import { useState as useState11 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
 function ElvixLanguages({
   initial = [],
   onResult,
@@ -1459,10 +2945,10 @@ function ElvixLanguages({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [raw, setRaw] = useState11(initial.join(", "));
-  const [busy, setBusy] = useState11(false);
-  const [error, setError] = useState11(null);
-  const [saved, setSaved] = useState11(false);
+  const [raw, setRaw] = useState13(initial.join(", "));
+  const [busy, setBusy] = useState13(false);
+  const [error, setError] = useState13(null);
+  const [saved, setSaved] = useState13(false);
   async function submit(e) {
     e.preventDefault();
     if (!ctx.app) return;
@@ -1479,20 +2965,20 @@ function ElvixLanguages({
     else setSaved(true);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsx13(ElvixCard, { title: "Languages", ...sizeProps, children: /* @__PURE__ */ jsxs12("form", { onSubmit: submit, className: "elvix-form", children: [
-    /* @__PURE__ */ jsxs12("label", { children: [
+  return /* @__PURE__ */ jsx16(ElvixCard, { title: "Languages", ...sizeProps, children: /* @__PURE__ */ jsxs15("form", { onSubmit: submit, className: "elvix-form", children: [
+    /* @__PURE__ */ jsxs15("label", { children: [
       "Preferred languages (comma-separated BCP-47 tags)",
-      /* @__PURE__ */ jsx13("input", { value: raw, onChange: (e) => setRaw(e.target.value), placeholder: "en-GB, de-DE", disabled: busy, className: "elvix-input" })
+      /* @__PURE__ */ jsx16("input", { value: raw, onChange: (e) => setRaw(e.target.value), placeholder: "en-GB, de-DE", disabled: busy, className: "elvix-input" })
     ] }),
-    /* @__PURE__ */ jsx13("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
-    saved && /* @__PURE__ */ jsx13("p", { className: "elvix-muted", children: "Saved." }),
-    error && /* @__PURE__ */ jsx13("p", { role: "alert", className: "elvix-error", children: error })
+    /* @__PURE__ */ jsx16("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" }),
+    saved && /* @__PURE__ */ jsx16("p", { className: "elvix-muted", children: "Saved." }),
+    error && /* @__PURE__ */ jsx16("p", { role: "alert", className: "elvix-error", children: error })
   ] }) });
 }
 
 // src/react/elvix-sessions.tsx
-import { useEffect as useEffect4, useState as useState12 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useState as useState14 } from "react";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 function ElvixSessions({
   onResult,
   width,
@@ -1504,10 +2990,10 @@ function ElvixSessions({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [rows, setRows] = useState12(null);
-  const [error, setError] = useState12(null);
-  const [busy, setBusy] = useState12(false);
-  useEffect4(() => {
+  const [rows, setRows] = useState14(null);
+  const [error, setError] = useState14(null);
+  const [busy, setBusy] = useState14(false);
+  useEffect7(() => {
     if (!ctx.app) return;
     fetch(`${ctx.baseUrl}/api/account/apps/${ctx.app.applicationId}/sessions`, {
       ...authInit()
@@ -1527,29 +3013,29 @@ function ElvixSessions({
     if (result.ok) setRows((prev) => prev?.filter((s) => s.id !== id) ?? null);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs13(ElvixCard, { title: "Active sessions", ...sizeProps, children: [
-    error && /* @__PURE__ */ jsx14("p", { role: "alert", className: "elvix-error", children: error }),
-    !rows && !error && /* @__PURE__ */ jsx14("p", { children: "Loading\u2026" }),
-    rows && /* @__PURE__ */ jsx14("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: rows.map((s) => /* @__PURE__ */ jsx14("li", { style: { padding: "10px 0", borderBottom: "1px solid rgba(0,0,0,0.06)" }, children: /* @__PURE__ */ jsxs13("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-      /* @__PURE__ */ jsxs13("div", { children: [
-        /* @__PURE__ */ jsxs13("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
+  return /* @__PURE__ */ jsxs16(ElvixCard, { title: "Active sessions", ...sizeProps, children: [
+    error && /* @__PURE__ */ jsx17("p", { role: "alert", className: "elvix-error", children: error }),
+    !rows && !error && /* @__PURE__ */ jsx17("p", { children: "Loading\u2026" }),
+    rows && /* @__PURE__ */ jsx17("ul", { style: { listStyle: "none", padding: 0, margin: 0 }, children: rows.map((s) => /* @__PURE__ */ jsx17("li", { style: { padding: "10px 0", borderBottom: "1px solid rgba(0,0,0,0.06)" }, children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs16("div", { children: [
+        /* @__PURE__ */ jsxs16("div", { style: { fontSize: 13, fontWeight: 500 }, children: [
           s.device,
-          s.current && /* @__PURE__ */ jsx14("span", { style: { marginLeft: 8, color: "var(--elvix-primary-strong)", fontSize: 11 }, children: "\xB7 this device" })
+          s.current && /* @__PURE__ */ jsx17("span", { style: { marginLeft: 8, color: "var(--elvix-primary-strong)", fontSize: 11 }, children: "\xB7 this device" })
         ] }),
-        /* @__PURE__ */ jsxs13("div", { style: { fontSize: 11, color: "rgba(0,0,0,0.55)" }, children: [
+        /* @__PURE__ */ jsxs16("div", { style: { fontSize: 11, color: "rgba(0,0,0,0.55)" }, children: [
           s.country ?? "\u2014",
           " \xB7 since ",
           new Date(s.createdAt).toLocaleDateString()
         ] })
       ] }),
-      !s.current && /* @__PURE__ */ jsx14("button", { type: "button", disabled: busy, onClick: () => revoke(s.id), className: "elvix-btn elvix-btn-ghost", children: "Revoke" })
+      !s.current && /* @__PURE__ */ jsx17("button", { type: "button", disabled: busy, onClick: () => revoke(s.id), className: "elvix-btn elvix-btn-ghost", children: "Revoke" })
     ] }) }, s.id)) })
   ] });
 }
 
 // src/react/elvix-export.tsx
-import { useState as useState13 } from "react";
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 function ElvixExport({
   onResult,
   width,
@@ -1561,9 +3047,9 @@ function ElvixExport({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [busy, setBusy] = useState13(false);
-  const [done, setDone] = useState13(false);
-  const [error, setError] = useState13(null);
+  const [busy, setBusy] = useState15(false);
+  const [done, setDone] = useState15(false);
+  const [error, setError] = useState15(null);
   async function start() {
     if (!ctx.app) return;
     setBusy(true);
@@ -1578,16 +3064,16 @@ function ElvixExport({
     else setDone(true);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs14(ElvixCard, { title: "Export my data", ...sizeProps, children: [
-    /* @__PURE__ */ jsx15("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Request a zip of every record we hold for you in this app. Delivery by email; single-use download link valid for 24h." }),
-    done ? /* @__PURE__ */ jsx15("p", { className: "elvix-muted", children: "Request queued. Check your email." }) : /* @__PURE__ */ jsx15("button", { type: "button", onClick: start, disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Queuing\u2026" : "Request export" }),
-    error && /* @__PURE__ */ jsx15("p", { role: "alert", className: "elvix-error", children: error })
+  return /* @__PURE__ */ jsxs17(ElvixCard, { title: "Export my data", ...sizeProps, children: [
+    /* @__PURE__ */ jsx18("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Request a zip of every record we hold for you in this app. Delivery by email; single-use download link valid for 24h." }),
+    done ? /* @__PURE__ */ jsx18("p", { className: "elvix-muted", children: "Request queued. Check your email." }) : /* @__PURE__ */ jsx18("button", { type: "button", onClick: start, disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Queuing\u2026" : "Request export" }),
+    error && /* @__PURE__ */ jsx18("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-deactivate.tsx
-import { useState as useState14 } from "react";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState16 } from "react";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function ElvixDeactivate({
   onResult,
   width,
@@ -1599,11 +3085,11 @@ function ElvixDeactivate({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [pane, setPane] = useState14("warn");
-  const [challengeId, setChallengeId] = useState14(null);
-  const [code, setCode] = useState14("");
-  const [busy, setBusy] = useState14(false);
-  const [error, setError] = useState14(null);
+  const [pane, setPane] = useState16("warn");
+  const [challengeId, setChallengeId] = useState16(null);
+  const [code, setCode] = useState16("");
+  const [busy, setBusy] = useState16(false);
+  const [error, setError] = useState16(null);
   async function startChallenge() {
     if (!ctx.app) return;
     setBusy(true);
@@ -1641,16 +3127,16 @@ function ElvixDeactivate({
     onResult?.(result);
   }
   if (pane === "done") {
-    return /* @__PURE__ */ jsx16(ElvixCard, { title: "Deactivated", ...sizeProps, children: /* @__PURE__ */ jsx16("p", { children: "Your access has been paused. Sign in again to restore it." }) });
+    return /* @__PURE__ */ jsx19(ElvixCard, { title: "Deactivated", ...sizeProps, children: /* @__PURE__ */ jsx19("p", { children: "Your access has been paused. Sign in again to restore it." }) });
   }
-  return /* @__PURE__ */ jsxs15(ElvixCard, { title: "Deactivate account", ...sizeProps, children: [
-    pane === "warn" && /* @__PURE__ */ jsxs15(Fragment3, { children: [
-      /* @__PURE__ */ jsx16("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Pause your membership. You can restore it any time by signing in again. No data is deleted." }),
-      /* @__PURE__ */ jsx16("button", { type: "button", onClick: startChallenge, disabled: busy, className: "elvix-btn elvix-btn-danger", children: busy ? "Sending\u2026" : "Send code" })
+  return /* @__PURE__ */ jsxs18(ElvixCard, { title: "Deactivate account", ...sizeProps, children: [
+    pane === "warn" && /* @__PURE__ */ jsxs18(Fragment5, { children: [
+      /* @__PURE__ */ jsx19("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Pause your membership. You can restore it any time by signing in again. No data is deleted." }),
+      /* @__PURE__ */ jsx19("button", { type: "button", onClick: startChallenge, disabled: busy, className: "elvix-btn elvix-btn-danger", children: busy ? "Sending\u2026" : "Send code" })
     ] }),
-    pane === "otp" && /* @__PURE__ */ jsxs15("form", { onSubmit: confirm, className: "elvix-form", children: [
-      /* @__PURE__ */ jsx16("p", { className: "elvix-muted", children: "We sent a 6-digit code to your email." }),
-      /* @__PURE__ */ jsx16(
+    pane === "otp" && /* @__PURE__ */ jsxs18("form", { onSubmit: confirm, className: "elvix-form", children: [
+      /* @__PURE__ */ jsx19("p", { className: "elvix-muted", children: "We sent a 6-digit code to your email." }),
+      /* @__PURE__ */ jsx19(
         "input",
         {
           type: "text",
@@ -1664,15 +3150,15 @@ function ElvixDeactivate({
           className: "elvix-input"
         }
       ),
-      /* @__PURE__ */ jsx16("button", { type: "submit", disabled: busy || code.length !== 6, className: "elvix-btn elvix-btn-danger", children: busy ? "Deactivating\u2026" : "Confirm" })
+      /* @__PURE__ */ jsx19("button", { type: "submit", disabled: busy || code.length !== 6, className: "elvix-btn elvix-btn-danger", children: busy ? "Deactivating\u2026" : "Confirm" })
     ] }),
-    error && /* @__PURE__ */ jsx16("p", { role: "alert", className: "elvix-error", children: error })
+    error && /* @__PURE__ */ jsx19("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-leave.tsx
-import { useState as useState15 } from "react";
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { useState as useState17 } from "react";
+import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
 function ElvixLeave({
   onResult,
   width,
@@ -1684,11 +3170,11 @@ function ElvixLeave({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [pane, setPane] = useState15("warn");
-  const [challengeId, setChallengeId] = useState15(null);
-  const [code, setCode] = useState15("");
-  const [busy, setBusy] = useState15(false);
-  const [error, setError] = useState15(null);
+  const [pane, setPane] = useState17("warn");
+  const [challengeId, setChallengeId] = useState17(null);
+  const [code, setCode] = useState17("");
+  const [busy, setBusy] = useState17(false);
+  const [error, setError] = useState17(null);
   async function startChallenge() {
     if (!ctx.app) return;
     setBusy(true);
@@ -1726,16 +3212,16 @@ function ElvixLeave({
     onResult?.(result);
   }
   if (pane === "done") {
-    return /* @__PURE__ */ jsx17(ElvixCard, { title: "You've left", ...sizeProps, children: /* @__PURE__ */ jsx17("p", { children: "You've left this app. Your data is archived; sign in again to rejoin." }) });
+    return /* @__PURE__ */ jsx20(ElvixCard, { title: "You've left", ...sizeProps, children: /* @__PURE__ */ jsx20("p", { children: "You've left this app. Your data is archived; sign in again to rejoin." }) });
   }
-  return /* @__PURE__ */ jsxs16(ElvixCard, { title: "Leave this app", ...sizeProps, children: [
-    pane === "warn" && /* @__PURE__ */ jsxs16(Fragment4, { children: [
-      /* @__PURE__ */ jsx17("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Remove yourself from this app. Audit trail is preserved; you can sign back in any time to rejoin." }),
-      /* @__PURE__ */ jsx17("button", { type: "button", onClick: startChallenge, disabled: busy, className: "elvix-btn elvix-btn-danger", children: busy ? "Sending\u2026" : "Send code" })
+  return /* @__PURE__ */ jsxs19(ElvixCard, { title: "Leave this app", ...sizeProps, children: [
+    pane === "warn" && /* @__PURE__ */ jsxs19(Fragment6, { children: [
+      /* @__PURE__ */ jsx20("p", { style: { fontSize: 13, color: "rgba(0,0,0,0.6)" }, children: "Remove yourself from this app. Audit trail is preserved; you can sign back in any time to rejoin." }),
+      /* @__PURE__ */ jsx20("button", { type: "button", onClick: startChallenge, disabled: busy, className: "elvix-btn elvix-btn-danger", children: busy ? "Sending\u2026" : "Send code" })
     ] }),
-    pane === "otp" && /* @__PURE__ */ jsxs16("form", { onSubmit: confirm, className: "elvix-form", children: [
-      /* @__PURE__ */ jsx17("p", { className: "elvix-muted", children: "We sent a 6-digit code to your email." }),
-      /* @__PURE__ */ jsx17(
+    pane === "otp" && /* @__PURE__ */ jsxs19("form", { onSubmit: confirm, className: "elvix-form", children: [
+      /* @__PURE__ */ jsx20("p", { className: "elvix-muted", children: "We sent a 6-digit code to your email." }),
+      /* @__PURE__ */ jsx20(
         "input",
         {
           type: "text",
@@ -1749,15 +3235,15 @@ function ElvixLeave({
           className: "elvix-input"
         }
       ),
-      /* @__PURE__ */ jsx17("button", { type: "submit", disabled: busy || code.length !== 6, className: "elvix-btn elvix-btn-danger", children: busy ? "Leaving\u2026" : "Confirm leave" })
+      /* @__PURE__ */ jsx20("button", { type: "submit", disabled: busy || code.length !== 6, className: "elvix-btn elvix-btn-danger", children: busy ? "Leaving\u2026" : "Confirm leave" })
     ] }),
-    error && /* @__PURE__ */ jsx17("p", { role: "alert", className: "elvix-error", children: error })
+    error && /* @__PURE__ */ jsx20("p", { role: "alert", className: "elvix-error", children: error })
   ] });
 }
 
 // src/react/elvix-address-book.tsx
-import { useEffect as useEffect5, useState as useState16 } from "react";
-import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useState as useState18 } from "react";
+import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function ElvixAddressBook({
   onResult,
   width,
@@ -1769,11 +3255,11 @@ function ElvixAddressBook({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [rows, setRows] = useState16(null);
-  const [error, setError] = useState16(null);
-  const [busy, setBusy] = useState16(false);
-  const [adding, setAdding] = useState16(false);
-  const [form, setForm] = useState16({
+  const [rows, setRows] = useState18(null);
+  const [error, setError] = useState18(null);
+  const [busy, setBusy] = useState18(false);
+  const [adding, setAdding] = useState18(false);
+  const [form, setForm] = useState18({
     label: "Home",
     line1: "",
     postalCode: "",
@@ -1789,7 +3275,7 @@ function ElvixAddressBook({
       else setError("load_failed");
     }).catch(() => setError("network"));
   }
-  useEffect5(() => {
+  useEffect8(() => {
     reload();
   }, [ctx.app, ctx.baseUrl]);
   async function add(e) {
@@ -1822,14 +3308,14 @@ function ElvixAddressBook({
     if (result.ok) setRows((prev) => prev?.filter((a) => a.id !== id) ?? null);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs17(ElvixCard, { title: "Addresses", ...sizeProps, children: [
-    error && /* @__PURE__ */ jsx18("p", { role: "alert", className: "elvix-error", children: error }),
-    !rows && !error && /* @__PURE__ */ jsx18("p", { children: "Loading\u2026" }),
-    rows && rows.length === 0 && /* @__PURE__ */ jsx18("p", { className: "elvix-muted", children: "No addresses yet." }),
-    rows?.map((a) => /* @__PURE__ */ jsxs17("div", { style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-      /* @__PURE__ */ jsxs17("div", { style: { fontSize: 13 }, children: [
-        /* @__PURE__ */ jsx18("div", { style: { fontWeight: 500 }, children: a.label }),
-        /* @__PURE__ */ jsxs17("div", { style: { color: "rgba(0,0,0,0.55)" }, children: [
+  return /* @__PURE__ */ jsxs20(ElvixCard, { title: "Addresses", ...sizeProps, children: [
+    error && /* @__PURE__ */ jsx21("p", { role: "alert", className: "elvix-error", children: error }),
+    !rows && !error && /* @__PURE__ */ jsx21("p", { children: "Loading\u2026" }),
+    rows && rows.length === 0 && /* @__PURE__ */ jsx21("p", { className: "elvix-muted", children: "No addresses yet." }),
+    rows?.map((a) => /* @__PURE__ */ jsxs20("div", { style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs20("div", { style: { fontSize: 13 }, children: [
+        /* @__PURE__ */ jsx21("div", { style: { fontWeight: 500 }, children: a.label }),
+        /* @__PURE__ */ jsxs20("div", { style: { color: "rgba(0,0,0,0.55)" }, children: [
           a.line1,
           a.line2 ? `, ${a.line2}` : "",
           ", ",
@@ -1840,23 +3326,23 @@ function ElvixAddressBook({
           a.country
         ] })
       ] }),
-      /* @__PURE__ */ jsx18("button", { type: "button", disabled: busy, onClick: () => remove(a.id), className: "elvix-btn elvix-btn-ghost", children: "Remove" })
+      /* @__PURE__ */ jsx21("button", { type: "button", disabled: busy, onClick: () => remove(a.id), className: "elvix-btn elvix-btn-ghost", children: "Remove" })
     ] }, a.id)),
-    !adding && /* @__PURE__ */ jsx18("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 }, children: "Add address" }),
-    adding && /* @__PURE__ */ jsxs17("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ jsx18("input", { value: form.label, onChange: (e) => setForm({ ...form, label: e.target.value }), placeholder: "Label", className: "elvix-input" }),
-      /* @__PURE__ */ jsx18("input", { value: form.line1, onChange: (e) => setForm({ ...form, line1: e.target.value }), placeholder: "Street", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx18("input", { value: form.postalCode, onChange: (e) => setForm({ ...form, postalCode: e.target.value }), placeholder: "Postal code", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx18("input", { value: form.city, onChange: (e) => setForm({ ...form, city: e.target.value }), placeholder: "City", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx18("input", { value: form.country, onChange: (e) => setForm({ ...form, country: e.target.value.toUpperCase() }), placeholder: "Country (ISO-2)", maxLength: 2, required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx18("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" })
+    !adding && /* @__PURE__ */ jsx21("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 }, children: "Add address" }),
+    adding && /* @__PURE__ */ jsxs20("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx21("input", { value: form.label, onChange: (e) => setForm({ ...form, label: e.target.value }), placeholder: "Label", className: "elvix-input" }),
+      /* @__PURE__ */ jsx21("input", { value: form.line1, onChange: (e) => setForm({ ...form, line1: e.target.value }), placeholder: "Street", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx21("input", { value: form.postalCode, onChange: (e) => setForm({ ...form, postalCode: e.target.value }), placeholder: "Postal code", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx21("input", { value: form.city, onChange: (e) => setForm({ ...form, city: e.target.value }), placeholder: "City", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx21("input", { value: form.country, onChange: (e) => setForm({ ...form, country: e.target.value.toUpperCase() }), placeholder: "Country (ISO-2)", maxLength: 2, required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx21("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }
 
 // src/react/elvix-legal-entities.tsx
-import { useEffect as useEffect6, useState as useState17 } from "react";
-import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useState as useState19 } from "react";
+import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function ElvixLegalEntities({
   onResult,
   width,
@@ -1868,11 +3354,11 @@ function ElvixLegalEntities({
 }) {
   const sizeProps = { width, height, minWidth, maxWidth, minHeight, maxHeight };
   const ctx = useElvixContext();
-  const [rows, setRows] = useState17(null);
-  const [error, setError] = useState17(null);
-  const [busy, setBusy] = useState17(false);
-  const [adding, setAdding] = useState17(false);
-  const [form, setForm] = useState17({
+  const [rows, setRows] = useState19(null);
+  const [error, setError] = useState19(null);
+  const [busy, setBusy] = useState19(false);
+  const [adding, setAdding] = useState19(false);
+  const [form, setForm] = useState19({
     legalName: "",
     taxId: "",
     country: ""
@@ -1886,7 +3372,7 @@ function ElvixLegalEntities({
       else setError("load_failed");
     }).catch(() => setError("network"));
   }
-  useEffect6(() => {
+  useEffect9(() => {
     reload();
   }, [ctx.app, ctx.baseUrl]);
   async function add(e) {
@@ -1919,27 +3405,27 @@ function ElvixLegalEntities({
     if (result.ok) setRows((prev) => prev?.filter((a) => a.id !== id) ?? null);
     onResult?.(result);
   }
-  return /* @__PURE__ */ jsxs18(ElvixCard, { title: "Legal entities", ...sizeProps, children: [
-    error && /* @__PURE__ */ jsx19("p", { role: "alert", className: "elvix-error", children: error }),
-    !rows && !error && /* @__PURE__ */ jsx19("p", { children: "Loading\u2026" }),
-    rows && rows.length === 0 && /* @__PURE__ */ jsx19("p", { className: "elvix-muted", children: "No legal entities yet." }),
-    rows?.map((e) => /* @__PURE__ */ jsxs18("div", { style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 }, children: [
-      /* @__PURE__ */ jsxs18("div", { style: { fontSize: 13 }, children: [
-        /* @__PURE__ */ jsx19("div", { style: { fontWeight: 500 }, children: e.legalName }),
-        /* @__PURE__ */ jsxs18("div", { style: { color: "rgba(0,0,0,0.55)" }, children: [
+  return /* @__PURE__ */ jsxs21(ElvixCard, { title: "Legal entities", ...sizeProps, children: [
+    error && /* @__PURE__ */ jsx22("p", { role: "alert", className: "elvix-error", children: error }),
+    !rows && !error && /* @__PURE__ */ jsx22("p", { children: "Loading\u2026" }),
+    rows && rows.length === 0 && /* @__PURE__ */ jsx22("p", { className: "elvix-muted", children: "No legal entities yet." }),
+    rows?.map((e) => /* @__PURE__ */ jsxs21("div", { style: { padding: "8px 0", borderBottom: "1px solid rgba(0,0,0,0.06)", display: "flex", justifyContent: "space-between", gap: 12 }, children: [
+      /* @__PURE__ */ jsxs21("div", { style: { fontSize: 13 }, children: [
+        /* @__PURE__ */ jsx22("div", { style: { fontWeight: 500 }, children: e.legalName }),
+        /* @__PURE__ */ jsxs21("div", { style: { color: "rgba(0,0,0,0.55)" }, children: [
           e.taxId,
           " \xB7 ",
           e.country
         ] })
       ] }),
-      /* @__PURE__ */ jsx19("button", { type: "button", disabled: busy, onClick: () => remove(e.id), className: "elvix-btn elvix-btn-ghost", children: "Remove" })
+      /* @__PURE__ */ jsx22("button", { type: "button", disabled: busy, onClick: () => remove(e.id), className: "elvix-btn elvix-btn-ghost", children: "Remove" })
     ] }, e.id)),
-    !adding && /* @__PURE__ */ jsx19("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 }, children: "Add entity" }),
-    adding && /* @__PURE__ */ jsxs18("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ jsx19("input", { value: form.legalName, onChange: (e) => setForm({ ...form, legalName: e.target.value }), placeholder: "Legal name", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx19("input", { value: form.taxId, onChange: (e) => setForm({ ...form, taxId: e.target.value }), placeholder: "Tax / VAT ID", required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx19("input", { value: form.country, onChange: (e) => setForm({ ...form, country: e.target.value.toUpperCase() }), placeholder: "Country (ISO-2)", maxLength: 2, required: true, className: "elvix-input" }),
-      /* @__PURE__ */ jsx19("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" })
+    !adding && /* @__PURE__ */ jsx22("button", { type: "button", onClick: () => setAdding(true), className: "elvix-btn elvix-btn-primary", style: { marginTop: 12 }, children: "Add entity" }),
+    adding && /* @__PURE__ */ jsxs21("form", { onSubmit: add, className: "elvix-form", style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx22("input", { value: form.legalName, onChange: (e) => setForm({ ...form, legalName: e.target.value }), placeholder: "Legal name", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx22("input", { value: form.taxId, onChange: (e) => setForm({ ...form, taxId: e.target.value }), placeholder: "Tax / VAT ID", required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx22("input", { value: form.country, onChange: (e) => setForm({ ...form, country: e.target.value.toUpperCase() }), placeholder: "Country (ISO-2)", maxLength: 2, required: true, className: "elvix-input" }),
+      /* @__PURE__ */ jsx22("button", { type: "submit", disabled: busy, className: "elvix-btn elvix-btn-primary", children: busy ? "Saving\u2026" : "Save" })
     ] })
   ] });
 }