@eifi1/ui-kit 0.33.0 → 0.34.0

package/src/{components → account}/account-settings.tsx

@@ -1,20 +1,22 @@
-import { useId, useState } from "react";
-import type { FormEvent, KeyboardEvent, ReactNode } from "react";
-import { Button, Card, Input } from "./ui";
-import { UserAvatar } from "./user-avatar";
-import { CopyButton } from "./copy-button";
-import { QrCode } from "./qr-code";
-import { OneTimeCodeInput } from "./one-time-code-input";
-import { usePromisePending } from "./danger-confirm";
+import { useId, useRef, useState } from "react";
+import type { ChangeEvent, FormEvent, KeyboardEvent, ReactNode, RefObject } from "react";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
+import { Input } from "../components/input";
+import { UserAvatar } from "../components/user-avatar";
+import { CopyButton } from "../components/copy-button";
+import { QrCode } from "../components/qr-code";
+import { OneTimeCodeInput } from "../components/one-time-code-input";
+import { usePromisePending } from "../components/danger-confirm";
 import { personNameOk, PERSON_NAME_MAX_LENGTH } from "../auth/form-rules";
 import {
   DEFAULT_PASSWORD_STRENGTH_LABELS,
   passwordByteLength,
   PasswordStrengthMeter,
-} from "./password-strength";
-import type { PasswordStrengthMeterProps } from "./password-strength";
-import { useKitLabelOverrides, useKitLabels } from "../i18n/kit-labels";
-import { Chip } from "./chip";
+} from "../components/password-strength";
+import type { PasswordStrengthMeterProps } from "../components/password-strength";
+import { useKitLabelOverrides, useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { Chip } from "../components/chip";
 import { useAccountSettingsLabels } from "./account-settings-labels";
 import { SettingsCardTitle } from "../settings/settings-heading";
 import type {
@@ -22,7 +24,10 @@ import type {
   ProfileSettingLabels,
   TwoFactorSettingLabels,
 } from "./account-settings-labels";
-import { COMMIT_EXCEPT_BILLING } from "./write-lock";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { AlertBanner } from "../components/alert-banner";
+import { hasContent } from "../lib/presence";
+import { authErrorCode } from "../auth/auth-errors";
 
 // The label types moved beside the namespace's defaults (0.12.0); re-exported here so
 // every existing `import type { ProfileSettingLabels }` keeps resolving.
@@ -61,7 +66,7 @@ interface ProfileSettingCommonProps {
   memberSince?: ReactNode;
   saving?: boolean;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { profile } }}>` > English. */
-  labels?: Partial<ProfileSettingLabels>;
+  labels?: LabelOverride<ProfileSettingLabels>;
   /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */
   id?: string;
 }
@@ -138,7 +143,7 @@ export function ProfileSetting(props: ProfileSettingProps) {
           {/* A heading inside a SettingsLayout (0.31, docs/settings-harmonization.md
               §3.7), the plain div it always was outside one. */}
           <SettingsCardTitle>{labels.title}</SettingsCardTitle>
-          <div className="truncate font-mono text-xs text-[var(--text-muted)]">
+          <div className="truncate-until-large font-mono text-xs text-muted">
             {/* `email` was a required key that nothing rendered; it names the address
                 for a screen reader, which otherwise hears a bare string under a title. */}
             <span className="sr-only">{labels.email}: </span>
@@ -147,9 +152,9 @@ export function ProfileSetting(props: ProfileSettingProps) {
         </div>
       </div>
       <div className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm">
-        <span className="text-[var(--text-muted)]">{labels.role}</span>
+        <span className="text-muted">{labels.role}</span>
         <span>{role ?? "—"}</span>
-        <span className="text-[var(--text-muted)]">{labels.memberSince}</span>
+        <span className="text-muted">{labels.memberSince}</span>
         <span>{memberSince ?? "—"}</span>
       </div>
       {names ? (
@@ -296,16 +301,40 @@ function PersonNameFields({
  */
 export type PasswordSettingStrength = Pick<PasswordStrengthMeterProps, "score" | "showRequirements" | "labels">;
 
+/**
+ * Changing the account's password: the current one, the new one twice, then the app's
+ * `onSubmit`.
+ *
+ * **Refusals under their fields** (0.34, KS U3). The card's own checks say why under the
+ * field they are about — too short or too long under the new password, a mismatch under
+ * the confirmation — and a server's `password_incorrect` (server-kit's `400` for a wrong
+ * current password; an older `invalid_credentials` too) is read from `onSubmit`'s
+ * rejection by code ({@link authErrorCode}) and said under the current password, in
+ * `EmailChangeSetting`'s and `DeleteAccountSetting`'s words. The field in error takes
+ * the focus, so its message is read with it. Until 0.34 the card swallowed every
+ * rejection and each app toasted the wrong password itself, in three spellings.
+ *
+ * **Anything else** is the app's: `describeError` puts its words in the card (a banner
+ * over the button), and without it the card shows nothing — the app's own toast, as
+ * before. The fields keep what was typed for a retry; a resolved `onSubmit` empties
+ * them.
+ */
 export function PasswordSetting({
   onSubmit,
   pending,
   minLength = 8,
   strength,
   maxBytes,
+  describeError,
   labels: labelsProp,
   id,
 }: {
-  /** Called with the validated (current, new) pair; return a promise to auto-clear on success. */
+  /**
+   * Called with the validated (current, new) pair; return a promise to auto-clear on
+   * success. Reject with the client's error: `password_incorrect` is said under the
+   * current password; anything else goes through `describeError`, else stays the app's
+   * to say (a toast).
+   */
   onSubmit: (currentPassword: string, newPassword: string) => void | Promise<unknown>;
   pending?: boolean;
   /** The shortest new password the card submits, in characters as a person counts them
@@ -332,8 +361,17 @@ export function PasswordSetting({
    * talks people out of the long passphrase they chose.
    */
   maxBytes?: number;
+  /**
+   * The app's own words for a failure of `onSubmit`, said IN the card (a banner over the
+   * button), or `undefined` for the kit's handling. Asked first, for every failure — as
+   * `EmailChangeSetting`'s and `DeleteAccountSetting`'s are (0.34, KS U3): a demo's
+   * refusal, the device offline, a `422` whose sentence the app has. Without it, or when
+   * it answers `undefined`, the card says `password_incorrect` under the current password
+   * and nothing else: the rest stays the app's own toast.
+   */
+  describeError?: (error: unknown) => ReactNode | undefined;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { password } }}>` > English. */
-  labels?: Partial<PasswordSettingLabels>;
+  labels?: LabelOverride<PasswordSettingLabels>;
   /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */
   id?: string;
 }) {
@@ -344,43 +382,101 @@ export function PasswordSetting({
   const [current, setCurrent] = useState("");
   const [next, setNext] = useState("");
   const [confirm, setConfirm] = useState("");
-  const [error, setError] = useState<string | null>(null);
+  // One refusal at a time, under the field it is about; the app's words in the banner.
+  const [fieldError, setFieldError] = useState<{ field: PasswordField; message: string } | null>(null);
+  const [failure, setFailure] = useState<ReactNode>(null);
+  const currentRef = useRef<HTMLInputElement>(null);
+  const nextRef = useRef<HTMLInputElement>(null);
+  const confirmRef = useRef<HTMLInputElement>(null);
+  const refs: Record<PasswordField, RefObject<HTMLInputElement | null>> = {
+    current: currentRef,
+    next: nextRef,
+    confirm: confirmRef,
+  };
+
+  // The field in error takes the focus, so its message (its description) is read with it.
+  const refuse = (field: PasswordField, message: string) => {
+    setFieldError({ field, message });
+    refs[field].current?.focus();
+  };
+  const errorOf = (field: PasswordField) => (fieldError?.field === field ? fieldError.message : undefined);
+  // Typing in a field answers its refusal, and the banner's: both go.
+  const edit = (field: PasswordField, set: (value: string) => void) => (e: ChangeEvent<HTMLInputElement>) => {
+    set(e.target.value);
+    if (fieldError?.field === field) setFieldError(null);
+    if (failure !== null) setFailure(null);
+  };
+
+  const present = (error: unknown) => {
+    const own = describeError?.(error);
+    if (hasContent(own)) {
+      setFailure(own);
+      return;
+    }
+    const code = authErrorCode(error);
+    // `invalid_credentials` too, for a server that answered a wrong password so before
+    // server-kit 0.4.0 named `password_incorrect` — the siblings' rule.
+    if (code === "password_incorrect" || code === "invalid_credentials") {
+      refuse("current", labels.wrongPassword);
+    }
+    // Anything else is the app's to say (a toast), as before 0.34.
+  };
 
   const submit = async () => {
+    setFailure(null);
     // Code points, not UTF-16 units — the count the meter's checklist and a server's
     // `len()` use. `next.length` counted an emoji as two, so four of them passed a
     // minimum of eight that the meter beside the field said they missed.
     if ([...next].length < minLength) {
-      setError(labels.tooShort);
+      refuse("next", labels.tooShort);
       return;
     }
     if (maxBytes !== undefined && passwordByteLength(next) > maxBytes) {
-      setError(strengthLabels.tooLong(maxBytes));
+      refuse("next", strengthLabels.tooLong(maxBytes));
       return;
     }
     if (next !== confirm) {
-      setError(labels.mismatch);
+      refuse("confirm", labels.mismatch);
       return;
     }
-    setError(null);
+    setFieldError(null);
     try {
       await onSubmit(current, next);
       setCurrent("");
       setNext("");
       setConfirm("");
-    } catch {
-      // The app surfaces the failure (e.g. a toast); keep the fields for a retry.
+    } catch (error) {
+      // Keep the fields for a retry, and say what the card can.
+      present(error);
     }
   };
 
+  // `error` passed on all three from the first render, so a message coming and going
+  // never remounts a field and takes the caret with it (Input's `FieldGroup`).
   const nextField = (
-    <Input type="password" autoComplete="new-password" label={labels.next} value={next} onChange={(e) => setNext(e.target.value)} />
+    <Input
+      ref={nextRef}
+      type="password"
+      autoComplete="new-password"
+      label={labels.next}
+      value={next}
+      onChange={edit("next", setNext)}
+      error={errorOf("next")}
+    />
   );
 
   return (
     <Card id={id} className="p-4 space-y-3">
       <SettingsCardTitle>{labels.title}</SettingsCardTitle>
-      <Input type="password" autoComplete="current-password" label={labels.current} value={current} onChange={(e) => setCurrent(e.target.value)} />
+      <Input
+        ref={currentRef}
+        type="password"
+        autoComplete="current-password"
+        label={labels.current}
+        value={current}
+        onChange={edit("current", setCurrent)}
+        error={errorOf("current")}
+      />
       {strength ? (
         // One box for the field and its meter, so the card's `space-y-3` spaces the pair
         // from its neighbours and the meter keeps its own small gap under the field.
@@ -398,8 +494,20 @@ export function PasswordSetting({
       ) : (
         nextField
       )}
-      <Input type="password" autoComplete="new-password" label={labels.confirm} value={confirm} onChange={(e) => setConfirm(e.target.value)} />
-      {error && <p className="text-xs text-[var(--danger)]">{error}</p>}
+      <Input
+        ref={confirmRef}
+        type="password"
+        autoComplete="new-password"
+        label={labels.confirm}
+        value={confirm}
+        onChange={edit("confirm", setConfirm)}
+        error={errorOf("confirm")}
+      />
+      {hasContent(failure) && (
+        <AlertBanner tone="danger" size="sm" role="alert">
+          {failure}
+        </AlertBanner>
+      )}
       <Button onClick={() => void submit()} disabled={!current || !next || !confirm || pending}>
         {labels.submit}
       </Button>
@@ -407,6 +515,9 @@ export function PasswordSetting({
   );
 }
 
+/** The three fields of {@link PasswordSetting}, for the refusal that names one. */
+type PasswordField = "current" | "next" | "confirm";
+
 /**
  * What the app's setup call returned.
  *
@@ -459,7 +570,7 @@ export function TwoFactorSetting({
    *  `otpauthUri`; the kit's own {@link QrCode} otherwise. Unused with `qrSvg`. */
   renderQr?: (otpauthUri: string) => ReactNode;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { twoFactor } }}>` > English. */
-  labels?: Partial<TwoFactorSettingLabels>;
+  labels?: LabelOverride<TwoFactorSettingLabels>;
   /** The card's DOM id — a settings catalogue `anchor`, so `?focus=` can ring it (0.31). */
   id?: string;
 }) {
@@ -507,7 +618,7 @@ export function TwoFactorSetting({
 
       {setup && (
         <div className="space-y-2">
-          <div className="text-xs text-[var(--text-secondary)]">{labels.scanHint}</div>
+          <div className="text-xs text-secondary">{labels.scanHint}</div>
           {/* `bg-white`, NOT `--bg-surface`, and it must stay that way: a QR code is
               read by a camera looking for maximum contrast between the modules and
               their quiet zone. On the dark theme a surface-coloured backing makes it
@@ -535,7 +646,7 @@ export function TwoFactorSetting({
           )}
           {secret && (
             <div className="space-y-1">
-              <div className="text-xs text-[var(--text-secondary)]">{labels.secretHint}</div>
+              <div className="text-xs text-secondary">{labels.secretHint}</div>
               <div className="flex items-center gap-1">
                 {/* `dir="ltr"`: a base32 key is Latin letters and digits in a fixed
                     order, and in an RTL page the groups would otherwise be laid out
@@ -567,7 +678,7 @@ export function TwoFactorSetting({
       )}
 
       {enabled && (
-        <div className="space-y-3 border-t border-[var(--border)] pt-3">
+        <div className="space-y-3 border-t border-subtle pt-3">
           <div className="text-sm font-medium">{labels.disableSection}</div>
           <Input type="password" autoComplete="current-password" label={labels.password} value={password} onChange={(e) => setPassword(e.target.value)} />
           <OneTimeCodeInput

package/src/account/data-export-setting-labels.ts

@@ -0,0 +1,20 @@
+// The English words of ./data-export-setting, in a module with no component code: the
+// English catalogue (src/i18n/defaults.ts) imports them without the component, so `en`
+// loads as one chunk like the other languages (0.34, KS U8). ./data-export-setting
+// re-exports them.
+
+import { englishWait } from "../auth/auth-errors";
+import type { DataExportLabels } from "./data-export-setting";
+
+export const DEFAULT_DATA_EXPORT_LABELS: DataExportLabels = {
+  title: "Export your data",
+  description: "Download a copy of your account’s data as a JSON file.",
+  download: "Download my data",
+  started: "Your download has started.",
+  saveAgain: "Didn’t start? Save the file",
+  rateLimited: (seconds) =>
+    seconds && seconds > 0
+      ? `You exported your data a moment ago. Try again in ${englishWait(seconds)}.`
+      : "You exported your data a moment ago. Please try again in a minute.",
+  failed: "The export failed. Please try again.",
+};

package/src/account/data-export-setting.tsx

@@ -1,16 +1,19 @@
 import { useEffect, useState } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { Download } from "lucide-react";
 
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
+import { clickDownload } from "../lib/download";
 import { AlertBanner } from "../components/alert-banner";
-import { hasMessage } from "../components/choice-parts";
+import { hasContent } from "../lib/presence";
 import { TextLink } from "../components/text-link";
-import { Button, Card } from "../components/ui";
-import { englishWait, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
+import { isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
 import { CARD_DESCRIPTION_CLASS, settle, useMounted } from "./account-parts";
 import { SettingsCardTitle } from "../settings/settings-heading";
+import { DEFAULT_DATA_EXPORT_LABELS } from "./data-export-setting-labels";
 
 /* ── Labels ──────────────────────────────────────────────────────────────── */
 
@@ -35,18 +38,8 @@ export interface DataExportLabels {
   failed: string;
 }
 
-export const DEFAULT_DATA_EXPORT_LABELS: DataExportLabels = {
-  title: "Export your data",
-  description: "Download a copy of your account’s data as a JSON file.",
-  download: "Download my data",
-  started: "Your download has started.",
-  saveAgain: "Didn’t start? Save the file",
-  rateLimited: (seconds) =>
-    seconds && seconds > 0
-      ? `You exported your data a moment ago. Try again in ${englishWait(seconds)}.`
-      : "You exported your data a moment ago. Please try again in a minute.",
-  failed: "The export failed. Please try again.",
-};
+// Defined in ./data-export-setting-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_DATA_EXPORT_LABELS };
 
 /* ── Props ───────────────────────────────────────────────────────────────── */
 
@@ -57,7 +50,7 @@ export const DEFAULT_DATA_EXPORT_LABELS: DataExportLabels = {
  */
 export type DataExportFile = Blob | { url: string; filename?: string };
 
-export interface DataExportSettingProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface DataExportSettingProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /**
    * Fetch the export (`GET /auth/me/export`, §6.5). Resolve with the file — the card
    * saves it under `filename` — or reject with the client's error: a 429 (the export is
@@ -75,7 +68,7 @@ export interface DataExportSettingProps extends Omit<ComponentPropsWithoutRef<"d
   filename?: string;
   /** The app's own words for a failure, or `undefined` for the kit's. Asked first. */
   describeError?: (error: unknown) => ReactNode | undefined;
-  labels?: Partial<DataExportLabels>;
+  labels?: LabelOverride<DataExportLabels>;
 }
 
 interface Saved {
@@ -96,20 +89,6 @@ function isUrlAnswer(value: unknown): value is { url: string; filename?: string
   return typeof value === "object" && value !== null && typeof (value as { url?: unknown }).url === "string";
 }
 
-/** Hand `href` to the browser as a download named `filename`: a link with `download`,
- *  clicked once and taken out again — the one way a page saves a file without a new
- *  tab that would show the JSON instead. */
-function startDownload(href: string, filename: string) {
-  const link = document.createElement("a");
-  link.href = href;
-  link.download = filename;
-  link.rel = "noopener";
-  link.hidden = true;
-  document.body.appendChild(link);
-  link.click();
-  link.remove();
-}
-
 /**
  * The account's data as a download (docs/user-admin-harmonization.md §6.5, §2.2): what it
  * is, the app's sentence on what it holds, and one button.
@@ -171,14 +150,16 @@ export function DataExportSetting({
           return;
         }
         setSaved(next);
-        startDownload(next.href, next.filename);
+        // The click alone, not `saveBlob`: the object URL is the card's to revoke, since
+        // the "Save the file" link below points at it for as long as it is shown.
+        clickDownload(next.href, next.filename);
       },
       (error: unknown) => {
         if (!mounted.current) return;
         setBusy(false);
         const own = describeError?.(error);
         setFailure(
-          hasMessage(own) ? own : isRateLimited(error) ? labels.rateLimited(retryAfterSeconds(error)) : labels.failed,
+          hasContent(own) ? own : isRateLimited(error) ? labels.rateLimited(retryAfterSeconds(error)) : labels.failed,
         );
       },
     );
@@ -189,7 +170,7 @@ export function DataExportSetting({
       <div className="space-y-1">
         <SettingsCardTitle>{labels.title}</SettingsCardTitle>
         <div className={CARD_DESCRIPTION_CLASS}>{labels.description}</div>
-        {hasMessage(description) && <div className={CARD_DESCRIPTION_CLASS}>{description}</div>}
+        {hasContent(description) && <div className={CARD_DESCRIPTION_CLASS}>{description}</div>}
       </div>
       <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
         <Button type="button" variant="secondary" pending={busy} onClick={run}>
@@ -198,7 +179,7 @@ export function DataExportSetting({
         </Button>
         {/* Always in the tree, so the confirmation that appears in it is announced; in
             the button's row, so an empty one takes no line of its own. */}
-        <span role="status" className="text-xs text-[var(--text-secondary)]">
+        <span role="status" className="text-xs text-secondary">
           {saved && (
             <>
               {labels.started}{" "}
@@ -209,7 +190,7 @@ export function DataExportSetting({
           )}
         </span>
       </div>
-      {hasMessage(failure) && (
+      {hasContent(failure) && (
         <AlertBanner tone="danger" size="sm" role="alert">
           {failure}
         </AlertBanner>

package/src/account/delete-account-setting-labels.ts

@@ -0,0 +1,33 @@
+// The English words of ./delete-account-setting, in a module with no component code: the
+// English catalogue (src/i18n/defaults.ts) imports them without the component, so `en`
+// loads as one chunk like the other languages (0.34, KS U8). ./delete-account-setting
+// re-exports them.
+
+import { englishRateLimited } from "../auth/auth-errors";
+import type { DeleteAccountLabels } from "./delete-account-setting";
+
+export const DEFAULT_DELETE_ACCOUNT_LABELS: DeleteAccountLabels = {
+  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…",
+  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’s 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’t be deleted here. Please write to the operator.",
+  rateLimited: englishRateLimited,
+  failed: "Your account could not be deleted. Please try again.",
+};

package/src/account/delete-account-setting.tsx

@@ -1,11 +1,11 @@
 import { isValidElement, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { UserX } from "lucide-react";
 
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { AlertBanner } from "../components/alert-banner";
-import { hasMessage } from "../components/choice-parts";
+import { hasContent } from "../lib/presence";
 import {
   CurrentPasswordInput,
   DangerConfirm,
@@ -14,12 +14,13 @@ import {
   typedMatches,
 } from "../components/danger-confirm";
 import type { DangerConsequence } from "../components/danger-confirm";
-import { Card } from "../components/ui";
-import { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
+import { Card } from "../components/card";
+import { authErrorCode, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
 import { useFocusWhen } from "../auth/status-parts";
 import { CARD_DESCRIPTION_CLASS, refusalCompanies, settle, useMounted } from "./account-parts";
 import { SettingsCardTitle } from "../settings/settings-heading";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { DEFAULT_DELETE_ACCOUNT_LABELS } from "./delete-account-setting-labels";
 
 /* ── Labels ──────────────────────────────────────────────────────────────── */
 
@@ -66,31 +67,8 @@ export interface DeleteAccountLabels {
   failed: string;
 }
 
-export const DEFAULT_DELETE_ACCOUNT_LABELS: DeleteAccountLabels = {
-  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…",
-  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’s 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’t be deleted here. Please write to the operator.",
-  rateLimited: englishRateLimited,
-  failed: "Your account could not be deleted. Please try again.",
-};
+// Defined in ./delete-account-setting-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_DELETE_ACCOUNT_LABELS };
 
 /* ── Props ───────────────────────────────────────────────────────────────── */
 
@@ -111,7 +89,7 @@ export interface DeleteAccountValues {
  *  for a key of its own and the `severe` mark. */
 export type DeleteAccountConsequence = ReactNode | DangerConsequence;
 
-export interface DeleteAccountSettingProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface DeleteAccountSettingProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /** The account's address — the text to type. */
   email: string;
   /** `"after_days"` (keksdose, Kurvenschmiede: erased by a scheduled job) or
@@ -144,7 +122,7 @@ export interface DeleteAccountSettingProps extends Omit<ComponentPropsWithoutRef
   /** The app's own words for a failure, or `undefined` for the kit's. Asked first, for
    *  every failure — kastlan's `last_admin` names the companies. */
   describeError?: (error: unknown) => ReactNode | undefined;
-  labels?: Partial<DeleteAccountLabels>;
+  labels?: LabelOverride<DeleteAccountLabels>;
 }
 
 /** Whether an item is a `{ text }` line rather than a node — a React element is an
@@ -239,7 +217,7 @@ export function DeleteAccountSetting({
 
   const present = (error: unknown) => {
     const own = describeError?.(error);
-    if (hasMessage(own)) {
+    if (hasContent(own)) {
       setFailure(own);
       return;
     }
@@ -317,7 +295,7 @@ export function DeleteAccountSetting({
       </div>
       {done ? (
         <div ref={doneRef} tabIndex={-1} role="status" className="flex items-start gap-2 text-sm outline-none">
-          <UserX aria-hidden className="mt-0.5 size-4 shrink-0 text-[var(--text-muted)]" />
+          <UserX aria-hidden className="mt-0.5 size-4 shrink-0 text-muted" />
           <span>{labels.done}</span>
         </div>
       ) : (
@@ -356,7 +334,7 @@ export function DeleteAccountSetting({
               busy={busy}
             />
           </DangerConfirm>
-          {hasMessage(failure) && (
+          {hasContent(failure) && (
             <AlertBanner tone="danger" size="sm" role="alert">
               {failure}
             </AlertBanner>

package/src/account/email-change-setting-labels.ts

@@ -0,0 +1,32 @@
+// The English words of ./email-change-setting, in a module with no component code: the
+// English catalogue (src/i18n/defaults.ts) imports them without the component, so `en`
+// loads as one chunk like the other languages (0.34, KS U8). ./email-change-setting
+// re-exports them.
+
+import { englishRateLimited } from "../auth/auth-errors";
+import type { EmailChangeLabels } from "./email-change-setting";
+
+export const DEFAULT_EMAIL_CHANGE_LABELS: EmailChangeLabels = {
+  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@… 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’t work. Please try again.",
+};