cauthy-auth 0.32.0 → 0.33.0

package/dist/react.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 // src/react.tsx
-import { createContext, useCallback, useContext, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { createContext, useCallback as useCallback2, useContext, useEffect as useEffect2, useMemo, useRef as useRef2, useState as useState2 } from "react";
 
 // src/passkey.ts
 function canUsePasskeys() {
@@ -721,7 +721,7 @@ function definePolicy(given) {
 }
 
 // src/components.tsx
-import { Fragment, useEffect, useId, useRef, useState } from "react";
+import { Fragment, useCallback, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 var TEXTS = {
   en: {
@@ -1085,7 +1085,7 @@ var TEXTS = {
     }
   }
 };
-var PlainButton = (p) => /* @__PURE__ */ jsx("button", { ...p });
+var PlainButton = ({ variant: _variant, loading: _loading, ...p }) => /* @__PURE__ */ jsx("button", { ...p });
 var PlainInput = (p) => /* @__PURE__ */ jsx("input", { ...p });
 var looks = /* @__PURE__ */ new Map();
 var loaded = /* @__PURE__ */ new Set();
@@ -1200,8 +1200,24 @@ function useForm(props) {
   const C = props.components ?? {};
   const Button = C.Button ?? PlainButton;
   const Input = C.Input ?? PlainInput;
-  const [error, setError] = useState(null);
-  const [busy, setBusy] = useState(false);
+  const [error, setOnlyError] = useState(null);
+  const [problems, setProblems] = useState({ list: [], round: 0 });
+  const setError = useCallback((e) => {
+    setOnlyError(e);
+    setProblems((p) => p.list.length === 0 ? p : { list: [], round: p.round });
+  }, []);
+  const check = (...found) => {
+    const list = found.filter((e) => Boolean(e));
+    setOnlyError(null);
+    setProblems((p) => ({ list, round: list.length > 0 ? p.round + 1 : p.round }));
+    return list.length === 0;
+  };
+  const fieldError = (name) => problems.list.find((e) => e.field === name) ?? (error?.field === name ? error : null);
+  const firstWrong = (name) => problems.list[0]?.field === name ? problems.round : 0;
+  const [acting, setActing] = useState(null);
+  const busy = acting !== null;
+  const setBusy = useCallback((on) => setActing(on === false ? null : on === true ? SUBMIT : on), []);
+  const loading = (key = SUBMIT) => acting === key;
   const [policy, setPolicy] = useState(void 0);
   const locale = props.locale ?? "en";
   const say = (e) => {
@@ -1214,7 +1230,28 @@ function useForm(props) {
     else window.location.assign(sitePath(to) ?? sameOrigin(props.returnTo) ?? "/");
   };
   const root = useRoot(props);
-  return { t, cx, own, C, Button, Input, error, setError, busy, setBusy, say, done, root, policy, setPolicy, passwordRule };
+  return { t, cx, own, C, Button, Input, error, setError, check, fieldError, firstWrong, busy, setBusy, loading, say, done, root, policy, setPolicy, passwordRule };
+}
+var SUBMIT = "submit";
+function Wrap(p) {
+  const { Form: OwnForm } = p.f.C;
+  if (OwnForm) {
+    const own = /* @__PURE__ */ jsx(
+      OwnForm,
+      {
+        as: p.as === "form" ? "form" : "div",
+        onSubmit: p.onSubmit,
+        noValidate: p.noValidate,
+        "aria-busy": p.busy,
+        className: p.slot ? p.f.own(p.slot) : void 0,
+        section: p.section,
+        children: p.children
+      }
+    );
+    return p.root?.["data-cauthy"] !== void 0 ? /* @__PURE__ */ jsx("div", { ...p.root, children: own }) : own;
+  }
+  const Tag2 = p.as;
+  return /* @__PURE__ */ jsx(Tag2, { className: p.slot ? p.f.cx(p.slot) : void 0, ...p.root, onSubmit: p.onSubmit, noValidate: p.noValidate, "aria-busy": p.busy, children: p.children });
 }
 function Note({ f, children, footer }) {
   const { Text } = f.C;
@@ -1295,6 +1332,11 @@ function isPasswordRule(e) {
   if (e.code === "weak_password" || PASSWORD_RULES.includes(e.code)) return true;
   return (e.code === "too_short" || e.code === "too_long") && (e.field === "password" || e.field === "newPassword");
 }
+function newPasswordProblem(value, policy, field = "password") {
+  const bad = checkNewPassword(value, policy);
+  if (!bad) return null;
+  return { code: bad.code, message: bad.message, field, ...bad.code === "required" ? {} : { reasons: passwordProblems(value, policy) } };
+}
 function usePasswordPolicy(f, methods) {
   const { setPolicy } = f;
   useEffect(() => {
@@ -1304,7 +1346,11 @@ function usePasswordPolicy(f, methods) {
 function Field(p) {
   const id = useId();
   const { f } = p;
-  const bad = f.error?.field === p.name ? f.error : null;
+  const bad = f.fieldError(p.name);
+  const focus = f.firstWrong(p.name);
+  useEffect(() => {
+    if (focus > 0 && typeof document !== "undefined") document.getElementById(id)?.focus();
+  }, [focus, id]);
   const described = [bad ? `${id}-error` : "", p.hint ? `${id}-hint` : ""].filter(Boolean).join(" ");
   const input = /* @__PURE__ */ jsx(
     f.Input,
@@ -1380,7 +1426,7 @@ function SecondStepForm(p) {
     });
   }, []);
   const sendEmail = async () => {
-    f.setBusy(true);
+    f.setBusy("email");
     f.setError(null);
     const r = await auth.signIn.mfaSendEmail();
     f.setBusy(false);
@@ -1391,7 +1437,7 @@ function SecondStepForm(p) {
   const pushWait = useRef(null);
   useEffect(() => () => pushWait.current?.abort(), []);
   const sendPush = async () => {
-    f.setBusy(true);
+    f.setBusy("push");
     f.setError(null);
     const r = await auth.signIn.mfaPush();
     f.setBusy(false);
@@ -1407,7 +1453,7 @@ function SecondStepForm(p) {
     f.done();
   };
   const sendCode = async () => {
-    f.setBusy(true);
+    f.setBusy("phone");
     f.setError(null);
     const r = await auth.signIn.mfaSendCode();
     f.setBusy(false);
@@ -1425,10 +1471,10 @@ function SecondStepForm(p) {
   };
   const general = f.error && !f.error.field ? f.error : null;
   const to = phoneWay?.phone?.number ?? "";
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "form", root: f.root, onSubmit: submit, noValidate: true, children: [
     /* @__PURE__ */ jsx(Note, { f, children: phoneSent ? f.t.codeSent.replace("{to}", phoneSent) : phoneWay?.email ? f.t.codeHelpEmail.replace("{to}", phoneWay.email.to) : phoneWay?.phone && !phoneWay.totp ? f.t.codeHelpPhone : f.t.codeHelp }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
-    phoneWay?.email && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendEmail(), children: f.t.sendEmailAgain }),
+    phoneWay?.email && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("email"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendEmail(), children: f.t.sendEmailAgain }),
     pushNumber > 0 ? f.C.Text ? (
       // The application's text: the number to pick drawn large, by its own rules.
       /* @__PURE__ */ jsxs("div", { role: "status", "aria-live": "polite", children: [
@@ -1440,15 +1486,15 @@ function SecondStepForm(p) {
       /* @__PURE__ */ jsx("p", { children: f.t.pushPick.replace("{n}", String(pushNumber)) }),
       /* @__PURE__ */ jsx("p", { style: { fontSize: 48, fontWeight: 700, margin: "4px 0", textAlign: "center" }, children: pushNumber }),
       /* @__PURE__ */ jsx("p", { children: f.t.pushWaiting })
-    ] }) : phoneWay?.push && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("button"), onClick: () => void sendPush(), children: f.t.pushSend }),
-    phoneWay?.phone && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendCode(), children: (phoneWay.phone.channel === "whatsapp" ? f.t.sendCodeWhatsapp : f.t.sendCodeSms).replace("{to}", to) }),
+    ] }) : phoneWay?.push && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("push"), disabled: f.busy, className: f.cx("button"), onClick: () => void sendPush(), children: f.t.pushSend }),
+    phoneWay?.phone && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("phone"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendCode(), children: (phoneWay.phone.channel === "whatsapp" ? f.t.sendCodeWhatsapp : f.t.sendCodeSms).replace("{to}", to) }),
     /* @__PURE__ */ jsx(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.verify })
   ] });
 }
 function ProviderButtons(p) {
   const { f } = p;
-  return /* @__PURE__ */ jsx(Fragment2, { children: p.providers.map((provider) => /* @__PURE__ */ jsxs(f.Button, { type: "button", className: f.cx("providerButton"), onClick: () => p.onPick(provider.id), children: [
+  return /* @__PURE__ */ jsx(Fragment2, { children: p.providers.map((provider) => /* @__PURE__ */ jsxs(f.Button, { type: "button", variant: "secondary", className: f.cx("providerButton"), onClick: () => p.onPick(provider.id), children: [
     provider.iconUrl && /* @__PURE__ */ jsx("img", { src: provider.iconUrl, alt: "", width: 18, height: 18, className: f.cx("providerIcon") }),
     f.t.continueWith,
     " ",
@@ -1488,7 +1534,7 @@ function SignIn(props) {
   }, [email, methods]);
   const toCompany = () => {
     autofill.current?.abort();
-    f.setBusy(true);
+    f.setBusy("sso");
     auth.signIn.sso({ email }, { returnTo: props.returnTo });
   };
   useEffect(() => {
@@ -1530,6 +1576,7 @@ function SignIn(props) {
       if (methods?.magicLink) return sendLink();
       return;
     }
+    if (step === "password" && !f.check(checkEmail(email), checkPassword(password))) return;
     f.setBusy(true);
     f.setError(null);
     const r = step === "sent" ? await auth.signIn.emailCode({ code }) : await auth.signIn.email({ email, password, captchaToken: challenge.token });
@@ -1545,7 +1592,7 @@ function SignIn(props) {
   };
   const usePasskey = async () => {
     autofill.current?.abort();
-    f.setBusy(true);
+    f.setBusy("passkey");
     f.setError(null);
     const r = await auth.signIn.passkey({ returnTo: props.returnTo, locale: props.locale, email });
     if (r.ok && r.status === "redirected") return;
@@ -1556,7 +1603,7 @@ function SignIn(props) {
   };
   const sendLink = async () => {
     autofill.current?.abort();
-    f.setBusy(true);
+    f.setBusy("link");
     f.setError(null);
     const r = await auth.signIn.magicLink({ email, captchaToken: challenge.token, create: props.createAccounts, returnTo: props.returnTo });
     f.setBusy(false);
@@ -1567,24 +1614,24 @@ function SignIn(props) {
   };
   const general = f.error && !f.error.field ? f.error : null;
   const asksEmail = offers.email;
-  if (step === "opening") return /* @__PURE__ */ jsx("div", { className: f.cx("form"), ...f.root, "aria-busy": "true" });
+  if (step === "opening") return /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "form", root: f.root, busy: true });
   if (step === "sent") {
-    return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "form", root: f.root, onSubmit: submit, noValidate: true, children: [
       /* @__PURE__ */ jsx(Note, { f, children: f.t.signInLinkSent }),
       general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
       /* @__PURE__ */ jsx(Note, { f, children: f.t.codeFromMail }),
       /* @__PURE__ */ jsx(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
-      /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.verify })
     ] });
   }
   if (step === "code") return /* @__PURE__ */ jsx(SecondStepForm, { f, auth });
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "form", root: f.root, onSubmit: submit, noValidate: true, children: [
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(ProviderButtons, { f, providers: methods?.providers ?? [], onPick: (id) => auth.signIn.social(id, { returnTo: props.returnTo }) }),
-    offers.passkey && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void usePasskey(), children: f.t.usePasskey }),
+    offers.passkey && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("passkey"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void usePasskey(), children: f.t.usePasskey }),
     asksEmail && ((methods?.providers.length ?? 0) > 0 || offers.passkey) && /* @__PURE__ */ jsx(Or, { f, children: f.t.orWithEmail }),
     asksEmail && /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: methods?.passkeyHere ? "username webauthn" : "username", required: true, onChange: setEmail }),
-    company && /* @__PURE__ */ jsxs(f.Button, { type: "button", disabled: f.busy, className: f.cx(company.enforced ? "button" : "providerButton"), onClick: toCompany, children: [
+    company && /* @__PURE__ */ jsxs(f.Button, { type: "button", variant: company.enforced ? "primary" : "secondary", loading: f.loading("sso"), disabled: f.busy, className: f.cx(company.enforced ? "button" : "providerButton"), onClick: toCompany, children: [
       f.t.continueWith,
       " ",
       company.name
@@ -1606,10 +1653,10 @@ function SignIn(props) {
         }
       ),
       challenge.node,
-      /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.signIn })
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.signIn })
     ] }),
     !company?.enforced && !passwordOn && methods?.magicLink && challenge.node,
-    methods?.magicLink && !company?.enforced && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendLink(), children: f.t.emailMeALink }),
+    methods?.magicLink && !company?.enforced && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("link"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendLink(), children: f.t.emailMeALink }),
     methods?.signUp !== false && props.links?.signUp && /* @__PURE__ */ jsxs(Note, { f, footer: true, children: [
       f.t.noAccount,
       " ",
@@ -1649,11 +1696,19 @@ function SignUp(props) {
   const [acceptLegal, setAcceptLegal] = useState(false);
   const [consents, setConsents] = useState({});
   const legal = methods?.legal;
+  const guest = auth.session?.user.isAnonymous === true;
   const submit = async (e) => {
     e.preventDefault();
+    const asksCompany = methods?.organization?.ask === true;
+    if (!f.check(
+      asksCompany && checkOrganization(organization, methods?.organization?.required === true),
+      checkName(name),
+      checkEmail(email),
+      newPasswordProblem(password, f.policy)
+    )) return;
     f.setBusy(true);
     f.setError(null);
-    const r = auth.session?.user.isAnonymous === true ? await auth.account.upgrade({ name, email, password }) : await auth.signUp.email({
+    const r = guest ? await auth.account.upgrade({ name, email, password }) : await auth.signUp.email({
       name,
       email,
       password,
@@ -1669,30 +1724,31 @@ function SignUp(props) {
   };
   const general = f.error && !f.error.field ? f.error : null;
   const passwordOn = methods?.passwordSignIn !== false;
-  const providers = auth.session?.user.isAnonymous === true || methods?.organization?.required ? [] : methods?.providers ?? [];
+  const providers = guest || methods?.organization?.required ? [] : methods?.providers ?? [];
   if (sent) {
-    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
       /* @__PURE__ */ jsx(Note, { f, children: f.t.checkEmail }),
       props.links?.signIn && /* @__PURE__ */ jsx(A, { f, href: props.links.signIn, children: f.t.backToSignIn })
     ] });
   }
+  if (methods === null) return /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "form", root: f.root, busy: true });
   const footer = props.links?.signIn && /* @__PURE__ */ jsxs(Note, { f, footer: true, children: [
     f.t.haveAccount,
     " ",
     /* @__PURE__ */ jsx(A, { f, href: props.links.signIn, children: f.t.signIn })
   ] });
   if (!passwordOn) {
-    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
       general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
       /* @__PURE__ */ jsx(ProviderButtons, { f, providers, onPick: (id) => auth.signIn.social(id, { returnTo: props.returnTo }) }),
       footer
     ] });
   }
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "form", root: f.root, onSubmit: submit, noValidate: true, children: [
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(ProviderButtons, { f, providers, onPick: (id) => auth.signIn.social(id, { returnTo: props.returnTo }) }),
     providers.length > 0 && /* @__PURE__ */ jsx(Or, { f, children: f.t.orWithEmail }),
-    methods?.organization?.ask && /* @__PURE__ */ jsx(Field, { f, name: "organization", type: "text", label: f.t.company, value: organization, autoComplete: "organization", required: methods.organization.required, onChange: setOrganization }),
+    methods.organization?.ask && /* @__PURE__ */ jsx(Field, { f, name: "organization", type: "text", label: f.t.company, value: organization, autoComplete: "organization", required: methods.organization.required, onChange: setOrganization }),
     /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "name", onChange: setName }),
     /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
     /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.password, value: password, autoComplete: "new-password", required: true, onChange: setPassword, hint: f.passwordRule }),
