cauthy-auth 0.31.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,8 +721,8 @@ function definePolicy(given) {
 }
 
 // src/components.tsx
-import { useEffect, useId, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
 var TEXTS = {
   en: {
     email: "Email",
@@ -763,6 +763,7 @@ var TEXTS = {
     removePhone: "Remove phone",
     bySms: "SMS",
     byWhatsapp: "WhatsApp",
+    channel: "Send codes by",
     checkEmail: "Almost there: open the link we sent to confirm your address \u2014 it signs you in.",
     backToSignIn: "Back to sign in",
     emailMeALink: "Email me a sign-in link",
@@ -852,6 +853,9 @@ var TEXTS = {
     organizationDeleted: "{org} was deleted.",
     yes: "Yes",
     cancel: "Cancel",
+    termsChanged: "Our terms changed",
+    termsChangedHelp: "To go on, read and accept",
+    acceptTerms: "Accept",
     errors: {
       not_allowed: "Your role in this organization does not allow that.",
       last_manager: "Somebody else must manage the members first: give that role to another member.",
@@ -939,6 +943,7 @@ var TEXTS = {
     removePhone: "Quitar tel\xE9fono",
     bySms: "SMS",
     byWhatsapp: "WhatsApp",
+    channel: "Enviar los c\xF3digos por",
     checkEmail: "Casi listo: abre el enlace que te enviamos para confirmar tu correo; te deja adentro.",
     backToSignIn: "Volver a entrar",
     emailMeALink: "Env\xEDame un enlace para entrar",
@@ -1028,6 +1033,9 @@ var TEXTS = {
     organizationDeleted: "{org} qued\xF3 eliminada.",
     yes: "S\xED",
     cancel: "Cancelar",
+    termsChanged: "Nuestros t\xE9rminos cambiaron",
+    termsChangedHelp: "Para seguir, lee y acepta",
+    acceptTerms: "Aceptar",
     errors: {
       not_allowed: "Tu rol en esta organizaci\xF3n no permite eso.",
       last_manager: "Primero alguien m\xE1s debe administrar los miembros: dale ese rol a otro miembro.",
@@ -1077,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();
@@ -1188,10 +1196,28 @@ function sameOrigin(to) {
 function useForm(props) {
   const t = { ...TEXTS[props.locale ?? "en"], ...props.texts, errors: { ...TEXTS[props.locale ?? "en"].errors, ...props.texts?.errors } };
   const cx = (slot) => props.classNames?.[slot] ?? `cauthy-${slot}`;
-  const Button = props.components?.Button ?? PlainButton;
-  const Input = props.components?.Input ?? PlainInput;
-  const [error, setError] = useState(null);
-  const [busy, setBusy] = useState(false);
+  const own = (slot) => props.classNames?.[slot];
+  const C = props.components ?? {};
+  const Button = C.Button ?? PlainButton;
+  const Input = C.Input ?? PlainInput;
+  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) => {
@@ -1204,13 +1230,113 @@ function useForm(props) {
     else window.location.assign(sitePath(to) ?? sameOrigin(props.returnTo) ?? "/");
   };
   const root = useRoot(props);
-  return { t, cx, 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;
+  if (Text) return /* @__PURE__ */ jsx(Text, { as: "p", tone: "muted", size: footer ? "sm" : "md", children });
+  return /* @__PURE__ */ jsx("p", { className: f.cx(footer ? "footer" : "notice"), children });
+}
+function Heading({ f, children }) {
+  const { Text } = f.C;
+  if (Text) return /* @__PURE__ */ jsx(Text, { as: "h2", size: "lg", children });
+  return /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children });
+}
+function Say({ f, tone, children }) {
+  const { Alert } = f.C;
+  if (Alert) return /* @__PURE__ */ jsx(Alert, { tone, children });
+  if (tone === "danger") return /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children });
+  return /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children });
+}
+function Or({ f, children }) {
+  const { Divider } = f.C;
+  if (Divider) return /* @__PURE__ */ jsx(Divider, { label: children });
+  return /* @__PURE__ */ jsx("p", { className: f.cx("separator"), children });
+}
+function A({ f, href, newTab, children }) {
+  const { Link } = f.C;
+  if (Link) return /* @__PURE__ */ jsx(Link, { href, newTab, children });
+  return /* @__PURE__ */ jsx("a", { className: f.cx("link"), href, target: newTab ? "_blank" : void 0, rel: newTab ? "noopener" : void 0, children });
+}
+function Tag({ f, tone, children, plain }) {
+  const { Badge } = f.C;
+  if (Badge) return /* @__PURE__ */ jsxs(Fragment2, { children: [
+    " ",
+    /* @__PURE__ */ jsx(Badge, { tone, children })
+  ] });
+  return /* @__PURE__ */ jsx(Fragment2, { children: plain });
+}
+function Check(p) {
+  const id = useId();
+  const { f } = p;
+  const { Checkbox } = f.C;
+  if (Checkbox) {
+    return /* @__PURE__ */ jsx(Checkbox, { id, name: p.name, checked: p.checked, required: p.required, className: f.own("check"), onChange: p.onChange, children: p.children });
+  }
+  return /* @__PURE__ */ jsxs("label", { className: f.cx("check"), children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", name: p.name, checked: p.checked, required: p.required, onChange: (e) => p.onChange(e.target.checked) }),
+    /* @__PURE__ */ jsx("span", { children: p.children })
+  ] });
+}
+function Pick(p) {
+  const made = useId();
+  const id = p.id ?? made;
+  const { f } = p;
+  const { Select } = f.C;
+  if (Select) {
+    return /* @__PURE__ */ jsx(Select, { id, name: p.name, value: p.value, options: p.options, disabled: p.disabled, "aria-label": p.label, className: f.own("input"), onChange: p.onChange });
+  }
+  return /* @__PURE__ */ jsx("select", { id, name: p.name, "aria-label": p.label, className: f.cx("input"), value: p.value, disabled: p.disabled, onChange: (e) => p.onChange(e.target.value), children: p.options.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value)) });
+}
+function Labelled({ f, id, label, children }) {
+  const { Field: OwnField } = f.C;
+  if (OwnField) return /* @__PURE__ */ jsx(OwnField, { id, label, className: f.own("field"), children });
+  return /* @__PURE__ */ jsxs("label", { className: f.cx("field"), children: [
+    /* @__PURE__ */ jsx("span", { className: f.cx("label"), children: label }),
+    children
+  ] });
+}
+function Documents({ f, documents }) {
+  return /* @__PURE__ */ jsx(Fragment2, { children: documents.map((d, i) => /* @__PURE__ */ jsxs("span", { children: [
+    i > 0 && /* @__PURE__ */ jsxs(Fragment2, { children: [
+      f.t.and,
+      " "
+    ] }),
+    /* @__PURE__ */ jsx(A, { f, href: d.url, newTab: true, children: d.kind === "terms" ? f.t.termsOfService : f.t.privacyPolicy }),
+    " "
+  ] }, d.kind)) });
 }
 var PASSWORD_RULES = ["needs_lowercase", "needs_uppercase", "needs_digit", "needs_symbol", "needs_classes", "breached"];
 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(() => {
@@ -1220,28 +1346,49 @@ 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,
+    {
+      id,
+      name: p.name,
+      type: p.type,
+      value: p.value,
+      autoComplete: p.autoComplete,
+      required: p.required,
+      className: f.cx("input"),
+      "aria-invalid": bad ? true : void 0,
+      "aria-describedby": described || void 0,
+      onChange: (e) => p.onChange(e.target.value)
+    }
+  );
+  const { Field: OwnField } = f.C;
+  if (OwnField) {
+    return /* @__PURE__ */ jsx(
+      OwnField,
+      {
+        id,
+        label: p.label,
+        aside: p.aside,
+        help: p.hint && !bad ? p.hint : void 0,
+        error: bad ? f.say(bad) : void 0,
+        required: p.required,
+        className: f.own("field"),
+        children: input
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs("div", { className: f.cx("field"), children: [
     /* @__PURE__ */ jsxs("label", { className: f.cx("label"), htmlFor: id, children: [
       p.label,
       p.aside
     ] }),
-    /* @__PURE__ */ jsx(
-      f.Input,
-      {
-        id,
-        name: p.name,
-        type: p.type,
-        value: p.value,
-        autoComplete: p.autoComplete,
-        required: p.required,
-        className: f.cx("input"),
-        "aria-invalid": bad ? true : void 0,
-        "aria-describedby": described || void 0,
-        onChange: (e) => p.onChange(e.target.value)
-      }
-    ),
+    input,
     p.hint && !bad && /* @__PURE__ */ jsx("span", { id: `${id}-hint`, className: f.cx("hint"), children: p.hint }),
     bad && /* @__PURE__ */ jsx("span", { id: `${id}-error`, role: "alert", className: f.cx("fieldError"), children: f.say(bad) })
   ] });
@@ -1279,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);
@@ -1290,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);
@@ -1306,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);
@@ -1324,23 +1471,30 @@ 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: [
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), 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("p", { role: "alert", className: f.cx("error"), 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 }),
-    pushNumber > 0 ? /* @__PURE__ */ jsxs("div", { className: f.cx("notice"), role: "status", "aria-live": "polite", 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", 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: [
+        /* @__PURE__ */ jsx(f.C.Text, { as: "p", children: f.t.pushPick.replace("{n}", String(pushNumber)) }),
+        /* @__PURE__ */ jsx(f.C.Text, { as: "p", size: "lg", children: pushNumber }),
+        /* @__PURE__ */ jsx(f.C.Text, { as: "p", tone: "muted", children: f.t.pushWaiting })
+      ] })
+    ) : /* @__PURE__ */ jsxs("div", { className: f.cx("notice"), role: "status", "aria-live": "polite", children: [
       /* @__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(Fragment, { 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,
     " ",
@@ -1380,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(() => {
@@ -1422,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 });
@@ -1437,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;
@@ -1448,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);
@@ -1459,30 +1614,30 @@ 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: [
-      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.signInLinkSent }),
-      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
-      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.codeFromMail }),
+    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: [
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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 }),
-    asksEmail && ((methods?.providers.length ?? 0) > 0 || offers.passkey) && /* @__PURE__ */ jsx("p", { className: f.cx("separator"), children: f.t.orWithEmail }),
+    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
     ] }),
-    company?.enforced && /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.ssoOnly }),
-    !company?.enforced && passwordOn && /* @__PURE__ */ jsxs(Fragment, { children: [
+    company?.enforced && /* @__PURE__ */ jsx(Note, { f, children: f.t.ssoOnly }),
+    !company?.enforced && passwordOn && /* @__PURE__ */ jsxs(Fragment2, { children: [
       /* @__PURE__ */ jsx(
         Field,
         {
@@ -1494,18 +1649,18 @@ function SignIn(props) {
           autoComplete: "current-password",
           required: true,
           onChange: setPassword,
-          aside: props.links?.forgotPassword ? /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.forgotPassword, children: f.t.forgotPassword }) : void 0
+          aside: props.links?.forgotPassword ? /* @__PURE__ */ jsx(A, { f, href: props.links.forgotPassword, children: f.t.forgotPassword }) : void 0
         }
       ),
       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?.signUp !== false && props.links?.signUp && /* @__PURE__ */ jsxs("p", { className: f.cx("footer"), children: [
+    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,
       " ",
-      /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signUp, children: f.t.createAccount })
+      /* @__PURE__ */ jsx(A, { f, href: props.links.signUp, children: f.t.createAccount })
     ] })
   ] });
 }
