cauthy-auth 0.34.0 → 0.35.0

package/README.md

@@ -187,13 +187,21 @@ const Form: AuthComponents['Form'] = ({ as, children, ...rest }) =>
   as === 'form' ? <Stack as="form" gap={3} {...rest}>{children}</Stack> : <Stack gap={3} {...rest}>{children}</Stack>
 ```
 
-`Button` is told what kind of button it is: `primary` sends the form; `secondary` is any other way (a provider, a passkey, a sign-in link, SSO, cancel, send again); `danger` removes, leaves, deletes, disconnects, signs out everywhere or turns the second step off. `loading` is true on the one button whose action is under way; every button is `disabled` meanwhile.
+`Button` is told what kind of button it is: `primary` sends the form; `secondary` is any other way (a provider, a passkey, a sign-in link, SSO, cancel, send again); `danger` removes, leaves, deletes, disconnects, signs out everywhere or turns the second step off. `loading` is true on the one button whose action is under way; every button and field is `disabled` meanwhile, and the form carries `aria-busy`. After a sign-in, `loading` stays true until the page is left, so draw your design system's spinner whenever it is true and keep the label:
+
+```tsx
+const Button = ({ variant, loading, children, ...rest }: AuthButtonProps) => (
+  <MyButton tone={variant} isLoading={loading} aria-busy={loading || undefined} {...rest}>{children}</MyButton>
+)
+```
+
+The forms stay busy from the press until the work is really over. A sign-in that leaves the form (the password, the second step, a passkey, a provider, SSO, a sign-up done, an invitation accepted) stays busy until the browser leaves the page; with `onSuccess`, return a Promise when the form stays on screen while your application moves on (`onSuccess={() => router.navigate({ to: '/' })}`), and the form waits for it, then is free again if still shown. A plain `onSuccess` keeps it busy until it unmounts. A refusal, a sign-in link sent or a sign-up that asks to confirm the address frees it; so does coming back from the browser's back-forward cache. Until the workspace says what it offers, `<SignIn />` shows its form busy with nothing to press, and `<SignUp />`, `<Account />` and `<OrganizationMembers />` say "Loading…" (`texts.loading`). The plain button draws a spinner before its label (`.cauthy-spinner` in `styles.css`, still under `prefers-reduced-motion`); with `unstyled`, it adds "…" after the label.
 
 | Part | Is given |
 | --- | --- |
 | `Form` | `as` (`form` or `div`), `onSubmit`, `noValidate`, `aria-busy`, `className`, `section`, `children`. Render a `<form>` for `as="form"`, for Enter to send it. `section` names each part of `<Account />` (`profile`, `passkeys`… as in `AccountSection`) and of `<OrganizationMembers />` (`members`, `add-member`, `organization`, `rename`), to draw each as a card |
 | `Button` | `type`, `variant` (`primary`, `secondary`, `danger`), `loading`, `disabled`, `className`, `onClick`, `children` |
-| `Input` | `id`, `name`, `type`, `value`, `autoComplete`, `required`, `className`, `aria-invalid`, `aria-describedby`, `onChange(e)` |
+| `Input` | `id`, `name`, `type`, `value`, `autoComplete`, `required`, `disabled`, `className`, `aria-invalid`, `aria-describedby`, `onChange(e)` |
 | `Checkbox` | `id`, `name`, `checked`, `required`, `disabled`, `className`, `onChange(checked)`, `children` (its label) |
 | `Select` | `id`, `name`, `value`, `options: { value, label }[]`, `disabled`, `className`, `aria-label`, `onChange(value)` |
 | `Field` | `id`, `label`, `aside`, `help`, `error`, `required`, `className`, `children` (the control). Give the help the id `${id}-hint` and the error `${id}-error` |
@@ -212,7 +220,7 @@ What Cauthy mails from these forms (a sign-in link, a new password, a confirmati
 <CauthyProvider locale={() => i18n.language}>
 ```
 