@@ -1703,7 +1759,7 @@ function SignUp(props) {
     ] }),
     legal?.consentPurposes.map((p) => /* @__PURE__ */ jsx(Check, { f, name: `consent_${p.key}`, checked: consents[p.key] === true, required: p.required, onChange: (on) => setConsents({ ...consents, [p.key]: on }), children: p.label }, p.key)),
     challenge.node,
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.signUp }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.signUp }),
     footer
   ] });
 }
@@ -1725,16 +1781,16 @@ function ForgotPassword(props) {
   };
   const general = f.error && !f.error.field ? f.error : null;
   if (sent) {
-    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
       /* @__PURE__ */ jsx(Note, { f, children: f.t.linkSent }),
       props.links?.signIn && /* @__PURE__ */ jsx(A, { f, href: props.links.signIn, children: f.t.backToSignIn })
     ] });
   }
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "form", root: f.root, onSubmit: submit, noValidate: true, children: [
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "username", required: true, onChange: setEmail }),
     challenge.node,
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.sendLink }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.sendLink }),
     props.links?.signIn && /* @__PURE__ */ jsx(Note, { f, footer: true, children: /* @__PURE__ */ jsx(A, { f, href: props.links.signIn, children: f.t.backToSignIn }) })
   ] });
 }
@@ -1761,21 +1817,21 @@ function ResetPassword(props) {
   const general = f.error && !f.error.field ? f.error : null;
   const back = props.links?.signIn && /* @__PURE__ */ jsx(A, { f, href: props.links.signIn, children: f.t.backToSignIn });
   if (changed) {
-    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
       /* @__PURE__ */ jsx(Note, { f, children: f.t.passwordChanged }),
       back
     ] });
   }
   if (token === "") {
-    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
       general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
       props.links?.forgotPassword && /* @__PURE__ */ jsx(A, { f, href: props.links.forgotPassword, children: f.t.forgotPassword })
     ] });
   }
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "form", root: f.root, onSubmit: submit, noValidate: true, children: [
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.newPassword, value: password, autoComplete: "new-password", required: true, onChange: setPassword, hint: f.passwordRule }),
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy || token === null, className: f.cx("button"), children: f.t.savePassword })
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy || token === null, className: f.cx("button"), children: f.t.savePassword })
   ] });
 }
 function VerifyEmail(props) {
@@ -1794,7 +1850,7 @@ function VerifyEmail(props) {
       setState("failed");
     });
   });
