@eifi1/ui-kit 0.51.6 → 0.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.51.6",
+  "version": "0.52.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",
@@ -106,13 +106,14 @@
     "test:coverage": "vitest run --coverage",
     "check:graph": "node scripts/check-module-graph.mjs",
     "check:package": "node scripts/verify-package.mjs --quiet",
+    "check:api": "node scripts/check-api-compat.mjs",
     "check:tailwind": "node scripts/check-tailwind-scan.mjs",
     "check:security": "npm audit --audit-level=high",
     "check:commits": "node scripts/check-commit-range.cjs",
     "check:commit-rules": "node scripts/check-commit-rules.mjs",
     "sync:commit-rules": "node scripts/sync-commit-rules.mjs",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
+    "format": "prettier --write . --cache --cache-location node_modules/.cache/prettier/.prettier-cache --cache-strategy content",
+    "format:check": "prettier --check . --cache --cache-location node_modules/.cache/prettier/.prettier-cache --cache-strategy content",
     "check:static": "npm run format:check && npm run typecheck && npm run lint && npm run check:tokens && npm run check:security && npm run check:commit-rules && npm run check:commits",
     "check:test": "npm run test:coverage",
     "check:build": "npm run build && npm run check:graph && npm run check:package && node scripts/gen-export-inventory.mjs --check && node scripts/gen-styling-inventory.mjs --check && npm run build:showcase && npm run check:tailwind",
@@ -121,7 +122,7 @@
     "test:watch": "vitest",
     "build": "node scripts/tsup-quiet.mjs && node scripts/build-dts.mjs && node scripts/fix-esm-extensions.mjs && node scripts/flatten-en.mjs && node scripts/build-pay-page.mjs",
     "verify:package": "npm run build && node scripts/verify-package.mjs",
-    "dev": "tsup --watch --onSuccess \"node scripts/build-dts.mjs && node scripts/fix-esm-extensions.mjs\"",
+    "dev": "tsup --watch --onSuccess \"node scripts/build-dts.mjs && node scripts/fix-esm-extensions.mjs && node scripts/flatten-en.mjs && node scripts/build-pay-page.mjs\"",
     "dev:showcase": "vite --config showcase/vite.config.ts",
     "build:showcase": "vite build --config showcase/vite.config.ts --logLevel warn",
     "preview:showcase": "vite preview --config showcase/vite.config.ts",
@@ -140,7 +141,7 @@
     "@testing-library/react": ">=16",
     "dexie": "^4",
     "idb-keyval": "^6",
-    "lucide-react": ">=0.400.0 <2",
+    "lucide-react": ">=0.577.0 <2",
     "modern-screenshot": "^4.7.0",
     "react": ">=19.2",
     "react-dom": ">=19.2",
@@ -178,7 +179,7 @@
       "optional": true
     }
   },