-`texts` changes any sentence. Its keys are stable: `email`, `password`, `name`, `code`, `signIn`, `signUp`, `continueWith`, `orWithEmail`, `forgotPassword`, `noAccount`, `createAccount`, `company`, `iAccept`, `and`, `termsOfService`, `privacyPolicy`, `haveAccount`, `sendLink`, `linkSent`, `codeHelp`, `codeHelpPhone`, `codeHelpEmail`, `sendEmailAgain`, `sendCodeSms`, `sendCodeWhatsapp`, `codeSent`, `pushSend`, `pushPick`, `pushWaiting`, `phone`, `phoneHelp`, `phoneOn`, `phoneOff`, `addPhone`, `removePhone`, `bySms`, `byWhatsapp`, `channel`, `verify`, `checkEmail`, `backToSignIn`, `emailMeALink`, `usePasskey`, `codeFromMail`, `signInLinkSent`, `newPassword`, `savePassword`, `passwordChanged`, `confirming`, `emailConfirmed`, `invitedTo`, `invitedToOrganization`, `invitedAs`, `choosePassword`, `acceptInvite`, `openingInvitation`, `invitationInvalid`, `profile`, `save`, `saved`, `currentPassword`, `changePassword`, `passwordChangedHere`, `secondStep`, `secondStepOn`, `secondStepOff`, `turnOn`, `turnOff`, `addToApp`, `openInApp`, `recoveryCodes`, `newRecoveryCodes`, `keepCodes`, `passkeys`, `managePasskeys`, `passkeysHelp`, `noPasskeys`, `passkeyName`, `addPasskey` (unused), `addPasskeyDevice`, `addSecurityKey`, `passkeyKinds`, `removePasskey`, `passkeyAdded`, `passkeyUnnamed`, `sessions`, `signOutEverywhere`, `agents`, `agentsHelp`, `disconnect`, `anAgent`, `unknownDevice`, `emailAddress`, `newEmail`, `changeEmail`, `emailSent`, `linkedAccounts`, `noLinkedAccounts`, `linkWith`, `unlink`, `linked`, `ssoOnly`, `members`, `membersHidden`, `organizationMissing`, `memberYou`, `memberInvited`, `memberManager`, `memberRole`, `memberAdd`, `memberAdded`, `memberRemove`, `memberRemoveConfirm`, `memberLeave`, `memberLeaveConfirm`, `memberInviteAgain`, `memberInvitationSent`, `organization`, `organizationRename`, `organizationRenamed`, `organizationArchive`, `organizationArchiveConfirm`, `organizationArchived`, `organizationDelete`, `organizationDeleteConfirm`, `organizationDeleted`, `yes`, `cancel`, `termsChanged`, `termsChangedHelp`, `acceptTerms`, and `errors` by error code. Built in: English and Spanish (`locale`). The dashboard can start the look from your stylesheet (shadcn/ui and Tailwind, Stackmyth, or variables of your own); `npx cauthy-auth theme --css src/app/globals.css` reads it the same way from a terminal.
+`texts` changes any sentence. Its keys are stable: `email`, `password`, `name`, `code`, `signIn`, `signUp`, `continueWith`, `orWithEmail`, `forgotPassword`, `noAccount`, `createAccount`, `company`, `iAccept`, `and`, `termsOfService`, `privacyPolicy`, `haveAccount`, `sendLink`, `linkSent`, `codeHelp`, `codeHelpPhone`, `codeHelpEmail`, `sendEmailAgain`, `sendCodeSms`, `sendCodeWhatsapp`, `codeSent`, `pushSend`, `pushPick`, `pushWaiting`, `phone`, `phoneHelp`, `phoneOn`, `phoneOff`, `addPhone`, `removePhone`, `bySms`, `byWhatsapp`, `channel`, `verify`, `checkEmail`, `backToSignIn`, `emailMeALink`, `usePasskey`, `codeFromMail`, `signInLinkSent`, `newPassword`, `savePassword`, `passwordChanged`, `confirming`, `loading`, `emailConfirmed`, `invitedTo`, `invitedToOrganization`, `invitedAs`, `choosePassword`, `acceptInvite`, `openingInvitation`, `invitationInvalid`, `profile`, `save`, `saved`, `currentPassword`, `changePassword`, `passwordChangedHere`, `secondStep`, `secondStepOn`, `secondStepOff`, `turnOn`, `turnOff`, `addToApp`, `openInApp`, `recoveryCodes`, `newRecoveryCodes`, `keepCodes`, `passkeys`, `managePasskeys`, `passkeysHelp`, `noPasskeys`, `passkeyName`, `addPasskey` (unused), `addPasskeyDevice`, `addSecurityKey`, `passkeyKinds`, `removePasskey`, `passkeyAdded`, `passkeyUnnamed`, `sessions`, `signOutEverywhere`, `agents`, `agentsHelp`, `disconnect`, `anAgent`, `unknownDevice`, `emailAddress`, `newEmail`, `changeEmail`, `emailSent`, `linkedAccounts`, `noLinkedAccounts`, `linkWith`, `unlink`, `linked`, `ssoOnly`, `members`, `membersHidden`, `organizationMissing`, `memberYou`, `memberInvited`, `memberManager`, `memberRole`, `memberAdd`, `memberAdded`, `memberRemove`, `memberRemoveConfirm`, `memberLeave`, `memberLeaveConfirm`, `memberInviteAgain`, `memberInvitationSent`, `organization`, `organizationRename`, `organizationRenamed`, `organizationArchive`, `organizationArchiveConfirm`, `organizationArchived`, `organizationDelete`, `organizationDeleteConfirm`, `organizationDeleted`, `yes`, `cancel`, `termsChanged`, `termsChangedHelp`, `acceptTerms`, and `errors` by error code. Built in: English and Spanish (`locale`). The dashboard can start the look from your stylesheet (shadcn/ui and Tailwind, Stackmyth, or variables of your own); `npx cauthy-auth theme --css src/app/globals.css` reads it the same way from a terminal.
 
 Connect your application to Cauthy in one step, from Cauthy's dashboard ("Connect a System") or from a terminal. In the application's folder, `init` reads its framework (Next.js, TanStack Start, React Router or Remix, SvelteKit, Vite + React, Express, Hono, Fastify), makes the client, writes every variable to its env file, `CAUTHY_SECRET` included, and lays down the route and a sign-in page, never over a file that is there:
 

