@eifi1/ui-kit 0.29.0 → 0.31.0

package/dist/account/delete-account-setting.js

@@ -0,0 +1,200 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement, useRef, useState } from "react";
+import { UserX } from "lucide-react";
+import { useKitLabels, useKitLocale } 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,
+  DangerConfirm,
+  DEFAULT_DANGER_CONFIRM_LABELS,
+  TypedConfirmField,
+  typedMatches
+} from "../components/danger-confirm.js";
+import { Card } from "../components/ui.js";
+import { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from "../auth/auth-errors.js";
+import { useFocusWhen } from "../auth/status-parts.js";
+import { CARD_DESCRIPTION_CLASS, refusalCompanies, settle, useMounted } from "./account-parts.js";
+import { SettingsCardTitle } from "../settings/settings-heading.js";
+const DEFAULT_DELETE_ACCOUNT_LABELS = {
+  title: "Delete account",
+  afterDays: (days) => days === 1 ? "Your account is deactivated at once and erased for good 1 day later." : `Your account is deactivated at once and erased for good ${days} days later.`,
+  operator: "Your account is deactivated at once, and an operator will erase it for good.",
+  arm: "Delete account\u2026",
+  prompt: "You will be signed out on every device, and your account can no longer be used.",
+  handOver: (count) => count === 1 ? "1 item others can see will pass to an administrator." : `${count} items others can see will pass to an administrator.`,
+  confirm: "Delete my account",
+  done: "Your account is deactivated. You are being signed out.",
+  wrongPassword: "The password is incorrect.",
+  confirmationMismatch: "This is not your account\u2019s address.",
+  lastAdmin: "You are the last administrator. Make someone else an administrator first.",
+  lastAdminOf: (companies) => `You are the last administrator of ${companies}. Make someone else an administrator there first.`,
+  householdHasMembers: "Your household has other members, so the account can\u2019t be deleted here. Please write to the operator.",
+  rateLimited: englishRateLimited,
+  failed: "Your account could not be deleted. Please try again."
+};
+function isConsequence(item) {
+  return typeof item === "object" && item !== null && !isValidElement(item) && "text" in item;
+}
+function DeleteAccountSetting({
+  email,
+  mode,
+  days = 30,
+  consequences,
+  handOverCount,
+  onRequest,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useKitLabels("deleteAccount", DEFAULT_DELETE_ACCOUNT_LABELS, labelsProp);
+  const guardLabels = useKitLabels("dangerConfirm", DEFAULT_DANGER_CONFIRM_LABELS);
+  const locale = useKitLocale();
+  const [typed, setTyped] = useState("");
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [fieldError, setFieldError] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const [done, setDone] = useState(false);
+  const mounted = useMounted();
+  const typedRef = useRef(null);
+  const passwordRef = useRef(null);
+  const doneRef = useRef(null);
+  useFocusWhen(done, doneRef);
+  const modeSentence = mode === "operator" ? labels.operator : labels.afterDays(days);
+  const lines = (consequences ?? []).filter((item) => item !== null && item !== void 0 && item !== false && item !== "").map((item, index) => isConsequence(item) ? item : { key: `app-${index}`, text: item });
+  if (handOverCount !== void 0 && handOverCount > 0) {
+    lines.push({ key: "hand-over", text: labels.handOver(handOverCount) });
+  }
+  const held = !typedMatches(typed, email, "caseless") ? typeof guardLabels.needsPhrase === "function" ? guardLabels.needsPhrase(email) : guardLabels.needsPhrase : password === "" ? guardLabels.needsPassword : void 0;
+  const present = (error) => {
+    const own = describeError?.(error);
+    if (hasMessage(own)) {
+      setFailure(own);
+      return;
+    }
+    if (isRateLimited(error)) {
+      setFailure(labels.rateLimited(retryAfterSeconds(error)));
+      return;
+    }
+    const code = authErrorCode(error);
+    if (code === "password_incorrect" || code === "invalid_credentials") {
+      setFieldError("password");
+      passwordRef.current?.focus();
+      return;
+    }
+    if (code === "confirmation_mismatch" || code === "confirmation_required") {
+      setFieldError("email");
+      typedRef.current?.focus();
+      return;
+    }
+    if (code === "last_admin") {
+      const companies = refusalCompanies(error);
+      setFailure(
+        companies ? labels.lastAdminOf(new Intl.ListFormat(locale, { type: "conjunction" }).format(companies)) : labels.lastAdmin
+      );
+      return;
+    }
+    setFailure(code === "household_has_members" ? labels.householdHasMembers : labels.failed);
+  };
+  const confirm = () => {
+    setFailure(null);
+    setFieldError(null);
+    setBusy(true);
+    const values = { password, confirmEmail: typed.trim() };
+    return settle(() => onRequest(values)).then(
+      () => {
+        if (!mounted.current) return;
+        setBusy(false);
+        setDone(true);
+      },
+      (error) => {
+        if (mounted.current) {
+          setBusy(false);
+          present(error);
+        }
+        throw error;
+      }
+    );
+  };
+  const disarmed = (armed) => {
+    if (armed) return;
+    setTyped("");
+    setPassword("");
+    setFieldError(null);
+    setFailure(null);
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      ...rest,
+      "data-state": done ? "done" : "form",
+      tone: "danger",
+      className: cn("p-4 space-y-3", className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(SettingsCardTitle, { children: labels.title }),
+          /* @__PURE__ */ jsx("div", { className: CARD_DESCRIPTION_CLASS, children: modeSentence })
+        ] }),
+        done ? /* @__PURE__ */ jsxs("div", { ref: doneRef, tabIndex: -1, role: "status", className: "flex items-start gap-2 text-sm outline-none", children: [
+          /* @__PURE__ */ jsx(UserX, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx("span", { children: labels.done })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            DangerConfirm,
+            {
+              commit: true,
+              armLabel: labels.arm,
+              prompt: labels.prompt,
+              consequences: lines,
+              confirmLabel: labels.confirm,
+              confirmDisabledReason: held,
+              busy,
+              onArmedChange: disarmed,
+              onConfirm: confirm,
+              children: [
+                /* @__PURE__ */ jsx(
+                  TypedConfirmField,
+                  {
+                    ref: typedRef,
+                    target: email,
+                    match: "caseless",
+                    value: typed,
+                    onValueChange: (next) => {
+                      setTyped(next);
+                      if (fieldError === "email") setFieldError(null);
+                    },
+                    error: fieldError === "email" ? labels.confirmationMismatch : void 0,
+                    busy
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  CurrentPasswordInput,
+                  {
+                    ref: passwordRef,
+                    value: password,
+                    onValueChange: (next) => {
+                      setPassword(next);
+                      if (fieldError === "password") setFieldError(null);
+                    },
+                    error: fieldError === "password" ? labels.wrongPassword : void 0,
+                    busy
+                  }
+                )
+              ]
+            }
+          ),
+          hasMessage(failure) && /* @__PURE__ */ jsx(AlertBanner, { tone: "danger", size: "sm", role: "alert", children: failure })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_DELETE_ACCOUNT_LABELS,
+  DeleteAccountSetting
+};
+//# sourceMappingURL=delete-account-setting.js.map

package/dist/account/delete-account-setting.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/account/delete-account-setting.tsx"],"sourcesContent":["import { isValidElement, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { UserX } from \"lucide-react\";\n\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { AlertBanner } from \"../components/alert-banner\";\nimport { hasMessage } from \"../components/choice-parts\";\nimport {\n  CurrentPasswordInput,\n  DangerConfirm,\n  DEFAULT_DANGER_CONFIRM_LABELS,\n  TypedConfirmField,\n  typedMatches,\n} from \"../components/danger-confirm\";\nimport type { DangerConsequence } from \"../components/danger-confirm\";\nimport { Card } from \"../components/ui\";\nimport { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from \"../auth/auth-errors\";\nimport { useFocusWhen } from \"../auth/status-parts\";\nimport { CARD_DESCRIPTION_CLASS, refusalCompanies, settle, useMounted } from \"./account-parts\";\nimport { SettingsCardTitle } from \"../settings/settings-heading\";\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/**\n * Every string {@link DeleteAccountSetting} renders — the `deleteAccount` namespace of\n * `<UiKitProvider labels>`, overridable per instance through `labels`. The confirm's\n * Cancel, \"Password\" and \"Type … to confirm\" are `dangerConfirm`'s.\n */\nexport interface DeleteAccountLabels {\n  /** The card's title. */\n  title: string;\n  /** Mode `after_days`, given the days: what happens and when. */\n  afterDays: (days: number) => string;\n  /** Mode `operator`: what happens, and who erases it. */\n  operator: string;\n  /** The button that opens the confirm. */\n  arm: string;\n  /** The confirm's warning, over the consequences. */\n  prompt: string;\n  /** The line in the consequences when `handOverCount` is given (Kurvenschmiede, §2.7),\n   *  given the count. */\n  handOver: (count: number) => string;\n  /** The button that sends it. */\n  confirm: string;\n  /** Said once the request is accepted — the app signs out next. */\n  done: string;\n  /** `password_incorrect` (server-kit's `400` for a wrong current password), under the\n   *  password field. */\n  wrongPassword: string;\n  /** `confirmation_mismatch` — the server did not take the typed address as the\n   *  account's — under the address field. */\n  confirmationMismatch: string;\n  /** `last_admin` — the account is the last active admin. */\n  lastAdmin: string;\n  /** `last_admin` naming the companies (kastlan checks per company), given them as one\n   *  list in the reader's language (\"Example AG and Sample GmbH\"). */\n  lastAdminOf: (companies: string) => string;\n  /** `household_has_members` — keksdose's guard (§6.4). */\n  householdHasMembers: string;\n  /** A request was throttled — HTTP 429 — given its `Retry-After` wait in seconds, or\n   *  `undefined` without one. */\n  rateLimited: (seconds?: number) => string;\n  /** Any other failure. */\n  failed: string;\n}\n\nexport const DEFAULT_DELETE_ACCOUNT_LABELS: DeleteAccountLabels = {\n  title: \"Delete account\",\n  afterDays: (days) =>\n    days === 1\n      ? \"Your account is deactivated at once and erased for good 1 day later.\"\n      : `Your account is deactivated at once and erased for good ${days} days later.`,\n  operator: \"Your account is deactivated at once, and an operator will erase it for good.\",\n  arm: \"Delete account…\",\n  prompt: \"You will be signed out on every device, and your account can no longer be used.\",\n  handOver: (count) =>\n    count === 1\n      ? \"1 item others can see will pass to an administrator.\"\n      : `${count} items others can see will pass to an administrator.`,\n  confirm: \"Delete my account\",\n  done: \"Your account is deactivated. You are being signed out.\",\n  wrongPassword: \"The password is incorrect.\",\n  confirmationMismatch: \"This is not your account’s address.\",\n  lastAdmin: \"You are the last administrator. Make someone else an administrator first.\",\n  lastAdminOf: (companies) =>\n    `You are the last administrator of ${companies}. Make someone else an administrator there first.`,\n  householdHasMembers:\n    \"Your household has other members, so the account can’t be deleted here. Please write to the operator.\",\n  rateLimited: englishRateLimited,\n  failed: \"Your account could not be deleted. Please try again.\",\n};\n\n/* ── Props ───────────────────────────────────────────────────────────────── */\n\n/** What happens after the deactivation (§2.1, §6.4) — the app's setting. */\nexport type DeletionMode = \"after_days\" | \"operator\";\n\n/** What {@link DeleteAccountSettingProps.onRequest} gets: the `POST /auth/me/deletion`\n *  body. */\nexport interface DeleteAccountValues {\n  /** As typed. */\n  password: string;\n  /** The address as TYPED, trimmed — the server re-checks it against the account\n   *  (server-kit's `confirm_email_matches`), as keksdose's admin actions do. */\n  confirmEmail: string;\n}\n\n/** One line of the consequences: a node of the app's, or a {@link DangerConsequence}\n *  for a key of its own and the `severe` mark. */\nexport type DeleteAccountConsequence = ReactNode | DangerConsequence;\n\nexport interface DeleteAccountSettingProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The account's address — the text to type. */\n  email: string;\n  /** `\"after_days\"` (keksdose, Kurvenschmiede: erased by a scheduled job) or\n   *  `\"operator\"` (kastlan: company data is involved, an operator erases it). */\n  mode: DeletionMode;\n  /** With `after_days`: how many. Default 30 (§2.1). */\n  days?: number;\n  /**\n   * What goes, in the app's words (§6.4: \"the app's own list\") — derived from the\n   * account's own facts where it can be: keksdose's \"Budget X will be deleted; its 2\n   * guests are told\", rather than the worst case for everybody.\n   */\n  consequences?: readonly DeleteAccountConsequence[];\n  /** Kurvenschmiede (§2.7): how many owned items others can see — they pass to the\n   *  first active admin at erasure. A line of its own in the consequences; 0 or left\n   *  out, none. */\n  handOverCount?: number;\n  /**\n   * The confirm was answered: send `POST /auth/me/deletion {password, confirm_email}`.\n   * Resolve once it is accepted — the card says \"You are being signed out\" — and then\n   * sign the user out: the server ended every session with the deactivation. Reject\n   * with the client's error: `password_incorrect` under the password,\n   * `confirmation_mismatch` under the address, `last_admin` (with kastlan's\n   * `companies`) and `household_has_members` above the buttons, a 429 as\n   * `rateLimited`, anything else (a demo account's 403, an app's own code) through\n   * `describeError`, else `failed`. The confirm stays open with what was typed, for a\n   * retry.\n   */\n  onRequest: (values: DeleteAccountValues) => Promise<unknown> | void;\n  /** The app's own words for a failure, or `undefined` for the kit's. Asked first, for\n   *  every failure — kastlan's `last_admin` names the companies. */\n  describeError?: (error: unknown) => ReactNode | undefined;\n  labels?: Partial<DeleteAccountLabels>;\n}\n\n/** Whether an item is a `{ text }` line rather than a node — a React element is an\n *  object too, and so would a `{ text }` lookalike be, so the element test comes first. */\nfunction isConsequence(item: DeleteAccountConsequence): item is DangerConsequence {\n  return typeof item === \"object\" && item !== null && !isValidElement(item) && \"text\" in item;\n}\n\n/**\n * Deleting one's own account (docs/user-admin-harmonization.md §6.4, §2.1): what it does,\n * the password, the typed address — then the app signs out.\n *\n * **Two stages, said before the button.** The request DEACTIVATES the account at once\n * (no sign-in, every session ended, marked for deletion); the erasure follows per the\n * app's `mode` — \"erased for good 30 days later\" (`after_days`, a scheduled job) or \"an\n * operator will erase it\" (`operator`, kastlan, where company records are involved).\n * The sentence is under the title, so it is read before anything is pressed.\n *\n * **The confirm is a {@link DangerConfirm}** with the two guards of every \"type the\n * address\" rule in the apps: the address typed (compared caseless, as in all of them)\n * and the password. They are the tile's own {@link TypedConfirmField} and\n * {@link CurrentPasswordInput}, drawn in its fields slot and held by\n * `confirmDisabledReason` with the tile's own sentences, rather than its built-in\n * `phrase` / `requirePassword` — those have no error of their own, and a wrong password\n * belongs under the password. Its consequences are the app's list, plus\n * Kurvenschmiede's hand-over line (`handOverCount`, §2.7: shared work goes to an\n * administrator, never a refusal). The typed address goes to `onRequest` as typed, so\n * the server re-checks it (`confirm_email_matches`).\n *\n * **Refusals** (§6.4) are read by code ({@link authErrorCode}): `password_incorrect` (a\n * `400`, so an app's 401 handling never signs the person out over a typo) under the\n * password, `confirmation_mismatch` under the address, `last_admin` — naming kastlan's\n * companies when the answer lists them — and keksdose's `household_has_members` guard\n * above the buttons; a 429; and the rest in the app's words. The confirm stays open with\n * what was typed, for a retry; Cancel wipes it.\n *\n * **After success** the card says the account is deactivated and the person is being\n * signed out — the app's to do, since the kit sends nothing (auth §8).\n */\nexport function DeleteAccountSetting({\n  email,\n  mode,\n  days = 30,\n  consequences,\n  handOverCount,\n  onRequest,\n  describeError,\n  labels: labelsProp,\n  className,\n  ...rest\n}: DeleteAccountSettingProps) {\n  const labels = useKitLabels(\"deleteAccount\", DEFAULT_DELETE_ACCOUNT_LABELS, labelsProp);\n  // The guards speak the tile's words, so \"Type “…” to confirm\" and \"Enter your password\n  // to confirm\" are translated once, in `dangerConfirm`.\n  const guardLabels = useKitLabels(\"dangerConfirm\", DEFAULT_DANGER_CONFIRM_LABELS);\n  const locale = useKitLocale();\n  const [typed, setTyped] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [busy, setBusy] = useState(false);\n  const [fieldError, setFieldError] = useState<\"email\" | \"password\" | null>(null);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  const [done, setDone] = useState(false);\n  const mounted = useMounted();\n  const typedRef = useRef<HTMLInputElement>(null);\n  const passwordRef = useRef<HTMLInputElement>(null);\n  const doneRef = useRef<HTMLDivElement>(null);\n  // The tile went with the press; the answer takes the focus, so it is read out.\n  useFocusWhen(done, doneRef);\n\n  const modeSentence = mode === \"operator\" ? labels.operator : labels.afterDays(days);\n\n  const lines: (string | DangerConsequence)[] = (consequences ?? [])\n    // `{cond && \"…\"}` lines that came out empty are no lines.\n    .filter((item) => item !== null && item !== undefined && item !== false && item !== \"\")\n    .map((item, index) => (isConsequence(item) ? item : { key: `app-${index}`, text: item }));\n  if (handOverCount !== undefined && handOverCount > 0) {\n    lines.push({ key: \"hand-over\", text: labels.handOver(handOverCount) });\n  }\n\n  // The first guard still open, in the order the fields are drawn — DangerConfirm's rule.\n  const held = !typedMatches(typed, email, \"caseless\")\n    ? typeof guardLabels.needsPhrase === \"function\"\n      ? guardLabels.needsPhrase(email)\n      : guardLabels.needsPhrase\n    : password === \"\"\n      ? guardLabels.needsPassword\n      : undefined;\n\n  const present = (error: unknown) => {\n    const own = describeError?.(error);\n    if (hasMessage(own)) {\n      setFailure(own);\n      return;\n    }\n    if (isRateLimited(error)) {\n      setFailure(labels.rateLimited(retryAfterSeconds(error)));\n      return;\n    }\n    const code = authErrorCode(error);\n    // `invalid_credentials` too, for a server that answered a wrong password so before\n    // server-kit 0.4.0 named `password_incorrect`.\n    if (code === \"password_incorrect\" || code === \"invalid_credentials\") {\n      setFieldError(\"password\");\n      passwordRef.current?.focus();\n      return;\n    }\n    if (code === \"confirmation_mismatch\" || code === \"confirmation_required\") {\n      setFieldError(\"email\");\n      typedRef.current?.focus();\n      return;\n    }\n    if (code === \"last_admin\") {\n      const companies = refusalCompanies(error);\n      setFailure(\n        companies\n          ? labels.lastAdminOf(new Intl.ListFormat(locale, { type: \"conjunction\" }).format(companies))\n          : labels.lastAdmin,\n      );\n      return;\n    }\n    setFailure(code === \"household_has_members\" ? labels.householdHasMembers : labels.failed);\n  };\n\n  const confirm = () => {\n    setFailure(null);\n    setFieldError(null);\n    setBusy(true);\n    const values: DeleteAccountValues = { password, confirmEmail: typed.trim() };\n    return settle(() => onRequest(values)).then(\n      () => {\n        if (!mounted.current) return;\n        setBusy(false);\n        setDone(true);\n      },\n      (error: unknown) => {\n        if (mounted.current) {\n          setBusy(false);\n          present(error);\n        }\n        // Rejected again, so DangerConfirm stays armed with what was typed.\n        throw error;\n      },\n    );\n  };\n\n  // A disarmed tile holds no password — DangerConfirm's own rule, for the fields it\n  // does not own here.\n  const disarmed = (armed: boolean) => {\n    if (armed) return;\n    setTyped(\"\");\n    setPassword(\"\");\n    setFieldError(null);\n    setFailure(null);\n  };\n\n  return (\n    <Card\n      {...rest}\n      data-state={done ? \"done\" : \"form\"}\n      tone=\"danger\"\n      className={cn(\"p-4 space-y-3\", className)}\n    >\n      <div>\n        <SettingsCardTitle>{labels.title}</SettingsCardTitle>\n        <div className={CARD_DESCRIPTION_CLASS}>{modeSentence}</div>\n      </div>\n      {done ? (\n        <div ref={doneRef} tabIndex={-1} role=\"status\" className=\"flex items-start gap-2 text-sm outline-none\">\n          <UserX aria-hidden className=\"mt-0.5 size-4 shrink-0 text-[var(--text-muted)]\" />\n          <span>{labels.done}</span>\n        </div>\n      ) : (\n        <>\n          <DangerConfirm\n            commit\n            armLabel={labels.arm}\n            prompt={labels.prompt}\n            consequences={lines}\n            confirmLabel={labels.confirm}\n            confirmDisabledReason={held}\n            busy={busy}\n            onArmedChange={disarmed}\n            onConfirm={confirm}\n          >\n            <TypedConfirmField\n              ref={typedRef}\n              target={email}\n              match=\"caseless\"\n              value={typed}\n              onValueChange={(next) => {\n                setTyped(next);\n                if (fieldError === \"email\") setFieldError(null);\n              }}\n              error={fieldError === \"email\" ? labels.confirmationMismatch : undefined}\n              busy={busy}\n            />\n            <CurrentPasswordInput\n              ref={passwordRef}\n              value={password}\n              onValueChange={(next) => {\n                setPassword(next);\n                if (fieldError === \"password\") setFieldError(null);\n              }}\n              error={fieldError === \"password\" ? labels.wrongPassword : undefined}\n              busy={busy}\n            />\n          </DangerConfirm>\n          {hasMessage(failure) && (\n            <AlertBanner tone=\"danger\" size=\"sm\" role=\"alert\">\n              {failure}\n            </AlertBanner>\n          )}\n        </>\n      )}\n    </Card>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/account/email-change-setting.d.ts

@@ -0,0 +1,136 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+
+/** Every string {@link EmailChangeSetting} renders — the `emailChange` namespace of
+ *  `<UiKitProvider labels>`, overridable per instance through `labels`. */
+interface EmailChangeLabels {
+    /** The card's title. */
+    title: string;
+    /** Names the address the account has now: "Current address: ada@example.com". */
+    current: string;
+    /** The new address's field. */
+    newEmail: string;
+    /** The password field. */
+    password: string;
+    /** Under the password field: why it is asked again. */
+    passwordHint: string;
+    /** The address-tag button (auth §4.5), given the exact address it would use. */
+    emailTagUse: (address: string) => string;
+    /** The line after the address-tag button. */
+    emailTagHint: string;
+    /** The submit button. */
+    submit: string;
+    /** Under the new address while it is the current one. */
+    sameAsCurrent: string;
+    /** `email_taken`, under the new address. */
+    emailTaken: string;
+    /** `password_incorrect`, under the password. */
+    wrongPassword: string;
+    /** The pending state, given the new address the link went to. */
+    pending: (newEmail: string) => string;
+    /** Under it, given the current address — which still signs in until the link is
+     *  confirmed. */
+    pendingHint: (currentEmail: string) => string;
+    /** Mails the link again. */
+    resend: string;
+    /** Said once it went. */
+    resent: string;
+    /** Drops the change; the current address stays. */
+    cancel: string;
+    /** The done state (`confirmed`), given the address the account has now. */
+    confirmed: (email: string) => string;
+    /** Under it (`passkeyNote`): a passkey's label in the authenticator keeps the old
+     *  address (§6.2). */
+    passkeyNote: string;
+    /** A request was throttled — HTTP 429 — given its `Retry-After` wait in seconds, or
+     *  `undefined` without one. */
+    rateLimited: (seconds?: number) => string;
+    /** Any other failure, of any of the three requests. */
+    failed: string;
+}
+declare const DEFAULT_EMAIL_CHANGE_LABELS: EmailChangeLabels;
+/** What {@link EmailChangeSettingProps.onRequest} gets: the `POST /auth/me/email` body. */
+interface EmailChangeValues {
+    /** Trimmed. A `+tag` stays (auth §4.5); lower-casing is the server's. */
+    newEmail: string;
+    /** As typed. */
+    password: string;
+}
+/** Which request failed — {@link EmailChangeSettingProps.describeError}'s second
+ *  argument. */
+type EmailChangeAction = "request" | "resend" | "cancel";
+interface EmailChangeSettingProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onSubmit"> {
+    /** The account's address now. */
+    currentEmail: string;
+    /**
+     * The address a change waits on, from the app's server state — so a reload, or
+     * another tab, shows the pending state. `null`: none, whatever the card did. Left out
+     * (`undefined`), the card keeps its own: pending from a resolved `onRequest` until a
+     * resolved `onCancel`.
+     */
+    pendingEmail?: string | null;
+    /**
+     * The form was submitted: send `POST /auth/me/email {new_email, password}` (§6.2).
+     * Resolve once the link is mailed — refresh `pendingEmail` first if the app passes
+     * it — and the card shows "Confirm the link we sent to …". Reject with the client's
+     * error: `email_taken` shows under the new address, `password_incorrect` (server-kit's
+     * `400` for a wrong current password; an older `invalid_credentials` too) under the
+     * password, a 429 as `rateLimited`, anything else as `failed` unless `describeError`
+     * has the app's words.
+     */
+    onRequest: (values: EmailChangeValues) => Promise<unknown> | void;
+    /** Mail the link again. Left out, no button. */
+    onResend?: () => Promise<unknown> | void;
+    /** Drop the pending change. Left out, no button. */
+    onCancel?: () => Promise<unknown> | void;
+    /**
+     * The change was just confirmed — the app's confirm route (`POST /auth/me/email/confirm`)
+     * came back here. Says "Your email address is now …" over the form, with
+     * `passkeyNote`.
+     */
+    confirmed?: boolean;
+    /** With `confirmed`: say that a passkey's label keeps the old address (§6.2). Default
+     *  `true`; `false` for an account without passkeys. */
+    passkeyNote?: boolean;
+    /**
+     * The app's address tag (`"kastlan"`, auth §4.5): once the new address is plausible a
+     * button under it offers the tagged form — the rule of `RegisterForm`, since this is
+     * the person's own address. Never applied on its own. Left out, no offer.
+     */
+    emailTag?: string;
+    /** The app's own words for a failure, or `undefined` for the kit's. Asked first, for
+     *  every failure (a demo account's 403, the device offline). */
+    describeError?: (error: unknown, action: EmailChangeAction) => ReactNode | undefined;
+    labels?: Partial<EmailChangeLabels>;
+}
+/**
+ * Changing the account's email address (docs/user-admin-harmonization.md §6.2, §2.5):
+ * the current address, the new one, the password — then a pending state until the new
+ * address confirms its link.
+ *
+ * **The new address must confirm before it takes effect.** The server mails a one-time
+ * link to the NEW address (and a notice to the old one); until it is opened, the account
+ * keeps the old address and signs in with it. So the card's answer to a request is not
+ * "changed" but "Confirm the link we sent to …", with "Send the link again" and "Cancel
+ * the change". The state is the server's: pass `pendingEmail` and a reload shows it too.
+ *
+ * **The password is asked again** because the address is the identity: whoever holds the
+ * session must not move the account to a mailbox of their own. It is a
+ * {@link CurrentPasswordInput}, so a password manager fills it and offers no new one.
+ *
+ * **The `+tag` offer** (`emailTag`) is RegisterForm's: the address is the person's own,
+ * so `you+kastlan@…` is offered under the field, applied only on a click.
+ *
+ * **It never sends a request** (auth §8): `onRequest`, `onResend` and `onCancel` are the
+ * app's, and their refusals are read by code — `email_taken` and `password_incorrect`
+ * under their fields, which take the focus; a 429 as "Too many attempts". A wrong
+ * password is a `400 password_incorrect`, never a 401: an app's client reads a 401 on a
+ * signed-in route as an ended session, and would sign the person out for a typo.
+ *
+ * **Done** (`confirmed`): "Your email address is now …" and, unless `passkeyNote` is
+ * off, that a passkey keeps its old label in the device's list — the authenticator
+ * stored the name it was given, and only a new passkey carries the new one.
+ */
+declare function EmailChangeSetting({ currentEmail, pendingEmail, onRequest, onResend, onCancel, confirmed, passkeyNote, emailTag, describeError, labels: labelsProp, className, ...rest }: EmailChangeSettingProps): react.JSX.Element;
+
+export { DEFAULT_EMAIL_CHANGE_LABELS, type EmailChangeAction, type EmailChangeLabels, EmailChangeSetting, type EmailChangeSettingProps, type EmailChangeValues };

package/dist/account/email-change-setting.js

@@ -0,0 +1,278 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { MailCheck } from "lucide-react";
+import { DEFAULT_COMMON_LABELS, 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 { Button, Card, Input } from "../components/ui.js";
+import { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from "../auth/auth-errors.js";
+import { emailParts, taggedEmail } from "../auth/email-tag.js";
+import { CARD_DESCRIPTION_CLASS, settle, useMounted } from "./account-parts.js";
+import { SettingsCardTitle } from "../settings/settings-heading.js";
+const DEFAULT_EMAIL_CHANGE_LABELS = {
+  title: "Email address",
+  current: "Current address",
+  newEmail: "New email address",
+  password: "Current password",
+  passwordHint: "Your address is how you sign in, so changing it takes your password.",
+  emailTagUse: (address) => `Use ${address}`,
+  emailTagHint: "Many providers deliver name+tag@\u2026 to the same inbox, so mail from this app is easy to filter and trace. Check yours does before you rely on it: you would sign in with the tagged address.",
+  submit: "Change email address",
+  sameAsCurrent: "This is already your address.",
+  emailTaken: "An account with this email address already exists.",
+  wrongPassword: "The password is incorrect.",
+  pending: (newEmail) => `Confirm the link we sent to ${newEmail}.`,
+  pendingHint: (currentEmail) => `Until you do, you keep signing in with ${currentEmail}. Check your spam folder too.`,
+  resend: "Send the link again",
+  resent: "We sent the link again.",
+  cancel: "Cancel the change",
+  confirmed: (email) => `Your email address is now ${email}.`,
+  passkeyNote: "Your passkeys keep working. Your device may still list them under your old address.",
+  rateLimited: englishRateLimited,
+  failed: "That didn\u2019t work. Please try again."
+};
+function EmailChangeSetting({
+  currentEmail,
+  pendingEmail,
+  onRequest,
+  onResend,
+  onCancel,
+  confirmed,
+  passkeyNote = true,
+  emailTag,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useKitLabels("emailChange", DEFAULT_EMAIL_CHANGE_LABELS, labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const [newEmail, setNewEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [ownPending, setOwnPending] = useState(null);
+  const [busy, setBusy] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const [taken, setTaken] = useState(null);
+  const [wrongPassword, setWrongPassword] = useState(false);
+  const [resent, setResent] = useState(false);
+  const mounted = useMounted();
+  const titleId = useId();
+  const tagHintId = useId();
+  const emailRef = useRef(null);
+  const passwordRef = useRef(null);
+  const pendingRef = useRef(null);
+  const pending = pendingEmail !== void 0 ? pendingEmail : ownPending;
+  const isPending = pending !== null && pending !== "";
+  const focusNext = useRef(null);
+  useEffect(() => {
+    const target = focusNext.current;
+    if (target === "pending" && isPending) {
+      focusNext.current = null;
+      pendingRef.current?.focus();
+    } else if (target === "form" && !isPending) {
+      focusNext.current = null;
+      emailRef.current?.focus();
+    }
+  }, [isPending]);
+  const messageFor = (error, action) => {
+    const own = describeError?.(error, action);
+    if (hasMessage(own)) return own;
+    return isRateLimited(error) ? labels.rateLimited(retryAfterSeconds(error)) : labels.failed;
+  };
+  if (isPending) {
+    const run = (action, call) => {
+      if (busy) return;
+      setBusy(action);
+      setFailure(null);
+      setResent(false);
+      settle(call).then(
+        () => {
+          if (!mounted.current) return;
+          setBusy(null);
+          if (action === "resend") {
+            setResent(true);
+            return;
+          }
+          focusNext.current = "form";
+          setOwnPending(null);
+        },
+        (error) => {
+          if (!mounted.current) return;
+          setBusy(null);
+          setFailure({ action, message: messageFor(error, action) });
+        }
+      );
+    };
+    return /* @__PURE__ */ jsxs(Card, { ...rest, "data-state": "pending", className: cn("p-4 space-y-3", className), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(SettingsCardTitle, { id: titleId, children: labels.title }),
+        /* @__PURE__ */ jsx("div", { className: cn(CARD_DESCRIPTION_CLASS, "break-all"), children: common.fieldValue(labels.current, currentEmail) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { ref: pendingRef, tabIndex: -1, className: "flex gap-2 outline-none", children: [
+        /* @__PURE__ */ jsx(MailCheck, { "aria-hidden": true, className: "mt-0.5 size-4 shrink-0 text-[var(--success)]" }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "break-words text-sm", children: labels.pending(pending) }),
+          /* @__PURE__ */ jsx("p", { className: CARD_DESCRIPTION_CLASS, children: labels.pendingHint(currentEmail) })
+        ] })
+      ] }),
+      (onResend || onCancel) && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        onResend && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "secondary",
+            size: "sm",
+            commit: true,
+            pending: busy === "resend",
+            disabled: busy === "cancel",
+            onClick: () => run("resend", onResend),
+            children: labels.resend
+          }
+        ),
+        onCancel && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            commit: true,
+            pending: busy === "cancel",
+            disabled: busy === "resend",
+            onClick: () => run("cancel", onCancel),
+            children: labels.cancel
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { role: "status", className: "text-xs text-[var(--success)]", children: resent ? labels.resent : null })
+      ] }),
+      failure && /* @__PURE__ */ jsx(AlertBanner, { tone: "danger", size: "sm", role: "alert", children: failure.message })
+    ] });
+  }
+  const typed = newEmail.trim();
+  const same = typed !== "" && typed.toLowerCase() === currentEmail.trim().toLowerCase();
+  const working = busy !== null;
+  const canSubmit = emailParts(newEmail) !== null && !same && password !== "";
+  const suggestion = emailTag ? taggedEmail(newEmail, emailTag) : null;
+  const emailError = same ? labels.sameAsCurrent : taken !== null && taken === typed ? labels.emailTaken : void 0;
+  const submit = (e) => {
+    e.preventDefault();
+    if (!canSubmit || working) return;
+    const values = { newEmail: typed, password };
+    setBusy("request");
+    setFailure(null);
+    setTaken(null);
+    setWrongPassword(false);
+    settle(() => onRequest(values)).then(
+      () => {
+        if (!mounted.current) return;
+        setBusy(null);
+        setNewEmail("");
+        setPassword("");
+        setResent(false);
+        focusNext.current = "pending";
+        setOwnPending(values.newEmail);
+      },
+      (error) => {
+        if (!mounted.current) return;
+        setBusy(null);
+        const own = describeError?.(error, "request");
+        if (hasMessage(own)) {
+          setFailure({ action: "request", message: own });
+          return;
+        }
+        if (isRateLimited(error)) {
+          setFailure({ action: "request", message: labels.rateLimited(retryAfterSeconds(error)) });
+          return;
+        }
+        const code = authErrorCode(error);
+        if (code === "email_taken") {
+          setTaken(values.newEmail);
+          emailRef.current?.focus();
+          return;
+        }
+        if (code === "password_incorrect" || code === "invalid_credentials") {
+          setWrongPassword(true);
+          passwordRef.current?.focus();
+          return;
+        }
+        setFailure({ action: "request", message: labels.failed });
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Card, { ...rest, "data-state": confirmed ? "confirmed" : "form", className: cn("p-4 space-y-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SettingsCardTitle, { id: titleId, children: labels.title }),
+      /* @__PURE__ */ jsx("div", { className: cn(CARD_DESCRIPTION_CLASS, "break-all"), children: common.fieldValue(labels.current, currentEmail) })
+    ] }),
+    confirmed && /* @__PURE__ */ jsxs(AlertBanner, { tone: "success", size: "sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "block", children: labels.confirmed(currentEmail) }),
+      passkeyNote && /* @__PURE__ */ jsx("span", { className: "mt-1 block", children: labels.passkeyNote })
+    ] }),
+    /* @__PURE__ */ jsxs("form", { className: "space-y-3", "aria-labelledby": titleId, onSubmit: submit, noValidate: true, children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            ref: emailRef,
+            type: "email",
+            name: "email",
+            autoComplete: "email",
+            label: labels.newEmail,
+            value: newEmail,
+            onChange: (e) => {
+              setNewEmail(e.target.value);
+              if (failure) setFailure(null);
+            },
+            readOnly: working,
+            error: emailError,
+            required: true
+          }
+        ),
+        suggestion && /* @__PURE__ */ jsxs("p", { className: "mt-1 text-xs text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "link",
+              size: "sm",
+              className: "h-auto p-0 align-baseline",
+              disabled: working,
+              "aria-describedby": tagHintId,
+              onClick: () => setNewEmail(suggestion),
+              children: labels.emailTagUse(suggestion)
+            }
+          ),
+          " ",
+          /* @__PURE__ */ jsx("span", { id: tagHintId, children: labels.emailTagHint })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CurrentPasswordInput,
+        {
+          ref: passwordRef,
+          name: "password",
+          label: labels.password,
+          value: password,
+          onValueChange: (next) => {
+            setPassword(next);
+            setWrongPassword(false);
+            if (failure) setFailure(null);
+          },
+          hint: labels.passwordHint,
+          error: wrongPassword ? labels.wrongPassword : void 0,
+          busy: working,
+          required: true
+        }
+      ),
+      failure && /* @__PURE__ */ jsx(AlertBanner, { tone: "danger", size: "sm", role: "alert", children: failure.message }),
+      /* @__PURE__ */ jsx(Button, { type: "submit", commit: true, disabled: !working && !canSubmit, pending: working, children: labels.submit })
+    ] })
+  ] });
+}
+export {
+  DEFAULT_EMAIL_CHANGE_LABELS,
+  EmailChangeSetting
+};
+//# sourceMappingURL=email-change-setting.js.map