@@ -1541,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,
@@ -1561,54 +1724,42 @@ 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: [
-      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.checkEmail }),
-      props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn })
+    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 })
     ] });
   }
-  const footer = props.links?.signIn && /* @__PURE__ */ jsxs("p", { className: f.cx("footer"), children: [
+  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", { className: f.cx("link"), href: props.links.signIn, children: f.t.signIn })
+    /* @__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: [
-      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    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: [
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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("p", { className: f.cx("separator"), 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 }),
+    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 }),
     /* @__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 }),
-    legal && legal.documents.length > 0 && /* @__PURE__ */ jsxs("label", { className: f.cx("check"), children: [
-      /* @__PURE__ */ jsx("input", { type: "checkbox", name: "acceptLegal", checked: acceptLegal, required: true, onChange: (e) => setAcceptLegal(e.target.checked) }),
-      /* @__PURE__ */ jsxs("span", { children: [
-        f.t.iAccept,
-        " ",
-        legal.documents.map((d, i) => /* @__PURE__ */ jsxs("span", { children: [
-          i > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-            f.t.and,
-            " "
-          ] }),
-          /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: d.url, target: "_blank", rel: "noopener", children: d.kind === "terms" ? f.t.termsOfService : f.t.privacyPolicy }),
-          " "
-        ] }, d.kind))
-      ] })
+    legal && legal.documents.length > 0 && /* @__PURE__ */ jsxs(Check, { f, name: "acceptLegal", checked: acceptLegal, required: true, onChange: setAcceptLegal, children: [
+      f.t.iAccept,
+      " ",
+      /* @__PURE__ */ jsx(Documents, { f, documents: legal.documents })
     ] }),
-    legal?.consentPurposes.map((p) => /* @__PURE__ */ jsxs("label", { className: f.cx("check"), children: [
-      /* @__PURE__ */ jsx("input", { type: "checkbox", name: `consent_${p.key}`, checked: consents[p.key] === true, required: p.required, onChange: (e) => setConsents({ ...consents, [p.key]: e.target.checked }) }),
-      /* @__PURE__ */ jsx("span", { children: p.label })
-    ] }, p.key)),
+    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
   ] });
 }