-  return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, "aria-busy": state === "confirming", children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, busy: state === "confirming", children: [
     state === "confirming" && /* @__PURE__ */ jsx(Note, { f, children: f.t.confirming }),
     state === "confirmed" && /* @__PURE__ */ jsx(Note, { f, children: f.t.emailConfirmed }),
     state === "failed" && f.error && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(f.error) }),
@@ -1838,10 +1894,10 @@ function AcceptInvite(props) {
   const general = f.error && !f.error.field ? f.error : null;
   const back = props.links?.signIn && /* @__PURE__ */ jsx(A, { f, href: props.links.signIn, children: f.t.backToSignIn });
   if (state === "opening") {
-    return /* @__PURE__ */ jsx("div", { className: f.cx("form"), ...f.root, "aria-busy": "true", children: /* @__PURE__ */ jsx(Note, { f, children: f.t.openingInvitation }) });
+    return /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "form", root: f.root, busy: true, children: /* @__PURE__ */ jsx(Note, { f, children: f.t.openingInvitation }) });
   }
   if (state === "invalid") {
-    return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
       /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: general ? f.say(general) : f.t.invitationInvalid }),
       back
     ] });
@@ -1849,13 +1905,13 @@ function AcceptInvite(props) {
   if (state === "code") return /* @__PURE__ */ jsx(SecondStepForm, { f, auth });
   const workspace = invitation?.workspace ?? "";
   const heading = invitation?.organization ? f.t.invitedToOrganization.replace("{organization}", invitation.organization).replace("{workspace}", workspace) : f.t.invitedTo.replace("{workspace}", workspace);
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("form"), ...f.root, onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "form", root: f.root, onSubmit: submit, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: heading }),
     /* @__PURE__ */ jsx(Note, { f, children: f.t.invitedAs.replace("{email}", invitation?.email ?? "") }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx("input", { type: "email", name: "username", autoComplete: "username", value: invitation?.email ?? "", readOnly: true, hidden: true }),
     /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.choosePassword, value: password, autoComplete: "new-password", required: true, onChange: setPassword, hint: f.passwordRule }),
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.acceptInvite })
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.acceptInvite })
   ] });
 }
 function PendingTerms(props) {
@@ -1875,7 +1931,7 @@ function PendingTerms(props) {
     setOwed([]);
     props.onSuccess?.();
   };
-  return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.termsChanged }),
     /* @__PURE__ */ jsxs(Note, { f, children: [
       f.t.termsChangedHelp,
@@ -1883,15 +1939,15 @@ function PendingTerms(props) {
       /* @__PURE__ */ jsx(Documents, { f, documents: owed })
     ] }),
     f.error && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(f.error) }),
