@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/account/email-change-setting.tsx

@@ -1,18 +1,21 @@
 import { useEffect, useId, useRef, useState } from "react";
-import type { ComponentPropsWithoutRef, FormEvent, ReactNode } from "react";
+import type { ComponentPropsWithRef, FormEvent, ReactNode } from "react";
 import { MailCheck } from "lucide-react";
 
-import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels";
+import { DEFAULT_COMMON_LABELS, useKitLabels, 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 } from "../components/danger-confirm";
-import { Button, Card, Input } from "../components/ui";
-import { authErrorCode, englishRateLimited, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
+import { Input } from "../components/input";
+import { authErrorCode, isRateLimited, retryAfterSeconds } from "../auth/auth-errors";
 import { emailParts, taggedEmail } from "../auth/email-tag";
 import { CARD_DESCRIPTION_CLASS, settle, useMounted } from "./account-parts";
 import { SettingsCardTitle } from "../settings/settings-heading";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { DEFAULT_EMAIL_CHANGE_LABELS } from "./email-change-setting-labels";
 
 /* ── Labels ──────────────────────────────────────────────────────────────── */
 
@@ -64,30 +67,8 @@ export interface EmailChangeLabels {
   failed: string;
 }
 
-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.",
-};
+// Defined in ./email-change-setting-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_EMAIL_CHANGE_LABELS };
 
 /* ── Props ───────────────────────────────────────────────────────────────── */
 