@@ -1630,17 +1781,17 @@ 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: [
-      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.linkSent }),
-      props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn })
+    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: [
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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 }),
-    props.links?.signIn && /* @__PURE__ */ jsx("p", { className: f.cx("footer"), children: /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn }) })
+    /* @__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 }) })
   ] });
 }
 function ResetPassword(props) {
@@ -1664,23 +1815,23 @@ function ResetPassword(props) {
     setChanged(true);
   };
   const general = f.error && !f.error.field ? f.error : null;
-  const back = props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn });
+  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: [
-      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.passwordChanged }),
+    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: [
-      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
-      props.links?.forgotPassword && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.forgotPassword, children: f.t.forgotPassword })
+    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: [
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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) {
@@ -1699,11 +1850,11 @@ function VerifyEmail(props) {
       setState("failed");
     });
   });
-  return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, "aria-busy": state === "confirming", children: [
-    state === "confirming" && /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.confirming }),
-    state === "confirmed" && /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.emailConfirmed }),
-    state === "failed" && f.error && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(f.error) }),
-    state !== "confirming" && props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn })
+  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) }),
+    state !== "confirming" && props.links?.signIn && /* @__PURE__ */ jsx(A, { f, href: props.links.signIn, children: f.t.backToSignIn })
   ] });
 }
 function AcceptInvite(props) {
@@ -1736,37 +1887,67 @@ function AcceptInvite(props) {
       if (r.error.code === "invalid_token") return setState("invalid");
       return f.setError(r.error);
     }
+    props.onSaved?.({ kind: "invitation.accepted", email: invitation?.email ?? "", ...invitation?.organization ? { organization: invitation.organization } : {} });
     if (r.status === "mfa_required") return setState("code");
     f.done();
   };
   const general = f.error && !f.error.field ? f.error : null;