-  "_dependencies": "Only what the package imports AND owns the version of. `lucide-react` is a PEER: every consumer already declares `lucide-react: ^0.511.0` itself, so a hard dependency here bought each of them a second copy of the icon set in node_modules — and pinned to 0.511.x it held all three behind a release line that is now at 1.x. The range is deliberately wide (`>=0.400.0 <2`): the kit imports named icon components and nothing else, which has been stable across that whole span, so the app picks the version. `flag-icons` was never imported at all — 5.6 MB of stylesheet and SVG installed into every consumer to support class NAMES (`fi fi-xx`) that CurrencyFlag, CurrencySelect and LanguageMenu render as strings. The host supplies that stylesheet; see the dependency section of README.md. It stays a devDependency because the showcase imports it.",
+  "_dependencies": "Only what the package imports AND owns the version of. `lucide-react` is a PEER: every consumer already declares `lucide-react: ^0.511.0` itself, so a hard dependency here bought each of them a second copy of the icon set in node_modules — and pinned to 0.511.x it held all three behind a release line that is now at 1.x. The range is deliberately wide (`>=0.577.0 <2`): the kit imports named icon components and nothing else, so the app picks the version. Its floor is the version all three apps run, and scripts/verify-package.mjs installs that floor rather than the 1.x devDependency, so an icon that exists only in 1.x fails the kit's gate, not the apps' builds (MOD-2, refactor audit 2026-10-30; the old `>=0.400.0` floor had never been loaded by anything). `flag-icons` was never imported at all — 5.6 MB of stylesheet and SVG installed into every consumer to support class NAMES (`fi fi-xx`) that CurrencyFlag, CurrencySelect and LanguageMenu render as strings. The host supplies that stylesheet; see the dependency section of README.md. It stays a devDependency because the showcase imports it.",
   "dependencies": {
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.7.0",
@@ -186,6 +187,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@tailwindcss/oxide": "^4.3.3",
     "@tailwindcss/vite": "^4.3.3",
     "@tanstack/query-async-storage-persister": "^5.104.1",
     "@tanstack/react-query": "^5.104.1",
@@ -201,6 +203,7 @@
     "axe-core": "4.13.0",
     "commit-and-tag-version": "^13.2.1",
     "dexie": "^4.4.6",
+    "esbuild": "^0.28.2",
     "eslint": "^10.11.0",
     "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-import-x": "^4.17.1",
@@ -219,6 +222,7 @@
     "react-hook-form": "^7.88.0",
     "react-router": "^8.3.0",
     "recharts": "^3.8.1",
+    "rollup": "^4.63.5",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.3.3",
     "tsup": "^8.5.0",
@@ -249,9 +253,9 @@
   "engines": {
     "node": ">=20.18"
   },
-  "_overrides": "esbuild is forced to ^0.28.2 for GHSA-g7r4-m6w7-qqqr (dev-server file read on Windows, fixed in 0.28.1). vite already allows ^0.28; tsup 8.5.1 still pins ^0.27, and `npm run check` (build + package verification) proves it works on 0.28. Drop this once tsup allows 0.28 itself. eslint-plugin-jsx-a11y 6.10.2 (its latest) declares eslint peers up to ^9; it runs unchanged on eslint 10 — every a11y rule still fires, same counts — so its eslint peer is pointed at ours. Drop that entry once jsx-a11y declares ^10.",
+  "_overrides": "esbuild is forced to ^0.28.2 for GHSA-g7r4-m6w7-qqqr (dev-server file read on Windows, fixed in 0.28.1). vite already allows ^0.28; tsup 8.5.1 still pins ^0.27, and `npm run check` (build + package verification) proves it works on 0.28. The override is `$esbuild`, the devDependency's own range: npm refuses an override of a direct dependency that names a different spec. Drop it once tsup allows 0.28 itself; the devDependency stays. esbuild and rollup are devDependencies because scripts import them (flatten-en and check-module-graph; refactor audit 2026-10-30, TST-9): they came only through tsup and vite, so a move off tsup would have broken check:graph. eslint-plugin-jsx-a11y 6.10.2 (its latest) declares eslint peers up to ^9; it runs unchanged on eslint 10 — every a11y rule still fires, same counts — so its eslint peer is pointed at ours. Drop that entry once jsx-a11y declares ^10.",
   "overrides": {
-    "esbuild": "^0.28.2",
+    "esbuild": "$esbuild",
     "eslint-plugin-jsx-a11y": {
       "eslint": "$eslint"
     }

package/src/account/account-parts.ts

@@ -1,8 +1,6 @@
-import { useEffect, useRef } from "react";
-
 /**
  * What the account's own settings parts share (docs/user-admin-harmonization.md §6):
- * the companies a refusal names, a mounted guard, and the card's type.
+ * the companies a refusal names and the card's type (the mounted guard re-exported).
  *
  * @internal Not part of the barrel; the parts are.
  */
@@ -39,28 +37,10 @@ export function refusalCompanies(err: unknown): string[] | undefined {
   );
 }
 
-/** Whether the component is still mounted — a late answer after the app navigated away
- *  (the deletion signs out) must not set state. */
-export function useMounted(): { readonly current: boolean } {
-  const mounted = useRef(true);
-  useEffect(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-    };
-  }, []);
-  return mounted;
-}
-
-/** Call `call` and hand back a promise, a throw included — a callback may return
- *  nothing (done at once), a promise, or throw before it returns one. */
-export function settle(call: () => unknown): Promise<unknown> {
-  try {
-    return Promise.resolve(call());
-  } catch (error) {
-    return Promise.reject(error);
-  }
-}
+/** The mounted guard and the callback-to-promise bridge, in `hooks/use-mounted.ts` since
+ *  0.52: seven notifications modules imported them from here (refactor audit
+ *  2026-10-30, MOD-6). Re-exported for the account parts that still do. */
+export { settle, useMounted } from "../hooks/use-mounted";
 
 /** The settings cards' type scale, PasskeysSetting's: a small title and a muted line.
  *  Defined with the card look in settings/ since 0.34 (MOD-8, refactor audit 2026-10). */

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