-    /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("button"), onClick: () => void accept(), children: f.t.acceptTerms })
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), onClick: () => void accept(), children: f.t.acceptTerms })
   ] });
 }
 var ACCOUNT_SECTIONS = ["profile", "email", "password", "linked", "secondStep", "phone", "passkeys", "agents", "sessions"];
 function useSection(props) {
   const f = useForm({ ...props, unstyled: true });
   const [done, setDone] = useState(null);
-  const run = async (action) => {
-    f.setBusy(true);
+  const run = async (action, key = SUBMIT) => {
+    f.setBusy(key);
     f.setError(null);
     setDone(null);
     const r = await action();
@@ -1905,13 +1961,12 @@ function useSection(props) {
 function Account(props) {
   const auth = useAuth();
   const { accountUrl } = useSession();
-  const { root } = useForm(props);
-  const cx = (slot) => props.classNames?.[slot] ?? `cauthy-${slot}`;
+  const f = useForm(props);
   const [account, setAccount] = useState(null);
   useEffect(() => {
     void auth.account.get().then(setAccount);
   }, []);
-  if (account === null) return /* @__PURE__ */ jsx("div", { className: cx("account"), ...root, "aria-busy": "true" });
+  if (account === null) return /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "account", root: f.root, busy: true });
   const when = props.formatDate ?? ((iso) => new Date(iso).toLocaleString());
   const mfa = (mfaEnabled) => setAccount({ ...account, mfaEnabled });
   const part = (section) => {
@@ -1936,7 +1991,7 @@ function Account(props) {
         return /* @__PURE__ */ jsx(SessionsPart, { props, when });
     }
   };
-  return /* @__PURE__ */ jsx("div", { className: cx("account"), ...root, children: (props.sections ?? ACCOUNT_SECTIONS).map((section) => /* @__PURE__ */ jsx(Fragment, { children: part(section) }, section)) });
+  return /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "account", root: f.root, children: (props.sections ?? ACCOUNT_SECTIONS).map((section) => /* @__PURE__ */ jsx(Fragment, { children: part(section) }, section)) });
 }
 function AccountProfile(props) {
   return /* @__PURE__ */ jsx(Account, { ...props, sections: ["profile"] });
@@ -2009,15 +2064,20 @@ function OrganizationMembers(props) {
   useEffect(() => {
     void load();
   }, [id]);
-  if (gone !== null) return /* @__PURE__ */ jsx("div", { className: f.cx("account"), ...root, children: /* @__PURE__ */ jsx(Say, { f, tone: "success", children: gone }) });
-  if (seat === void 0) return /* @__PURE__ */ jsx("div", { className: f.cx("account"), ...root, "aria-busy": "true" });
-  if (seat === null) return /* @__PURE__ */ jsx("div", { className: f.cx("account"), ...root, children: /* @__PURE__ */ jsx(Note, { f, children: f.t.organizationMissing }) });
+  if (gone !== null) return /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "account", root, children: /* @__PURE__ */ jsx(Say, { f, tone: "success", children: gone }) });
+  if (seat === void 0) return /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "account", root, busy: true });
+  if (seat === null) return /* @__PURE__ */ jsx(Wrap, { f, as: "div", slot: "account", root, children: /* @__PURE__ */ jsx(Note, { f, children: f.t.organizationMissing }) });
   const manage = seat.can.manageMembers;
   const giveable = rolesToGive(seat, roles, props.roles);