-  const back = props.links?.signIn && /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: props.links.signIn, children: f.t.backToSignIn });
+  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("p", { className: f.cx("notice"), 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: [
-      /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: general ? f.say(general) : f.t.invitationInvalid }),
+    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
     ] });
   }
   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: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: heading }),
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.invitedAs.replace("{email}", invitation?.email ?? "") }),
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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) {
+  const auth = useAuth();
+  const f = useForm(props);
+  const [owed, setOwed] = useState(null);
+  useEffect(() => {
+    void auth.account.legal().then((r) => setOwed(r.ok ? r.pending : []));
+  }, []);
+  if (!owed || owed.length === 0) return null;
+  const accept = async () => {
+    f.setBusy(true);
+    f.setError(null);
+    const r = await auth.account.acceptLegal({ kinds: owed.map((d) => d.kind) });
+    f.setBusy(false);
+    if (!r.ok) return f.setError(r.error);
+    setOwed([]);
+    props.onSuccess?.();
+  };
+  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,
+      " ",
+      /* @__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", 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();
@@ -1780,37 +1961,64 @@ function useSection(props) {
 function Account(props) {
   const auth = useAuth();
   const { accountUrl } = useSession();
-  const { t, root } = useForm(props);
-  const cx = (slot) => props.classNames?.[slot] ?? `cauthy-${slot}`;
+  const f = useForm(props);
   const [account, setAccount] = useState(null);
-  const [sessions, setSessions] = useState([]);
   useEffect(() => {
     void auth.account.get().then(setAccount);
-    void auth.account.sessions().then(setSessions);
   }, []);
-  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());
-  return /* @__PURE__ */ jsxs("div", { className: cx("account"), ...root, children: [
-    /* @__PURE__ */ jsx(ProfilePart, { props, account, onSaved: setAccount }),
-    /* @__PURE__ */ jsx(EmailPart, { props, account }),
-    account.hasPassword && /* @__PURE__ */ jsx(PasswordPart, { props }),
-    /* @__PURE__ */ jsx(LinkedPart, { props }),
-    /* @__PURE__ */ jsx(SecondStepPart, { props, account, onChanged: (mfaEnabled) => setAccount({ ...account, mfaEnabled }) }),
-    /* @__PURE__ */ jsx(PhonePart, { props, account, onChanged: (mfaEnabled) => setAccount({ ...account, mfaEnabled }) }),
-    /* @__PURE__ */ jsx(PasskeysPart, { props, account, accountUrl: accountUrl(), when }),
-    /* @__PURE__ */ jsx(AgentsPart, { props, when }),
-    /* @__PURE__ */ jsxs("section", { className: cx("section"), children: [
-      /* @__PURE__ */ jsx("h2", { className: cx("heading"), children: t.sessions }),
-      /* @__PURE__ */ jsx("ul", { className: cx("sessions"), children: sessions.map((s, i) => /* @__PURE__ */ jsxs("li", { className: cx("session"), children: [
-        s.device || t.unknownDevice,
-        " \xB7 ",
-        s.ip,
-        " \xB7 ",
-        when(s.createdAt)
-      ] }, i)) }),
-      /* @__PURE__ */ jsx(SignOutEverywhere, { props })
-    ] })
-  ] });
+  const mfa = (mfaEnabled) => setAccount({ ...account, mfaEnabled });
+  const part = (section) => {
+    switch (section) {
+      case "profile":
+        return /* @__PURE__ */ jsx(ProfilePart, { props, account, onSaved: setAccount });
+      case "email":
+        return /* @__PURE__ */ jsx(EmailPart, { props, account });
+      case "password":
+        return account.hasPassword ? /* @__PURE__ */ jsx(PasswordPart, { props }) : null;
+      case "linked":
+        return /* @__PURE__ */ jsx(LinkedPart, { props });
+      case "secondStep":
+        return /* @__PURE__ */ jsx(SecondStepPart, { props, account, onChanged: mfa });
+      case "phone":
+        return /* @__PURE__ */ jsx(PhonePart, { props, account, onChanged: mfa });
+      case "passkeys":
+        return /* @__PURE__ */ jsx(PasskeysPart, { props, account, accountUrl: accountUrl(), when });
+      case "agents":
+        return /* @__PURE__ */ jsx(AgentsPart, { props, when });
+      case "sessions":
+        return /* @__PURE__ */ jsx(SessionsPart, { props, when });
+    }
+  };
+  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"] });
+}
+function AccountEmail(props) {
+  return /* @__PURE__ */ jsx(Account, { ...props, sections: ["email"] });
+}
+function AccountPassword(props) {
+  return /* @__PURE__ */ jsx(Account, { ...props, sections: ["password"] });
+}
+function AccountLinked(props) {
+  return /* @__PURE__ */ jsx(Account, { ...props, sections: ["linked"] });
+}
+function AccountSecondStep(props) {
+  return /* @__PURE__ */ jsx(Account, { ...props, sections: ["secondStep"] });
+}
+function AccountPhone(props) {
+  return /* @__PURE__ */ jsx(Account, { ...props, sections: ["phone"] });
+}
+function AccountPasskeys(props) {
+  return /* @__PURE__ */ jsx(Account, { ...props, sections: ["passkeys"] });
+}
+function AccountAgents(props) {
+  return /* @__PURE__ */ jsx(Account, { ...props, sections: ["agents"] });
+}
+function AccountSessions(props) {
+  return /* @__PURE__ */ jsx(Account, { ...props, sections: ["sessions"] });
 }
 var OWNER = "owner";
 function memberActions(seat, m) {
@@ -1822,8 +2030,9 @@ function memberActions(seat, m) {
     inviteAgain: seat.can.manageMembers && m.invited
   };
 }