@@ -3,7 +3,7 @@
 // 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 { englishWait } from "../auth/auth-errors-labels";
 import type { DataExportLabels } from "./data-export-setting";
 
 export const DEFAULT_DATA_EXPORT_LABELS: DataExportLabels = {

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

@@ -3,7 +3,7 @@
 // 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 { englishRateLimited } from "../auth/auth-errors-labels";
 import type { DeleteAccountLabels } from "./delete-account-setting";
 
 export const DEFAULT_DELETE_ACCOUNT_LABELS: DeleteAccountLabels = {

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

@@ -3,7 +3,7 @@
 // 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 { englishRateLimited } from "../auth/auth-errors-labels";
 import type { EmailChangeLabels } from "./email-change-setting";
 
 export const DEFAULT_EMAIL_CHANGE_LABELS: EmailChangeLabels = {

package/src/account/passkeys-setting.tsx

@@ -1,13 +1,17 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 import { KeyRound } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { useDayFormatter } from "../lib/day-format";
+import { toDate } from "../lib/format";
+import type { LabelOverride } from "../i18n/kit-labels";
 import { Button } from "../components/button";
 import { Card } from "../components/card";
 import { EmptyState } from "../components/empty-state";
+import { InlineConfirm } from "../components/inline-confirm";
 import { Input } from "../components/input";
 import { Skeleton } from "../components/skeleton";
+import { COMMIT_EXCEPT_BILLING, useWriteLock } from "../components/write-lock";
 import { useAccountSettingsLabels } from "./account-settings-labels";
 import { SettingsCardTitle } from "../settings/settings-heading";
 import type { PasskeysSettingLabels } from "./account-settings-labels";
@@ -88,7 +92,9 @@ export interface PasskeysSettingProps<Id extends PasskeyId = PasskeyId> extends
    * app knows which of those it detected.
    */
   unavailable?: ReactNode;
-  /** A date for the "Added …" / "Last used …" lines. Default: the locale's medium date. */
+  /** A date for the "Added …" / "Last used …" lines. Default: the provider's `formatDate`
+   *  (the app's date preference), else a medium date in the provider's locale and
+   *  `timeZone`. */
   formatDate?: (date: Date) => string;
   /** Overrides the provider's locale for the default date format. */
   locale?: string;
@@ -117,6 +123,11 @@ export interface PasskeysSettingProps<Id extends PasskeyId = PasskeyId> extends
  * must work in an app without a `ConfirmProvider`, and the question belongs next to
  * the passkey it names. Focus moves to Cancel, as in every destructive confirm in the
  * kit, so the Enter that pressed Delete cannot also answer it.
+ *
+ * **Under a write lock** (0.52) Add, Rename, Delete and the confirm are `commit` controls
+ * exempt from billing — a lapsed plan still lets the account manage how it signs in, the
+ * demo does not. Until 0.52 the passkeys' confirm was the one inline confirm without it,
+ * so the demo could delete, rename and add (refactor audit 2026-10-30, DUP-10).
  */
 export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
   passkeys,
@@ -138,7 +149,21 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
   ...rest
 }: PasskeysSettingProps<Id>) {
   const labels = useAccountSettingsLabels("passkeys", labelsProp);
-  const locale = useKitLocale(localeProp);
+  // The prop, else the provider's `formatDate`, else the kit's in the provider's locale and
+  // `timeZone`; a bare "YYYY-MM-DD" is read on its calendar (refactor audit 2026-10-30,
+  // DUP-2: this card parsed with `new Date` and built its own `Intl` formatter).
+  // The raw value goes in, so a bare day keeps its calendar; the prop still gets a Date.
+  const own = useMemo(
+    () =>
+      formatDate &&
+      ((value: PasskeyItem["createdAt"]) => {
+        const date = toDate(value);
+        return date ? formatDate(date) : "";
+      }),
+    [formatDate],
+  );
+  const day = useDayFormatter(own, localeProp);
+  const lock = useWriteLock(COMMIT_EXCEPT_BILLING);
   const [name, setName] = useState("");
   // `beforeAdd` is running. State for the button, and a ref for the guard: two clicks
   // in one frame both read the state from before either set it.
@@ -146,14 +171,12 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
   const checkingRef = useRef(false);
 
   const date = (value: PasskeyItem["createdAt"]): string | null => {
-    if (value === null || value === undefined || value === "") return null;
-    const d = value instanceof Date ? value : new Date(value);
-    if (Number.isNaN(d.getTime())) return null;
-    return formatDate ? formatDate(d) : new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(d);
+    return toDate(value) ? day(value) : null;
   };
 
   const add = () => {
-    if (adding || checkingRef.current) return;
+    // The name field's Enter reaches here too, past the locked button.
+    if (adding || checkingRef.current || lock.locked) return;
     const typed = name;
     const value = typed.trim();
     const send = () =>
@@ -211,6 +234,7 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
                 lastUsed={date(item.lastUsedAt)}
                 attributes={rowProps?.(item)}
                 busy={busyId !== undefined && busyId !== null && busyId === item.id}
+                locked={lock.locked}
                 onRename={onRename}
                 onDelete={onDelete}
                 labels={labels}
@@ -234,7 +258,7 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
               }}
             />
           )}