@@ -103,7 +84,7 @@ export interface EmailChangeValues {
  *  argument. */
 export type EmailChangeAction = "request" | "resend" | "cancel";
 
-export interface EmailChangeSettingProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "onSubmit"> {
+export interface EmailChangeSettingProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onSubmit"> {
   /** The account's address now. */
   currentEmail: string;
   /**
@@ -145,7 +126,7 @@ export interface EmailChangeSettingProps extends Omit<ComponentPropsWithoutRef<"
   /** 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>;
+  labels?: LabelOverride<EmailChangeLabels>;
 }
 
 interface Failure {
@@ -238,7 +219,7 @@ export function EmailChangeSetting({
 
   const messageFor = (error: unknown, action: EmailChangeAction): ReactNode => {
     const own = describeError?.(error, action);
-    if (hasMessage(own)) return own;
+    if (hasContent(own)) return own;
     return isRateLimited(error) ? labels.rateLimited(retryAfterSeconds(error)) : labels.failed;
   };
 
@@ -276,7 +257,7 @@ export function EmailChangeSetting({
         {/* Focusable, not a control: the request's answer is read out when it takes the
             focus from the submit that went with the form. */}
         <div ref={pendingRef} tabIndex={-1} className="flex gap-2 outline-none">
-          <MailCheck aria-hidden className="mt-0.5 size-4 shrink-0 text-[var(--success)]" />
+          <MailCheck aria-hidden className="mt-0.5 size-4 shrink-0 text-success" />
           <div className="min-w-0 space-y-1">
             <p className="break-words text-sm">{labels.pending(pending)}</p>
             <p className={CARD_DESCRIPTION_CLASS}>{labels.pendingHint(currentEmail)}</p>
@@ -312,7 +293,7 @@ export function EmailChangeSetting({
             )}
             {/* Always in the tree, so the "sent again" that appears in it is announced
                 (VerifyEmailStatus's resend line). */}
-            <span role="status" className="text-xs text-[var(--success)]">
+            <span role="status" className="text-xs text-success">
               {resent ? labels.resent : null}
             </span>
           </div>
@@ -357,7 +338,7 @@ export function EmailChangeSetting({
         if (!mounted.current) return;
         setBusy(null);
         const own = describeError?.(error, "request");
-        if (hasMessage(own)) {
+        if (hasContent(own)) {
           setFailure({ action: "request", message: own });
           return;
         }
@@ -415,7 +396,7 @@ export function EmailChangeSetting({
           {/* RegisterForm's offer (auth §4.5): one click, the exact address on the
               button, reversible by typing. */}
           {suggestion && (
-            <p className="mt-1 text-xs text-[var(--text-muted)]">
+            <p className="mt-1 text-xs text-muted">
               <Button
                 type="button"
                 variant="link"

package/src/{components → account}/passkeys-setting.tsx

@@ -2,9 +2,12 @@ import { useEffect, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 import { KeyRound } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLocale } from "../i18n/kit-labels";
-import { Button, Card, EmptyState, Input } from "./ui";
-import { Skeleton } from "./skeleton";
+import { useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
+import { EmptyState } from "../components/empty-state";
+import { Input } from "../components/input";
+import { Skeleton } from "../components/skeleton";
 import { useAccountSettingsLabels } from "./account-settings-labels";
 import { SettingsCardTitle } from "../settings/settings-heading";
 import type { PasskeysSettingLabels } from "./account-settings-labels";
@@ -90,7 +93,7 @@ export interface PasskeysSettingProps<Id extends PasskeyId = PasskeyId> extends
   /** Overrides the provider's locale for the default date format. */
   locale?: string;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { passkeys } }}>` > English. */
-  labels?: Partial<PasskeysSettingLabels>;
+  labels?: LabelOverride<PasskeysSettingLabels>;
   className?: string;
   /** On the card (0.16.0), for an in-page link (`#passkeys`) or a test hook. `data-*`
    *  attributes go there too. */
@@ -199,7 +202,7 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
         ) : items.length === 0 ? (
           <EmptyState variant="inline" size="sm" icon={<KeyRound />} title={labels.empty} />
         ) : (
-          <ul aria-label={labels.list} className="divide-y divide-[var(--border)]">
+          <ul aria-label={labels.list} className="divide-y divide-subtle">
             {items.map((item) => (
               <PasskeyRow
                 key={item.id}
@@ -245,7 +248,7 @@ export function PasskeysSetting<Id extends PasskeyId = PasskeyId>({
     <Card {...rest} className={cn("p-4 space-y-3", className)}>
       <div>
         <SettingsCardTitle>{labels.title}</SettingsCardTitle>
-        <div className="text-xs text-[var(--text-muted)]">
+        <div className="text-xs text-muted">
           {mode === "alongside"
             ? labels.descriptionAlongside
             : labels.description}
@@ -385,10 +388,12 @@ function PasskeyRow<Id extends PasskeyId>({
 
   return (
     <li {...li} className="flex items-center gap-3 py-2">
-      <KeyRound className="size-4 shrink-0 text-[var(--text-muted)]" aria-hidden />
+      <KeyRound className="size-4 shrink-0 text-muted" aria-hidden />
       <div className="min-w-0 flex-1">
-        <div className="truncate text-sm font-medium">{item.name}</div>
-        <div className="text-xs text-[var(--text-muted)]">{meta}</div>
+        {/* The passkey's own name, which its owner typed: cut at Normal, wrapped from
+            Large up (text size §10.17; round 0.34 T1: the sweep read "MacBook To…"). */}
+        <div className="truncate-until-large text-sm font-medium">{item.name}</div>
+        <div className="text-xs text-muted">{meta}</div>
       </div>
       {onRename && (
         <Button

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

@@ -0,0 +1,24 @@
+// The English words of ./sessions-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). ./sessions-setting re-exports them.
+
+import type { SessionsLabels } from "./sessions-setting";
+
+export const DEFAULT_SESSIONS_LABELS: SessionsLabels = {
+  title: "Sessions",
+  description: "Signed in on a device you no longer use, or don’t trust? Sign out everywhere.",
+  signOutEverywhere: "Sign out everywhere…",
+  signOutEverywherePrompt:
+    "This ends every session, including this one: you will be signed out on this device too, and sign in again from here.",
+  confirmSignOutEverywhere: "Sign out everywhere",
+  list: "Where you’re signed in",
+  loading: "Loading sessions…",
+  empty: "No sessions to show.",
+  current: "This device",
+  unknownDevice: "Unknown device",
+  lastActive: (when) => `Last active ${when}`,
+  ip: (address) => `IP ${address}`,
+  revoke: "Sign out",
+  revokeItem: (device) => `Sign out ${device}`,
+  failed: "That didn’t work. Please try again.",
+};

package/src/account/sessions-setting.tsx

@@ -1,20 +1,22 @@
 import { useState } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { MonitorSmartphone } 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 { formatRelativeTime, toDate } from "../lib/format";
 import type { DateInput } from "../lib/format";
 import { AlertBanner } from "../components/alert-banner";
 import { Chip } from "../components/chip";
-import { hasMessage } from "../components/choice-parts";
+import { hasContent } from "../lib/presence";
 import { DangerConfirm } from "../components/danger-confirm";
 import { Skeleton } from "../components/skeleton";
-import { Button, Card } from "../components/ui";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
 import { CARD_DESCRIPTION_CLASS, settle, useMounted } from "./account-parts";
 import { SettingsCardTitle } from "../settings/settings-heading";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { DEFAULT_SESSIONS_LABELS } from "./sessions-setting-labels";
 
 /* ── Labels ──────────────────────────────────────────────────────────────── */
 
@@ -55,24 +57,8 @@ export interface SessionsLabels {
   failed: string;
 }
 
-export const DEFAULT_SESSIONS_LABELS: SessionsLabels = {
-  title: "Sessions",
-  description: "Signed in on a device you no longer use, or don’t trust? Sign out everywhere.",
-  signOutEverywhere: "Sign out everywhere…",
-  signOutEverywherePrompt:
-    "This ends every session, including this one: you will be signed out on this device too, and sign in again from here.",
-  confirmSignOutEverywhere: "Sign out everywhere",
-  list: "Where you’re signed in",
-  loading: "Loading sessions…",
-  empty: "No sessions to show.",
-  current: "This device",
-  unknownDevice: "Unknown device",
-  lastActive: (when) => `Last active ${when}`,
-  ip: (address) => `IP ${address}`,
-  revoke: "Sign out",
-  revokeItem: (device) => `Sign out ${device}`,
-  failed: "That didn’t work. Please try again.",
-};
+// Defined in ./sessions-setting-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_SESSIONS_LABELS };
 
 /* ── Props ───────────────────────────────────────────────────────────────── */
 
@@ -98,7 +84,7 @@ export interface SessionItem<Id extends SessionId = SessionId> {
 export type SessionsAction = "sign-out-everywhere" | "revoke";
 
 export interface SessionsSettingProps<Id extends SessionId = SessionId>
-  extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  extends Omit<ComponentPropsWithRef<"div">, "children"> {
   /**
    * End every session (`POST /auth/logout`, auth §6.3) — this one included. Asked
    * first; resolve once the server answered, then sign this page out: the card says
@@ -124,7 +110,7 @@ export interface SessionsSettingProps<Id extends SessionId = SessionId>
   formatLastActive?: (date: Date) => string;
   /** Overrides the provider's locale for the default format. */
   locale?: string;
-  labels?: Partial<SessionsLabels>;
+  labels?: LabelOverride<SessionsLabels>;
 }
 
 /**
@@ -171,7 +157,7 @@ export function SessionsSetting<Id extends SessionId = SessionId>({
 
   const describe = (error: unknown, action: SessionsAction): ReactNode => {
     const own = describeError?.(error, action);
-    return hasMessage(own) ? own : labels.failed;
+    return hasContent(own) ? own : labels.failed;
   };
 
   const lastActive = (value: DateInput): string | null => {
@@ -221,7 +207,7 @@ export function SessionsSetting<Id extends SessionId = SessionId>({
         ) : sessions.length === 0 ? (
           <p className={CARD_DESCRIPTION_CLASS}>{labels.empty}</p>
         ) : (
-          <ul aria-label={labels.list} className="divide-y divide-[var(--border)]">
+          <ul aria-label={labels.list} className="divide-y divide-subtle">
             {sessions.map((session) => {
               const device = session.device?.trim() || labels.unknownDevice;
               const when = lastActive(session.lastActiveAt);
@@ -233,7 +219,7 @@ export function SessionsSetting<Id extends SessionId = SessionId>({
                   data-current={session.current || undefined}
                   className="flex items-center gap-3 py-2"
                 >
-                  <MonitorSmartphone aria-hidden className="size-4 shrink-0 text-[var(--text-muted)]" />
+                  <MonitorSmartphone aria-hidden className="size-4 shrink-0 text-muted" />
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
                       <span className="min-w-0 break-words text-sm font-medium">{device}</span>
@@ -279,7 +265,7 @@ export function SessionsSetting<Id extends SessionId = SessionId>({
         confirmLabel={labels.confirmSignOutEverywhere}
         onConfirm={signOutEverywhere}
       />
-      {hasMessage(failure) && (
+      {hasContent(failure) && (
         <AlertBanner tone="danger" size="sm" role="alert">
           {failure}
         </AlertBanner>

package/src/admin/admin-action-confirm-labels.ts

@@ -0,0 +1,19 @@
+// The English words of ./admin-action-confirm, 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). ./admin-action-confirm
+// re-exports them.
+
+import type { AdminActionLabels } from "./admin-action-confirm";
+
+export const DEFAULT_ADMIN_ACTION_LABELS: AdminActionLabels = {
+  confirm: "Confirm",
+  cancel: "Cancel",
+  close: "Close",
+  lastAdmin: "This is the last active administrator. Make someone else an administrator first.",
+  self: "You can’t do this to your own account.",
+  confirmationMismatch: "The address doesn’t match this account. Check which account you are on.",
+  otherCompanies:
+    "This account also belongs to other companies, so only the platform operator can do this. You can remove it from this company instead.",
+  removeFromCompany: "Remove from company",
+  failed: "That didn’t work. Please try again.",
+};

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

@@ -1,18 +1,22 @@
 import { Children, useContext, useEffect, useId, useRef, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { AlertBanner } from "../components/alert-banner";
 import { Checkbox } from "../components/checkbox";
 import { DEFAULT_DANGER_CONFIRM_LABELS, TypedConfirmField, typedMatches } from "../components/danger-confirm";
 import type { DangerConsequence } from "../components/danger-confirm";
 import { DialogFrame } from "../components/dialog-frame";
 import { ModalCloseContext } from "../components/modal";
-import { Button } from "../components/ui";
+import { Button } from "../components/button";
 import { authErrorCode } from "../auth/auth-errors";
 import type { KitErrorCode } from "../auth/auth-errors";
-import { hasMessage, usePersonLabel } from "./admin-parts";
+import { usePersonLabel } from "./admin-parts";
+import { hasContent } from "../lib/presence";
 import type { AdminPerson, MaybePromise } from "./admin-parts";
+import { isGroupTarget } from "./admin-action-log";
+import type { AdminGroupTarget } from "./admin-action-log";
 import type { CommitScope } from "../components/write-lock";
+import { DEFAULT_ADMIN_ACTION_LABELS } from "./admin-action-confirm-labels";
 
 /**
  * The confirmation in front of an admin action, at the level the SERVER states
@@ -21,9 +25,16 @@ import type { CommitScope } from "../components/write-lock";
  * | level | what it asks | actions |
  * |---|---|---|
  * | `none` | nothing: it confirms at once and renders nothing | resend a mail, reactivate, the reviewer scope… |
- * | `acknowledge` | a tick under the consequence | force a password change, change a role |
+ * | `acknowledge` | a tick under the consequence | force a password change, change a role, delete a group |
  * | `type_email` | the target's address, typed | deactivate, erase now, transfer |
  *
+ * A GROUP (round 0.34, §11.8) is a target at `none` and `acknowledge` only, said by its
+ * name: it has no address to type, and no level table gives a group's action
+ * `type_email` (server-kit's `require_confirmation` raises for one). The props' types
+ * say so. Deleting one (`group_delete`) is `acknowledge` — a tick under the app's own
+ * sentence of what goes with it, Kurvenschmiede's "3 members, 2 grants and 1 invitation
+ * go with it" (decision 5): the cascade is what nobody can see afterwards.
+ *
  * keksdose decides the level per action and per account on the server
  * (`admin_user_actions_service`) and Kurvenschmiede asks for the typed address on its
  * two hard-to-undo actions; both drew the dialog by hand beside the kit's `DangerConfirm`
@@ -63,7 +74,7 @@ export interface AdminActionConfirmValues {
   acknowledged?: true;
 }
 
-/** The account the action is about. */
+/** The account the action is about. A group is an {@link AdminGroupTarget}. */
 export type AdminActionTarget = AdminPerson & { email: string };
 
 /** The `adminAction` namespace. The tick, the typed field and their held-button reasons
@@ -89,24 +100,27 @@ export interface AdminActionLabels {
   failed: string;
 }
 
-export const DEFAULT_ADMIN_ACTION_LABELS: AdminActionLabels = {
-  confirm: "Confirm",
-  cancel: "Cancel",
-  close: "Close",
-  lastAdmin: "This is the last active administrator. Make someone else an administrator first.",
-  self: "You can’t do this to your own account.",
-  confirmationMismatch: "The address doesn’t match this account. Check which account you are on.",
-  otherCompanies:
-    "This account also belongs to other companies, so only the platform operator can do this. You can remove it from this company instead.",
-  removeFromCompany: "Remove from company",
-  failed: "That didn’t work. Please try again.",
-};
+// Defined in ./admin-action-confirm-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_ADMIN_ACTION_LABELS };
+
+/** What the action is about, and the level the server states for it. A union, so a group
+ *  can't be given `type_email` (§11.8). */
+type AdminActionConfirmTarget =
+  | {
+      /** The level the server states for this action on this account (§4.2). */
+      level: AdminConfirmLevel;
+      /** Whom it is about: the address (typed at `type_email`) and the name parts. */
+      target: AdminActionTarget;
+    }
+  | {
+      /** A group's action: `none`, or `acknowledge` for `group_delete` (decision 5). */
+      level: Exclude<AdminConfirmLevel, "type_email">;
+      /** The group it is about, said by its name (0.34, §11.8). */
+      target: AdminGroupTarget;
+    };
 
-export interface AdminActionConfirmProps {
-  /** The level the server states for this action on this account (§4.2). */
-  level: AdminConfirmLevel;
-  /** Whom it is about: the address (typed at `type_email`) and the name parts. */
-  target: AdminActionTarget;
+/** The props whatever the target. */
+interface AdminActionConfirmCommonProps {
   /** The confirm button — "Deactivate". Also the title when no `title` is given. */
   confirmLabel?: ReactNode;
   /** The dialog's heading — "Deactivate Ada Example?". Default `confirmLabel`. */
@@ -155,9 +169,13 @@ export interface AdminActionConfirmProps {
   /** The confirm COMMITS: under a locked `WriteLockProvider` it is held with the lock's
    *  reason. Off by default — an admin action is not a write to the open record. */
   commit?: CommitScope;
-  labels?: Partial<AdminActionLabels>;
+  labels?: LabelOverride<AdminActionLabels>;
 }
 
+/** A type since 0.34 (an interface before): a person at any level, or a group at `none`
+ *  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";
@@ -173,7 +191,7 @@ function refusalOf(
   if (!present) return null;
   const code = authErrorCode(error);
   const own = describeError?.(error);
-  if (hasMessage(own)) return { text: own, code };
+  if (hasContent(own)) return { text: own, code };
   const text =
     code === "last_admin"
       ? labels.lastAdmin
@@ -319,10 +337,13 @@ export function AdminActionConfirm({
   const refusal = refusalOf(failure ? failure.error : errorProp, hasRefusal, describeError, labels);
   const offerRemoval = refusal?.code === "other_companies" && onRemoveFromCompany !== undefined;
 
-  const name = nameOf(target);
-  const identity = (
-    <span data-private>{name && name !== target.email ? `${name} · ${target.email}` : target.email}</span>
-  );
+  // A group has no address: it is said by its name, and nothing is typed for it — not
+  // even when a caller outside the types passes `type_email` (the server refuses that).
+  const group = isGroupTarget(target);
+  const email = group ? "" : target.email;
+  const name = group ? (target.name ?? "").trim() : nameOf(target);
+  const said = !name || name === email ? email : email ? `${name} · ${email}` : name;
+  const identity = <span data-private>{said}</span>;
   const heading = title ?? confirmLabel ?? labels.confirm;
 
   const refusalBanner = refusal && (
@@ -370,16 +391,16 @@ export function AdminActionConfirm({
   }
 
   const tone = toneProp ?? (level === "type_email" ? "danger" : "warning");
-  const askTyped = level === "type_email";
-  const typedOk = !askTyped || typedMatches(typed, target.email, "caseless");
+  const askTyped = level === "type_email" && !group;
+  const typedOk = !askTyped || typedMatches(typed, email, "caseless");
   const tickOk = askTyped || ticked;
-  const guardReason: ReactNode = hasMessage(confirmDisabledReason)
+  const guardReason: ReactNode = hasContent(confirmDisabledReason)
     ? confirmDisabledReason
     : !tickOk
       ? guardLabels.needsAcknowledge
       : !typedOk
         ? typeof guardLabels.needsPhrase === "function"
-          ? guardLabels.needsPhrase(target.email)
+          ? guardLabels.needsPhrase(email)
           : guardLabels.needsPhrase
         : undefined;
 
@@ -438,19 +459,19 @@ export function AdminActionConfirm({
         }}
       >
         {lines ? (
-          <ul className="list-disc space-y-1 ps-5 text-sm text-[var(--text-secondary)]">
+          <ul className="list-disc space-y-1 ps-5 text-sm text-secondary">
             {lines.map((line) => (
-              <li key={line.key} className={line.severe ? "text-[var(--danger)]" : undefined}>
+              <li key={line.key} className={line.severe ? "text-danger" : undefined}>
                 {line.text}
               </li>
             ))}
           </ul>
         ) : (
-          hasMessage(consequence as ReactNode) && (
-            <p className="text-sm text-[var(--text-secondary)]">{consequence as ReactNode}</p>
+          hasContent(consequence as ReactNode) && (
+            <p className="text-sm text-secondary">{consequence as ReactNode}</p>
           )
         )}
-        {Children.toArray(children).some(hasMessage) && (
+        {Children.toArray(children).some(hasContent) && (
           <div ref={slotRef} className="space-y-3">
             {children}
           </div>
@@ -458,7 +479,7 @@ export function AdminActionConfirm({
         {askTyped ? (
           <TypedConfirmField
             ref={guardRef}
-            target={target.email}
+            target={email}
             match="caseless"
             value={typed}
             onValueChange={setTyped}

package/src/admin/admin-action-log-labels.ts

@@ -0,0 +1,74 @@
+// The English words of ./admin-action-log, 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). ./admin-action-log re-exports them.
+
+import type { AdminActionLogLabels } from "./admin-action-log";
+
+export const DEFAULT_ADMIN_ACTION_LOG_LABELS: AdminActionLogLabels = {
+  title: "Admin actions",
+  empty: "No admin actions yet.",
+  loading: "Loading…",
+  by: (actor) => `by ${actor}`,
+  bySelf: "by the user themselves",
+  automatic: "automatically",
+  erased: "an erased account",
+  filteredTo: (target) => `Only ${target}`,
+  showAll: "Show all actions",
+  filterBy: (target) => `Show only the actions on ${target}`,
+  actions: {
+    deactivate: "Deactivated",
+    reactivate: "Reactivated",
+    role: "Role changed",
+    password_change_require: "New password required",
+    password_change_withdraw: "Password requirement withdrawn",
+    mail_verification: "Verification mail sent",
+    mail_reset: "Password reset mail sent",
+    reviewer: "Reviewer scope changed",
+    invite: "Invited",
+    invite_resend: "Invitation resent",
+    invite_revoke: "Invitation revoked",
+    transfer: "Work transferred",
+    deletion_request: "Deletion requested",
+    deletion_cancel: "Deletion cancelled",
+    erase: "Account erased",
+    plan: "Plan changed",
+  },
+  groupActions: {
+    group: {
+      group_create: "Group created",
+      group_rename: "Group renamed",
+      group_delete: "Group deleted",
+      membership_add: "Added to the group",
+      membership_role: "Role in the group changed",
+      membership_remove: "Removed from the group",
+      deleted: "a deleted group",
+    },
+    team: {
+      group_create: "Team created",
+      group_rename: "Team renamed",
+      group_delete: "Team deleted",
+      membership_add: "Added to the team",
+      membership_role: "Role in the team changed",
+      membership_remove: "Removed from the team",
+      deleted: "a deleted team",
+    },
+    company: {
+      group_create: "Company created",
+      group_rename: "Company renamed",
+      group_delete: "Company deleted",
+      membership_add: "Added to the company",
+      membership_role: "Role in the company changed",
+      membership_remove: "Removed from the company",
+      deleted: "a deleted company",
+    },
+    budget: {
+      group_create: "Budget created",
+      group_rename: "Budget renamed",
+      group_delete: "Budget deleted",
+      membership_add: "Added to the budget",
+      membership_role: "Role in the budget changed",
+      membership_remove: "Removed from the budget",
+      deleted: "a deleted budget",
+    },
+  },
+};