-function rolesToGive(seat, roles) {
-  return seat.role === OWNER ? roles : roles.filter((c) => c.role !== OWNER);
+function rolesToGive(seat, roles, only) {
+  const mine = seat.role === OWNER ? roles : roles.filter((c) => c.role !== OWNER);
+  return only ? mine.filter((c) => only(c.role, c)) : mine;
 }
 function OrganizationMembers(props) {
   const auth = useAuth();
@@ -1840,6 +2049,8 @@ function OrganizationMembers(props) {
   const [gone, setGone] = useState(null);
   const id = props.organizationId;
   const when = props.formatDate ?? ((iso) => new Date(iso).toLocaleDateString());
+  const hidden = (action) => props.hide?.includes(action) === true;
+  const saved = (event) => props.onSaved?.(event);
   const load = async () => {
     const [list, people, choices] = await Promise.all([auth.organizations.list(), auth.organizations.members(id), auth.organizations.roles(id)]);
     const mine = list.find((o) => o.id === id) ?? null;
@@ -1847,135 +2058,173 @@ function OrganizationMembers(props) {
     if (mine) setName(mine.name);
     setMembers(people);
     setRoles(choices ?? []);
-    const offered = mine ? rolesToGive(mine, choices ?? []) : [];
+    const offered = mine ? rolesToGive(mine, choices ?? [], props.roles) : [];
     if (offered.length > 0 && !offered.some((c) => c.role === role)) setRole(offered[0].role);
   };
   useEffect(() => {
     void load();
   }, [id]);
-  if (gone !== null) return /* @__PURE__ */ jsx("div", { className: f.cx("account"), ...root, children: /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), 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("p", { className: f.cx("notice"), 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);
-  const label = (r) => roles.find((c) => c.role === r)?.name || r;
+  const giveable = rolesToGive(seat, roles, props.roles);
+  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));
+    saved({ kind: "member.added", organizationId: id, userId: r.member.userId, email: r.member.email, role: r.member.role || role });
     await load();
   };
   const change = async (m, next) => {
-    const r = await run(() => auth.organizations.setRole(id, m.userId, next));
-    if (r.ok) await load();
+    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 }));
-    if (r.ok) setDone(f.t.memberInvitationSent);
+    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);
     setDone(f.t.organizationRenamed.replace("{name}", r.organization.name));