-          <Button onClick={add} disabled={busy} aria-busy={busy || undefined}>
+          <Button onClick={add} commit={COMMIT_EXCEPT_BILLING} disabled={busy} aria-busy={busy || undefined}>
             <KeyRound className="size-4" aria-hidden />
             {adding ? labels.adding : labels.add}
           </Button>
@@ -265,6 +289,7 @@ function PasskeyRow<Id extends PasskeyId>({
   lastUsed,
   attributes,
   busy,
+  locked,
   onRename,
   onDelete,
   labels,
@@ -274,24 +299,26 @@ function PasskeyRow<Id extends PasskeyId>({
   lastUsed: string | null;
   attributes?: { id?: string } & PasskeyDataAttributes;
   busy: boolean;
+  /** A write lock holds: the rename field's Enter saves nothing. */
+  locked: boolean;
   onRename?: PasskeysSettingProps<Id>["onRename"];
   onDelete?: PasskeysSettingProps<Id>["onDelete"];
   labels: PasskeysSettingLabels;
 }) {
   const [mode, setMode] = useState<RowMode>("view");
   const [draft, setDraft] = useState(item.name);
-  // Which button opened the sub-mode, so leaving it puts focus back there — the
-  // confirm or the field unmounts under the focus, which otherwise falls to <body>.
+  // Which button opened the sub-mode, so leaving it puts focus back there — the field or
+  // the confirm unmounts under the focus, which otherwise falls to <body>. InlineConfirm
+  // returns it on Cancel and Escape; this also covers a delete that succeeded while the
+  // row stayed (the list not refreshed yet) and a rename.
   const [returnTo, setReturnTo] = useState<"rename" | "delete" | null>(null);
-  const cancelDeleteRef = useRef<HTMLButtonElement>(null);
   const renameRef = useRef<HTMLInputElement>(null);
   const renameButtonRef = useRef<HTMLButtonElement>(null);
   const deleteButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
-    if (mode === "delete") cancelDeleteRef.current?.focus();
-    else if (mode === "rename") renameRef.current?.select();
-    else if (returnTo) (returnTo === "rename" ? renameButtonRef : deleteButtonRef).current?.focus();
+    if (mode === "rename") renameRef.current?.select();
+    else if (mode === "view" && returnTo) (returnTo === "rename" ? renameButtonRef : deleteButtonRef).current?.focus();
   }, [mode, returnTo]);
 
   const open = (next: "rename" | "delete") => {
@@ -300,17 +327,10 @@ function PasskeyRow<Id extends PasskeyId>({
     setMode(next);
   };
   const leave = () => setMode("view");
-  const escapeLeaves = (e: KeyboardEvent<HTMLButtonElement>) => {
-    if (e.key === "Escape") {
-      e.preventDefault();
-      e.stopPropagation();
-      leave();
-    }
-  };
 
   const saveRename = () => {
     const next = draft.trim();
-    if (!onRename || !next || busy) return;
+    if (!onRename || !next || busy || locked) return;
     if (next === item.name) {
       leave();
       return;
@@ -356,7 +376,7 @@ function PasskeyRow<Id extends PasskeyId>({
             }
           }}
         />
-        <Button size="sm" onClick={saveRename} disabled={busy || !draft.trim()}>
+        <Button size="sm" onClick={saveRename} commit={COMMIT_EXCEPT_BILLING} disabled={busy || !draft.trim()}>
           {labels.save}
         </Button>
         <Button size="sm" variant="ghost" onClick={leave}>
@@ -368,19 +388,19 @@ function PasskeyRow<Id extends PasskeyId>({
 
   if (mode === "delete") {
     return (
-      <li {...li} className="space-y-2 py-2">
-        <p role="alert" className="text-sm">
-          {labels.deleteConfirm(item.name)}
-        </p>
-        <div className="flex flex-wrap gap-2">
-          <Button size="sm" variant="danger" onClick={confirmDelete} onKeyDown={escapeLeaves} disabled={busy}>
-            {labels.confirmDelete}
-          </Button>
-          <Button ref={cancelDeleteRef} size="sm" variant="ghost" onClick={leave} onKeyDown={escapeLeaves}>
-            {labels.cancel}
-          </Button>
-        </div>
-      </li>
+      <InlineConfirm
+        as="li"
+        {...li}
+        className="py-2"
+        prompt={labels.deleteConfirm(item.name)}
+        confirmLabel={labels.confirmDelete}
+        cancelLabel={labels.cancel}
+        onConfirm={confirmDelete}
+        onLeave={leave}
+        busy={busy}
+        commit={COMMIT_EXCEPT_BILLING}
+        returnFocusRef={deleteButtonRef}
+      />
     );
   }
 
@@ -398,6 +418,7 @@ function PasskeyRow<Id extends PasskeyId>({
           ref={renameButtonRef}
           size="sm"
           variant="ghost"
+          commit={COMMIT_EXCEPT_BILLING}
           disabled={busy}
           onClick={() => open("rename")}
           aria-label={labels.renameItem(item.name)}
@@ -411,6 +432,7 @@ function PasskeyRow<Id extends PasskeyId>({
           size="sm"
           variant="ghost"
           tone="danger"
+          commit={COMMIT_EXCEPT_BILLING}
           disabled={busy}
           onClick={() => open("delete")}
           aria-label={labels.deleteItem(item.name)}

package/src/account/sessions-setting.tsx

@@ -2,9 +2,11 @@ import { useState } from "react";
 import type { ComponentPropsWithRef, ReactNode } from "react";
 import { MonitorSmartphone } from "lucide-react";
 
-import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import { formatRelativeTime, toDate } from "../lib/format";
+import { useDayFormatter } from "../lib/day-format";
+import { describeFailure } from "../lib/describe-failure";
+import { toDate, useKitFormat } from "../lib/format";
 import type { DateInput } from "../lib/format";
 import { AlertBanner } from "../components/alert-banner";
 import { Chip } from "../components/chip";
@@ -107,8 +109,9 @@ export interface SessionsSettingProps<Id extends SessionId = SessionId> extends
   onRevoke?: (id: Id) => Promise<unknown> | void;
   /** The app's own words for a failure, or `undefined` for the kit's `failed`. */
   describeError?: (error: unknown, action: SessionsAction) => ReactNode | undefined;
-  /** The "Last active" text. Default: how long ago, in the provider's locale, and the
-   *  date once it is more than a week back. */
+  /** The "Last active" text. Default: how long ago, in the provider's locale and
+   *  `timeZone`, and the date once it is more than a week back — through the provider's
+   *  `formatDate` (the app's date preference) when it has one. */
   formatLastActive?: (date: Date) => string;
   /** Overrides the provider's locale for the default format. */
   locale?: string;
@@ -152,22 +155,25 @@ export function SessionsSetting<Id extends SessionId = SessionId>({
   ...rest
 }: SessionsSettingProps<Id>) {
   const labels = useKitLabels("sessions", DEFAULT_SESSIONS_LABELS, labelsProp);
-  const locale = useKitLocale(localeProp);
+  // The provider's locale and `timeZone`; past a week the words are a date, and a date
+  // that names a day follows the app's preference (refactor audit 2026-10-30, DUP-2).
+  const { formatDate, formatRelativeTime } = useKitFormat(localeProp);
+  const day = useDayFormatter(null, localeProp);
   const [busyId, setBusyId] = useState<Id | null>(null);
   const [failure, setFailure] = useState<ReactNode>(null);
   const mounted = useMounted();
 
-  const describe = (error: unknown, action: SessionsAction): ReactNode => {
-    const own = describeError?.(error, action);
-    return hasContent(own) ? own : labels.failed;
-  };
+  const describe = (error: unknown, action: SessionsAction): ReactNode =>
+    describeFailure(describeError?.(error, action), labels.failed);
 
   const lastActive = (value: DateInput): string | null => {
     const date = toDate(value);
     if (!date) return null;
-    return formatLastActive
-      ? formatLastActive(date)
-      : formatRelativeTime(date, { locale, absoluteAfterDays: 7, absoluteStyle: "medium" });
+    if (formatLastActive) return formatLastActive(date);
+    const words = formatRelativeTime(date, { absoluteAfterDays: 7, absoluteStyle: "medium" });
+    // Past a week the words ARE the medium date ("5 weeks ago" makes a reader do sums);
+    // then the day as the app's preference writes it.
+    return words === formatDate(date, "medium") ? day(date) : words;
   };
 
   const signOutEverywhere = () => {

package/src/admin/admin-action-confirm.tsx

@@ -1,5 +1,5 @@
 import { Children, useContext, useEffect, useId, useRef, useState } from "react";
-import type { KeyboardEvent, ReactNode } from "react";
+import type { ReactNode } from "react";
 import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { AlertBanner } from "../components/alert-banner";
 import { Checkbox } from "../components/checkbox";
@@ -12,6 +12,7 @@ import { authErrorCode } from "../auth/auth-errors";
 import type { KitErrorCode } from "../auth/auth-errors";
 import { usePersonLabel } from "./admin-parts";
 import { hasContent } from "../lib/presence";
+import { isThenable } from "../lib/thenable";
 import type { AdminPerson, MaybePromise } from "./admin-parts";
 import { isGroupTarget } from "./admin-action-log";
 import type { AdminGroupTarget } from "./admin-action-log";
@@ -176,11 +177,6 @@ interface AdminActionConfirmCommonProps {
  *  and `acknowledge`. */
 export type AdminActionConfirmProps = AdminActionConfirmCommonProps & AdminActionConfirmTarget;
 
-/** Whether a callback answered a promise. */
-function isThenable(value: unknown): value is PromiseLike<unknown> {
-  return typeof value === "object" && value !== null && typeof (value as PromiseLike<unknown>).then === "function";
-}
-
 /** The refusal's words and code. */
 function refusalOf(
   error: unknown,
@@ -378,6 +374,8 @@ export function AdminActionConfirm({
         title={heading}
         description={identity}
         onClose={() => onClose(confirmed.current)}
+        // The removal offered with the refusal is a request too.
+        busy={busy}
         actions={(close) => (
           <CloseOnDone done={done}>
             <Button type="button" variant="secondary" disabled={busy} onClick={close}>
@@ -426,10 +424,7 @@ export function AdminActionConfirm({
       description={identity}
       onClose={() => onClose(confirmed.current)}
       // A request that has left cannot be called back by closing the dialog.
-      onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
-        if (busy && event.key === "Escape") event.preventDefault();
-      }}
-      aria-busy={busy || undefined}
+      busy={busy}
       actions={(close) => (
         <CloseOnDone done={done}>
           <Button type="button" variant="ghost" disabled={busy} onClick={close}>

package/src/admin/admin-parts.ts

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
-import { useKitDateFormatter, useKitLocale } from "../i18n/kit-labels";
-import { formatDate, toDate } from "../lib/format";
+import { useKitLocale } from "../i18n/kit-labels";
+import { useDayFormatter } from "../lib/day-format";
+import { toDate } from "../lib/format";
 import type { DateInput } from "../lib/format";
-import { toLocalIso } from "../lib/dates";
 import { formatPersonName } from "../lib/person-name";
 
 /**
@@ -54,29 +54,15 @@ export function usePersonLabel(localeProp?: string): (person: AdminPerson | null
 /**
  * A day as words in a sentence ("6 Nov 2026"): the provider's `formatDate` when the app
  * set one (keksdose K12), asked for no weekday — a date in a sentence carries none — else
- * `Intl`'s medium date. `""` for no date.
+ * `Intl`'s medium date, in the provider's locale and `timeZone` (0.52: the kit's one day
+ * ladder, `useDayFormatter` — refactor audit 2026-10-30, DUP-2). `""` for no date or one
+ * that does not parse: the caller leaves the sentence out.
  */
 export function useDayText(localeProp?: string): (value: DateInput) => string {
-  const locale = useKitLocale(localeProp);
-  const fromProvider = useKitDateFormatter();
-  return useCallback(
-    (value) => {
-      const date = toDate(value);
-      if (!date) return "";
-      const own = fromProvider
-        ? fromProvider(toLocalIso(date), { unit: "day", source: "dateMark", locale, weekday: false })
-        : "";
-      return own || formatDate(date, "medium", { locale });
-    },
-    [fromProvider, locale],
-  );
+  const day = useDayFormatter(undefined, localeProp);
+  return useCallback((value) => (toDate(value) ? day(value) : ""), [day]);
 }
 
-/** Call a callback that may throw or answer a promise, as a promise. */
-export function settle<T>(call: () => MaybePromise<T>): Promise<T | void> {
-  try {
-    return Promise.resolve(call());
-  } catch (error) {
-    return Promise.reject(error);
-  }
-}
+/** Call a callback that may throw or answer a promise, as a promise — the kit's one
+ *  (hooks/use-mounted), not a copy of it (0.52 code review, this file). */
+export { settle } from "../hooks/use-mounted";

package/src/admin/mail-test-card-labels.ts

@@ -2,7 +2,7 @@
 // catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
 // chunk like the other languages (0.34, KS U8). ./mail-test-card re-exports them.
 
-import { englishRateLimited } from "../auth/auth-errors";
+import { englishRateLimited } from "../auth/auth-errors-labels";
 import type { MailTestCardLabels } from "./mail-test-card";
 
 /** docs/admin-harmonization.md §9.2.4, word for word. */

package/src/admin/plan-change-labels.ts

@@ -1,23 +1,5 @@
-// The English words of ./plan-change, 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). ./plan-change re-exports them.
-
-import type { PlanChangeLabels } from "./plan-change";
-
-export const DEFAULT_PLAN_CHANGE_LABELS: PlanChangeLabels = {
-  column: "Plan",
-  title: "Change plan",
-  confirm: "Change plan",
-  plan: "Plan",
-  current: (plan) => `Current plan: ${plan}`,
-  keepsItems: "A smaller plan only blocks creating more; nothing is deleted.",
-  until: "Free until",
-  untilHint: "Leave empty for no end. A running beta keeps its own end.",
-  needsChange: "Pick another plan or an end date.",
-  changed: (from, to) => `Plan changed from ${from} to ${to}.`,
-  set: (to) => `Plan set to ${to}.`,
-  keptBeta: "The beta keeps its end; only the plan changed.",
-  untilDone: (date) => `Free until ${date}.`,
-  overLimit: "Above the new plan’s limit: nothing is removed, new items are blocked.",
-  usageOf: (used, limit, dimension) => `${used} of ${limit} ${dimension}`,
-};
+// Moved to billing/plan-change-labels in 0.52 (refactor audit 2026-10-30, MOD-6): the
+// billing and admin folders imported each other through it. Kept so the old path still
+// answers; nothing in the kit imports it any more but the English catalogue.
+export { DEFAULT_PLAN_CHANGE_LABELS } from "../billing/plan-change-labels";
+export type { PlanChangeLabels } from "../billing/plan-change-labels";