@eifi1/ui-kit 0.28.1 → 0.29.0

package/dist/auth/sign-in-form.js

@@ -0,0 +1,345 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useId, useRef, useState } from "react";
+import { KeyRound } from "lucide-react";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { cn } from "../lib/cn.js";
+import { AlertBanner } from "../components/alert-banner.js";
+import { hasMessage } from "../components/choice-parts.js";
+import { CurrentPasswordInput } from "../components/danger-confirm.js";
+import { OneTimeCodeInput } from "../components/one-time-code-input.js";
+import { TextLink } from "../components/text-link.js";
+import { Button, Input } from "../components/ui.js";
+import { authErrorCode } from "./auth-errors.js";
+import { taggedEmail } from "./email-tag.js";
+import { newPasswordProblem } from "./form-rules.js";
+import { NewPasswordFields } from "./new-password-fields.js";
+const DEFAULT_SIGN_IN_LABELS = {
+  email: "Email",
+  password: "Password",
+  submit: "Sign in",
+  passkey: "Sign in with a passkey",
+  forgotPassword: "Forgot your password?",
+  noAccount: "No account yet?",
+  register: "Create account",
+  invalidCredentials: "The email or password is incorrect.",
+  failed: "Sign-in failed. Please try again.",
+  passkeyFailed: "Passkey sign-in failed.",
+  deactivatedHint: "Account deactivated? Write to {contact}.",
+  tagHint: (taggedAddress) => `Signed up with ${taggedAddress}? Use that address.`,
+  twoFactorTitle: "Two-factor authentication",
+  twoFactorIntro: "Enter the code your authenticator app shows.",
+  code: "2FA code",
+  verify: "Verify",
+  codeInvalid: "Invalid 2FA code.",
+  setPasswordTitle: "Choose a new password",
+  setPasswordIntro: "A new password was requested for this account. Choose one and you are straight back in.",
+  newPassword: "New password",
+  confirmPassword: "Repeat new password",
+  passwordMismatch: "The passwords don't match.",
+  setPasswordSubmit: "Set password and sign in",
+  setPasswordFailed: "The password could not be set.",
+  expired: "This sign-in has expired. Please sign in again.",
+  backToSignIn: "Back to sign in"
+};
+function withContact(template, contact) {
+  const node = typeof contact === "string" && contact.includes("@") ? /* @__PURE__ */ jsx(TextLink, { href: `mailto:${contact}`, tone: "secondary", children: contact }, "contact") : /* @__PURE__ */ jsx("span", { children: contact }, "contact");
+  if (!template.includes("{contact}")) return [template, " ", node];
+  return template.split(/(\{contact\})/).filter((part) => part !== "").map((part) => part === "{contact}" ? node : part);
+}
+const HINT_CLASS = "text-xs text-[var(--text-secondary)]";
+const INTRO_CLASS = "text-sm text-[var(--text-secondary)]";
+function SignInForm({
+  onSubmit,
+  onCode,
+  onSetPassword,
+  onPasskey,
+  passkeyAutofill,
+  forgotHref,
+  registerHref,
+  defaultEmail = "",
+  emailTag,
+  deactivatedContact,
+  codeLength = 6,
+  credentialsContent,
+  twoFactorContent,
+  passwordChangeContent,
+  describeError,
+  onStepChange,
+  headingAs: Heading = "h2",
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useKitLabels("signIn", DEFAULT_SIGN_IN_LABELS, labelsProp);
+  const [step, setStep] = useState("credentials");
+  const [email, setEmail] = useState(defaultEmail);
+  const [password, setPassword] = useState("");
+  const [code, setCode] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [challenge, setChallenge] = useState(
+    null
+  );
+  const [busy, setBusy] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const headingId = useId();
+  const emailRef = useRef(null);
+  const passwordRef = useRef(null);
+  const codeRef = useRef(null);
+  const newPasswordRef = useRef(null);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const goTo = (next) => {
+    setStep(next);
+    onStepChange?.(next);
+  };
+  const present = (answer) => {
+    setFailure(null);
+    if (answer.kind === "signed-in") {
+      setBusy("done");
+      return;
+    }
+    setBusy(null);
+    setPassword("");
+    setCode("");
+    setNewPassword("");
+    setConfirm("");
+    if (answer.kind === "2fa") {
+      setChallenge({ token: answer.challengeToken });
+      goTo("2fa");
+    } else if (answer.kind === "password-change") {
+      setChallenge({ token: answer.challengeToken, extra: answer.extra });
+      goTo("password-change");
+    }
+  };
+  const messageFor = (error, action, code2) => {
+    const own = describeError?.(error, action);
+    if (hasMessage(own)) return own;
+    if (action === "password") return code2 === "invalid_credentials" ? labels.invalidCredentials : labels.failed;
+    if (action === "passkey") return labels.passkeyFailed;
+    if (action === "code") return code2 === "token_invalid" ? labels.expired : labels.codeInvalid;
+    return code2 === "token_invalid" ? labels.expired : labels.setPasswordFailed;
+  };
+  const fail = (error, action, sentEmail) => {
+    setBusy(null);
+    if (error?.name === "AbortError") return;
+    const code2 = authErrorCode(error);
+    const message = messageFor(error, action, code2);
+    if ((action === "code" || action === "set-password") && code2 === "token_invalid") {
+      setChallenge(null);
+      setCode("");
+      setNewPassword("");
+      setConfirm("");
+      goTo("credentials");
+    }
+    setFailure({ action, code: code2, message, email: sentEmail });
+  };
+  const attempt = (action, call, sentEmail) => {
+    if (busy) return;
+    setBusy(action);
+    setFailure(null);
+    let result;
+    try {
+      result = Promise.resolve(call());
+    } catch (error) {
+      result = Promise.reject(error);
+    }
+    result.then(
+      (answer) => {
+        if (mounted.current) present(answer);
+      },
+      (error) => {
+        if (mounted.current) fail(error, action, sentEmail);
+      }
+    );
+  };
+  const armAutofill = useEffectEvent((signal) => passkeyAutofill?.(signal));
+  const autofillAnswered = useEffectEvent((answer) => {
+    if (busy === null) present(answer);
+  });
+  useEffect(() => {
+    const controller = new AbortController();
+    let pending;
+    try {
+      pending = Promise.resolve(armAutofill(controller.signal));
+    } catch (error) {
+      pending = Promise.reject(error);
+    }
+    pending.then(
+      (answer) => {
+        if (answer && !controller.signal.aborted && mounted.current) autofillAnswered(answer);
+      },
+      () => {
+      }
+    );
+    return () => controller.abort();
+  }, []);
+  const shownStep = useRef(step);
+  useEffect(() => {
+    if (shownStep.current === step) return;
+    shownStep.current = step;
+    if (step === "2fa") codeRef.current?.focus();
+    else if (step === "password-change") newPasswordRef.current?.focus();
+    else if (emailRef.current?.value) passwordRef.current?.focus();
+    else emailRef.current?.focus();
+  }, [step]);
+  const backToCredentials = () => {
+    if (busy) return;
+    setChallenge(null);
+    setFailure(null);
+    setCode("");
+    setNewPassword("");
+    setConfirm("");
+    goTo("credentials");
+  };
+  const working = busy !== null;
+  const rootClass = cn("space-y-3", className);
+  if (step === "2fa" && challenge) {
+    const submitCode = (e) => {
+      e.preventDefault();
+      if (code.length !== codeLength) return;
+      attempt("code", () => onCode({ challengeToken: challenge.token, code }));
+    };
+    const codeError = failure?.action === "code" ? failure.message : void 0;
+    return /* @__PURE__ */ jsxs("div", { ...rest, "data-step": "2fa", className: rootClass, children: [
+      /* @__PURE__ */ jsxs("form", { className: "space-y-3", "aria-labelledby": headingId, onSubmit: submitCode, children: [
+        /* @__PURE__ */ jsx(Heading, { id: headingId, className: "text-base font-semibold text-[var(--text-primary)]", children: labels.twoFactorTitle }),
+        /* @__PURE__ */ jsx("p", { className: INTRO_CLASS, children: labels.twoFactorIntro }),
+        twoFactorContent,
+        /* @__PURE__ */ jsx(
+          OneTimeCodeInput,
+          {
+            ref: codeRef,
+            label: labels.code,
+            name: "code",
+            value: code,
+            length: codeLength,
+            onChange: (next) => {
+              setCode(next);
+              if (failure) setFailure(null);
+            },
+            readOnly: working,
+            error: codeError,
+            required: true
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: !working && code.length !== codeLength, pending: working, children: labels.verify })
+      ] }),
+      /* @__PURE__ */ jsx(BackLink, { label: labels.backToSignIn, onClick: backToCredentials, disabled: working })
+    ] });
+  }
+  if (step === "password-change" && challenge) {
+    const problem = newPasswordProblem(newPassword, confirm);
+    const submitPassword = (e) => {
+      e.preventDefault();
+      if (problem) return;
+      attempt("set-password", () => onSetPassword({ challengeToken: challenge.token, password: newPassword }));
+    };
+    const content = typeof passwordChangeContent === "function" ? passwordChangeContent(challenge.extra) : passwordChangeContent;
+    return /* @__PURE__ */ jsxs("div", { ...rest, "data-step": "password-change", className: rootClass, children: [
+      /* @__PURE__ */ jsxs("form", { className: "space-y-3", "aria-labelledby": headingId, onSubmit: submitPassword, children: [
+        /* @__PURE__ */ jsx(Heading, { id: headingId, className: "text-base font-semibold text-[var(--text-primary)]", children: labels.setPasswordTitle }),
+        /* @__PURE__ */ jsx("p", { className: INTRO_CLASS, children: labels.setPasswordIntro }),
+        content,
+        email !== "" && /* @__PURE__ */ jsx("input", { type: "email", name: "username", autoComplete: "username", value: email, readOnly: true, hidden: true }),
+        /* @__PURE__ */ jsx(
+          NewPasswordFields,
+          {
+            password: newPassword,
+            confirm,
+            onPasswordChange: setNewPassword,
+            onConfirmChange: setConfirm,
+            busy: working,
+            passwordRef: newPasswordRef,
+            text: { password: labels.newPassword, confirm: labels.confirmPassword, mismatch: labels.passwordMismatch }
+          }
+        ),
+        failure?.action === "set-password" && /* @__PURE__ */ jsx(AlertBanner, { tone: "danger", size: "sm", role: "alert", children: failure.message }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", disabled: !working && problem !== null, pending: working, children: labels.setPasswordSubmit })
+      ] }),
+      /* @__PURE__ */ jsx(BackLink, { label: labels.backToSignIn, onClick: backToCredentials, disabled: working })
+    ] });
+  }
+  const submitCredentials = (e) => {
+    e.preventDefault();
+    const sent = email.trim();
+    if (sent === "" || password === "") return;
+    attempt("password", () => onSubmit({ email: sent, password }), sent);
+  };
+  const refused = failure?.code === "invalid_credentials";
+  const tagged = refused && failure?.action === "password" && emailTag && failure.email ? taggedEmail(failure.email, emailTag) : null;
+  const showDeactivated = refused && hasMessage(deactivatedContact);
+  return /* @__PURE__ */ jsxs("div", { ...rest, "data-step": "credentials", className: rootClass, children: [
+    /* @__PURE__ */ jsxs("form", { className: "space-y-3", onSubmit: submitCredentials, children: [
+      credentialsContent,
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: emailRef,
+          type: "email",
+          name: "email",
+          autoComplete: "username webauthn",
+          label: labels.email,
+          value: email,
+          onChange: (e) => setEmail(e.target.value),
+          readOnly: working,
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CurrentPasswordInput,
+        {
+          ref: passwordRef,
+          name: "password",
+          label: labels.password,
+          value: password,
+          onValueChange: setPassword,
+          busy: working,
+          required: true
+        }
+      ),
+      failure && // One live region for the sentence and its hints: they are one answer.
+      /* @__PURE__ */ jsxs("div", { role: "alert", className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(AlertBanner, { tone: "danger", size: "sm", children: failure.message }),
+        showDeactivated && /* @__PURE__ */ jsx("p", { className: HINT_CLASS, children: withContact(labels.deactivatedHint, deactivatedContact) }),
+        tagged && /* @__PURE__ */ jsx("p", { className: HINT_CLASS, children: labels.tagHint(tagged) })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", className: "w-full", pending: busy === "password" || busy === "done", disabled: busy === "passkey", children: labels.submit }),
+      onPasskey && /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "secondary",
+          className: "w-full",
+          pending: busy === "passkey",
+          disabled: busy === "password" || busy === "done",
+          onClick: () => attempt("passkey", onPasskey),
+          children: [
+            /* @__PURE__ */ jsx(KeyRound, { "aria-hidden": true, className: "size-4" }),
+            labels.passkey
+          ]
+        }
+      )
+    ] }),
+    forgotHref !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-center text-sm", children: /* @__PURE__ */ jsx(TextLink, { href: forgotHref, tone: "secondary", children: labels.forgotPassword }) }),
+    registerHref !== void 0 && /* @__PURE__ */ jsxs("p", { className: "text-center text-sm text-[var(--text-secondary)]", children: [
+      labels.noAccount,
+      " ",
+      /* @__PURE__ */ jsx(TextLink, { href: registerHref, tone: "primary", children: labels.register })
+    ] })
+  ] });
+}
+function BackLink({ label, onClick, disabled }) {
+  return /* @__PURE__ */ jsx("p", { className: "text-center text-sm", children: /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", tone: "muted", size: "sm", disabled, onClick, children: label }) });
+}
+export {
+  DEFAULT_SIGN_IN_LABELS,
+  SignInForm
+};
+//# sourceMappingURL=sign-in-form.js.map

package/dist/auth/sign-in-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/auth/sign-in-form.tsx"],"sourcesContent":["import { useEffect, useEffectEvent, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, FormEvent, ReactNode } from \"react\";\nimport { KeyRound } from \"lucide-react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { AlertBanner } from \"../components/alert-banner\";\nimport { hasMessage } from \"../components/choice-parts\";\nimport { CurrentPasswordInput } from \"../components/danger-confirm\";\nimport { OneTimeCodeInput } from \"../components/one-time-code-input\";\nimport { TextLink } from \"../components/text-link\";\nimport { Button, Input } from \"../components/ui\";\nimport { authErrorCode } from \"./auth-errors\";\nimport type { AuthErrorCode } from \"./auth-errors\";\nimport { taggedEmail } from \"./email-tag\";\nimport { newPasswordProblem } from \"./form-rules\";\nimport { NewPasswordFields } from \"./new-password-fields\";\n\n/* ── The answers (§5.1) ──────────────────────────────────────────────────── */\n\n/**\n * What a sign-in call answers, in the kit's words — docs/auth-harmonization.md §5.1,\n * keksdose's three shapes. The app maps its own HTTP answer to one of these and resolves\n * with it; a refusal REJECTS (with whatever its client throws — {@link authErrorCode}\n * reads the code out of it).\n *\n * | the server answers (keksdose) | resolve with |\n * |---|---|\n * | `TokenResponse` `{access_token, refresh_token, token_type, user}` | `{ kind: \"signed-in\" }`, after the app has stored the session |\n * | `{requires_2fa: true, challenge_token}` | `{ kind: \"2fa\", challengeToken: challenge_token }` |\n * | `{requires_password_change: true, challenge_token, encrypted}` | `{ kind: \"password-change\", challengeToken: challenge_token, extra: { encrypted } }` |\n * | `401 {code: \"invalid_credentials\"}` | reject — let the client's error through |\n *\n * ```ts\n * async function toAnswer(res: TokenResponse | TwoFactorChallenge | PasswordChangeChallenge): Promise<SignInAnswer> {\n *   if (\"requires_2fa\" in res) return { kind: \"2fa\", challengeToken: res.challenge_token };\n *   if (\"requires_password_change\" in res)\n *     return { kind: \"password-change\", challengeToken: res.challenge_token, extra: { encrypted: res.encrypted } };\n *   await onLoginSuccess(res); // store tokens, load /auth/me, switch language\n *   return { kind: \"signed-in\" };\n * }\n * <SignInForm onSubmit={async (v) => toAnswer(await authApi.login(v))} … />\n * ```\n *\n * The same mapping serves `/auth/login/2fa`, `/auth/login/set-password` and the passkey\n * finish, which answer the same union.\n */\nexport type SignInAnswer =\n  | { kind: \"signed-in\" }\n  | { kind: \"2fa\"; challengeToken: string }\n  | {\n      kind: \"password-change\";\n      challengeToken: string;\n      /** The challenge's app fields, passed through untouched — keksdose's `encrypted`,\n       *  which its note on this step reads (`passwordChangeContent`). */\n      extra?: Readonly<Record<string, unknown>>;\n    };\n\n/** The step on screen: the credentials, the second factor, or a new password. */\nexport type SignInStep = \"credentials\" | \"2fa\" | \"password-change\";\n\n/** What the person did when a call failed — {@link SignInFormProps.describeError}'s\n *  second argument. */\nexport type SignInAction = \"password\" | \"passkey\" | \"code\" | \"set-password\";\n\nexport interface SignInCredentials {\n  /** Trimmed. Lower-casing is the server's (§3.1). */\n  email: string;\n  /** As typed, never trimmed. */\n  password: string;\n}\n\nexport interface SignInCodeValues {\n  challengeToken: string;\n  /** Digits only — {@link OneTimeCodeInput} drops the spaces of \"123 456\". */\n  code: string;\n}\n\nexport interface SignInNewPasswordValues {\n  challengeToken: string;\n  password: string;\n}\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/**\n * Every string `SignInForm` renders — the `signIn` namespace of `<UiKitProvider\n * labels>`, overridable per instance through `labels`. keksdose's words where it has\n * them (`auth.*` in its catalogue).\n */\nexport interface SignInLabels {\n  email: string;\n  password: string;\n  /** The submit button. */\n  submit: string;\n  /** The passkey button (`onPasskey`). */\n  passkey: string;\n  /** The link to `forgotHref`. */\n  forgotPassword: string;\n  /** Before the link to `registerHref`. */\n  noAccount: string;\n  /** The link to `registerHref`. */\n  register: string;\n  /** The ONE answer to an unknown address, a wrong password and a deactivated account\n   *  (`invalid_credentials`, §5.2). */\n  invalidCredentials: string;\n  /** Any other failed sign-in (the network, a 500). */\n  failed: string;\n  /** A failed or refused passkey sign-in. */\n  passkeyFailed: string;\n  /**\n   * The hint under `invalidCredentials` (§2.10), shown when `deactivatedContact` is\n   * given. A TEMPLATE: `{contact}` is replaced by the contact — a `mailto:` link for an\n   * address — so a language puts it where its grammar needs it.\n   */\n  deactivatedHint: string;\n  /** The hint under `invalidCredentials` when `emailTag` is given (§4.5), given the\n   *  typed address with the app's tag: \"Signed up with ada+kastlan@example.com?\". */\n  tagHint: (taggedAddress: string) => string;\n  /** The second-factor step's heading. */\n  twoFactorTitle: string;\n  twoFactorIntro: string;\n  /** The code field's label. */\n  code: string;\n  /** The code step's submit button. */\n  verify: string;\n  /** The code was refused. */\n  codeInvalid: string;\n  /** The set-a-new-password step's heading. */\n  setPasswordTitle: string;\n  setPasswordIntro: string;\n  newPassword: string;\n  confirmPassword: string;\n  passwordMismatch: string;\n  /** The set-a-new-password step's submit button. */\n  setPasswordSubmit: string;\n  setPasswordFailed: string;\n  /** A challenge was refused as `token_invalid` — it expired between the steps; the\n   *  form is back on the credentials. */\n  expired: string;\n  /** From the second and third step back to the credentials. */\n  backToSignIn: string;\n}\n\nexport const DEFAULT_SIGN_IN_LABELS: SignInLabels = {\n  email: \"Email\",\n  password: \"Password\",\n  submit: \"Sign in\",\n  passkey: \"Sign in with a passkey\",\n  forgotPassword: \"Forgot your password?\",\n  noAccount: \"No account yet?\",\n  register: \"Create account\",\n  invalidCredentials: \"The email or password is incorrect.\",\n  failed: \"Sign-in failed. Please try again.\",\n  passkeyFailed: \"Passkey sign-in failed.\",\n  deactivatedHint: \"Account deactivated? Write to {contact}.\",\n  tagHint: (taggedAddress) => `Signed up with ${taggedAddress}? Use that address.`,\n  twoFactorTitle: \"Two-factor authentication\",\n  twoFactorIntro: \"Enter the code your authenticator app shows.\",\n  code: \"2FA code\",\n  verify: \"Verify\",\n  codeInvalid: \"Invalid 2FA code.\",\n  setPasswordTitle: \"Choose a new password\",\n  setPasswordIntro: \"A new password was requested for this account. Choose one and you are straight back in.\",\n  newPassword: \"New password\",\n  confirmPassword: \"Repeat new password\",\n  passwordMismatch: \"The passwords don't match.\",\n  setPasswordSubmit: \"Set password and sign in\",\n  setPasswordFailed: \"The password could not be set.\",\n  expired: \"This sign-in has expired. Please sign in again.\",\n  backToSignIn: \"Back to sign in\",\n};\n\n/* ── Props ───────────────────────────────────────────────────────────────── */\n\nexport interface SignInFormProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onSubmit\" | \"children\"> {\n  /**\n   * The credentials step was submitted. Send them, and resolve with the answer\n   * ({@link SignInAnswer}) or reject with the client's error. The form never sends a\n   * request itself (§8): keksdose must see the password on its way, to refuse the same\n   * string as an encryption passphrase later.\n   *\n   * On `signed-in` the form's job is over — it stays busy while the app navigates.\n   */\n  onSubmit: (credentials: SignInCredentials) => Promise<SignInAnswer>;\n  /** The second factor was submitted (`/auth/login/2fa`). Resolves with the next answer\n   *  — keksdose may still require a new password after the code. */\n  onCode: (values: SignInCodeValues) => Promise<SignInAnswer>;\n  /** The new password was submitted (`/auth/login/set-password`). Resolves with the\n   *  answer, `signed-in` in practice; keksdose's `key_wrap_unchanged` note is the app's\n   *  to show from here. */\n  onSetPassword: (values: SignInNewPasswordValues) => Promise<SignInAnswer>;\n  /**\n   * The passkey button was pressed: run the ceremony (`/auth/passkey/login/begin|finish`)\n   * and resolve with its answer. It asks for NO email — a passkey is bound to the site,\n   * and the browser offers every one it holds (keksdose #126). Left out, no button: pass\n   * it only where `PublicKeyCredential` exists.\n   */\n  onPasskey?: () => Promise<SignInAnswer>;\n  /**\n   * Passkey autofill (conditional mediation). The email field is\n   * `autoComplete=\"username webauthn\"`, so a pending `navigator.credentials.get({\n   * mediation: \"conditional\" })` lists the site's passkeys in its dropdown. The form\n   * calls this ONCE on mount; arm the request there and resolve with its answer when the\n   * person picks a passkey, or with `null` when nothing happens. The signal aborts on\n   * unmount — cancel the pending request then (keksdose: `armPasskeyAutofill(onDone,\n   * signal)` + `cancelPasskeyAutofill()`). A rejection is silent: the button stays the\n   * reliable path.\n   */\n  passkeyAutofill?: (signal: AbortSignal) => Promise<SignInAnswer | null | undefined>;\n  /** \"Forgot your password?\" goes here — the app's `/forgot-password`. Left out, no\n   *  link. */\n  forgotHref?: string;\n  /** \"No account yet? Create account\" goes here — `/register`. Left out, no line. */\n  registerHref?: string;\n  /** The email field's start value — the reset page ends on \"Sign in\" with the address\n   *  filled in (§6.3). */\n  defaultEmail?: string;\n  /**\n   * The app's address tag (`\"kastlan\"`, §4.5). After `invalid_credentials` the form also\n   * says \"Signed up with you+kastlan@example.com? Use that address.\" — sign-in stays\n   * exact, and the server looks nothing up.\n   */\n  emailTag?: string;\n  /**\n   * Who a deactivated user writes to (§2.10): an address (drawn as a `mailto:` link) or\n   * the app's own node. Shown after `invalid_credentials` as \"Account deactivated? Write\n   * to …\". Left out, no hint.\n   */\n  deactivatedContact?: ReactNode;\n  /** Digits of the second factor. Default 6 (TOTP). */\n  codeLength?: number;\n  /** App content at the top of the credentials step — a notice, a demo button. */\n  credentialsContent?: ReactNode;\n  /** App content on the second-factor step, under its intro. */\n  twoFactorContent?: ReactNode;\n  /**\n   * App content on the set-a-new-password step, under its intro — keksdose's\n   * private-mode note (\"Your encrypted data is untouched …\"), which depends on the\n   * challenge: pass a function and it gets the challenge's `extra`.\n   */\n  passwordChangeContent?: ReactNode | ((extra: Readonly<Record<string, unknown>> | undefined) => ReactNode);\n  /**\n   * The app's own words for a failure, or `undefined` for the kit's: a throttled\n   * attempt (`429`), the device being offline. Asked first, for every failure; what it\n   * returns replaces the message, and the `invalid_credentials` hints still follow.\n   */\n  describeError?: (error: unknown, action: SignInAction) => ReactNode | undefined;\n  /** The step changed — retitle the page (`AuthLayout`'s `title`) if the app wants. */\n  onStepChange?: (step: SignInStep) => void;\n  /** The level of the second and third step's heading. Default `h2`, under the page's\n   *  `h1`; one level under `AuthLayout`'s `headingAs` where that is embedded lower. */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  labels?: Partial<SignInLabels>;\n}\n\n/* ── Parts ───────────────────────────────────────────────────────────────── */\n\ninterface Failure {\n  action: SignInAction;\n  code: AuthErrorCode | undefined;\n  message: ReactNode;\n  /** The address the failed credentials carried — the tag hint names its tagged form. */\n  email?: string;\n}\n\n/** `{contact}` in the template, replaced by the contact (a `mailto:` link for an\n *  address). Split, not interpolated, so the link is an element. A template that lost\n *  its placeholder still shows the contact, after it. */\nfunction withContact(template: string, contact: ReactNode): ReactNode[] {\n  const node =\n    typeof contact === \"string\" && contact.includes(\"@\") ? (\n      <TextLink key=\"contact\" href={`mailto:${contact}`} tone=\"secondary\">\n        {contact}\n      </TextLink>\n    ) : (\n      <span key=\"contact\">{contact}</span>\n    );\n  if (!template.includes(\"{contact}\")) return [template, \" \", node];\n  return template\n    .split(/(\\{contact\\})/)\n    .filter((part) => part !== \"\")\n    .map((part) => (part === \"{contact}\" ? node : part));\n}\n\nconst HINT_CLASS = \"text-xs text-[var(--text-secondary)]\";\nconst INTRO_CLASS = \"text-sm text-[var(--text-secondary)]\";\n\n/* ── The form ────────────────────────────────────────────────────────────── */\n\n/**\n * Sign-in for every app (docs/auth-harmonization.md §5, §8): email and password, or a\n * passkey; then the second factor when it is on; then a new password when an admin\n * required one. keksdose's `LoginPage` and `ForcedPasswordChangeStep`\n * (features/auth/login-page.tsx, forced-password-change.tsx), as one component.\n *\n * **It never sends a request.** Each step hands its input to a callback and renders the\n * {@link SignInAnswer} it resolves with; a rejection is shown in the step it came from.\n * The challenge token lives in this component's state only, as in keksdose, so a reload\n * costs a fresh sign-in — no route, no storage.\n *\n * **One error for every wrong credential** (§2.10, §5.2): `invalid_credentials` shows one\n * sentence, whatever was wrong, plus two hints UNDER it — \"Account deactivated? Write to\n * …\" (`deactivatedContact`) and \"Signed up with you+kastlan@…? Use that address.\"\n * (`emailTag`). Any other failure says \"Sign-in failed\" and no hint: the hints answer a\n * refused credential, not a network that is down. `describeError` puts the app's words\n * on a failure the kit cannot know (a throttled attempt).\n *\n * **The steps.**\n *  - Credentials: the email field is `username webauthn` (passkey autofill, see\n *    `passkeyAutofill`), the password a `CurrentPasswordInput` (a password manager fills\n *    it and never offers a new one). The submit is not disabled while the fields are\n *    empty: a browser that autofills on load withholds the values until the first\n *    interaction, and a disabled button would swallow that first click. The fields'\n *    own `required` answers an empty submit instead. \"Forgot your password?\" sits under\n *    the buttons, where someone whose password just failed is already looking\n *    (keksdose #198).\n *  - Second factor: {@link OneTimeCodeInput}, focused on arrival. \"Verify\" waits for the\n *    whole code. A refused code stays here with its error; `token_invalid` (the\n *    challenge expired) goes back to the credentials and says why. Kurvenschmiede has\n *    no 2FA yet, and the step is here from the start, so adding it is backend work only\n *    (§10.5).\n *  - New password: new + confirm with the strength meter, the 8-character / 72-byte\n *    rules and nothing else (§8). It reads as explained, not blocked (keksdose): the\n *    person did nothing wrong.\n *\n * The password is dropped from state once the credentials are answered; \"Back to sign in\"\n * returns to an empty password field.\n */\nexport function SignInForm({\n  onSubmit,\n  onCode,\n  onSetPassword,\n  onPasskey,\n  passkeyAutofill,\n  forgotHref,\n  registerHref,\n  defaultEmail = \"\",\n  emailTag,\n  deactivatedContact,\n  codeLength = 6,\n  credentialsContent,\n  twoFactorContent,\n  passwordChangeContent,\n  describeError,\n  onStepChange,\n  headingAs: Heading = \"h2\",\n  labels: labelsProp,\n  className,\n  ...rest\n}: SignInFormProps) {\n  const labels = useKitLabels(\"signIn\", DEFAULT_SIGN_IN_LABELS, labelsProp);\n  const [step, setStep] = useState<SignInStep>(\"credentials\");\n  const [email, setEmail] = useState(defaultEmail);\n  const [password, setPassword] = useState(\"\");\n  const [code, setCode] = useState(\"\");\n  const [newPassword, setNewPassword] = useState(\"\");\n  const [confirm, setConfirm] = useState(\"\");\n  const [challenge, setChallenge] = useState<{ token: string; extra?: Readonly<Record<string, unknown>> } | null>(\n    null,\n  );\n  // What is running: one call at a time. \"done\" after `signed-in` — the app has the\n  // session and is leaving; the buttons stay busy so nothing is sent twice meanwhile.\n  const [busy, setBusy] = useState<SignInAction | \"done\" | null>(null);\n  const [failure, setFailure] = useState<Failure | null>(null);\n  const headingId = useId();\n\n  const emailRef = useRef<HTMLInputElement>(null);\n  const passwordRef = useRef<HTMLInputElement>(null);\n  const codeRef = useRef<HTMLInputElement>(null);\n  const newPasswordRef = useRef<HTMLInputElement>(null);\n\n  // A late answer after unmount (the app navigated away) must not set state.\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const goTo = (next: SignInStep) => {\n    setStep(next);\n    onStepChange?.(next);\n  };\n\n  const present = (answer: SignInAnswer) => {\n    setFailure(null);\n    if (answer.kind === \"signed-in\") {\n      setBusy(\"done\");\n      return;\n    }\n    setBusy(null);\n    // The password has done its work; it does not stay in state for the next steps.\n    setPassword(\"\");\n    setCode(\"\");\n    setNewPassword(\"\");\n    setConfirm(\"\");\n    if (answer.kind === \"2fa\") {\n      setChallenge({ token: answer.challengeToken });\n      goTo(\"2fa\");\n    } else if (answer.kind === \"password-change\") {\n      setChallenge({ token: answer.challengeToken, extra: answer.extra });\n      goTo(\"password-change\");\n    }\n  };\n\n  const messageFor = (error: unknown, action: SignInAction, code: AuthErrorCode | undefined): ReactNode => {\n    const own = describeError?.(error, action);\n    if (hasMessage(own)) return own;\n    if (action === \"password\") return code === \"invalid_credentials\" ? labels.invalidCredentials : labels.failed;\n    if (action === \"passkey\") return labels.passkeyFailed;\n    if (action === \"code\") return code === \"token_invalid\" ? labels.expired : labels.codeInvalid;\n    return code === \"token_invalid\" ? labels.expired : labels.setPasswordFailed;\n  };\n\n  const fail = (error: unknown, action: SignInAction, sentEmail?: string) => {\n    setBusy(null);\n    // Our own abort (a passkey ceremony cancelled by the unmount) is no failure.\n    if ((error as { name?: unknown } | null)?.name === \"AbortError\") return;\n    const code = authErrorCode(error);\n    const message = messageFor(error, action, code);\n    // The challenge expired between the steps: only a fresh sign-in helps.\n    if ((action === \"code\" || action === \"set-password\") && code === \"token_invalid\") {\n      setChallenge(null);\n      setCode(\"\");\n      setNewPassword(\"\");\n      setConfirm(\"\");\n      goTo(\"credentials\");\n    }\n    setFailure({ action, code, message, email: sentEmail });\n  };\n\n  const attempt = (action: SignInAction, call: () => Promise<SignInAnswer>, sentEmail?: string) => {\n    if (busy) return;\n    setBusy(action);\n    setFailure(null);\n    let result: Promise<SignInAnswer>;\n    try {\n      result = Promise.resolve(call());\n    } catch (error) {\n      result = Promise.reject(error);\n    }\n    result.then(\n      (answer) => {\n        if (mounted.current) present(answer);\n      },\n      (error: unknown) => {\n        if (mounted.current) fail(error, action, sentEmail);\n      },\n    );\n  };\n\n  // Passkey autofill: armed once, on mount; the signal aborts on unmount. Its answer\n  // arrives whenever the person picks a passkey from the email field's dropdown — and\n  // is dropped if they have meanwhile started a sign-in of their own.\n  const armAutofill = useEffectEvent((signal: AbortSignal) => passkeyAutofill?.(signal));\n  const autofillAnswered = useEffectEvent((answer: SignInAnswer) => {\n    if (busy === null) present(answer);\n  });\n  useEffect(() => {\n    const controller = new AbortController();\n    let pending: Promise<SignInAnswer | null | undefined>;\n    try {\n      pending = Promise.resolve(armAutofill(controller.signal));\n    } catch (error) {\n      pending = Promise.reject(error);\n    }\n    pending.then(\n      (answer) => {\n        if (answer && !controller.signal.aborted && mounted.current) autofillAnswered(answer);\n      },\n      () => {\n        /* silent — unsupported, declined or aborted; the button stays the way in */\n      },\n    );\n    return () => controller.abort();\n  }, []);\n\n  // Focus follows the step — not on mount (where it would pop a phone's keyboard over\n  // the page), only once the person moved to another step.\n  const shownStep = useRef(step);\n  useEffect(() => {\n    if (shownStep.current === step) return;\n    shownStep.current = step;\n    if (step === \"2fa\") codeRef.current?.focus();\n    else if (step === \"password-change\") newPasswordRef.current?.focus();\n    else if (emailRef.current?.value) passwordRef.current?.focus();\n    else emailRef.current?.focus();\n  }, [step]);\n\n  const backToCredentials = () => {\n    if (busy) return;\n    setChallenge(null);\n    setFailure(null);\n    setCode(\"\");\n    setNewPassword(\"\");\n    setConfirm(\"\");\n    goTo(\"credentials\");\n  };\n\n  const working = busy !== null;\n  const rootClass = cn(\"space-y-3\", className);\n\n  /* ── Step 2: the second factor ── */\n  if (step === \"2fa\" && challenge) {\n    const submitCode = (e: FormEvent) => {\n      e.preventDefault();\n      if (code.length !== codeLength) return;\n      attempt(\"code\", () => onCode({ challengeToken: challenge.token, code }));\n    };\n    const codeError = failure?.action === \"code\" ? failure.message : undefined;\n    return (\n      <div {...rest} data-step=\"2fa\" className={rootClass}>\n        <form className=\"space-y-3\" aria-labelledby={headingId} onSubmit={submitCode}>\n          <Heading id={headingId} className=\"text-base font-semibold text-[var(--text-primary)]\">\n            {labels.twoFactorTitle}\n          </Heading>\n          <p className={INTRO_CLASS}>{labels.twoFactorIntro}</p>\n          {twoFactorContent}\n          <OneTimeCodeInput\n            ref={codeRef}\n            label={labels.code}\n            name=\"code\"\n            value={code}\n            length={codeLength}\n            onChange={(next) => {\n              setCode(next);\n              if (failure) setFailure(null);\n            }}\n            readOnly={working}\n            error={codeError}\n            required\n          />\n          <Button type=\"submit\" className=\"w-full\" disabled={!working && code.length !== codeLength} pending={working}>\n            {labels.verify}\n          </Button>\n        </form>\n        <BackLink label={labels.backToSignIn} onClick={backToCredentials} disabled={working} />\n      </div>\n    );\n  }\n\n  /* ── Step 3: a new password ── */\n  if (step === \"password-change\" && challenge) {\n    const problem = newPasswordProblem(newPassword, confirm);\n    const submitPassword = (e: FormEvent) => {\n      e.preventDefault();\n      if (problem) return;\n      attempt(\"set-password\", () => onSetPassword({ challengeToken: challenge.token, password: newPassword }));\n    };\n    const content =\n      typeof passwordChangeContent === \"function\" ? passwordChangeContent(challenge.extra) : passwordChangeContent;\n    return (\n      <div {...rest} data-step=\"password-change\" className={rootClass}>\n        <form className=\"space-y-3\" aria-labelledby={headingId} onSubmit={submitPassword}>\n          <Heading id={headingId} className=\"text-base font-semibold text-[var(--text-primary)]\">\n            {labels.setPasswordTitle}\n          </Heading>\n          <p className={INTRO_CLASS}>{labels.setPasswordIntro}</p>\n          {content}\n          {/* Which account the new password is for, for the password manager: it files\n              the new password under this username instead of guessing. */}\n          {email !== \"\" && (\n            <input type=\"email\" name=\"username\" autoComplete=\"username\" value={email} readOnly hidden />\n          )}\n          <NewPasswordFields\n            password={newPassword}\n            confirm={confirm}\n            onPasswordChange={setNewPassword}\n            onConfirmChange={setConfirm}\n            busy={working}\n            passwordRef={newPasswordRef}\n            text={{ password: labels.newPassword, confirm: labels.confirmPassword, mismatch: labels.passwordMismatch }}\n          />\n          {failure?.action === \"set-password\" && (\n            <AlertBanner tone=\"danger\" size=\"sm\" role=\"alert\">\n              {failure.message}\n            </AlertBanner>\n          )}\n          <Button type=\"submit\" className=\"w-full\" disabled={!working && problem !== null} pending={working}>\n            {labels.setPasswordSubmit}\n          </Button>\n        </form>\n        <BackLink label={labels.backToSignIn} onClick={backToCredentials} disabled={working} />\n      </div>\n    );\n  }\n\n  /* ── Step 1: the credentials ── */\n  const submitCredentials = (e: FormEvent) => {\n    e.preventDefault();\n    const sent = email.trim();\n    if (sent === \"\" || password === \"\") return;\n    attempt(\"password\", () => onSubmit({ email: sent, password }), sent);\n  };\n\n  const refused = failure?.code === \"invalid_credentials\";\n  const tagged =\n    refused && failure?.action === \"password\" && emailTag && failure.email ? taggedEmail(failure.email, emailTag) : null;\n  const showDeactivated = refused && hasMessage(deactivatedContact);\n\n  return (\n    <div {...rest} data-step=\"credentials\" className={rootClass}>\n      <form className=\"space-y-3\" onSubmit={submitCredentials}>\n        {credentialsContent}\n        <Input\n          ref={emailRef}\n          type=\"email\"\n          name=\"email\"\n          // \"webauthn\" lets the browser list passkeys in this field's dropdown, paired\n          // with the conditional request `passkeyAutofill` arms.\n          autoComplete=\"username webauthn\"\n          label={labels.email}\n          value={email}\n          onChange={(e) => setEmail(e.target.value)}\n          readOnly={working}\n          required\n        />\n        <CurrentPasswordInput\n          ref={passwordRef}\n          name=\"password\"\n          label={labels.password}\n          value={password}\n          onValueChange={setPassword}\n          busy={working}\n          required\n        />\n        {failure && (\n          // One live region for the sentence and its hints: they are one answer.\n          <div role=\"alert\" className=\"space-y-1.5\">\n            <AlertBanner tone=\"danger\" size=\"sm\">\n              {failure.message}\n            </AlertBanner>\n            {showDeactivated && (\n              <p className={HINT_CLASS}>{withContact(labels.deactivatedHint, deactivatedContact)}</p>\n            )}\n            {tagged && <p className={HINT_CLASS}>{labels.tagHint(tagged)}</p>}\n          </div>\n        )}\n        <Button type=\"submit\" className=\"w-full\" pending={busy === \"password\" || busy === \"done\"} disabled={busy === \"passkey\"}>\n          {labels.submit}\n        </Button>\n        {onPasskey && (\n          <Button\n            type=\"button\"\n            variant=\"secondary\"\n            className=\"w-full\"\n            pending={busy === \"passkey\"}\n            disabled={busy === \"password\" || busy === \"done\"}\n            onClick={() => attempt(\"passkey\", onPasskey)}\n          >\n            <KeyRound aria-hidden className=\"size-4\" />\n            {labels.passkey}\n          </Button>\n        )}\n      </form>\n      {forgotHref !== undefined && (\n        <p className=\"text-center text-sm\">\n          <TextLink href={forgotHref} tone=\"secondary\">\n            {labels.forgotPassword}\n          </TextLink>\n        </p>\n      )}\n      {registerHref !== undefined && (\n        <p className=\"text-center text-sm text-[var(--text-secondary)]\">\n          {labels.noAccount}{\" \"}\n          <TextLink href={registerHref} tone=\"primary\">\n            {labels.register}\n          </TextLink>\n        </p>\n      )}\n    </div>\n  );\n}\n\n/** \"Back to sign in\" under the second and third step: a button, since it changes the\n *  step in place rather than going anywhere. */\nfunction BackLink({ label, onClick, disabled }: { label: string; onClick: () => void; disabled: boolean }) {\n  return (\n    <p className=\"text-center text-sm\">\n      <Button type=\"button\" variant=\"link\" tone=\"muted\" size=\"sm\" disabled={disabled} onClick={onClick}>\n        {label}\n      </Button>\n    </p>\n  );\n}\n"],"mappings":"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","names":["code"]}

package/dist/auth/status-parts.d.ts

@@ -0,0 +1,78 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * The pieces the signed-out status pages share — {@link ForgotPasswordForm},
+ * {@link ResetPasswordForm}, {@link VerifyEmailStatus}, {@link AcceptInvitation} and
+ * {@link NotFoundPage} (docs/auth-harmonization.md §7).
+ *
+ * @internal Not part of the barrel; the pages are.
+ */
+/** A heading level a page part may take. Default `h2`, under the page's `h1`
+ *  (`AuthLayout`'s `title`, the app's name), as on `SignInForm`'s steps; deeper for a
+ *  page embedded in another (a preview, the docs). */
+type AuthHeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+/** The form pages' heading: start-aligned, the size of `SignInForm`'s step headings. */
+declare const FORM_HEADING_CLASS = "text-base font-semibold text-[var(--text-primary)]";
+/** The status pages' heading: centred over the centred outcome below it. */
+declare const STATUS_HEADING_CLASS = "text-center text-base font-semibold text-[var(--text-primary)]";
+declare const INTRO_CLASS = "text-sm text-[var(--text-secondary)]";
+/**
+ * kastlan's outcome block (verify-email-page, reset-password-page): the kit's
+ * `EmptyState` without its dashed box, because it already sits in `AuthLayout`'s card —
+ * a box in a box. The icon and the title carry the tone.
+ */
+declare const OUTCOME_CLASS = "border-0 bg-transparent px-0 py-3";
+/** `href` with `key=value` added to its query, before any `#fragment`: the reset page's
+ *  "Sign in" carries the address (`/login?email=ada%40example.com`). */
+declare function withQuery(href: string, key: string, value: string): string;
+/** What a callback's promise came to. */
+type Settled<T> = {
+    ok: true;
+    value: T;
+} | {
+    ok: false;
+    error: unknown;
+};
+/**
+ * Run `start(key)` ONCE per key, and hand what it settles to into `settle` — unless the
+ * key moved on in the meantime, when the stale answer is dropped.
+ *
+ * keksdose's verify-email and join pages fire their request from an effect behind a
+ * `useRef` guard, and say why: the token is single-use, and StrictMode's
+ * mount → unmount → remount would send it twice and turn a success into "invalid" on
+ * the second answer. The guard is the same here; there is deliberately no "unmounted"
+ * flag set in the cleanup, because StrictMode's simulated unmount would set it and the
+ * remount would never clear the guard — the page would hang on its spinner (the bug
+ * keksdose hit on /join with a react-query observer). A state update after a real
+ * unmount is a no-op in React 18 and later.
+ *
+ * `key === null` runs nothing (no token, not signed in yet) and forgets the last key, so
+ * the same token runs again once it is back.
+ */
+declare function useOncePerKey<T>(key: string | null, start: (key: string) => T | Promise<T>, settle: (key: string, result: Settled<T>) => void): void;
+/** Whether a callback's return is a promise to wait for. A callback that returns
+ *  nothing is done when it returns. */
+declare function isThenable(value: unknown): value is PromiseLike<unknown>;
+/**
+ * Move focus to `ref` when `active` turns true — the outcome a person's own submit led
+ * to ("If an account exists … the link is on its way", "Your password has been
+ * changed"). The submit button they pressed is gone with the form, which drops focus to
+ * `<body>`; a screen reader then hears nothing at all. Focusing the message (a
+ * `tabIndex={-1}` box) reads it out and leaves the next Tab where the page continues.
+ */
+declare function useFocusWhen(active: boolean, ref: {
+    current: HTMLElement | null;
+}): void;
+/** The box {@link useFocusWhen} focuses: centred, no focus ring of its own (it is not a
+ *  control; the ring would read as one). */
+declare function OutcomeMessage({ icon, children, focusRef, className, }: {
+    icon: ReactNode;
+    children: ReactNode;
+    focusRef?: {
+        current: HTMLDivElement | null;
+    };
+    className?: string;
+}): react.JSX.Element;
+
+export { type AuthHeadingLevel, FORM_HEADING_CLASS, INTRO_CLASS, OUTCOME_CLASS, OutcomeMessage, STATUS_HEADING_CLASS, type Settled, isThenable, useFocusWhen, useOncePerKey, withQuery };

package/dist/auth/status-parts.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+const FORM_HEADING_CLASS = "text-base font-semibold text-[var(--text-primary)]";
+const STATUS_HEADING_CLASS = "text-center text-base font-semibold text-[var(--text-primary)]";
+const INTRO_CLASS = "text-sm text-[var(--text-secondary)]";
+const OUTCOME_CLASS = "border-0 bg-transparent px-0 py-3";
+function withQuery(href, key, value) {
+  const hash = href.indexOf("#");
+  const base = hash === -1 ? href : href.slice(0, hash);
+  const fragment = hash === -1 ? "" : href.slice(hash);
+  const separator = base.includes("?") ? base.endsWith("?") || base.endsWith("&") ? "" : "&" : "?";
+  return `${base}${separator}${encodeURIComponent(key)}=${encodeURIComponent(value)}${fragment}`;
+}
+function useOncePerKey(key, start, settle) {
+  const latest = useRef({ start, settle });
+  useEffect(() => {
+    latest.current = { start, settle };
+  });
+  const current = useRef(null);
+  useEffect(() => {
+    if (key === null) {
+      current.current = null;
+      return;
+    }
+    if (current.current === key) return;
+    current.current = key;
+    const report = (result) => {
+      if (current.current === key) latest.current.settle(key, result);
+    };
+    let started;
+    try {
+      started = latest.current.start(key);
+    } catch (error) {
+      report({ ok: false, error });
+      return;
+    }
+    Promise.resolve(started).then(
+      (value) => report({ ok: true, value }),
+      (error) => report({ ok: false, error })
+    );
+  }, [key]);
+}
+function isThenable(value) {
+  return typeof value?.then === "function";
+}
+function useFocusWhen(active, ref) {
+  useEffect(() => {
+    if (active) ref.current?.focus();
+  }, [active, ref]);
+}
+function OutcomeMessage({
+  icon,
+  children,
+  focusRef,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: focusRef,
+      tabIndex: -1,
+      className: cn("flex flex-col items-center gap-2 py-2 text-center outline-none", className),
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "[&_svg]:size-10", children: icon }),
+        children
+      ]
+    }
+  );
+}
+export {
+  FORM_HEADING_CLASS,
+  INTRO_CLASS,
+  OUTCOME_CLASS,
+  OutcomeMessage,
+  STATUS_HEADING_CLASS,
+  isThenable,
+  useFocusWhen,
+  useOncePerKey,
+  withQuery
+};
+//# sourceMappingURL=status-parts.js.map