+    saved({ kind: "organization.renamed", organizationId: id, name: r.organization.name });
   };
   const close = async (how) => {
     setAsking(null);
-    const r = await run(() => how === "archive" ? auth.organizations.archive(id) : auth.organizations.delete(id));
-    if (r.ok) setGone((how === "archive" ? f.t.organizationArchived : f.t.organizationDeleted).replace("{org}", seat.name));
+    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 });
+  };
+  const ask = (key, title, question, yes) => {
+    const { Confirm } = f.C;
+    if (!Confirm) return setAsking(key);
+    void Confirm({ title, body: question, confirmLabel: title, cancelLabel: f.t.cancel, danger: true }).then((ok) => {
+      if (ok) yes();
+    });
   };
   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 })
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: f.cx("account"), ...root, children: [
-    /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
-      /* @__PURE__ */ jsxs("h2", { className: f.cx("heading"), children: [
+  const leaveQuestion = f.t.memberLeaveConfirm.replace("{org}", seat.name);
+  const archiveQuestion = f.t.organizationArchiveConfirm.replace("{org}", seat.name);
+  const deleteQuestion = f.t.organizationDeleteConfirm.replace("{org}", seat.name);
+  const archiving = seat.can.archive && !hidden("archive");
+  const deleting = seat.can.delete && !hidden("delete");
+  const renaming = seat.can.update && !hidden("rename");
+  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 ",
         seat.name
       ] }),
-      problem && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(problem) }),
-      members === null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.membersHidden }),
-        auth.session && (asking === auth.session.user.id ? confirming(
-          f.t.memberLeaveConfirm.replace("{org}", seat.name),
-          f.t.memberLeave,
-          () => void remove({ userId: auth.session.user.id, you: true })
-        ) : /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => setAsking(auth.session.user.id), children: f.t.memberLeave }))
+      problem && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(problem) }),
+      members === null ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+        /* @__PURE__ */ jsx(Note, { f, children: f.t.membersHidden }),
+        auth.session && !hidden("leave") && (asking === auth.session.user.id ? confirming(leaveQuestion, f.t.memberLeave, () => void remove({ userId: auth.session.user.id, you: true })) : /* @__PURE__ */ jsx(
+          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 })),
+            children: f.t.memberLeave
+          }
+        ))
       ] }) : /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: members.map((m) => {
         const who = m.name || m.email;
         const may = memberActions(seat, m);
+        const removable = may.remove && !(m.you && hidden("leave"));
+        const question = m.you ? leaveQuestion : f.t.memberRemoveConfirm.replace("{who}", who);
+        const action = m.you ? f.t.memberLeave : f.t.memberRemove;
+        const choices = giveable.some((c) => c.role === m.role) ? giveable : [...roles.filter((c) => c.role === m.role), ...giveable];
         return /* @__PURE__ */ jsxs("li", { className: f.cx("session"), children: [
           /* @__PURE__ */ jsxs("span", { children: [
             who,
             m.name ? ` \xB7 ${m.email}` : "",
-            m.you ? ` (${f.t.memberYou})` : "",
-            m.invited ? ` \xB7 ${f.t.memberInvited}` : "",
-            m.manager ? ` \xB7 ${f.t.memberManager}` : "",
+            m.you && /* @__PURE__ */ jsx(Tag, { f, plain: ` (${f.t.memberYou})`, children: f.t.memberYou }),
+            f.C.Badge ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+              m.invited && /* @__PURE__ */ jsx(Tag, { f, tone: "warning", plain: "", children: f.t.memberInvited }),
+              m.manager && /* @__PURE__ */ jsx(Tag, { f, tone: "success", plain: "", children: f.t.memberManager })
+            ] }) : `${m.invited ? ` \xB7 ${f.t.memberInvited}` : ""}${m.manager ? ` \xB7 ${f.t.memberManager}` : ""}`,
             " \xB7 ",
             when(m.since)
           ] }),
           " ",
           may.changeRole && giveable.length > 0 ? /* @__PURE__ */ jsx(
-            "select",
+            Pick,
             {
-              "aria-label": `${f.t.memberRole}: ${who}`,
-              className: f.cx("input"),
+              f,
+              name: `role_${m.userId}`,
+              label: `${f.t.memberRole}: ${who}`,
               value: m.role,
               disabled: f.busy,
-              onChange: (e) => void change(m, e.target.value),
-              children: (giveable.some((c) => c.role === m.role) ? giveable : [...roles.filter((c) => c.role === m.role), ...giveable]).map((c) => /* @__PURE__ */ jsx("option", { value: c.role, children: c.name || c.role }, c.role))
+              options: choices.map((c) => ({ value: c.role, label: roleName(c) })),
+              onChange: (next) => void change(m, next)
             }
-          ) : /* @__PURE__ */ jsx("span", { children: label(m.role) }),
+          ) : 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(
-            m.you ? f.t.memberLeaveConfirm.replace("{org}", seat.name) : f.t.memberRemoveConfirm.replace("{who}", who),
-            m.you ? f.t.memberLeave : f.t.memberRemove,
-            () => void remove(m)
-          ) : /* @__PURE__ */ jsxs(Fragment, { children: [
-            may.inviteAgain && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void inviteAgain(m), children: f.t.memberInviteAgain }),
-            may.remove && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => setAsking(m.userId), children: m.you ? f.t.memberLeave : f.t.memberRemove })
+          asking === m.userId ? confirming(question, action, () => void remove(m)) : /* @__PURE__ */ jsxs(Fragment2, { children: [
+            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("p", { role: "status", className: f.cx("notice"), children: done })
+      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: [
-      /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.memberAdd }),
+    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__ */ jsxs("label", { className: f.cx("field"), children: [
-        /* @__PURE__ */ jsx("span", { className: f.cx("label"), children: f.t.memberRole }),
-        /* @__PURE__ */ jsx("select", { name: "role", className: f.cx("input"), value: role, onChange: (e) => setRole(e.target.value), children: giveable.map((c) => /* @__PURE__ */ jsx("option", { value: c.role, children: c.name || c.role }, c.role)) })
-      ] }),
-      /* @__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 })
     ] }),
-    (seat.can.update || seat.can.archive || seat.can.delete) && /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
-      /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.organization }),
-      seat.can.update && /* @__PURE__ */ jsxs("form", { onSubmit: rename, noValidate: true, 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(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(f.t.organizationArchiveConfirm.replace("{org}", seat.name), f.t.organizationArchive, () => void close("archive")) : asking === "delete" ? confirming(f.t.organizationDeleteConfirm.replace("{org}", seat.name), f.t.organizationDelete, () => void close("delete")) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        seat.can.archive && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => setAsking("archive"), children: f.t.organizationArchive }),
-        seat.can.delete && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => setAsking("delete"), children: f.t.organizationDelete })
+      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", 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 })
       ] })
     ] })
   ] });
 }
