cauthy-auth 0.31.0 → 0.32.0

package/dist/react.mjs

@@ -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, 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.",
@@ -1188,8 +1196,10 @@ 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 own = (slot) => props.classNames?.[slot];
+  const C = props.components ?? {};
+  const Button = C.Button ?? PlainButton;
+  const Input = C.Input ?? PlainInput;
   const [error, setError] = useState(null);
   const [busy, setBusy] = useState(false);
   const [policy, setPolicy] = useState(void 0);
@@ -1204,7 +1214,81 @@ 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, busy, setBusy, say, done, root, policy, setPolicy, passwordRule };
+}
+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) {
@@ -1222,26 +1306,43 @@ function Field(p) {
   const { f } = p;
   const bad = f.error?.field === p.name ? f.error : null;
   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) })
   ] });
@@ -1325,10 +1426,17 @@ 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) }),
+    /* @__PURE__ */ jsx(Note, { f, children: phoneSent ? f.t.codeSent.replace("{to}", phoneSent) : phoneWay?.email ? f.t.codeHelpEmail.replace("{to}", phoneWay.email.to) : phoneWay?.phone && !phoneWay.totp ? f.t.codeHelpPhone : f.t.codeHelp }),
+    general && /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: f.say(general) }),
     phoneWay?.email && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void sendEmail(), children: f.t.sendEmailAgain }),
-    pushNumber > 0 ? /* @__PURE__ */ jsxs("div", { className: f.cx("notice"), role: "status", "aria-live": "polite", children: [
+    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 })
@@ -1340,7 +1448,7 @@ function SecondStepForm(p) {
 }
 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", 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,
     " ",
@@ -1462,27 +1570,27 @@ function SignIn(props) {
   if (step === "opening") return /* @__PURE__ */ jsx("div", { className: f.cx("form"), ...f.root, "aria-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 }),
+      /* @__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 })
     ] });
   }
   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) }),
+    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 }),
+    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: [
       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,7 +1602,7 @@ 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,
@@ -1502,10 +1610,10 @@ function SignIn(props) {
     ] }),
     !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?.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 })
     ] })
   ] });
 }
@@ -1564,49 +1672,36 @@ function SignUp(props) {
   const providers = auth.session?.user.isAnonymous === true || 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 })
+      /* @__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: [
+  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) }),
+      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) }),
+    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 }),
+    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 }),
     footer
@@ -1631,16 +1726,16 @@ function ForgotPassword(props) {
   const general = f.error && !f.error.field ? f.error : null;
   if (sent) {
     return /* @__PURE__ */ jsxs("div", { className: f.cx("form"), ...f.root, children: [
-      /* @__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 })
+      /* @__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) }),
+    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 }) })
+    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,21 +1759,21 @@ 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 }),
+      /* @__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 })
+      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) }),
+    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 })
   ] });
@@ -1700,10 +1795,10 @@ function VerifyEmail(props) {
     });
   });
   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 })
+    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,17 +1831,18 @@ 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("div", { className: f.cx("form"), ...f.root, "aria-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 }),
+      /* @__PURE__ */ jsx(Say, { f, tone: "danger", children: general ? f.say(general) : f.t.invitationInvalid }),
       back
     ] });
   }
@@ -1754,14 +1850,43 @@ function AcceptInvite(props) {
   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) }),
+    /* @__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 })
   ] });
 }
+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("div", { className: f.cx("form"), ...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", 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);
@@ -1780,37 +1905,65 @@ function useSection(props) {
 function Account(props) {
   const auth = useAuth();
   const { accountUrl } = useSession();
-  const { t, root } = useForm(props);
+  const { root } = useForm(props);
   const cx = (slot) => props.classNames?.[slot] ?? `cauthy-${slot}`;
   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" });
   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("div", { className: cx("account"), ...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 +1975,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 +1994,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,17 +2003,17 @@ 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 (gone !== null) return /* @__PURE__ */ jsx("div", { className: f.cx("account"), ...root, children: /* @__PURE__ */ jsx(Say, { f, tone: "success", children: gone }) });
   if (seat === void 0) return /* @__PURE__ */ jsx("div", { className: f.cx("account"), ...root, "aria-busy": "true" });
-  if (seat === null) return /* @__PURE__ */ jsx("div", { className: f.cx("account"), ...root, children: /* @__PURE__ */ jsx("p", { className: f.cx("notice"), children: f.t.organizationMissing }) });
+  if (seat === null) return /* @__PURE__ */ jsx("div", { className: f.cx("account"), ...root, children: /* @__PURE__ */ jsx(Note, { f, children: f.t.organizationMissing }) });
   const manage = seat.can.manageMembers;
-  const giveable = rolesToGive(seat, roles);
+  const giveable = rolesToGive(seat, roles, props.roles);
   const label = (r) => roles.find((c) => c.role === r)?.name || r;
   const add = async (e) => {
     e.preventDefault();
@@ -1865,22 +2021,28 @@ function OrganizationMembers(props) {
     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();
+    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));
     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);