package/dist/react.d.mts

@@ -1197,6 +1197,8 @@ interface AuthTexts {
     savePassword: string;
     passwordChanged: string;
     confirming: string;
+    /** While a form waits on what the workspace offers, or on the account it shows. */
+    loading: string;
     emailConfirmed: string;
     invitedTo: string;
     invitedToOrganization: string;
@@ -1283,7 +1285,7 @@ interface AuthTexts {
     /** By error code; one missing shows what the server said. */
     errors: Record<string, string>;
 }
-type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'providerIcon' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
+type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'providerIcon' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'pending' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
 interface AuthFormProps {
     /** The language of the built-in sentences. Default: `en`. */
     locale?: 'en' | 'es';
@@ -1291,8 +1293,14 @@ interface AuthFormProps {
     texts?: Partial<Omit<AuthTexts, 'errors'>> & {
         errors?: Record<string, string>;
     };
-    /** Called once the person is signed in. Default: go to `returnTo`. */
-    onSuccess?: () => void;
+    /**
+     * Called once the person is signed in, instead of going to `returnTo`. The
+     * form stays busy (its button loading, every control disabled) until it
+     * leaves the page. When the application keeps the form on screen while it
+     * moves on (a router's navigation, loading the session), return a Promise:
+     * the form waits for it, then is free again if it is still shown.
+     */
+    onSuccess?: () => void | Promise<unknown>;
     /** Where to go after signing in, and where a provider returns to. Default: `/`. */
     returnTo?: string;
     /**
@@ -1335,7 +1343,9 @@ interface AuthFormProps {
  * other action (a provider, a passkey, a sign-in link, cancel, send again);
  * `danger` removes, leaves, deletes, disconnects or turns something off.
  * `loading` is true on the one button whose action is under way; every
- * button is `disabled` meanwhile, as before.
+ * button is `disabled` meanwhile. Draw a spinner (or the like) on the button
+ * while `loading` is true, and keep its label: after a sign-in it stays true
+ * until the page is left, so the person sees the work go on.
  */
 interface AuthButtonProps {
     type: 'submit' | 'button';
@@ -1376,6 +1386,7 @@ interface AuthInputProps {
     value: string;
     autoComplete?: string;
     required?: boolean;
+    disabled?: boolean;
     className?: string;
     'aria-invalid'?: boolean;
     'aria-describedby'?: string;
@@ -1533,8 +1544,11 @@ interface AcceptInviteProps extends AuthFormProps {
 }
 declare function AcceptInvite(props: AcceptInviteProps): react.JSX.Element;
 interface PendingTermsProps extends Omit<AuthFormProps, 'links' | 'returnTo' | 'createAccounts'> {
-    /** Called once the person accepted. Nothing else happens: the application decides what follows. */
-    onSuccess?: () => void;
+    /**
+     * Called once the person accepted. Nothing else happens: the application
+     * decides what follows. A Promise keeps the button loading until it settles.
+     */
+    onSuccess?: () => void | Promise<unknown>;
 }
 /**
  * The legal documents the signed-in person still owes (a new version of the
@@ -1587,8 +1601,8 @@ type AccountEvent = {
     kind: 'sessions.ended';
 };
 interface AccountProps extends Omit<AuthFormProps, 'links' | 'returnTo' | 'onSuccess'> {
-    /** Called after "sign out everywhere". Default: go to `/`. */
-    onSignedOut?: () => void;
+    /** Called after "sign out everywhere". Default: go to `/`. A Promise keeps the button loading until it settles. */
+    onSignedOut?: () => void | Promise<unknown>;
     /** The moment of a session, as the application writes dates. Default: the browser's own way, in the reader's time zone. */
     formatDate?: (iso: string) => string;
     /**

package/dist/react.d.ts

@@ -1197,6 +1197,8 @@ interface AuthTexts {
     savePassword: string;
     passwordChanged: string;
     confirming: string;
+    /** While a form waits on what the workspace offers, or on the account it shows. */
+    loading: string;
     emailConfirmed: string;
     invitedTo: string;
     invitedToOrganization: string;
@@ -1283,7 +1285,7 @@ interface AuthTexts {
     /** By error code; one missing shows what the server said. */
     errors: Record<string, string>;
 }
-type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'providerIcon' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
+type Slot = 'form' | 'field' | 'label' | 'input' | 'button' | 'providerButton' | 'providerIcon' | 'link' | 'error' | 'fieldError' | 'hint' | 'notice' | 'pending' | 'separator' | 'footer' | 'check' | 'account' | 'section' | 'heading' | 'secret' | 'codes' | 'sessions' | 'session';
 interface AuthFormProps {
     /** The language of the built-in sentences. Default: `en`. */
     locale?: 'en' | 'es';
@@ -1291,8 +1293,14 @@ interface AuthFormProps {
     texts?: Partial<Omit<AuthTexts, 'errors'>> & {
         errors?: Record<string, string>;
     };
-    /** Called once the person is signed in. Default: go to `returnTo`. */
-    onSuccess?: () => void;
+    /**
+     * Called once the person is signed in, instead of going to `returnTo`. The
+     * form stays busy (its button loading, every control disabled) until it
+     * leaves the page. When the application keeps the form on screen while it
+     * moves on (a router's navigation, loading the session), return a Promise:
+     * the form waits for it, then is free again if it is still shown.
+     */
+    onSuccess?: () => void | Promise<unknown>;
     /** Where to go after signing in, and where a provider returns to. Default: `/`. */
     returnTo?: string;
     /**
@@ -1335,7 +1343,9 @@ interface AuthFormProps {
  * other action (a provider, a passkey, a sign-in link, cancel, send again);
  * `danger` removes, leaves, deletes, disconnects or turns something off.
  * `loading` is true on the one button whose action is under way; every
- * button is `disabled` meanwhile, as before.
+ * button is `disabled` meanwhile. Draw a spinner (or the like) on the button
+ * while `loading` is true, and keep its label: after a sign-in it stays true
+ * until the page is left, so the person sees the work go on.
  */
 interface AuthButtonProps {
     type: 'submit' | 'button';
@@ -1376,6 +1386,7 @@ interface AuthInputProps {
     value: string;
     autoComplete?: string;
     required?: boolean;
+    disabled?: boolean;
     className?: string;
     'aria-invalid'?: boolean;
     'aria-describedby'?: string;
@@ -1533,8 +1544,11 @@ interface AcceptInviteProps extends AuthFormProps {
 }
 declare function AcceptInvite(props: AcceptInviteProps): react.JSX.Element;
 interface PendingTermsProps extends Omit<AuthFormProps, 'links' | 'returnTo' | 'createAccounts'> {
-    /** Called once the person accepted. Nothing else happens: the application decides what follows. */
-    onSuccess?: () => void;
+    /**
+     * Called once the person accepted. Nothing else happens: the application
+     * decides what follows. A Promise keeps the button loading until it settles.
+     */
+    onSuccess?: () => void | Promise<unknown>;
 }
 /**
  * The legal documents the signed-in person still owes (a new version of the
@@ -1587,8 +1601,8 @@ type AccountEvent = {
     kind: 'sessions.ended';
 };
 interface AccountProps extends Omit<AuthFormProps, 'links' | 'returnTo' | 'onSuccess'> {
-    /** Called after "sign out everywhere". Default: go to `/`. */
-    onSignedOut?: () => void;
+    /** Called after "sign out everywhere". Default: go to `/`. A Promise keeps the button loading until it settles. */
+    onSignedOut?: () => void | Promise<unknown>;
     /** The moment of a session, as the application writes dates. Default: the browser's own way, in the reader's time zone. */
     formatDate?: (iso: string) => string;
     /**

package/dist/react.js

@@ -823,6 +823,7 @@ var TEXTS = {
     savePassword: "Save the password",
     passwordChanged: "Your password was changed. You can sign in with it now.",
     confirming: "Confirming your address\u2026",
+    loading: "Loading\u2026",
     emailConfirmed: "Your address is confirmed. You can sign in now.",
     invitedTo: "You've been invited to {workspace}",
     invitedToOrganization: "You've been invited to {organization} on {workspace}",
@@ -1004,6 +1005,7 @@ var TEXTS = {
     savePassword: "Guardar la contrase\xF1a",
     passwordChanged: "Tu contrase\xF1a se cambi\xF3. Ya puedes entrar con ella.",
     confirming: "Confirmando tu correo\u2026",
+    loading: "Cargando\u2026",
     emailConfirmed: "Tu correo qued\xF3 confirmado. Ya puedes entrar.",
     invitedTo: "Te invitaron a {workspace}",
     invitedToOrganization: "Te invitaron a {organization} en {workspace}",
@@ -1136,7 +1138,14 @@ var TEXTS = {
     }
   }
 };
-var PlainButton = ({ variant: _variant, loading: _loading, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ...p });
+var PlainButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { ...p, "aria-busy": loading || void 0, children: [
+  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cauthy-spinner", "aria-hidden": "true" }),
+  children
+] });
+var UnstyledButton = ({ variant: _variant, loading, children, ...p }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { ...p, "aria-busy": loading || void 0, children: [
+  children,
+  loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u2026" })
+] });
 var PlainInput = (p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { ...p });
 var looks = /* @__PURE__ */ new Map();
 var loaded = /* @__PURE__ */ new Set();
@@ -1244,12 +1253,15 @@ function sameOrigin(to) {
     return void 0;
   }
 }
-function useForm(props) {
+function isPending(v) {
+  return typeof v?.then === "function";
+}
+function useForm(props, opts = {}) {
   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 own = (slot) => props.classNames?.[slot];
   const C = props.components ?? {};
-  const Button = C.Button ?? PlainButton;
+  const Button = C.Button ?? (props.unstyled ? UnstyledButton : PlainButton);
   const Input = C.Input ?? PlainInput;
   const [error, setOnlyError] = (0, import_react.useState)(null);
   const [problems, setProblems] = (0, import_react.useState)({ list: [], round: 0 });
@@ -1266,9 +1278,32 @@ function useForm(props) {
   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] = (0, import_react.useState)(null);
-  const busy = acting !== null;
+  const busy = acting !== null || opts.waiting === true;
   const setBusy = (0, import_react.useCallback)((on) => setActing(on === false ? null : on === true ? SUBMIT : on), []);
   const loading = (key = SUBMIT) => acting === key;
+  const shown = (0, import_react.useRef)(true);
+  (0, import_react.useEffect)(() => {
+    shown.current = true;
+    const back = (e) => {
+      if (e.persisted) setActing(null);
+    };
+    window.addEventListener("pageshow", back);
+    return () => {
+      shown.current = false;
+      window.removeEventListener("pageshow", back);
+    };
+  }, []);
+  const hold = (after) => {
+    if (!isPending(after)) return;
+    const free = () => {
+      if (shown.current) setActing(null);
+    };
+    after.then(free, free);
+  };
+  const fail = (e) => {
+    setActing(null);
+    setError(e);
+  };
   const [policy, setPolicy] = (0, import_react.useState)(void 0);
   const locale = props.locale ?? "en";
   const say = (e) => {
@@ -1277,15 +1312,18 @@ function useForm(props) {
   };
   const passwordRule = describePasswordPolicy(policy, locale);
   const done = (to) => {
-    if (props.onSuccess) props.onSuccess();
+    setActing((a) => a ?? SUBMIT);
+    if (props.onSuccess) hold(props.onSuccess());
     else window.location.assign(sitePath(to) ?? sameOrigin(props.returnTo) ?? "/");
   };
-  const root = useRoot(props);
-  return { t, cx, own, C, Button, Input, error, setError, check, fieldError, firstWrong, busy, setBusy, loading, say, done, root, policy, setPolicy, passwordRule };
+  const root = useRoot(opts.part ? { ...props, unstyled: true } : props);
+  const plain = props.unstyled === true;
+  return { t, cx, own, C, Button, Input, error, setError, fail, check, fieldError, firstWrong, busy, setBusy, loading, hold, say, done, root, plain, policy, setPolicy, passwordRule };
 }
 var SUBMIT = "submit";
 function Wrap(p) {
   const { Form: OwnForm } = p.f.C;
+  const busy = p.busy ?? (p.f.busy || void 0);
   if (OwnForm) {
     const own = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       OwnForm,
@@ -1293,7 +1331,7 @@ function Wrap(p) {
         as: p.as === "form" ? "form" : "div",
         onSubmit: p.onSubmit,
         noValidate: p.noValidate,
-        "aria-busy": p.busy,
+        "aria-busy": busy,
         className: p.slot ? p.f.own(p.slot) : void 0,
         section: p.section,
         children: p.children
@@ -1302,7 +1340,16 @@ function Wrap(p) {
     return p.root?.["data-cauthy"] !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...p.root, children: own }) : own;
   }
   const Tag2 = p.as;
-  return /* @__PURE__ */ (0, import_jsx_runtime.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 });
+  const children = p.busy && p.children === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pending, { f: p.f }) : p.children;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag2, { className: p.slot ? p.f.cx(p.slot) : void 0, ...p.root, onSubmit: p.onSubmit, noValidate: p.noValidate, "aria-busy": busy, children });
+}
+function Pending({ f }) {
+  if (f.plain) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { role: "status", children: f.t.loading });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { role: "status", className: f.cx("pending"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "cauthy-spinner", "aria-hidden": "true" }),
+    " ",
+    f.t.loading
+  ] });
 }
 function Note({ f, children, footer }) {
   const { Text } = f.C;
@@ -1343,10 +1390,10 @@ function Check(p) {
   const { f } = p;
   const { Checkbox } = f.C;
   if (Checkbox) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox, { id, name: p.name, checked: p.checked, required: p.required, className: f.own("check"), onChange: p.onChange, children: p.children });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Checkbox, { id, name: p.name, checked: p.checked, required: p.required, disabled: f.busy, className: f.own("check"), onChange: p.onChange, children: p.children });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: f.cx("check"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", name: p.name, checked: p.checked, required: p.required, onChange: (e) => p.onChange(e.target.checked) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "checkbox", name: p.name, checked: p.checked, required: p.required, disabled: f.busy, onChange: (e) => p.onChange(e.target.checked) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: p.children })
   ] });
 }