+function AddRole({ f, value, options, onChange }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(Labelled, { f, id, label: f.t.memberRole, children: /* @__PURE__ */ jsx(Pick, { f, id, name: "role", value, options, onChange }) });
+}
 function PasskeysPart({ props, account, accountUrl, when }) {
   const auth = useAuth();
   const { f, done, setDone, run, general } = useSection(props);
@@ -1992,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: [
-      /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.passkeys }),
-      /* @__PURE__ */ jsx("a", { className: f.cx("link"), href: accountUrl, children: f.t.managePasskeys })
+    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;
@@ -2008,28 +2258,31 @@ function PasskeysPart({ props, account, accountUrl, when }) {
     setName("");
     setPassword("");
     setDone(f.t.passkeyAdded);
+    props.onSaved?.({ kind: "passkey.added", id: r.passkey.id });
   };
   const remove = async (id) => {
-    const r = await run(() => auth.account.removePasskey(id));
-    if (r.ok) setList(list.filter((p) => p.id !== 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: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.passkeys }),
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.passkeysHelp }),
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
-    list.length === 0 ? /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.noPasskeys }) : /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: list.map((p) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), 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) }),
+    list.length === 0 ? /* @__PURE__ */ jsx(Note, { f, children: f.t.noPasskeys }) : /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: list.map((p) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), children: [
       p.name || f.t.passkeyUnnamed,
-      p.kind !== "unknown" ? ` \xB7 ${f.t.passkeyKinds[p.kind]}` : "",
+      p.kind !== "unknown" && /* @__PURE__ */ jsx(Tag, { f, plain: ` \xB7 ${f.t.passkeyKinds[p.kind]}`, children: f.t.passkeyKinds[p.kind] }),
       " \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 }),
-    done && /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children: done })
+    /* @__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 })
   ] });
 }
 function ProfilePart({ props, account, onSaved }) {
@@ -2042,14 +2295,15 @@ function ProfilePart({ props, account, onSaved }) {
     if (!r.ok) return;
     onSaved(r.account);
     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: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.profile }),
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: account.email }),
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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 }),
-    done && /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children: done })
+    /* @__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 })
   ] });
 }
 function EmailPart({ props, account }) {
@@ -2059,19 +2313,21 @@ 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: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.emailAddress }),
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: account.email }),
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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 }),
-    done && /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children: done })
+    /* @__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 })
   ] });
 }
 function LinkedPart({ props }) {
@@ -2084,27 +2340,32 @@ function LinkedPart({ props }) {
     void auth.account.identities().then(setLinked);
     void auth.methods().then((m) => setOffered(m.providers));
     const back = typeof window === "undefined" ? null : new URLSearchParams(window.location.search);
-    if (back?.get("linked")) setCame(back.get("linked"));
-    else if (back?.get("auth_error")) f.setError({ code: back.get("auth_error"), message: "That account could not be linked. Try again." });
+    const provider = back?.get("linked");
+    if (provider) {
+      setCame(provider);
+      props.onSaved?.({ kind: "identity.linked", provider });
+    } else if (back?.get("auth_error")) f.setError({ code: back.get("auth_error"), message: "That account could not be linked. Try again." });
   }, []);
   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));
-    if (r.ok) setLinked(linked.filter((x) => x.provider !== 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: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.linkedAccounts }),
-    came && /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children: f.t.linked }),
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
-    linked.length === 0 ? /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.noLinkedAccounts }) : /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: linked.map((x) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), 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) }),
+    linked.length === 0 ? /* @__PURE__ */ jsx(Note, { f, children: f.t.noLinkedAccounts }) : /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: linked.map((x) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), children: [
       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
@@ -2119,19 +2380,21 @@ 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("");
     setNewPassword("");
     setDone(f.t.passwordChangedHere);
+    props.onSaved?.({ kind: "password.changed" });
   };