+    if (!r.ok) return;
+    setDone(f.t.memberInvitationSent);
+    saved({ kind: "member.invited_again", organizationId: id, userId: m.userId });
   };
   const rename = async (e) => {
     e.preventDefault();
@@ -1889,11 +2051,21 @@ function OrganizationMembers(props) {
     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));
+    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 }),
@@ -1901,81 +2073,96 @@ function OrganizationMembers(props) {
     /* @__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 })
   ] });
+  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("div", { className: f.cx("account"), ...root, children: [
     /* @__PURE__ */ jsxs("section", { className: f.cx("section"), children: [
-      /* @__PURE__ */ jsxs("h2", { className: f.cx("heading"), 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",
+            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: c.name || c.role })),
+              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: [
+          asking === m.userId ? confirming(question, action, () => void remove(m)) : /* @__PURE__ */ jsxs(Fragment2, { children: [
             may.inviteAgain && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => void inviteAgain(m), children: f.t.memberInviteAgain }),
-            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 })
+            removable && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask(m.userId, action, question, () => void remove(m)), children: action })
           ] })
         ] }, 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 }),
+      /* @__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(AddRole, { f, value: role, options: giveable.map((c) => ({ value: c.role, label: c.name || c.role })), onChange: setRole }),
       /* @__PURE__ */ jsx(f.Button, { type: "submit", disabled: f.busy, className: f.cx("button"), children: f.t.memberAdd })
     ] }),
-    (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("section", { className: f.cx("section"), children: [
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.organization }),
+      renaming && /* @__PURE__ */ jsxs("form", { 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 })
       ] }),
-      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", disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask("archive", f.t.organizationArchive, archiveQuestion, () => void close("archive")), children: f.t.organizationArchive }),
+        deleting && /* @__PURE__ */ jsx(f.Button, { type: "button", disabled: f.busy, className: f.cx("providerButton"), onClick: () => ask("delete", f.t.organizationDelete, deleteQuestion, () => void close("delete")), children: f.t.organizationDelete })
       ] })
     ] })
   ] });
 }
+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);
@@ -1993,8 +2180,8 @@ 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 })
+      /* @__PURE__ */ jsx(Heading, { f, children: f.t.passkeys }),
+      /* @__PURE__ */ jsx(A, { f, href: accountUrl, children: f.t.managePasskeys })
     ] });
   }
   const add = async (e, kind = "device") => {
@@ -2008,18 +2195,21 @@ 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));
+    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: [
+    /* @__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),
       " ",
@@ -2029,7 +2219,7 @@ function PasskeysPart({ props, account, accountUrl, when }) {
     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 })
+    done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
 function ProfilePart({ props, account, onSaved }) {
@@ -2042,14 +2232,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) }),
+    /* @__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 })
+    done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
 function EmailPart({ props, account }) {
@@ -2063,15 +2254,16 @@ function EmailPart({ props, account }) {
     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) }),
+    /* @__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 })
+    done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
 function LinkedPart({ props }) {
@@ -2084,21 +2276,26 @@ 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));
+    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: [
+    /* @__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}` : "",
       " ",
@@ -2124,14 +2321,15 @@ function PasswordPart({ props }) {
     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) }),
+    /* @__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 })
+    done && /* @__PURE__ */ jsx(Say, { f, tone: "success", children: done })
   ] });
 }
 function SecondStepPart({ props, account, onChanged }) {
@@ -2155,6 +2353,7 @@ function SecondStepPart({ props, account, onChanged }) {
     setPassword("");
     setCodes(r.recoveryCodes);
     onChanged(true);
+    props.onSaved?.({ kind: "mfa.enabled" });
   };
   const turnOff = async (e) => {
     e.preventDefault();
@@ -2163,32 +2362,35 @@ 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);
+    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 }),
+      /* @__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 })
     ] });
   }
   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 }),
+    /* @__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 })
@@ -2226,6 +2428,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,27 +2439,29 @@ 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) }),
+      /* @__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 })
     ] });
   }
   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 }),
+    /* @__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
@@ -2275,12 +2480,14 @@ 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));
+    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) }),
+    /* @__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})` : "",
@@ -2294,20 +2501,47 @@ function AgentsPart({ props, when }) {
     ] }, 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) }),
+  return /* @__PURE__ */ jsxs("section", { className: f.cx("section"), 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", 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";
@@ -2430,10 +2664,20 @@ function useAuth() {
 export {
   AcceptInvite,
   Account,
+  AccountAgents,
+  AccountEmail,
+  AccountLinked,
+  AccountPasskeys,
+  AccountPassword,
+  AccountPhone,
+  AccountProfile,
+  AccountSecondStep,
+  AccountSessions,
   CauthyProvider,
   ForgotPassword,
   GoogleOneTap,
   OrganizationMembers,
+  PendingTerms,
   ResetPassword,
   SignIn,
   SignUp,