-  const label = (r) => roles.find((c) => c.role === r)?.name || r;
+  const roleName = (c) => props.roleLabel?.(c) || c.name || c.role;
+  const label = (r) => {
+    const c = roles.find((x) => x.role === r);
+    return c ? roleName(c) : r;
+  };
   const add = async (e) => {
     e.preventDefault();
-    const r = await run(() => auth.organizations.add(id, { email, role, locale: props.locale }));
+    if (!f.check(checkEmail(email))) return;
+    const r = await run(() => auth.organizations.add(id, { email, role, locale: props.locale }), "add");
     if (!r.ok) return;
     setEmail("");
     setDone(f.t.memberAdded.replace("{email}", r.member.email));
@@ -2025,28 +2085,28 @@ function OrganizationMembers(props) {
     await load();
   };
   const change = async (m, next) => {
-    const r = await run(() => auth.organizations.setRole(id, m.userId, next));
+    const r = await run(() => auth.organizations.setRole(id, m.userId, next), `role:${m.userId}`);
     if (!r.ok) return;
     saved({ kind: "member.role_changed", organizationId: id, userId: m.userId, role: next, previousRole: m.role });
     await load();
   };
   const remove = async (m) => {
     setAsking(null);
-    const r = await run(() => auth.organizations.remove(id, m.userId));
+    const r = await run(() => auth.organizations.remove(id, m.userId), `remove:${m.userId}`);
     if (!r.ok) return;
     saved({ kind: m.you ? "member.left" : "member.removed", organizationId: id, userId: m.userId });
     if (m.you) setSeat(null);
     else await load();
   };
   const inviteAgain = async (m) => {
-    const r = await run(() => auth.organizations.inviteAgain(id, m.userId, { locale: props.locale }));
+    const r = await run(() => auth.organizations.inviteAgain(id, m.userId, { locale: props.locale }), `invite:${m.userId}`);
     if (!r.ok) return;
     setDone(f.t.memberInvitationSent);
     saved({ kind: "member.invited_again", organizationId: id, userId: m.userId });
   };
   const rename = async (e) => {
     e.preventDefault();
-    const r = await run(() => auth.organizations.rename(id, name));
+    const r = await run(() => auth.organizations.rename(id, name), "rename");
     if (!r.ok) return;
     setSeat(r.organization);
     setName(r.organization.name);
@@ -2055,7 +2115,7 @@ function OrganizationMembers(props) {
   };
   const close = async (how) => {
     setAsking(null);
-    const r = await run(() => how === "archive" ? auth.organizations.archive(id) : auth.organizations.delete(id));
+    const r = await run(() => how === "archive" ? auth.organizations.archive(id) : auth.organizations.delete(id), how);
     if (!r.ok) return;
     setGone((how === "archive" ? f.t.organizationArchived : f.t.organizationDeleted).replace("{org}", seat.name));
     saved({ kind: how === "archive" ? "organization.archived" : "organization.deleted", organizationId: id });
@@ -2070,8 +2130,8 @@ function OrganizationMembers(props) {
   const confirming = (text2, label2, yes) => /* @__PURE__ */ jsxs("span", { role: "group", "aria-label": label2, children: [
     /* @__PURE__ */ jsx("span", { children: text2 }),
     " ",
-    /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: yes, children: f.t.yes }),
-    /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => setAsking(null), children: f.t.cancel })
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", disabled: f.busy, className: f.cx("providerButton"), onClick: yes, children: f.t.yes }),
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", disabled: f.busy, className: f.cx("providerButton"), onClick: () => setAsking(null), children: f.t.cancel })
   ] });
   const leaveQuestion = f.t.memberLeaveConfirm.replace("{org}", seat.name);
   const archiveQuestion = f.t.organizationArchiveConfirm.replace("{org}", seat.name);
@@ -2079,8 +2139,8 @@ function OrganizationMembers(props) {
   const archiving = seat.can.archive && !hidden("archive");
   const deleting = seat.can.delete && !hidden("delete");
   const renaming = seat.can.update && !hidden("rename");
-  return /* @__PURE__ */ jsxs("div", { className: f.cx("account"), ...root, children: [
-    /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "div", slot: "account", root, children: [
+    /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "members", children: [
       /* @__PURE__ */ jsxs(Heading, { f, children: [
         f.t.members,
         " \xB7 ",
@@ -2093,6 +2153,8 @@ function OrganizationMembers(props) {
           f.Button,
           {
             type: "button",
+            variant: "danger",
+            loading: f.loading(`remove:${auth.session.user.id}`),
             disabled: f.busy,
             className: f.cx("providerButton"),
             onClick: () => ask(auth.session.user.id, f.t.memberLeave, leaveQuestion, () => void remove({ userId: auth.session.user.id, you: true })),
@@ -2127,34 +2189,34 @@ function OrganizationMembers(props) {
               label: `${f.t.memberRole}: ${who}`,
               value: m.role,
               disabled: f.busy,
-              options: choices.map((c) => ({ value: c.role, label: c.name || c.role })),
+              options: choices.map((c) => ({ value: c.role, label: roleName(c) })),
               onChange: (next) => void change(m, next)
             }
           ) : f.C.Badge ? /* @__PURE__ */ jsx(f.C.Badge, { tone: "neutral", children: label(m.role) }) : /* @__PURE__ */ jsx("span", { children: label(m.role) }),
           " ",
           asking === m.userId ? confirming(question, action, () => void remove(m)) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-            may.inviteAgain && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void inviteAgain(m), children: f.t.memberInviteAgain }),
-            removable && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask(m.userId, action, question, () => void remove(m)), children: action })
+            may.inviteAgain && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading(`invite:${m.userId}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void inviteAgain(m), children: f.t.memberInviteAgain }),
+            removable && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading(`remove:${m.userId}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask(m.userId, action, question, () => void remove(m)), children: action })
           ] })
         ] }, m.userId);
       }) }),
       done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
     ] }),