@@ -1355,10 +1402,11 @@ function Pick(p) {
   const id = p.id ?? made;
   const { f } = p;
   const { Select } = f.C;
+  const disabled = p.disabled || f.busy;
   if (Select) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(Select, { id, name: p.name, value: p.value, options: p.options, disabled, "aria-label": p.label, className: f.own("input"), onChange: p.onChange });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("option", { value: o.value, children: o.label }, o.value)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", { id, name: p.name, "aria-label": p.label, className: f.cx("input"), value: p.value, disabled, onChange: (e) => p.onChange(e.target.value), children: p.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: o.value, children: o.label }, o.value)) });
 }
 function Labelled({ f, id, label, children }) {
   const { Field: OwnField } = f.C;
@@ -1412,6 +1460,7 @@ function Field(p) {
       value: p.value,
       autoComplete: p.autoComplete,
       required: p.required,
+      disabled: f.busy,
       className: f.cx("input"),
       "aria-invalid": bad ? true : void 0,
       "aria-describedby": described || void 0,
@@ -1501,6 +1550,7 @@ function SecondStepForm(p) {
     if (ctl.signal.aborted) return;
     setPushNumber(0);
     if (!done.ok) return f.setError(done.error);
+    f.setBusy("push");
     f.done();
   };
   const sendCode = async () => {
@@ -1516,8 +1566,7 @@ function SecondStepForm(p) {
     f.setBusy(true);
     f.setError(null);
     const r = await auth.signIn.mfa({ code });
-    f.setBusy(false);
-    if (!r.ok) return f.setError(r.error);
+    if (!r.ok) return f.fail(r.error);
     f.done();
   };
   const general = f.error && !f.error.field ? f.error : null;
@@ -1545,7 +1594,11 @@ function SecondStepForm(p) {
 }
 function ProviderButtons(p) {
   const { f } = p;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: p.providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(f.Button, { type: "button", variant: "secondary", className: f.cx("providerButton"), onClick: () => p.onPick(provider.id), children: [
+  const pick = (id) => {
+    f.setBusy(`provider:${id}`);
+    p.onPick(id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: p.providers.map((provider) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(f.Button, { type: "button", variant: "secondary", loading: f.loading(`provider:${provider.id}`), disabled: f.busy, className: f.cx("providerButton"), onClick: () => pick(provider.id), children: [
     provider.iconUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: provider.iconUrl, alt: "", width: 18, height: 18, className: f.cx("providerIcon") }),
     f.t.continueWith,
     " ",
@@ -1558,8 +1611,8 @@ function signInOffers(methods) {
 }
 function SignIn(props) {
   const auth = useAuth();
-  const f = useForm(props);
   const [methods, setMethods] = (0, import_react.useState)(null);
+  const f = useForm(props, { waiting: methods === null });
   const [email, setEmail] = (0, import_react.useState)("");
   const [password, setPassword] = (0, import_react.useState)("");
   const [code, setCode] = (0, import_react.useState)("");
@@ -1631,14 +1684,16 @@ function SignIn(props) {
     f.setBusy(true);
     f.setError(null);
     const r = step === "sent" ? await auth.signIn.emailCode({ code }) : await auth.signIn.email({ email, password, captchaToken: challenge.token });
-    f.setBusy(false);
     if (step === "password") challenge.renew();
     if (!r.ok && r.error.code === "sso_required") return toCompany();
     if (!r.ok) {
       setOffer((n) => n + 1);
-      return f.setError(r.error);
+      return f.fail(r.error);
+    }
+    if (r.status === "mfa_required") {
+      f.setBusy(false);
+      return setStep("code");
     }
-    if (r.status === "mfa_required") return setStep("code");
     f.done("returnTo" in r && typeof r.returnTo === "string" ? r.returnTo : void 0);
   };
   const usePasskey = async () => {
@@ -1647,10 +1702,10 @@ function SignIn(props) {
     f.setError(null);
     const r = await auth.signIn.passkey({ returnTo: props.returnTo, locale: props.locale, email });
     if (r.ok && r.status === "redirected") return;
+    if (r.ok) return f.done();
     f.setBusy(false);
-    if (!r.ok) setOffer((n) => n + 1);
-    if (!r.ok) return r.error.code === "cancelled" ? void 0 : f.setError(r.error);
-    f.done();
+    setOffer((n) => n + 1);
+    if (r.error.code !== "cancelled") f.setError(r.error);
   };
   const sendLink = async () => {
     autofill.current?.abort();
@@ -1767,10 +1822,12 @@ function SignUp(props) {
       ...legal ? { acceptLegal, consents } : {},
       captchaToken: challenge.token
     });
-    f.setBusy(false);
     challenge.renew();
-    if (!r.ok) return f.setError(r.error);
-    if (r.status === "verification_required") return setSent(true);
+    if (!r.ok) return f.fail(r.error);
+    if (r.status === "verification_required") {
+      f.setBusy(false);
+      return setSent(true);
+    }
     f.done();
   };
   const general = f.error && !f.error.field ? f.error : null;
@@ -1933,13 +1990,16 @@ function AcceptInvite(props) {
     f.setBusy(true);
     f.setError(null);
     const r = await auth.acceptInvitation(token, password);
-    f.setBusy(false);
     if (!r.ok) {
+      f.setBusy(false);
       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");
+    if (r.status === "mfa_required") {
+      f.setBusy(false);
+      return setState("code");
+    }
     f.done();
   };
   const general = f.error && !f.error.field ? f.error : null;
@@ -1977,10 +2037,11 @@ function PendingTerms(props) {
     f.setBusy(true);
     f.setError(null);
     const r = await auth.account.acceptLegal({ kinds: owed.map((d) => d.kind) });
+    if (!r.ok) return f.fail(r.error);
+    const after = props.onSuccess?.();
+    if (isPending(after)) await Promise.resolve(after).catch(() => void 0);
     f.setBusy(false);
-    if (!r.ok) return f.setError(r.error);
     setOwed([]);
-    props.onSuccess?.();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrap, { f, as: "div", slot: "form", root: f.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Heading, { f, children: f.t.termsChanged }),
@@ -1995,15 +2056,15 @@ function PendingTerms(props) {
 }
 var ACCOUNT_SECTIONS = ["profile", "email", "password", "linked", "secondStep", "phone", "passkeys", "agents", "sessions"];
 function useSection(props) {
-  const f = useForm({ ...props, unstyled: true });
+  const f = useForm(props, { part: true });
   const [done, setDone] = (0, import_react.useState)(null);
-  const run = async (action, key = SUBMIT) => {
+  const run = async (action, key = SUBMIT, leaves = false) => {
     f.setBusy(key);
     f.setError(null);
     setDone(null);
     const r = await action();
-    f.setBusy(false);
-    if (!r.ok) f.setError(r.error);
+    if (!r.ok) f.fail(r.error);
+    else if (!leaves) f.setBusy(false);
     return r;
   };
   const general = f.error && !f.error.field ? f.error : null;
@@ -2416,11 +2477,26 @@ function LinkedPart({ props }) {
       " ",
       /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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
-    ] }, p.id))
+    offered.filter((p) => !linked.some((x) => x.provider === p.id)).map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      f.Button,
+      {
+        type: "button",
+        variant: "secondary",
+        loading: f.loading(`link:${p.id}`),
+        disabled: f.busy,
+        className: f.cx("providerButton"),
+        onClick: () => {
+          f.setBusy(`link:${p.id}`);
+          auth.account.link(p.id, { returnTo: here });
+        },
+        children: [
+          f.t.linkWith,
+          " ",
+          p.name
+        ]
+      },
+      p.id
+    ))
   ] });
 }
 function PasswordPart({ props }) {
@@ -2578,7 +2654,7 @@ function PhonePart({ props, account, onChanged }) {
     !ways.phone && /* @__PURE__ */ (0, import_jsx_runtime.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 && f.C.Select && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChannelPick, { f, value: channel, channels: ways.phoneChannels, onChange: setChannel }),
     !ways.phone && ways.phoneChannels.length > 1 && !f.C.Select && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: f.cx("field"), role: "radiogroup", children: ways.phoneChannels.map((c) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { className: f.cx("label"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "radio", name: "channel", value: c, checked: channel === c, onChange: () => setChannel(c) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "radio", name: "channel", value: c, checked: channel === c, disabled: f.busy, onChange: () => setChannel(c) }),
       " ",
       c === "whatsapp" ? f.t.byWhatsapp : f.t.bySms
     ] }, c)) }),
@@ -2625,10 +2701,10 @@ function SessionsPart({ props, when }) {
     void auth.account.sessions().then(setSessions);
   }, []);
   const end = async () => {
-    const r = await run(() => auth.account.signOutEverywhere());
+    const r = await run(() => auth.account.signOutEverywhere(), SUBMIT, true);
     if (!r.ok) return;
     props.onSaved?.({ kind: "sessions.ended" });
-    if (props.onSignedOut) props.onSignedOut();
+    if (props.onSignedOut) f.hold(props.onSignedOut());
     else window.location.assign("/");
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrap, { f, as: "section", slot: "section", section: "sessions", children: [