package/dist/auth/status-parts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/auth/status-parts.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * The pieces the signed-out status pages share — {@link ForgotPasswordForm},\n * {@link ResetPasswordForm}, {@link VerifyEmailStatus}, {@link AcceptInvitation} and\n * {@link NotFoundPage} (docs/auth-harmonization.md §7).\n *\n * @internal Not part of the barrel; the pages are.\n */\n\n/** A heading level a page part may take. Default `h2`, under the page's `h1`\n *  (`AuthLayout`'s `title`, the app's name), as on `SignInForm`'s steps; deeper for a\n *  page embedded in another (a preview, the docs). */\nexport type AuthHeadingLevel = \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n\n/** The form pages' heading: start-aligned, the size of `SignInForm`'s step headings. */\nexport const FORM_HEADING_CLASS = \"text-base font-semibold text-[var(--text-primary)]\";\n/** The status pages' heading: centred over the centred outcome below it. */\nexport const STATUS_HEADING_CLASS = \"text-center text-base font-semibold text-[var(--text-primary)]\";\nexport const INTRO_CLASS = \"text-sm text-[var(--text-secondary)]\";\n\n/**\n * kastlan's outcome block (verify-email-page, reset-password-page): the kit's\n * `EmptyState` without its dashed box, because it already sits in `AuthLayout`'s card —\n * a box in a box. The icon and the title carry the tone.\n */\nexport const OUTCOME_CLASS = \"border-0 bg-transparent px-0 py-3\";\n\n/** `href` with `key=value` added to its query, before any `#fragment`: the reset page's\n *  \"Sign in\" carries the address (`/login?email=ada%40example.com`). */\nexport function withQuery(href: string, key: string, value: string): string {\n  const hash = href.indexOf(\"#\");\n  const base = hash === -1 ? href : href.slice(0, hash);\n  const fragment = hash === -1 ? \"\" : href.slice(hash);\n  const separator = base.includes(\"?\") ? (base.endsWith(\"?\") || base.endsWith(\"&\") ? \"\" : \"&\") : \"?\";\n  return `${base}${separator}${encodeURIComponent(key)}=${encodeURIComponent(value)}${fragment}`;\n}\n\n/** What a callback's promise came to. */\nexport type Settled<T> = { ok: true; value: T } | { ok: false; error: unknown };\n\n/**\n * Run `start(key)` ONCE per key, and hand what it settles to into `settle` — unless the\n * key moved on in the meantime, when the stale answer is dropped.\n *\n * keksdose's verify-email and join pages fire their request from an effect behind a\n * `useRef` guard, and say why: the token is single-use, and StrictMode's\n * mount → unmount → remount would send it twice and turn a success into \"invalid\" on\n * the second answer. The guard is the same here; there is deliberately no \"unmounted\"\n * flag set in the cleanup, because StrictMode's simulated unmount would set it and the\n * remount would never clear the guard — the page would hang on its spinner (the bug\n * keksdose hit on /join with a react-query observer). A state update after a real\n * unmount is a no-op in React 18 and later.\n *\n * `key === null` runs nothing (no token, not signed in yet) and forgets the last key, so\n * the same token runs again once it is back.\n */\nexport function useOncePerKey<T>(\n  key: string | null,\n  start: (key: string) => T | Promise<T>,\n  settle: (key: string, result: Settled<T>) => void,\n): void {\n  const latest = useRef({ start, settle });\n  useEffect(() => {\n    latest.current = { start, settle };\n  });\n  const current = useRef<string | null>(null);\n  useEffect(() => {\n    if (key === null) {\n      current.current = null;\n      return;\n    }\n    if (current.current === key) return;\n    current.current = key;\n    const report = (result: Settled<T>) => {\n      if (current.current === key) latest.current.settle(key, result);\n    };\n    let started: T | Promise<T>;\n    try {\n      started = latest.current.start(key);\n    } catch (error) {\n      report({ ok: false, error });\n      return;\n    }\n    Promise.resolve(started).then(\n      (value) => report({ ok: true, value }),\n      (error: unknown) => report({ ok: false, error }),\n    );\n  }, [key]);\n}\n\n/** Whether a callback's return is a promise to wait for. A callback that returns\n *  nothing is done when it returns. */\nexport function isThenable(value: unknown): value is PromiseLike<unknown> {\n  return typeof (value as PromiseLike<unknown> | null)?.then === \"function\";\n}\n\n/**\n * Move focus to `ref` when `active` turns true — the outcome a person's own submit led\n * to (\"If an account exists … the link is on its way\", \"Your password has been\n * changed\"). The submit button they pressed is gone with the form, which drops focus to\n * `<body>`; a screen reader then hears nothing at all. Focusing the message (a\n * `tabIndex={-1}` box) reads it out and leaves the next Tab where the page continues.\n */\nexport function useFocusWhen(active: boolean, ref: { current: HTMLElement | null }): void {\n  useEffect(() => {\n    if (active) ref.current?.focus();\n  }, [active, ref]);\n}\n\n/** The box {@link useFocusWhen} focuses: centred, no focus ring of its own (it is not a\n *  control; the ring would read as one). */\nexport function OutcomeMessage({\n  icon,\n  children,\n  focusRef,\n  className,\n}: {\n  icon: ReactNode;\n  children: ReactNode;\n  focusRef?: { current: HTMLDivElement | null };\n  className?: string;\n}) {\n  return (\n    <div\n      ref={focusRef}\n      tabIndex={-1}\n      className={cn(\"flex flex-col items-center gap-2 py-2 text-center outline-none\", className)}\n    >\n      <span aria-hidden className=\"[&_svg]:size-10\">\n        {icon}\n      </span>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";AA8HI,SAKE,KALF;AA9HJ,SAAS,WAAW,cAAc;AAElC,SAAS,UAAU;AAgBZ,MAAM,qBAAqB;AAE3B,MAAM,uBAAuB;AAC7B,MAAM,cAAc;AAOpB,MAAM,gBAAgB;AAItB,SAAS,UAAU,MAAc,KAAa,OAAuB;AAC1E,QAAM,OAAO,KAAK,QAAQ,GAAG;AAC7B,QAAM,OAAO,SAAS,KAAK,OAAO,KAAK,MAAM,GAAG,IAAI;AACpD,QAAM,WAAW,SAAS,KAAK,KAAK,KAAK,MAAM,IAAI;AACnD,QAAM,YAAY,KAAK,SAAS,GAAG,IAAK,KAAK,SAAS,GAAG,KAAK,KAAK,SAAS,GAAG,IAAI,KAAK,MAAO;AAC/F,SAAO,GAAG,IAAI,GAAG,SAAS,GAAG,mBAAmB,GAAG,CAAC,IAAI,mBAAmB,KAAK,CAAC,GAAG,QAAQ;AAC9F;AAqBO,SAAS,cACd,KACA,OACA,QACM;AACN,QAAM,SAAS,OAAO,EAAE,OAAO,OAAO,CAAC;AACvC,YAAU,MAAM;AACd,WAAO,UAAU,EAAE,OAAO,OAAO;AAAA,EACnC,CAAC;AACD,QAAM,UAAU,OAAsB,IAAI;AAC1C,YAAU,MAAM;AACd,QAAI,QAAQ,MAAM;AAChB,cAAQ,UAAU;AAClB;AAAA,IACF;AACA,QAAI,QAAQ,YAAY,IAAK;AAC7B,YAAQ,UAAU;AAClB,UAAM,SAAS,CAAC,WAAuB;AACrC,UAAI,QAAQ,YAAY,IAAK,QAAO,QAAQ,OAAO,KAAK,MAAM;AAAA,IAChE;AACA,QAAI;AACJ,QAAI;AACF,gBAAU,OAAO,QAAQ,MAAM,GAAG;AAAA,IACpC,SAAS,OAAO;AACd,aAAO,EAAE,IAAI,OAAO,MAAM,CAAC;AAC3B;AAAA,IACF;AACA,YAAQ,QAAQ,OAAO,EAAE;AAAA,MACvB,CAAC,UAAU,OAAO,EAAE,IAAI,MAAM,MAAM,CAAC;AAAA,MACrC,CAAC,UAAmB,OAAO,EAAE,IAAI,OAAO,MAAM,CAAC;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACV;AAIO,SAAS,WAAW,OAA+C;AACxE,SAAO,OAAQ,OAAuC,SAAS;AACjE;AASO,SAAS,aAAa,QAAiB,KAA4C;AACxF,YAAU,MAAM;AACd,QAAI,OAAQ,KAAI,SAAS,MAAM;AAAA,EACjC,GAAG,CAAC,QAAQ,GAAG,CAAC;AAClB;AAIO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW,GAAG,kEAAkE,SAAS;AAAA,MAEzF;AAAA,4BAAC,UAAK,eAAW,MAAC,WAAU,mBACzB,gBACH;AAAA,QACC;AAAA;AAAA;AAAA,EACH;AAEJ;","names":[]}