-    manage && giveable.length > 0 && /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: add, noValidate: true, children: [
+    manage && giveable.length > 0 && /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "add-member", onSubmit: add, noValidate: true, children: [
       /* @__PURE__ */ jsx(Heading, { f, children: f.t.memberAdd }),
       /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.email, value: email, autoComplete: "off", required: true, onChange: setEmail }),
-      /* @__PURE__ */ jsx(AddRole, { f, value: role, options: giveable.map((c) => ({ value: c.role, label: c.name || c.role })), onChange: setRole }),
-      /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.memberAdd })
+      /* @__PURE__ */ jsx(AddRole, { f, value: role, options: giveable.map((c) => ({ value: c.role, label: roleName(c) })), onChange: setRole }),
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading("add"), disabled: f.busy, className: f.cx("button"), children: f.t.memberAdd })
     ] }),
-    (renaming || archiving || deleting) && /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
+    (renaming || archiving || deleting) && /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "organization", children: [
       /* @__PURE__ */ jsx(Heading, { f, children: f.t.organization }),
-      renaming && /* @__PURE__ */ jsxs("form", { onSubmit: rename, noValidate: true, children: [
+      renaming && /* @__PURE__ */ jsxs(Wrap, { f, as: "form", section: "rename", onSubmit: rename, noValidate: true, children: [
         /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "organization", required: true, onChange: setName }),
-        /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.organizationRename })
+        /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading("rename"), disabled: f.busy, className: f.cx("button"), children: f.t.organizationRename })
       ] }),
       asking === "archive" ? confirming(archiveQuestion, f.t.organizationArchive, () => void close("archive")) : asking === "delete" ? confirming(deleteQuestion, f.t.organizationDelete, () => void close("delete")) : /* @__PURE__ */ jsxs(Fragment2, { children: [
-        archiving && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask("archive", f.t.organizationArchive, archiveQuestion, () => void close("archive")), children: f.t.organizationArchive }),
-        deleting && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask("delete", f.t.organizationDelete, deleteQuestion, () => void close("delete")), children: f.t.organizationDelete })
+        archiving && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading("archive"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask("archive", f.t.organizationArchive, archiveQuestion, () => void close("archive")), children: f.t.organizationArchive }),
+        deleting && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading("delete"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask("delete", f.t.organizationDelete, deleteQuestion, () => void close("delete")), children: f.t.organizationDelete })
       ] })
     ] })
   ] });
@@ -2179,14 +2241,15 @@ function PasskeysPart({ props, account, accountUrl, when }) {
   }, []);
   if (here === null) return null;
   if (!here) {
-    return /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "passkeys", children: [
       /* @__PURE__ */ jsx(Heading, { f, children: f.t.passkeys }),
       /* @__PURE__ */ jsx(A, { f, href: accountUrl, children: f.t.managePasskeys })
     ] });
   }
   const add = async (e, kind = "device") => {
     e?.preventDefault();
-    const r = await run(() => auth.account.addPasskey({ name, password, kind }));
+    if (account.hasPassword && !f.check(checkPassword(password))) return;
+    const r = await run(() => auth.account.addPasskey({ name, password, kind }), kind === "security_key" ? "security_key" : SUBMIT);
     if (!r.ok) {
       if (r.error.code === "cancelled") f.setError(null);
       return;
@@ -2198,12 +2261,12 @@ function PasskeysPart({ props, account, accountUrl, when }) {
     props.onSaved?.({ kind: "passkey.added", id: r.passkey.id });
   };
   const remove = async (id) => {
-    const r = await run(() => auth.account.removePasskey(id));
+    const r = await run(() => auth.account.removePasskey(id), `remove:${id}`);
     if (!r.ok) return;
     setList(list.filter((p) => p.id !== id));
     props.onSaved?.({ kind: "passkey.removed", id });
   };
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: add, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "passkeys", onSubmit: add, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.passkeys }),
     /* @__PURE__ */ jsx(Note, { f, children: f.t.passkeysHelp }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
@@ -2213,12 +2276,12 @@ function PasskeysPart({ props, account, accountUrl, when }) {
       " \xB7 ",
       when(p.createdAt),
       " ",
-      /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void remove(p.id), children: f.t.removePasskey })
+      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading(`remove:${p.id}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void remove(p.id), children: f.t.removePasskey })
     ] }, p.id)) }),
     /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.passkeyName, value: name, autoComplete: "off", onChange: setName }),
     account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.addPasskeyDevice }),
-    /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void add(null, "security_key"), children: f.t.addSecurityKey }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.addPasskeyDevice }),
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("security_key"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void add(null, "security_key"), children: f.t.addSecurityKey }),
     done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
@@ -2234,12 +2297,12 @@ function ProfilePart({ props, account, onSaved }) {
     setDone(f.t.saved);
     props.onSaved?.({ kind: "profile.saved", name: r.account.name });
   };
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "profile", onSubmit: submit, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.profile }),
     /* @__PURE__ */ jsx(Note, { f, children: account.email }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(Field, { f, name: "name", type: "text", label: f.t.name, value: name, autoComplete: "name", onChange: setName }),
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.save }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.save }),
     done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
@@ -2250,19 +2313,20 @@ function EmailPart({ props, account }) {
   const [password, setPassword] = useState("");
   const submit = async (e) => {
     e.preventDefault();
+    if (!f.check(checkEmail(email), account.hasPassword && checkPassword(password))) return;
     const r = await run(() => auth.account.changeEmail({ email, password }));
     if (!r.ok) return;
     setPassword("");
     setDone(f.t.emailSent.replace("{email}", r.email));
     props.onSaved?.({ kind: "email.change_requested", email: r.email });
   };
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "email", onSubmit: submit, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.emailAddress }),
     /* @__PURE__ */ jsx(Note, { f, children: account.email }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(Field, { f, name: "email", type: "email", label: f.t.newEmail, value: email, autoComplete: "email", required: true, onChange: setEmail }),
     account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.changeEmail }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.changeEmail }),
     done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
@@ -2285,13 +2349,13 @@ function LinkedPart({ props }) {
   if (linked === null) return null;
   const name = (id) => offered.find((p) => p.id === id)?.name ?? id;
   const unlink = async (provider) => {
-    const r = await run(() => auth.account.unlink(provider));
+    const r = await run(() => auth.account.unlink(provider), `unlink:${provider}`);
     if (!r.ok) return;
     setLinked(linked.filter((x) => x.provider !== provider));
     props.onSaved?.({ kind: "identity.unlinked", provider });
   };
   const here = typeof window === "undefined" ? void 0 : window.location.pathname;
-  return /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "linked", children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.linkedAccounts }),
     came && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: f.t.linked }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
@@ -2299,9 +2363,9 @@ function LinkedPart({ props }) {
       name(x.provider),
       x.email ? ` \xB7 ${x.email}` : "",
       " ",
-      /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void unlink(x.provider), children: f.t.unlink })
+      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading(`unlink:${x.provider}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void unlink(x.provider), children: f.t.unlink })
     ] }, x.provider)) }),