-  return /* @__PURE__ */ jsxs("form", { className: f.cx("section"), onSubmit: submit, noValidate: true, children: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.changePassword }),
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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 }),
-    done && /* @__PURE__ */ jsx("p", { role: "status", className: f.cx("notice"), children: done })
+    /* @__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 })
   ] });
 }
 function SecondStepPart({ props, account, onChanged }) {
@@ -2155,6 +2418,7 @@ function SecondStepPart({ props, account, onChanged }) {
     setPassword("");
     setCodes(r.recoveryCodes);
     onChanged(true);
+    props.onSaved?.({ kind: "mfa.enabled" });
   };
   const turnOff = async (e) => {
     e.preventDefault();
@@ -2163,35 +2427,38 @@ function SecondStepPart({ props, account, onChanged }) {
     setPassword("");
     setCodes(null);
     onChanged(false);
+    props.onSaved?.({ kind: "mfa.disabled" });
   };
   const renew = async () => {
-    const r = await run(() => auth.account.mfa.recoveryCodes({ password }));
-    if (r.ok) setCodes(r.recoveryCodes);
+    const r = await run(() => auth.account.mfa.recoveryCodes({ password }), "codes");
+    if (!r.ok) return;
+    setCodes(r.recoveryCodes);
+    props.onSaved?.({ kind: "recovery_codes.regenerated" });
   };
   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 });
-  const shown = codes && /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.keepCodes }),
+  const shown = codes && /* @__PURE__ */ jsxs(Fragment2, { children: [
+    /* @__PURE__ */ jsx(Note, { f, children: f.t.keepCodes }),
     /* @__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: [
-      /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.secondStep }),
-      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.addToApp }),
+    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", { className: f.cx("link"), href: setup.otpauthUri, children: f.t.openInApp }),
-      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+      /* @__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: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.secondStep }),
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: account.mfaEnabled ? f.t.secondStepOn : f.t.secondStepOff }),
+  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("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    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 }) {
@@ -2226,6 +2493,7 @@ function PhonePart({ props, account, onChanged }) {
     setPassword("");
     if (r.recoveryCodes.length > 0) setCodes(r.recoveryCodes);
     onChanged(true);
+    props.onSaved?.({ kind: "phone.added", channel });
     await load();
   };
   const remove = async (e) => {
@@ -2236,33 +2504,35 @@ function PhonePart({ props, account, onChanged }) {
     await load();
     const left = await auth.account.mfa.factors();
     onChanged(Boolean(left?.totp));
+    props.onSaved?.({ kind: "phone.removed" });
   };
   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: [
-      /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.phone }),
-      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.codeSent.replace("{to}", sentTo) }),
-      general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    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: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.phone }),
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: ways.phone ? f.t.phoneOn.replace("{to}", ways.phone.number) : `${f.t.phoneOff} ${f.t.phoneHelp}` }),
-    codes && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.keepCodes }),
+  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: [
+      /* @__PURE__ */ jsx(Note, { f, children: f.t.keepCodes }),
       /* @__PURE__ */ jsx("ul", { className: f.cx("codes"), children: codes.map((c) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("code", { children: c }) }, c)) })
     ] }),
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+    general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     !ways.phone && /* @__PURE__ */ jsx(Field, { f, name: "phone", type: "tel", label: f.t.phone, value: number, autoComplete: "tel", required: true, onChange: setNumber }),
-    !ways.phone && ways.phoneChannels.length > 1 && /* @__PURE__ */ jsx("div", { className: f.cx("field"), role: "radiogroup", children: ways.phoneChannels.map((c) => /* @__PURE__ */ jsxs("label", { className: f.cx("label"), children: [
+    !ways.phone && ways.phoneChannels.length > 1 && f.C.Select && /* @__PURE__ */ jsx(ChannelPick, { f, value: channel, channels: ways.phoneChannels, onChange: setChannel }),
+    !ways.phone && ways.phoneChannels.length > 1 && !f.C.Select && /* @__PURE__ */ jsx("div", { className: f.cx("field"), role: "radiogroup", children: ways.phoneChannels.map((c) => /* @__PURE__ */ jsxs("label", { className: f.cx("label"), children: [
       /* @__PURE__ */ jsx("input", { type: "radio", name: "channel", value: c, checked: channel === c, onChange: () => setChannel(c) }),
       " ",
       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 }) {
@@ -2274,13 +2544,15 @@ function AgentsPart({ props, when }) {
   }, []);
   if (list.length === 0) return null;
   const disconnect = async (id) => {
-    const r = await run(() => auth.account.disconnectAgent(id));
-    if (r.ok) setList(list.filter((a) => a.id !== 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: [
-    /* @__PURE__ */ jsx("h2", { className: f.cx("heading"), children: f.t.agents }),
-    /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.agentsHelp }),
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
+  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) }),
     /* @__PURE__ */ jsx("ul", { className: f.cx("sessions"), children: list.map((a) => /* @__PURE__ */ jsxs("li", { className: f.cx("session"), children: [
       a.name || f.t.anAgent,
       a.redirectHost ? ` (${a.redirectHost})` : "",
@@ -2290,37 +2562,71 @@ 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)) })
   ] });
 }
-function SignOutEverywhere({ props }) {
+function SessionsPart({ props, when }) {
   const auth = useAuth();
   const { f, run, general } = useSection(props);
+  const [sessions, setSessions] = useState([]);
+  useEffect(() => {
+    void auth.account.sessions().then(setSessions);
+  }, []);
   const end = async () => {
     const r = await run(() => auth.account.signOutEverywhere());
     if (!r.ok) return;
+    props.onSaved?.({ kind: "sessions.ended" });
     if (props.onSignedOut) props.onSignedOut();
     else window.location.assign("/");
   };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    general && /* @__PURE__ */ jsx("p", { role: "alert", className: f.cx("error"), children: f.say(general) }),
-    /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("button"), onClick: () => void end(), children: f.t.signOutEverywhere })
+  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,
+      " \xB7 ",
+      s.ip,
+      " \xB7 ",
+      when(s.createdAt)
+    ] }, i)) }),
+    general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
+    /* @__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 }) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(Labelled, { f, id, label: f.t.channel, children: /* @__PURE__ */ jsx(
+    Pick,
+    {
+      f,
+      id,
+      name: "channel",
+      value,
+      options: channels.map((c) => ({ value: c, label: c === "whatsapp" ? f.t.byWhatsapp : f.t.bySms })),
+      onChange: (c) => onChange(c)
+    }
+  ) });
+}
 
 // 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" } });
@@ -2378,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);
@@ -2387,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();
@@ -2425,15 +2732,25 @@ function useAuth() {
       status,
       refresh
     };
-  }, [basePath, refresh, session, status]);
+  }, [basePath, locale, refresh, session, status]);
 }
 export {
   AcceptInvite,
   Account,
+  AccountAgents,
+  AccountEmail,
+  AccountLinked,
+  AccountPasskeys,
+  AccountPassword,
+  AccountPhone,
+  AccountProfile,
+  AccountSecondStep,
+  AccountSessions,
   CauthyProvider,
   ForgotPassword,
   GoogleOneTap,
   OrganizationMembers,
+  PendingTerms,
   ResetPassword,
   SignIn,
   SignUp,