@orangecheck/auth-client 2.25.3 → 2.27.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import * as React3 from 'react';
+import * as React4 from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { startRegistration, startAuthentication } from '@simplewebauthn/browser';
 
@@ -199,7 +199,7 @@ async function consumeTabAccountHint(authOrigin) {
   }
   return null;
 }
-var SessionContext = React3.createContext(null);
+var SessionContext = React4.createContext(null);
 function normalizeDisplayIdentity(raw, didOc) {
   const di = raw.display_identity ?? raw.displayIdentity;
   if (di && typeof di === "object" && typeof di.value === "string" && di.value.length > 0 && typeof di.kind === "string" && DISPLAY_IDENTITY_KINDS.includes(di.kind)) {
@@ -257,14 +257,14 @@ function OcSessionProvider({
   config,
   defaultReturnTo
 }) {
-  const cfg = React3.useMemo(() => resolveConfig(config), [config]);
-  const [account, setAccount] = React3.useState(null);
-  const [roster, setRoster] = React3.useState([]);
-  const [status, setStatus] = React3.useState("loading");
-  const [error, setError] = React3.useState(null);
-  const [tabPinned, setTabPinned] = React3.useState(false);
-  const pinInFlightRef = React3.useRef(false);
-  const pinThisTab = React3.useCallback(
+  const cfg = React4.useMemo(() => resolveConfig(config), [config]);
+  const [account, setAccount] = React4.useState(null);
+  const [roster, setRoster] = React4.useState([]);
+  const [status, setStatus] = React4.useState("loading");
+  const [error, setError] = React4.useState(null);
+  const [tabPinned, setTabPinned] = React4.useState(false);
+  const pinInFlightRef = React4.useRef(false);
+  const pinThisTab = React4.useCallback(
     async (didOc) => {
       if (pinInFlightRef.current || readTabSession()) return;
       pinInFlightRef.current = true;
@@ -287,7 +287,7 @@ function OcSessionProvider({
     },
     [cfg.authOrigin]
   );
-  const refresh = React3.useCallback(async () => {
+  const refresh = React4.useCallback(async () => {
     if (typeof window === "undefined") return;
     try {
       let pin = readTabSession();
@@ -341,7 +341,7 @@ function OcSessionProvider({
       setError(err instanceof Error ? err : new Error(String(err)));
     }
   }, [cfg, pinThisTab]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     let cancelled = false;
     consumeTabAdoptMarker();
     void (async () => {
@@ -352,9 +352,9 @@ function OcSessionProvider({
       cancelled = true;
     };
   }, [refresh, cfg.authOrigin]);
-  React3.useEffect(() => installTabFetchInterceptor(cfg.authOrigin), [cfg.authOrigin]);
-  React3.useEffect(() => installTabLinkDecorator(cfg.authOrigin), [cfg.authOrigin]);
-  const signOut = React3.useCallback(
+  React4.useEffect(() => installTabFetchInterceptor(cfg.authOrigin), [cfg.authOrigin]);
+  React4.useEffect(() => installTabLinkDecorator(cfg.authOrigin), [cfg.authOrigin]);
+  const signOut = React4.useCallback(
     async (opts) => {
       const scope = opts?.scope ?? "all";
       try {
@@ -390,7 +390,7 @@ function OcSessionProvider({
     },
     [cfg.authOrigin, cfg.logoutPath, refresh]
   );
-  const switchAccount = React3.useCallback(
+  const switchAccount = React4.useCallback(
     async (didOc) => {
       if (typeof window === "undefined") return;
       const res = await fetch(`${cfg.authOrigin}/api/auth/switch`, {
@@ -420,14 +420,14 @@ function OcSessionProvider({
     },
     [cfg.authOrigin, refresh]
   );
-  const addAccountUrl = React3.useCallback(
+  const addAccountUrl = React4.useCallback(
     (returnTo) => {
       const rt = returnTo ?? (typeof window !== "undefined" ? window.location.href : void 0);
       return buildAddAccountUrl(cfg, rt);
     },
     [cfg]
   );
-  const setDisplayIdentity = React3.useCallback(
+  const setDisplayIdentity = React4.useCallback(
     async (kind) => {
       if (typeof window === "undefined") return;
       const res = await fetch(`${cfg.authOrigin}/api/auth/account`, {
@@ -457,7 +457,7 @@ function OcSessionProvider({
     },
     [cfg.authOrigin, refresh]
   );
-  const value = React3.useMemo(() => {
+  const value = React4.useMemo(() => {
     const returnTo = defaultReturnTo ?? (typeof window !== "undefined" ? window.location.href : void 0);
     return {
       status,
@@ -489,7 +489,7 @@ function OcSessionProvider({
   return /* @__PURE__ */ jsx(SessionContext.Provider, { value, children });
 }
 function useOcSession() {
-  const ctx = React3.useContext(SessionContext);
+  const ctx = React4.useContext(SessionContext);
   if (!ctx) {
     throw new Error(
       "[@orangecheck/auth-client] useOcSession() must be called inside <OcSessionProvider>"
@@ -498,7 +498,7 @@ function useOcSession() {
   return ctx;
 }
 function useOptionalOcSession() {
-  return React3.useContext(SessionContext);
+  return React4.useContext(SessionContext);
 }
 function shortenAddress(addr) {
   if (addr.length <= 12) return addr;
@@ -513,7 +513,7 @@ function isPrefixOf(value, target) {
 }
 var listboxIdCounter = 0;
 function useUniqueId(prefix) {
-  const [id] = React3.useState(() => `${prefix}-${++listboxIdCounter}`);
+  const [id] = React4.useState(() => `${prefix}-${++listboxIdCounter}`);
   return id;
 }
 function OcAccountChip({
@@ -527,9 +527,9 @@ function OcAccountChip({
 }) {
   const { status, account, signInUrl: sessionSignInUrl, signOut } = useOcSession();
   const signInUrl = signInUrlOverride ?? sessionSignInUrl;
-  const [open, setOpen] = React3.useState(false);
-  const wrapRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [open, setOpen] = React4.useState(false);
+  const wrapRef = React4.useRef(null);
+  React4.useEffect(() => {
     if (!open) return;
     function handleClickOutside(e) {
       if (wrapRef.current && !wrapRef.current.contains(e.target)) {
@@ -852,9 +852,9 @@ function useOcAddressSuggestion(options) {
   } = options;
   const { status, account } = useOcSession();
   const sessionAddress = status === "authenticated" ? account?.primaryBtc ?? null : null;
-  const [open, setOpen] = React3.useState(false);
-  const [highlighted, setHighlighted] = React3.useState(false);
-  const blurTimer = React3.useRef(null);
+  const [open, setOpen] = React4.useState(false);
+  const [highlighted, setHighlighted] = React4.useState(false);
+  const blurTimer = React4.useRef(null);
   const listboxId = useUniqueId("oc-addr-listbox");
   const optionId = `${listboxId}-opt`;
   const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
@@ -866,7 +866,7 @@ function useOcAddressSuggestion(options) {
     setOpen(false);
     setHighlighted(false);
   }
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
       if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
     };
@@ -969,7 +969,7 @@ function useOcAddressSuggestion(options) {
   ) : null;
   return { inputProps, popover };
 }
-var OcAddressInput = React3.forwardRef(
+var OcAddressInput = React4.forwardRef(
   function OcAddressInput2({
     value,
     onValueChange,
@@ -984,15 +984,15 @@ var OcAddressInput = React3.forwardRef(
   }, forwardedRef) {
     const { status, account } = useOcSession();
     const sessionAddress = status === "authenticated" ? account?.primaryBtc ?? null : null;
-    const [open, setOpen] = React3.useState(false);
-    const [highlighted, setHighlighted] = React3.useState(false);
-    const innerRef = React3.useRef(null);
+    const [open, setOpen] = React4.useState(false);
+    const [highlighted, setHighlighted] = React4.useState(false);
+    const innerRef = React4.useRef(null);
     const setRef = (node) => {
       innerRef.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
       else if (forwardedRef) forwardedRef.current = node;
     };
-    const blurTimer = React3.useRef(null);
+    const blurTimer = React4.useRef(null);
     const listboxId = useUniqueId("oc-addr-listbox");
     const optionId = `${listboxId}-opt`;
     const valueMatchesSession = sessionAddress != null && value.toLowerCase() === sessionAddress.toLowerCase();
@@ -1039,7 +1039,7 @@ var OcAddressInput = React3.forwardRef(
       }
       onKeyDown?.(e);
     }
-    React3.useEffect(() => {
+    React4.useEffect(() => {
       return () => {
         if (blurTimer.current != null) window.clearTimeout(blurTimer.current);
       };
@@ -1158,6 +1158,15 @@ var SUDO_ACCOUNT_MISMATCH_MESSAGE = "Switch this tab to that account first \u201
 function isSudoAccountMismatch(body) {
   return body?.reason === "sudo_account_mismatch";
 }
+
+// src/appearance.ts
+var SIGNIN_FONT = "var(--oc-signin-font, ui-monospace, SFMono-Regular, monospace)";
+var SIGNIN_CASE = "var(--oc-signin-case, uppercase)";
+var signinTracking = (em) => `var(--oc-signin-tracking, ${em})`;
+var signinSize = (px) => `calc(${px}px * var(--oc-signin-scale, 1))`;
+var signinRadius = (px) => `var(--oc-signin-radius, ${px}px)`;
+var SIGNIN_BUTTON_RADIUS = "var(--oc-signin-button-radius, 6px)";
+var SIGNIN_STRONG = "var(--oc-signin-strong, 600)";
 var DEFAULT_AUTH_ORIGIN = "https://ochk.io";
 async function fetchOcLinkedIdentities(opts) {
   const authOrigin = opts?.authOrigin ?? DEFAULT_AUTH_ORIGIN;
@@ -1173,13 +1182,14 @@ async function fetchOcLinkedIdentities(opts) {
 function OcLinkedIdentities({
   authOrigin = DEFAULT_AUTH_ORIGIN,
   className,
-  onChange
+  onChange,
+  attestationLink = true
 }) {
-  const [resp, setResp] = React3.useState(null);
-  const [error, setError] = React3.useState(null);
-  const [showEmailLink, setShowEmailLink] = React3.useState(false);
-  const [showBtcLink, setShowBtcLink] = React3.useState(false);
-  const refresh = React3.useCallback(async () => {
+  const [resp, setResp] = React4.useState(null);
+  const [error, setError] = React4.useState(null);
+  const [showEmailLink, setShowEmailLink] = React4.useState(false);
+  const [showBtcLink, setShowBtcLink] = React4.useState(false);
+  const refresh = React4.useCallback(async () => {
     setError(null);
     try {
       const r = await fetch(`${authOrigin}/api/auth/identities`, {
@@ -1198,10 +1208,10 @@ function OcLinkedIdentities({
       setError(e instanceof Error ? e.message : "load failed");
     }
   }, [authOrigin]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     void refresh();
   }, [refresh]);
-  const afterChange = React3.useCallback(() => {
+  const afterChange = React4.useCallback(() => {
     setShowEmailLink(false);
     setShowBtcLink(false);
     void refresh();
@@ -1233,11 +1243,7 @@ function OcLinkedIdentities({
   return /* @__PURE__ */ jsxs("div", { className, "data-oc-li": "", style: { display: "grid", gap: 16 }, children: [
     /* @__PURE__ */ jsxs("div", { style: panelStyle(), children: [
       /* @__PURE__ */ jsx(SectionLabel, { children: "\xA7 what this is" }),
-      /* @__PURE__ */ jsxs("p", { style: bodyStyle, children: [
-        "Your public identity is the opaque ",
-        /* @__PURE__ */ jsx("code", { style: codeStyle, children: "did:oc:" }),
-        " DID. Below it sit your private linked identities \u2014 your email and your Bitcoin address. They never appear in dashboard chrome and never reach an integrator unless you grant the matching scope. Linking a second identity is also your account-recovery path: if you lose one, the other still signs you in."
-      ] })
+      /* @__PURE__ */ jsx("p", { style: bodyStyle, children: "These are the ways you can sign in to this account. An app you sign in to sees one only if you grant it. Linking a second one is also your way back in: lose one, and the other still signs you in." })
     ] }),
     mergedFrom.length > 0 && /* @__PURE__ */ jsx(ConsolidationPanel, { entries: mergedFrom }),
     /* @__PURE__ */ jsxs("div", { style: panelStyle("plain"), "data-oc-li-rows": "", children: [
@@ -1290,7 +1296,7 @@ function OcLinkedIdentities({
         onCancel: () => setShowBtcLink(false)
       }
     ),
-    hasBtc && /* @__PURE__ */ jsx(AttestationLink, {})
+    hasBtc && attestationLink && /* @__PURE__ */ jsx(AttestationLink, {})
   ] });
 }
 function IdentityGroup({
@@ -1334,10 +1340,10 @@ function IdentityRow({
   authOrigin,
   onChange
 }) {
-  const [shown, setShown] = React3.useState(false);
-  const [confirming, setConfirming] = React3.useState(false);
-  const [busy, setBusy] = React3.useState(false);
-  const [err, setErr] = React3.useState(null);
+  const [shown, setShown] = React4.useState(false);
+  const [confirming, setConfirming] = React4.useState(false);
+  const [busy, setBusy] = React4.useState(false);
+  const [err, setErr] = React4.useState(null);
   const masked = row.value ? mask(row.value, kind) : "\u2014 pending recovery \u2014";
   const display = shown && row.value ? row.value : masked;
   async function unlink() {
@@ -1375,8 +1381,8 @@ function IdentityRow({
           style: {
             marginTop: 4,
             color: V.foreground,
-            fontFamily: MONO,
-            fontSize: 12,
+            fontFamily: SIGNIN_FONT,
+            fontSize: signinSize(12),
             wordBreak: "break-all"
           },
           children: display
@@ -1454,8 +1460,8 @@ function ConsolidationPanel({ entries }) {
           gap: 8,
           padding: "8px 0",
           borderTop: `1px solid ${V.border}`,
-          fontFamily: MONO,
-          fontSize: 11
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(11)
         },
         children: [
           /* @__PURE__ */ jsx("code", { style: { color: V.foreground, wordBreak: "break-all" }, children: e.did_oc }),
@@ -1536,13 +1542,13 @@ function EmailLinkForm({
   onDone,
   onCancel
 }) {
-  const [step, setStep] = React3.useState("email");
-  const [email, setEmail] = React3.useState("");
-  const [code, setCode] = React3.useState("");
-  const [token, setToken] = React3.useState("");
-  const [busy, setBusy] = React3.useState(false);
-  const [err, setErr] = React3.useState(null);
-  const [transfer, setTransfer] = React3.useState(false);
+  const [step, setStep] = React4.useState("email");
+  const [email, setEmail] = React4.useState("");
+  const [code, setCode] = React4.useState("");
+  const [token, setToken] = React4.useState("");
+  const [busy, setBusy] = React4.useState(false);
+  const [err, setErr] = React4.useState(null);
+  const [transfer, setTransfer] = React4.useState(false);
   async function start() {
     setBusy(true);
     setErr(null);
@@ -1685,12 +1691,12 @@ function BtcLinkForm({
   onDone,
   onCancel
 }) {
-  const [step, setStep] = React3.useState("request");
-  const [addr, setAddr] = React3.useState("");
-  const [challenge, setChallenge] = React3.useState("");
-  const [busy, setBusy] = React3.useState(false);
-  const [err, setErr] = React3.useState(null);
-  const [pendingSig, setPendingSig] = React3.useState(null);
+  const [step, setStep] = React4.useState("request");
+  const [addr, setAddr] = React4.useState("");
+  const [challenge, setChallenge] = React4.useState("");
+  const [busy, setBusy] = React4.useState(false);
+  const [err, setErr] = React4.useState(null);
+  const [pendingSig, setPendingSig] = React4.useState(null);
   async function getChallenge() {
     if (!didOc) {
       setErr("session not loaded yet \xB7 refresh and retry");
@@ -1758,7 +1764,7 @@ function BtcLinkForm({
           placeholder: "bc1q\u2026",
           autoCapitalize: "none",
           spellCheck: false,
-          style: { ...inputStyle, fontFamily: MONO }
+          style: { ...inputStyle, fontFamily: SIGNIN_FONT }
         }
       ),
       err && /* @__PURE__ */ jsx(ErrorLine, { children: err }),
@@ -1788,7 +1794,7 @@ function BtcLinkForm({
       /* @__PURE__ */ jsxs("p", { style: bodyStyle, children: [
         "Sign the challenge with the wallet that controls",
         " ",
-        /* @__PURE__ */ jsx("span", { style: { fontFamily: MONO, wordBreak: "break-all" }, children: addr }),
+        /* @__PURE__ */ jsx("span", { style: { fontFamily: SIGNIN_FONT, wordBreak: "break-all" }, children: addr }),
         "."
       ] }),
       /* @__PURE__ */ jsx(
@@ -1850,9 +1856,9 @@ function TransferConfirm({
   ] });
 }
 function LazyWalletButton(props) {
-  const [Comp, setComp] = React3.useState(null);
-  const [failed, setFailed] = React3.useState(false);
-  React3.useEffect(() => {
+  const [Comp, setComp] = React4.useState(null);
+  const [failed, setFailed] = React4.useState(false);
+  React4.useEffect(() => {
     let alive = true;
     import('@orangecheck/wallet-adapter/react').then((m) => {
       if (alive) {
@@ -1896,10 +1902,10 @@ function SectionLabel({
     {
       style: {
         color,
-        fontFamily: MONO,
-        fontSize: 10,
-        letterSpacing: "0.18em",
-        textTransform: "uppercase",
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(10),
+        letterSpacing: signinTracking("0.18em"),
+        textTransform: SIGNIN_CASE,
         marginBottom: 8
       },
       children
@@ -1914,8 +1920,8 @@ function ErrorLine({ children }) {
       style: {
         margin: "8px 0 0",
         color: V.destructive,
-        fontFamily: MONO,
-        fontSize: 11
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(11)
       },
       children
     }
@@ -1924,7 +1930,6 @@ function ErrorLine({ children }) {
 function FormButtons({ children }) {
   return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8, marginTop: 12 }, children });
 }
-var MONO = "ui-monospace, SFMono-Regular, monospace";
 var V = {
   primary: "var(--primary, #f97316)",
   foreground: "var(--foreground, #fafafa)",
@@ -1956,14 +1961,10 @@ var bodyStyle = {
 };
 var hintStyle = {
   color: V.muted,
-  fontFamily: MONO,
-  fontSize: 10.5,
+  fontFamily: SIGNIN_FONT,
+  fontSize: signinSize(10.5),
   opacity: 0.8
 };
-var codeStyle = {
-  fontFamily: MONO,
-  color: V.foreground
-};
 var rowStyle = {
   display: "flex",
   flexWrap: "wrap",
@@ -1974,10 +1975,10 @@ var rowStyle = {
 };
 var rowLabelStyle = {
   color: V.foreground,
-  fontFamily: MONO,
-  fontSize: 10.5,
-  letterSpacing: "0.12em",
-  textTransform: "uppercase",
+  fontFamily: SIGNIN_FONT,
+  fontSize: signinSize(10.5),
+  letterSpacing: signinTracking("0.12em"),
+  textTransform: SIGNIN_CASE,
   opacity: 0.8
 };
 var inputStyle = {
@@ -1986,8 +1987,8 @@ var inputStyle = {
   background: V.background,
   color: V.foreground,
   border: `1px solid ${V.border}`,
-  borderRadius: 6,
-  fontFamily: MONO,
+  borderRadius: signinRadius(6),
+  fontFamily: SIGNIN_FONT,
   // 16px — never lower · suppresses iOS Safari focus auto-zoom.
   fontSize: 16,
   outline: "none",
@@ -1996,11 +1997,11 @@ var inputStyle = {
 function btnBase(disabled) {
   return {
     padding: "0.5rem 0.875rem",
-    borderRadius: 6,
-    fontFamily: MONO,
-    fontSize: 10.5,
-    letterSpacing: "0.12em",
-    textTransform: "uppercase",
+    borderRadius: SIGNIN_BUTTON_RADIUS,
+    fontFamily: SIGNIN_FONT,
+    fontSize: signinSize(10.5),
+    letterSpacing: signinTracking("0.12em"),
+    textTransform: SIGNIN_CASE,
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.5 : 1
   };
@@ -2070,6 +2071,50 @@ function hardNavigate(target) {
   if (typeof window === "undefined") return;
   window.location.assign(target);
 }
+var SIGNIN_ERRORS = {
+  bad_request: "That doesn't look like a Bitcoin address.",
+  invalid_challenge: "That signature doesn't match this address. Sign with the wallet that holds it.",
+  sig_invalid: "That signature doesn't match this address. Sign with the wallet that holds it.",
+  sig_unsupported_scheme: "We can't check this wallet's signature format yet. Try another wallet, or use email.",
+  expired: "That request timed out. Try again for a fresh one.",
+  not_yet_valid: "That request is not valid yet. Check your device clock, then try again.",
+  nonce_mismatch: "That request didn't match. Try again for a fresh one.",
+  audience_mismatch: "That request didn't match this site. Reload the page and try again.",
+  purpose_mismatch: "That request didn't match. Try again for a fresh one.",
+  malformed: "That signature couldn't be read. Copy it again, whole.",
+  cross_site_blocked: "Your browser blocked this request. Reload the page and try again.",
+  rate_limited: "Too many tries. Wait a minute, then try again.",
+  invalid_email: "That email address doesn't look right.",
+  mailer_unavailable: "We couldn't send the email right now. Try again in a minute.",
+  mailer_error: "We couldn't send the email right now. Try again in a minute.",
+  wrong_code: "That code isn't right. Check the newest email from us.",
+  replay: "That code was already used. Send a new one.",
+  invalid_token: "That code is no longer valid. Send a new one.",
+  email_mismatch: "That code was sent to a different address. Send a new one."
+};
+var EMAIL_ERRORS = {
+  expired: "That code expired. Send a new one."
+};
+var SUBMIT_ERRORS = {
+  bad_request: "That signature couldn't be read. Copy it again, whole."
+};
+var NETWORK_ERROR = "We couldn't reach the server. Check your connection and try again.";
+function humanSigninError(reason, path, step = "challenge") {
+  if (!/^[a-z0-9_]+$/.test(reason)) return reason;
+  if (path === "wallet" && step === "submit" && SUBMIT_ERRORS[reason]) return SUBMIT_ERRORS[reason];
+  if (path === "email" && EMAIL_ERRORS[reason]) return EMAIL_ERRORS[reason];
+  return SIGNIN_ERRORS[reason] ?? (path === "email" ? "That didn't work. Try again, or send a new code." : "That didn't work. Try again.");
+}
+function failureMessage(err, path, step) {
+  if (err instanceof TypeError || err instanceof SyntaxError) return NETWORK_ERROR;
+  return humanSigninError(err instanceof Error ? err.message : "failed", path, step);
+}
+var BECH32_ADDRESS = /^(bc1|tb1|bcrt1)[qpzry9x8gf2tvdw0s3jn54khce6mua7l]{8,87}$/i;
+var BASE58_ADDRESS = /^[123mn][1-9A-HJ-NP-Za-km-z]{25,34}$/;
+function looksLikeBitcoinAddress(input) {
+  const s = input.trim();
+  return BECH32_ADDRESS.test(s) || BASE58_ADDRESS.test(s);
+}
 function OcSignIn({
   audience,
   returnTo,
@@ -2085,10 +2130,10 @@ function OcSignIn({
 }) {
   const walletEnabled = paths?.wallet ?? true;
   const emailEnabled = paths?.email ?? true;
-  const [resolvedReturn, setResolvedReturn] = React3.useState(
+  const [resolvedReturn, setResolvedReturn] = React4.useState(
     () => familyReturnTarget(returnTo) ?? safeReturnTo(returnTo)
   );
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const fromProp = familyReturnTarget(returnTo);
     if (fromProp) {
       setResolvedReturn(fromProp);
@@ -2099,8 +2144,8 @@ function OcSignIn({
     const fromQuery = familyReturnTarget(q.get("return_to")) ?? familyReturnTarget(q.get("next"));
     setResolvedReturn(fromQuery ?? "/");
   }, [returnTo]);
-  const [addMode, setAddMode] = React3.useState(Boolean(addProp));
-  React3.useEffect(() => {
+  const [addMode, setAddMode] = React4.useState(Boolean(addProp));
+  React4.useEffect(() => {
     if (typeof window === "undefined") return;
     if (addProp !== void 0) {
       setAddMode(Boolean(addProp));
@@ -2108,19 +2153,19 @@ function OcSignIn({
     }
     setAddMode(new URLSearchParams(window.location.search).get("add") === "1");
   }, [addProp]);
-  const [path, setPath] = React3.useState(
+  const [path, setPath] = React4.useState(
     initialPath ?? (providersFirst ? "email" : "wallet")
   );
-  const [signedIn, setSignedIn] = React3.useState(null);
-  const [linkAlso, setLinkAlso] = React3.useState(false);
-  const [oauthError, setOauthError] = React3.useState(false);
-  React3.useEffect(() => {
+  const [signedIn, setSignedIn] = React4.useState(null);
+  const [linkAlso, setLinkAlso] = React4.useState(false);
+  const [oauthError, setOauthError] = React4.useState(false);
+  React4.useEffect(() => {
     if (typeof window === "undefined") return;
     if (new URLSearchParams(window.location.search).has("oauth_error")) {
       setOauthError(true);
     }
   }, []);
-  const navigate = React3.useCallback(
+  const navigate = React4.useCallback(
     async (account) => {
       if (resolveReturnTo) {
         try {
@@ -2134,7 +2179,7 @@ function OcSignIn({
     },
     [resolveReturnTo, resolvedReturn]
   );
-  const handleSuccess = React3.useCallback(
+  const handleSuccess = React4.useCallback(
     async (account, token, via) => {
       const proceed = () => {
         clearTabSession();
@@ -2176,8 +2221,8 @@ function OcSignIn({
           padding: "1rem",
           border: "1px solid var(--border, #27272a)",
           color: "var(--foreground, #fafafa)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 12
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(12)
         },
         children: [
           "no signin paths enabled \u2014 set ",
@@ -2215,12 +2260,12 @@ function OcSignIn({
           marginBottom: 14,
           padding: "0.6rem 0.75rem",
           border: "1px solid var(--destructive, #ef4444)",
-          borderRadius: 6,
+          borderRadius: signinRadius(6),
           color: "var(--destructive, #ef4444)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 11
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(11)
         },
-        children: "That sign-in didn't complete. Please try again."
+        children: "That sign-in didn't finish. Try again, or use another way below."
       }
     ),
     addMode && /* @__PURE__ */ jsxs(
@@ -2232,11 +2277,11 @@ function OcSignIn({
           padding: "0.6rem 0.75rem",
           border: "1px solid var(--primary, #f97316)",
           borderLeftWidth: 3,
-          borderRadius: 4,
+          borderRadius: signinRadius(4),
           background: "color-mix(in srgb, var(--primary, #f97316) 8%, transparent)",
           color: "var(--foreground, #fafafa)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 11,
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(11),
           lineHeight: 1.6
         },
         children: [
@@ -2245,9 +2290,9 @@ function OcSignIn({
             {
               style: {
                 color: "var(--primary, #f97316)",
-                letterSpacing: "0.12em",
-                textTransform: "uppercase",
-                fontSize: 10,
+                letterSpacing: signinTracking("0.12em"),
+                textTransform: SIGNIN_CASE,
+                fontSize: signinSize(10),
                 display: "block",
                 marginBottom: 3
               },
@@ -2285,7 +2330,7 @@ function OcSignIn({
             {
               active: path === "email",
               onClick: () => setPath("email"),
-              children: "email + otp"
+              children: "email"
             }
           ),
           /* @__PURE__ */ jsx(
@@ -2293,7 +2338,7 @@ function OcSignIn({
             {
               active: path === "wallet",
               onClick: () => setPath("wallet"),
-              children: "bitcoin \xB7 self-custody"
+              children: "bitcoin wallet"
             }
           )
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -2310,7 +2355,7 @@ function OcSignIn({
             {
               active: path === "email",
               onClick: () => setPath("email"),
-              children: "email + otp"
+              children: "email"
             }
           )
         ] })
@@ -2343,7 +2388,7 @@ function OcSignIn({
           type: "checkbox",
           checked: linkAlso,
           onChange: (e) => setLinkAlso(e.target.checked),
-          style: { marginTop: 2, accentColor: "var(--primary, #f97316)" }
+          style: { margin: 0, accentColor: "var(--primary, #f97316)" }
         }
       ),
       /* @__PURE__ */ jsxs("span", { children: [
@@ -2351,7 +2396,7 @@ function OcSignIn({
         " ",
         activeMethod === "email" ? "a Bitcoin wallet" : "an email",
         " ",
-        /* @__PURE__ */ jsx("span", { style: { opacity: 0.65 }, children: "\u2014 optional, one more signature." })
+        /* @__PURE__ */ jsx("span", { children: "\u2014 optional, one more signature." })
       ] })
     ] })
   ] });
@@ -2370,15 +2415,16 @@ function SigninTab({
       onClick,
       "data-oc-signin-tab": active ? "active" : "inactive",
       style: {
+        minHeight: 44,
         padding: "0.6rem 0.875rem",
         background: "transparent",
         border: "none",
         borderBottom: active ? "2px solid var(--primary, #f97316)" : "2px solid transparent",
         color: active ? "var(--foreground, #fafafa)" : "var(--muted-foreground, #a1a1aa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 11,
-        letterSpacing: "0.12em",
-        textTransform: "uppercase",
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(11),
+        letterSpacing: signinTracking("0.12em"),
+        textTransform: SIGNIN_CASE,
         cursor: "pointer",
         marginBottom: -1
       },
@@ -2409,20 +2455,21 @@ function ProviderSignIn({
   add,
   first = false
 }) {
-  const [providers, setProviders] = React3.useState([]);
-  const [origin, setOrigin] = React3.useState("");
-  React3.useEffect(() => {
+  const [providers, setProviders] = React4.useState(null);
+  const [origin, setOrigin] = React4.useState("");
+  React4.useEffect(() => {
     setOrigin(window.location.origin);
     let cancelled = false;
     fetch(`${authOrigin}/api/auth/providers`, { credentials: "include" }).then((r) => r.ok ? r.json() : null).then((body) => {
-      if (!cancelled && body?.providers) setProviders(body.providers);
+      if (!cancelled) setProviders(body?.providers ?? []);
     }).catch(() => {
+      if (!cancelled) setProviders([]);
     });
     return () => {
       cancelled = true;
     };
   }, [authOrigin]);
-  if (providers.length === 0) return null;
+  if (providers !== null && providers.length === 0) return null;
   const providerReturnTo = returnTo.startsWith("/") ? origin ? `${origin}${returnTo}` : returnTo : returnTo;
   const line = { flex: 1, height: 1, background: "var(--border, #27272a)" };
   const BLOCK_GAP = 16;
@@ -2439,10 +2486,10 @@ function ProviderSignIn({
         // marginTop owns the gap above, so the divider only pads below.
         margin: first ? `${BLOCK_GAP}px 0` : `0 0 ${BLOCK_GAP}px`,
         color: "var(--muted-foreground, #a1a1aa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 10,
-        letterSpacing: "0.16em",
-        textTransform: "uppercase"
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(10),
+        letterSpacing: signinTracking("0.16em"),
+        textTransform: SIGNIN_CASE
       },
       children: [
         /* @__PURE__ */ jsx("span", { style: line }),
@@ -2451,6 +2498,31 @@ function ProviderSignIn({
       ]
     }
   );
+  const buttonStyle = (i) => ({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 10,
+    boxSizing: "border-box",
+    width: "100%",
+    minHeight: 44,
+    marginTop: i === 0 ? 0 : BUTTON_GAP,
+    padding: "0.6rem 0.875rem",
+    border: "1px solid var(--border, #27272a)",
+    borderRadius: SIGNIN_BUTTON_RADIUS,
+    background: "transparent",
+    color: "var(--muted-foreground, #a1a1aa)",
+    fontFamily: SIGNIN_FONT,
+    fontSize: signinSize(12),
+    textDecoration: "none"
+  });
+  if (providers === null) {
+    if (!first) return null;
+    return /* @__PURE__ */ jsxs("div", { "data-oc-signin-providers": "", "aria-hidden": "true", children: [
+      [0, 1].map((i) => /* @__PURE__ */ jsx("div", { style: { ...buttonStyle(i), visibility: "hidden" }, children: "\xA0" }, i)),
+      divider
+    ] });
+  }
   const buttons = providers.map((p, i) => /* @__PURE__ */ jsxs(
     "a",
     {
@@ -2458,23 +2530,7 @@ function ProviderSignIn({
         providerReturnTo
       )}${add ? "&add=1" : ""}`,
       "data-oc-signin-provider": p.id,
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: 10,
-        boxSizing: "border-box",
-        width: "100%",
-        marginTop: i === 0 ? 0 : BUTTON_GAP,
-        padding: "0.6rem 0.875rem",
-        border: "1px solid var(--border, #27272a)",
-        borderRadius: 6,
-        background: "transparent",
-        color: "var(--muted-foreground, #a1a1aa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 12,
-        textDecoration: "none"
-      },
+      style: buttonStyle(i),
       children: [
         /* @__PURE__ */ jsx(ProviderIcon, { id: p.id }),
         /* @__PURE__ */ jsx("span", { children: p.label })
@@ -2497,82 +2553,214 @@ function ProviderSignIn({
     }
   );
 }
+async function loadAdapter() {
+  return await import('@orangecheck/wallet-adapter');
+}
+async function detectBrowserWallets() {
+  return (await loadAdapter()).detectWallets().filter((w) => w.detected && w.id !== "manual").map((w) => ({ id: w.id, name: w.name }));
+}
 function WalletFlow({ authOrigin, audience, add, onSuccess }) {
-  const [address, setAddress] = React3.useState("");
-  const [error, setError] = React3.useState(null);
-  const [submitting, setSubmitting] = React3.useState(false);
-  const [stage, setStage] = React3.useState("enter");
+  const uid = React4.useId();
+  const ids = {
+    address: `${uid}-address`,
+    wallet: `${uid}-wallet`,
+    message: `${uid}-message`,
+    signature: `${uid}-signature`
+  };
+  const [address, setAddress] = React4.useState("");
+  const [error, setError] = React4.useState(null);
+  const [submitting, setSubmitting] = React4.useState(false);
+  const [wallets, setWallets] = React4.useState(null);
+  const [walletId, setWalletId] = React4.useState(null);
+  const [manual, setManual] = React4.useState(null);
+  const [pasted, setPasted] = React4.useState("");
+  const [copied, setCopied] = React4.useState("idle");
+  React4.useEffect(() => {
+    let cancelled = false;
+    detectBrowserWallets().then((found) => {
+      if (cancelled) return;
+      setWallets(found);
+      setWalletId(found[0]?.id ?? null);
+    }).catch(() => {
+      if (!cancelled) setWallets([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  async function fetchChallenge(addr) {
+    const res = await fetch(
+      `${authOrigin}/api/challenge?addr=${encodeURIComponent(addr)}&audience=${encodeURIComponent(audience)}&purpose=login`
+    );
+    const json = await res.json();
+    if (!res.ok || !json.message || !json.nonce) {
+      throw new Error(json.error ?? "challenge_failed");
+    }
+    return { message: json.message, nonce: json.nonce };
+  }
+  async function submitSignature(message, nonce, signature, scheme) {
+    const res = await fetch(`${authOrigin}/api/auth/signin`, {
+      method: "POST",
+      credentials: "include",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        message,
+        signature,
+        ...scheme ? { scheme } : {},
+        expectedNonce: nonce,
+        expectedAudience: audience,
+        expectedPurpose: "login",
+        // Multi-account add-mode · the auth host preserves the current
+        // roster_id when set, instead of minting a fresh one.
+        ...add ? { add: true } : {}
+      })
+    });
+    const json = await res.json();
+    if (!res.ok || !("ok" in json) || !json.ok || !json.account) {
+      throw new Error(
+        "reason" in json && json.reason || "error" in json && json.error || "verify_failed"
+      );
+    }
+    onSuccess(json.account, json.token);
+  }
   async function signIn(e) {
     e.preventDefault();
     const addr = address.trim();
     if (!addr) {
-      setError("paste a Bitcoin address");
+      setError("Paste your Bitcoin address.");
+      return;
+    }
+    if (!looksLikeBitcoinAddress(addr)) {
+      setError(humanSigninError("bad_request", "wallet"));
       return;
     }
     setError(null);
     setSubmitting(true);
-    setStage("signing");
+    let step = "challenge";
     try {
-      const challengeRes = await fetch(
-        `${authOrigin}/api/challenge?addr=${encodeURIComponent(addr)}&audience=${encodeURIComponent(audience)}&purpose=login`
-      );
-      const challenge = await challengeRes.json();
-      if (!challengeRes.ok || !challenge.message || !challenge.nonce) {
-        throw new Error(challenge.error ?? "challenge_failed");
+      let id = walletId;
+      if (wallets === null) {
+        const found = await detectBrowserWallets().catch(() => []);
+        setWallets(found);
+        id = found[0]?.id ?? null;
+        setWalletId(id);
       }
-      let adapter;
-      try {
-        adapter = await import('@orangecheck/wallet-adapter');
-      } catch {
-        throw new Error(
-          "could not load wallet support \xB7 refresh to try again"
-        );
-      }
-      const wallets = adapter.detectWallets().filter((w) => w.detected && w.id !== "manual");
-      if (wallets.length === 0) {
-        throw new Error("no BIP-322 wallet extension detected \xB7 install one and refresh");
+      const challenge = await fetchChallenge(addr);
+      if (!id) {
+        setManual(challenge);
+        setSubmitting(false);
+        return;
       }
-      const wallet = wallets[0];
-      const signer = adapter.getSigner(wallet.id, { address: addr });
+      const signer = (await loadAdapter()).getSigner(id, { address: addr });
       const signature = await signer(challenge.message);
-      const res = await fetch(`${authOrigin}/api/auth/signin`, {
-        method: "POST",
-        credentials: "include",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          message: challenge.message,
-          signature,
-          scheme: "bip322",
-          expectedNonce: challenge.nonce,
-          expectedAudience: audience,
-          expectedPurpose: "login",
-          // Multi-account add-mode · the auth host preserves
-          // the current roster_id when set, instead of minting
-          // a fresh one. Hosts that haven't deployed the
-          // multi-account migration silently ignore the field.
-          ...add ? { add: true } : {}
-        })
-      });
-      const json = await res.json();
-      if (!res.ok || !("ok" in json) || !json.ok || !json.account) {
-        throw new Error(
-          "reason" in json && json.reason || "error" in json && json.error || `verify_failed_${res.status}`
-        );
-      }
-      onSuccess(json.account, json.token);
+      step = "submit";
+      await submitSignature(challenge.message, challenge.nonce, signature, "bip322");
+    } catch (err) {
+      setError(failureMessage(err, "wallet", step));
+      setSubmitting(false);
+    }
+  }
+  async function signInManual(e) {
+    e.preventDefault();
+    if (!manual) return;
+    const sig = pasted.trim();
+    if (!sig) {
+      setError("Paste the signature your wallet gave you.");
+      return;
+    }
+    setError(null);
+    setSubmitting(true);
+    try {
+      await submitSignature(manual.message, manual.nonce, sig, void 0);
     } catch (err) {
-      const msg = err instanceof Error ? err.message : "sign-in failed";
-      setError(msg);
+      setError(failureMessage(err, "wallet", "submit"));
       setSubmitting(false);
-      setStage("enter");
     }
   }
+  async function copyMessage() {
+    if (!manual) return;
+    try {
+      await navigator.clipboard.writeText(manual.message);
+      setCopied("copied");
+    } catch {
+      setCopied("failed");
+    }
+  }
+  if (manual) {
+    return /* @__PURE__ */ jsxs("form", { onSubmit: signInManual, "data-oc-signin-wallet-manual": "", children: [
+      /* @__PURE__ */ jsxs(FlowHeader, { children: [
+        "In your wallet, use \u201Csign message\u201D (BIP-322) with ",
+        address.trim(),
+        ", sign the text below, and paste the signature back here. Nothing is spent."
+      ] }),
+      /* @__PURE__ */ jsx(Label, { htmlFor: ids.message, children: "message to sign" }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          id: ids.message,
+          readOnly: true,
+          value: manual.message,
+          rows: 5,
+          onFocus: (e) => e.currentTarget.select(),
+          style: { ...inputStyle2, resize: "vertical" }
+        }
+      ),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void copyMessage(), style: linkButtonStyle, children: copied === "copied" ? "copied" : "copy message" }),
+      copied === "failed" && /* @__PURE__ */ jsx(Hint, { children: "Couldn't copy here. Select the text above and copy it." }),
+      /* @__PURE__ */ jsxs("div", { style: { marginTop: 14 }, children: [
+        /* @__PURE__ */ jsx(Label, { htmlFor: ids.signature, children: "signature" }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: ids.signature,
+            value: pasted,
+            onChange: (e) => {
+              setPasted(e.target.value);
+              if (error) setError(null);
+            },
+            rows: 3,
+            placeholder: "paste the signature",
+            spellCheck: false,
+            autoFocus: true,
+            "aria-invalid": error ? true : void 0,
+            style: { ...inputStyle2, resize: "vertical" }
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx(ErrorLine2, { children: error }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: submitting || !pasted.trim(),
+          style: submitStyle(submitting || !pasted.trim()),
+          children: submitting ? "checking\u2026" : "sign me in \u2192"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setManual(null);
+            setPasted("");
+            setError(null);
+            setCopied("idle");
+          },
+          style: linkButtonStyle,
+          children: "use a different address"
+        }
+      )
+    ] });
+  }
+  const noBrowserWallet = wallets !== null && wallets.length === 0;
   return /* @__PURE__ */ jsxs("form", { onSubmit: signIn, "data-oc-signin-wallet": "", children: [
-    /* @__PURE__ */ jsx(FlowHeader, { label: "\xA7 bitcoin wallet", children: "Sign in with any BIP-322-capable Bitcoin wallet (Sparrow, Xverse, Leather, UniSat, Alby, OKX, Phantom). Paste your address, click sign \u2014 your wallet extension prompts for a one-time signature on a short challenge. The address becomes your OC identity. Private key material never leaves your wallet." }),
-    /* @__PURE__ */ jsx(Label, { children: "bitcoin address" }),
+    /* @__PURE__ */ jsx(FlowHeader, { children: "Your wallet signs a short message to prove you hold the address. Nothing is spent and your key never leaves the wallet. Works with browser wallets, or any wallet that can sign a message, like Sparrow." }),
+    /* @__PURE__ */ jsx(Label, { htmlFor: ids.address, children: "bitcoin address" }),
     /* @__PURE__ */ jsx(
       "input",
       {
+        id: ids.address,
         type: "text",
         value: address,
         onChange: (e) => {
@@ -2588,6 +2776,19 @@ function WalletFlow({ authOrigin, audience, add, onSuccess }) {
         style: inputStyle2
       }
     ),
+    wallets && wallets.length > 1 && /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx(Label, { htmlFor: ids.wallet, children: "sign with" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id: ids.wallet,
+          value: walletId ?? "",
+          onChange: (e) => setWalletId(e.target.value),
+          style: inputStyle2,
+          children: wallets.map((w) => /* @__PURE__ */ jsx("option", { value: w.id, children: w.name }, w.id))
+        }
+      )
+    ] }),
     error && /* @__PURE__ */ jsx(ErrorLine2, { children: error }),
     /* @__PURE__ */ jsx(
       "button",
@@ -2595,54 +2796,71 @@ function WalletFlow({ authOrigin, audience, add, onSuccess }) {
         type: "submit",
         disabled: submitting || !address.trim(),
         style: submitStyle(submitting || !address.trim()),
-        children: stage === "signing" && submitting ? "waiting for wallet\u2026" : "sign challenge \xB7 sign me in \u2192"
+        children: submitting ? "waiting for wallet\u2026" : noBrowserWallet ? "get the message to sign \u2192" : "sign in with wallet \u2192"
       }
     ),
-    /* @__PURE__ */ jsx(Hint, { children: "Detection picks the first installed BIP-322-capable extension. Address is the one your wallet will sign for." })
+    noBrowserWallet && /* @__PURE__ */ jsx(Hint, { children: "No browser wallet found here. You can sign with any wallet and paste." })
   ] });
 }
 function EmailFlow({ authOrigin, add, onSuccess }) {
-  const [stage, setStage] = React3.useState("enter");
-  const [email, setEmail] = React3.useState("");
-  const [emailError, setEmailError] = React3.useState(null);
-  const [code, setCode] = React3.useState("");
-  const [codeError, setCodeError] = React3.useState(null);
-  const [token, setToken] = React3.useState(null);
-  const [submitting, setSubmitting] = React3.useState(false);
-  async function start(e) {
-    e.preventDefault();
-    const trimmed = email.trim().toLowerCase();
-    if (!trimmed || !/.+@.+\..+/.test(trimmed)) {
-      setEmailError("enter a valid email");
-      return;
-    }
-    setEmailError(null);
-    setSubmitting(true);
+  const uid = React4.useId();
+  const [stage, setStage] = React4.useState("enter");
+  const [email, setEmail] = React4.useState("");
+  const [emailError, setEmailError] = React4.useState(null);
+  const [code, setCode] = React4.useState("");
+  const [codeError, setCodeError] = React4.useState(null);
+  const [token, setToken] = React4.useState(null);
+  const [submitting, setSubmitting] = React4.useState(false);
+  const [resent, setResent] = React4.useState(false);
+  async function sendCode(address) {
     try {
       const res = await fetch(`${authOrigin}/api/auth/email-otp/start`, {
         method: "POST",
         credentials: "include",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email: trimmed })
+        body: JSON.stringify({ email: address })
       });
       const json = await res.json();
-      if (!res.ok || !json.token) {
-        throw new Error(json.reason ?? `start failed (${res.status})`);
-      }
+      if (!res.ok || !json.token) return humanSigninError(json.reason ?? "server_error", "email");
       setToken(json.token);
-      setEmail(trimmed);
-      setStage("code");
-    } catch (err) {
-      setEmailError(err instanceof Error ? err.message : "failed to send code");
-    } finally {
-      setSubmitting(false);
+      return null;
+    } catch {
+      return NETWORK_ERROR;
+    }
+  }
+  async function start(e) {
+    e.preventDefault();
+    const trimmed = email.trim().toLowerCase();
+    if (!trimmed || !/.+@.+\..+/.test(trimmed)) {
+      setEmailError(humanSigninError("invalid_email", "email"));
+      return;
     }
+    setEmailError(null);
+    setSubmitting(true);
+    const err = await sendCode(trimmed);
+    setSubmitting(false);
+    if (err) {
+      setEmailError(err);
+      return;
+    }
+    setEmail(trimmed);
+    setStage("code");
+  }
+  async function resend() {
+    setCodeError(null);
+    setResent(false);
+    setSubmitting(true);
+    const err = await sendCode(email);
+    setSubmitting(false);
+    setCode("");
+    if (err) setCodeError(err);
+    else setResent(true);
   }
   async function verify(e) {
     e.preventDefault();
     if (!token) return;
     if (code.length !== 6) {
-      setCodeError("6 digits");
+      setCodeError("The code is 6 digits.");
       return;
     }
     setCodeError(null);
@@ -2663,23 +2881,24 @@ function EmailFlow({ authOrigin, add, onSuccess }) {
       const json = await res.json();
       if (!res.ok || !("ok" in json) || !json.ok || !json.account) {
         throw new Error(
-          "reason" in json && json.reason || "error" in json && json.error || `verify failed (${res.status})`
+          "reason" in json && json.reason || "error" in json && json.error || "server_error"
         );
       }
       onSuccess(json.account, json.token);
     } catch (err) {
-      setCodeError(err instanceof Error ? err.message : "verify failed");
+      setCodeError(failureMessage(err, "email", "submit"));
     } finally {
       setSubmitting(false);
     }
   }
   if (stage === "enter") {
     return /* @__PURE__ */ jsxs("form", { onSubmit: start, "data-oc-signin-email": "", children: [
-      /* @__PURE__ */ jsx(FlowHeader, { label: "\xA7 email + otp", children: "We email you a 6-digit code. No password, and no wallet needed to start. Link a Bitcoin address any time \u2014 that is the identity you hold yourself." }),
-      /* @__PURE__ */ jsx(Label, { children: "email" }),
+      /* @__PURE__ */ jsx(FlowHeader, { children: "We email you a 6-digit code. No password, and no wallet needed to start. Link a Bitcoin address any time \u2014 that is the identity you hold yourself." }),
+      /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-email`, children: "email" }),
       /* @__PURE__ */ jsx(
         "input",
         {
+          id: `${uid}-email`,
           type: "email",
           autoComplete: "email",
           value: email,
@@ -2694,20 +2913,20 @@ function EmailFlow({ authOrigin, add, onSuccess }) {
         }
       ),
       emailError && /* @__PURE__ */ jsx(ErrorLine2, { children: emailError }),
-      /* @__PURE__ */ jsx("button", { type: "submit", disabled: submitting, style: submitStyle(submitting), children: submitting ? "sending\u2026" : "send one-time code \u2192" }),
-      /* @__PURE__ */ jsx(Hint, { children: "Codes come from the auth host, expire in 10 minutes, and work once." })
+      /* @__PURE__ */ jsx("button", { type: "submit", disabled: submitting, style: submitStyle(submitting), children: submitting ? "sending\u2026" : "send one-time code \u2192" })
     ] });
   }
   return /* @__PURE__ */ jsxs("form", { onSubmit: verify, "data-oc-signin-email-verify": "", children: [
-    /* @__PURE__ */ jsxs(FlowHeader, { label: "\xA7 enter the code", children: [
-      "Sent a 6-digit code to ",
+    /* @__PURE__ */ jsxs(FlowHeader, { children: [
+      resent ? "Sent a new code to " : "Sent a 6-digit code to ",
       /* @__PURE__ */ jsx("span", { style: { color: "var(--foreground, #fafafa)" }, children: email }),
-      ". Code expires in 10 minutes."
+      ". It expires in 10 minutes."
     ] }),
-    /* @__PURE__ */ jsx(Label, { children: "one-time code" }),
+    /* @__PURE__ */ jsx(Label, { htmlFor: `${uid}-code`, children: "one-time code" }),
     /* @__PURE__ */ jsx(
       "input",
       {
+        id: `${uid}-code`,
         type: "text",
         inputMode: "numeric",
         pattern: "\\d{6}",
@@ -2735,31 +2954,32 @@ function EmailFlow({ authOrigin, add, onSuccess }) {
         children: submitting ? "verifying\u2026" : "verify \xB7 sign me in \u2192"
       }
     ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          setStage("enter");
-          setCode("");
-          setToken(null);
-        },
-        style: {
-          marginTop: 12,
-          background: "transparent",
-          border: "none",
-          color: "var(--muted-foreground, #a1a1aa)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 11,
-          letterSpacing: "0.12em",
-          textTransform: "uppercase",
-          cursor: "pointer",
-          padding: 0
-        },
-        children: "use a different email"
-      }
-    ),
-    /* @__PURE__ */ jsx(Hint, { children: "On verify, oc_session is set on Domain=.ochk.io family-wide." })
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => void resend(),
+          disabled: submitting,
+          style: linkButtonStyle,
+          children: "send a new code"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            setStage("enter");
+            setCode("");
+            setToken(null);
+            setResent(false);
+          },
+          style: linkButtonStyle,
+          children: "use a different email"
+        }
+      )
+    ] })
   ] });
 }
 function FlowHeader({
@@ -2767,15 +2987,15 @@ function FlowHeader({
   children
 }) {
   return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
-    /* @__PURE__ */ jsx(
+    label && /* @__PURE__ */ jsx(
       "div",
       {
         style: {
           color: "var(--primary, #f97316)",
-          fontFamily: "ui-monospace, SFMono-Regular, monospace",
-          fontSize: 10,
-          letterSpacing: "0.18em",
-          textTransform: "uppercase",
+          fontFamily: SIGNIN_FONT,
+          fontSize: signinSize(10),
+          letterSpacing: signinTracking("0.18em"),
+          textTransform: SIGNIN_CASE,
           marginBottom: 6
         },
         children: label
@@ -2795,17 +3015,37 @@ function FlowHeader({
     )
   ] });
 }
-function Label({ children }) {
+var linkButtonStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  minHeight: 44,
+  marginTop: 4,
+  marginRight: 16,
+  background: "transparent",
+  border: "none",
+  color: "var(--muted-foreground, #a1a1aa)",
+  fontFamily: SIGNIN_FONT,
+  fontSize: signinSize(11),
+  letterSpacing: signinTracking("0.12em"),
+  textTransform: SIGNIN_CASE,
+  cursor: "pointer",
+  padding: 0
+};
+function Label({
+  htmlFor,
+  children
+}) {
   return /* @__PURE__ */ jsx(
     "label",
     {
+      htmlFor,
       style: {
         display: "block",
         color: "var(--foreground, #fafafa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 11,
-        letterSpacing: "0.12em",
-        textTransform: "uppercase",
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(11),
+        letterSpacing: signinTracking("0.12em"),
+        textTransform: SIGNIN_CASE,
         marginBottom: 6
       },
       children
@@ -2818,8 +3058,8 @@ var inputStyle2 = {
   background: "var(--background, #0a0a0a)",
   color: "var(--foreground, #fafafa)",
   border: "1px solid var(--input, #27272a)",
-  borderRadius: 6,
-  fontFamily: "ui-monospace, SFMono-Regular, monospace",
+  borderRadius: signinRadius(6),
+  fontFamily: SIGNIN_FONT,
   // 16px — never below it. A sub-16px font-size makes iOS Safari
   // auto-zoom the viewport on focus; the family rule is >=16px on
   // every form field. Desktop reads fine at 16 too.
@@ -2828,14 +3068,16 @@ var inputStyle2 = {
 };
 var linkAlsoStyle = {
   display: "flex",
-  alignItems: "flex-start",
+  alignItems: "center",
+  // The whole row is the checkbox's hit area; the 13px box alone was not.
+  minHeight: 44,
   gap: 8,
   marginTop: 16,
   paddingTop: 14,
   borderTop: "1px solid var(--border, #27272a)",
   color: "var(--muted-foreground, #a1a1aa)",
-  fontFamily: "ui-monospace, SFMono-Regular, monospace",
-  fontSize: 12,
+  fontFamily: SIGNIN_FONT,
+  fontSize: signinSize(12),
   lineHeight: 1.5,
   cursor: "pointer"
 };
@@ -2846,12 +3088,12 @@ function submitStyle(disabled) {
     background: "var(--primary, #f97316)",
     color: "var(--primary-foreground, #0a0a0a)",
     border: "none",
-    borderRadius: 6,
-    fontFamily: "ui-monospace, SFMono-Regular, monospace",
-    fontSize: 11,
-    letterSpacing: "0.14em",
-    textTransform: "uppercase",
-    fontWeight: 600,
+    borderRadius: SIGNIN_BUTTON_RADIUS,
+    fontFamily: SIGNIN_FONT,
+    fontSize: signinSize(11),
+    letterSpacing: signinTracking("0.14em"),
+    textTransform: SIGNIN_CASE,
+    fontWeight: SIGNIN_STRONG,
     cursor: disabled ? "not-allowed" : "pointer",
     opacity: disabled ? 0.5 : 1,
     width: "100%"
@@ -2866,8 +3108,8 @@ function ErrorLine2({ children }) {
         marginTop: 6,
         marginBottom: 0,
         color: "var(--destructive, #ef4444)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
-        fontSize: 11,
+        fontFamily: SIGNIN_FONT,
+        fontSize: signinSize(11),
         letterSpacing: "0.04em"
       },
       children
@@ -2882,10 +3124,9 @@ function Hint({ children }) {
         marginTop: 12,
         marginBottom: 0,
         color: "var(--muted-foreground, #a1a1aa)",
-        fontFamily: "ui-monospace, SFMono-Regular, monospace",
+        fontFamily: SIGNIN_FONT,
         fontSize: 10.5,
-        lineHeight: 1.55,
-        opacity: 0.7
+        lineHeight: 1.55
       },
       children: [
         "> ",
@@ -2904,13 +3145,13 @@ function isAbortError(err) {
 }
 function useWebAuthnRegister(opts) {
   const authOrigin = resolveAuthOrigin(opts);
-  const [status, setStatus] = React3.useState("idle");
-  const [error, setError] = React3.useState(null);
-  const reset = React3.useCallback(() => {
+  const [status, setStatus] = React4.useState("idle");
+  const [error, setError] = React4.useState(null);
+  const reset = React4.useCallback(() => {
     setStatus("idle");
     setError(null);
   }, []);
-  const register = React3.useCallback(
+  const register = React4.useCallback(
     async (args) => {
       setError(null);
       setStatus("requesting-options");
@@ -2972,10 +3213,10 @@ function useWebAuthnRegister(opts) {
 function useWebAuthnList(opts) {
   const authOrigin = resolveAuthOrigin(opts);
   const { status: sessionStatus } = useOcSession();
-  const [credentials, setCredentials] = React3.useState([]);
-  const [status, setStatus] = React3.useState("loading");
-  const [error, setError] = React3.useState(null);
-  const refetch = React3.useCallback(async () => {
+  const [credentials, setCredentials] = React4.useState([]);
+  const [status, setStatus] = React4.useState("loading");
+  const [error, setError] = React4.useState(null);
+  const refetch = React4.useCallback(async () => {
     setError(null);
     if (sessionStatus !== "authenticated") {
       setCredentials([]);
@@ -3003,10 +3244,10 @@ function useWebAuthnList(opts) {
       setStatus("error");
     }
   }, [authOrigin, sessionStatus]);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     void refetch();
   }, [refetch]);
-  const rename = React3.useCallback(
+  const rename = React4.useCallback(
     async (id, label) => {
       try {
         const r = await fetch(`${authOrigin}/api/auth/webauthn/credentials/${id}`, {
@@ -3031,7 +3272,7 @@ function useWebAuthnList(opts) {
     },
     [authOrigin, refetch]
   );
-  const remove = React3.useCallback(
+  const remove = React4.useCallback(
     async (id) => {
       try {
         const r = await fetch(`${authOrigin}/api/auth/webauthn/credentials/${id}`, {
@@ -3059,13 +3300,13 @@ function useWebAuthnList(opts) {
 function useStepUpAuth(opts) {
   const authOrigin = resolveAuthOrigin(opts);
   const { refresh } = useOcSession();
-  const [status, setStatus] = React3.useState("idle");
-  const [error, setError] = React3.useState(null);
-  const reset = React3.useCallback(() => {
+  const [status, setStatus] = React4.useState("idle");
+  const [error, setError] = React4.useState(null);
+  const reset = React4.useCallback(() => {
     setStatus("idle");
     setError(null);
   }, []);
-  const stepUp = React3.useCallback(
+  const stepUp = React4.useCallback(
     async (args) => {
       setError(null);
       setStatus("requesting-options");