-    offered.filter((p) => !linked.some((x) => x.provider === p.id)).map((p) => /* @__PURE__ */ jsxs(f.Button, { type: "button", className: f.cx("providerButton"), onClick: () => auth.account.link(p.id, { returnTo: here }), children: [
+    offered.filter((p) => !linked.some((x) => x.provider === p.id)).map((p) => /* @__PURE__ */ jsxs(f.Button, { type: "button", variant: "secondary", className: f.cx("providerButton"), onClick: () => auth.account.link(p.id, { returnTo: here }), children: [
       f.t.linkWith,
       " ",
       p.name
@@ -2316,6 +2380,7 @@ function PasswordPart({ props }) {
   usePasswordPolicy(f, useMethods(auth));
   const submit = async (e) => {
     e.preventDefault();
+    if (!f.check(checkPassword(password), newPasswordProblem(newPassword, f.policy, "newPassword"))) return;
     const r = await run(() => auth.account.changePassword({ password, newPassword }));
     if (!r.ok) return;
     setPassword("");
@@ -2323,12 +2388,12 @@ function PasswordPart({ props }) {
     setDone(f.t.passwordChangedHere);
     props.onSaved?.({ kind: "password.changed" });
   };
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: submit, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "password", onSubmit: submit, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.changePassword }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword }),
     /* @__PURE__ */ jsx(Field, { f, name: "newPassword", type: "password", label: f.t.newPassword, value: newPassword, autoComplete: "new-password", required: true, onChange: setNewPassword, hint: f.passwordRule }),
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.changePassword }),
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.changePassword }),
     done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
@@ -2365,7 +2430,7 @@ function SecondStepPart({ props, account, onChanged }) {
     props.onSaved?.({ kind: "mfa.disabled" });
   };
   const renew = async () => {
-    const r = await run(() => auth.account.mfa.recoveryCodes({ password }));
+    const r = await run(() => auth.account.mfa.recoveryCodes({ password }), "codes");
     if (!r.ok) return;
     setCodes(r.recoveryCodes);
     props.onSaved?.({ kind: "recovery_codes.regenerated" });
@@ -2376,24 +2441,24 @@ function SecondStepPart({ props, account, onChanged }) {
     /* @__PURE__ */ jsx("ul", { className: f.cx("codes"), children: codes.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: c }) }, c)) })
   ] });
   if (setup) {
-    return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: confirm, noValidate: true, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "secondStep", onSubmit: confirm, noValidate: true, children: [
       /* @__PURE__ */ jsx(Heading, { f, children: f.t.secondStep }),
       /* @__PURE__ */ jsx(Note, { f, children: f.t.addToApp }),
       /* @__PURE__ */ jsx("code", { className: f.cx("secret"), children: setup.secret }),
       /* @__PURE__ */ jsx(A, { f, href: setup.otpauthUri, children: f.t.openInApp }),
       general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
       /* @__PURE__ */ jsx(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
-      /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.verify })
     ] });
   }
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: account.mfaEnabled ? turnOff : start, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "secondStep", onSubmit: account.mfaEnabled ? turnOff : start, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.secondStep }),
     /* @__PURE__ */ jsx(Note, { f, children: account.mfaEnabled ? f.t.secondStepOn : f.t.secondStepOff }),
     shown,
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     passwordField,
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: account.mfaEnabled ? f.t.turnOff : f.t.turnOn }),
-    account.mfaEnabled && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void renew(), children: f.t.newRecoveryCodes })
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: account.mfaEnabled ? "danger" : "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: account.mfaEnabled ? f.t.turnOff : f.t.turnOn }),
+    account.mfaEnabled && /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "secondary", loading: f.loading("codes"), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void renew(), children: f.t.newRecoveryCodes })
   ] });
 }
 function PhonePart({ props, account, onChanged }) {
@@ -2443,15 +2508,15 @@ function PhonePart({ props, account, onChanged }) {
   };
   const passwordField = account.hasPassword && /* @__PURE__ */ jsx(Field, { f, name: "password", type: "password", label: f.t.currentPassword, value: password, autoComplete: "current-password", required: true, onChange: setPassword });
   if (sentTo) {
-    return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: confirm, noValidate: true, children: [
+    return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "phone", onSubmit: confirm, noValidate: true, children: [
       /* @__PURE__ */ jsx(Heading, { f, children: f.t.phone }),
       /* @__PURE__ */ jsx(Note, { f, children: f.t.codeSent.replace("{to}", sentTo) }),
       general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
       /* @__PURE__ */ jsx(Field, { f, name: "code", type: "text", label: f.t.code, value: code, autoComplete: "one-time-code", required: true, onChange: setCode }),
-      /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.verify })
+      /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: f.t.verify })
     ] });
   }
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: ways.phone ? remove : add, noValidate: true, children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "form", slot: "section", section: "phone", onSubmit: ways.phone ? remove : add, noValidate: true, children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.phone }),
     /* @__PURE__ */ jsx(Note, { f, children: ways.phone ? f.t.phoneOn.replace("{to}", ways.phone.number) : `${f.t.phoneOff} ${f.t.phoneHelp}` }),
     codes && /* @__PURE__ */ jsxs(Fragment2, { children: [
@@ -2467,7 +2532,7 @@ function PhonePart({ props, account, onChanged }) {
       c === "whatsapp" ? f.t.byWhatsapp : f.t.bySms
     ] }, c)) }),
     passwordField,
-    /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: ways.phone ? f.t.removePhone : f.t.addPhone })
+    /* @__PURE__ */ jsx(f.Button, { type: "submit", variant: ways.phone ? "danger" : "primary", loading: f.loading(), disabled: f.busy, className: f.cx("button"), children: ways.phone ? f.t.removePhone : f.t.addPhone })
   ] });
 }
 function AgentsPart({ props, when }) {
@@ -2479,12 +2544,12 @@ function AgentsPart({ props, when }) {
   }, []);
   if (list.length === 0) return null;
   const disconnect = async (id) => {
-    const r = await run(() => auth.account.disconnectAgent(id));
+    const r = await run(() => auth.account.disconnectAgent(id), `disconnect:${id}`);
     if (!r.ok) return;
     setList(list.filter((a) => a.id !== id));
     props.onSaved?.({ kind: "agent.disconnected", id });
   };
-  return /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "agents", children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.agents }),
     /* @__PURE__ */ jsx(Note, { f, children: f.t.agentsHelp }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
@@ -2497,7 +2562,7 @@ function AgentsPart({ props, when }) {
       " \xB7 ",
       when(a.lastUsedAt),
       " ",
-      /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void disconnect(a.id), children: f.t.disconnect })
+      /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading(`disconnect:${a.id}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => void disconnect(a.id), children: f.t.disconnect })
     ] }, a.id)) })
   ] });
 }
@@ -2515,7 +2580,7 @@ function SessionsPart({ props, when }) {
     if (props.onSignedOut) props.onSignedOut();
     else window.location.assign("/");
   };
-  return /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
+  return /* @__PURE__ */ jsxs(Wrap, { f, as: "section", slot: "section", section: "sessions", children: [
     /* @__PURE__ */ jsx(Heading, { f, children: f.t.sessions }),
     /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: sessions.map((s, i) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), children: [
       s.device || f.t.unknownDevice,
@@ -2525,7 +2590,7 @@ function SessionsPart({ props, when }) {
       when(s.createdAt)
     ] }, i)) }),
     general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
-    /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("button"), onClick: () => void end(), children: f.t.signOutEverywhere })
+    /* @__PURE__ */ jsx(f.Button, { type: "button", variant: "danger", loading: f.loading(), disabled: f.busy, className: f.cx("button"), onClick: () => void end(), children: f.t.signOutEverywhere })
   ] });
 }
 function ChannelPick({ f, value, channels, onChange }) {
@@ -2546,15 +2611,22 @@ function ChannelPick({ f, value, channels, onChange }) {
 // src/react.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Ctx = createContext(null);
+var LocaleCtx = createContext(() => void 0);
 var AHEAD_MS = 6e4;
-function CauthyProvider({ children, basePath = "/api/auth", initialSession }) {
+function CauthyProvider({ children, basePath = "/api/auth", initialSession, locale }) {
   const base = withoutTrailingSlashes(basePath);
+  const said = useRef2(locale);
+  said.current = locale;
+  const readLocale = useCallback2(() => {
+    const l = said.current;
+    return typeof l === "function" ? l() : l;
+  }, []);
   const [session, setSession] = useState2(initialSession ?? null);
   const [status, setStatus] = useState2(
     initialSession === void 0 ? "loading" : initialSession === null ? "unauthenticated" : "authenticated"
   );
   const asking = useRef2(null);
-  const refresh = useCallback(() => {
+  const refresh = useCallback2(() => {
     asking.current ??= (async () => {
       try {
         const res = await fetch(`${base}/session`, { credentials: "same-origin", headers: { accept: "application/json" } });
@@ -2612,7 +2684,7 @@ function CauthyProvider({ children, basePath = "/api/auth", initialSession }) {
     }),
     [session, status, refresh, base]
   );
-  return /* @__PURE__ */ jsx2(Ctx.Provider, { value, children });
+  return /* @__PURE__ */ jsx2(Ctx.Provider, { value, children: /* @__PURE__ */ jsx2(LocaleCtx.Provider, { value: readLocale, children }) });
 }
 function useSession() {
   const ctx = useContext(Ctx);
@@ -2621,8 +2693,9 @@ function useSession() {
 }
 function useAuth() {
   const { session, status, refresh, basePath } = useSession();
+  const locale = useContext(LocaleCtx);
   return useMemo(() => {
-    const client = createAuthClient({ basePath });
+    const client = createAuthClient({ basePath, locale });
     const then = async (running) => {
       const r = await running;
       await refresh();
@@ -2659,7 +2732,7 @@ function useAuth() {
       status,
       refresh
     };
-  }, [basePath, refresh, session, status]);
+  }, [basePath, locale, refresh, session, status]);
 }
 export {
   AcceptInvite,