@eifi1/ui-kit 0.33.1 → 0.34.0

package/src/admin/plan-change.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useMemo, useState } from "react";
+import { isValidElement, useCallback, useMemo, useState } from "react";
 import type { ReactNode } from "react";
 
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { pluralForm } from "../i18n/plurals";
 import type { PluralForms } from "../i18n/plurals";
 import { formatNumber, EMPTY_FORMATTED_VALUE } from "../lib/format";
@@ -9,7 +9,7 @@ import { toLocalIso } from "../lib/dates";
 import type { DataTableColumn } from "../components/data-table";
 import { DatePicker } from "../components/date-picker";
 import { Tooltip } from "../components/tooltip";
-import { Select } from "../components/ui";
+import { Select } from "../components/select";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
 import { useBillingLabels } from "../billing/billing-labels";
 import type { SubscriptionStatus } from "../billing/billing-labels";
@@ -18,6 +18,7 @@ import { AdminActionConfirm } from "./admin-action-confirm";
 import type { AdminActionConfirmValues } from "./admin-action-confirm";
 import { personLabel, useDayText } from "./admin-parts";
 import type { AdminPerson, MaybePromise } from "./admin-parts";
+import { DEFAULT_PLAN_CHANGE_LABELS } from "./plan-change-labels";
 
 /**
  * The operator's plan parts (docs/billing-harmonization.md §14.12, decision 27):
@@ -69,28 +70,14 @@ export interface PlanChangeLabels {
    * in the form the LIMIT takes when the label gives its plural forms ("1 of 1 budget",
    * "1 of 5 budgets"): in every shipped language the word follows the limit, or heads
    * the line in German, whose `von` would want a dative plural no app form carries
-   * ("Budgets: 1 von 5"). An override of yours gets the same word.
+   * ("Budgets: 1 von 5"). An override of yours gets the same word. Since 0.34 the grant
+   * dialog's usage line too, when `usage` comes as the column's shape.
    */
   usageOf: (used: string, limit: string, dimension: string) => string;
 }
 
-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}`,
-};
+// Defined in ./plan-change-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_PLAN_CHANGE_LABELS };
 
 /** A plan code as the parts compare it: lowercase (§12.16 — an older row's "FREE" is
  *  the same plan as "free"), and no code at all as null. */
@@ -101,7 +88,8 @@ function codeOf(raw: string | null | undefined): string | null {
 
 /* ── The column ────────────────────────────────────────────────────────────── */
 
-/** What a row's usage is, for the line under its plan: "1/5". */
+/** What a row's usage is, for the line under its plan: "1/5" — and since 0.34 what
+ *  {@link PlanChangeConfirm}'s `usage` takes, for the same sentence in the dialog. */
 export interface PlanColumnUsage {
   used: number;
   /** The plan's limit for it; `null` (unlimited, or none known): no line. */
@@ -148,7 +136,22 @@ export interface PlanColumnOptions<T> {
   headerText?: string;
   /** The words, already resolved. Default English; {@link usePlanColumn} reads the
    *  provider's `planChange` namespace. */
-  labels?: Partial<PlanChangeLabels>;
+  labels?: LabelOverride<PlanChangeLabels>;
+}
+
+/**
+ * A usage spelled out — `planChange.usageOf` with the figures in `locale` and the word in
+ * the form the limit takes: "1 of 1 budget", "Budgets: 1 von 5". The column's tooltip
+ * and the grant dialog's line both read it, so the rule lives once (round 0.34 C15).
+ */
+function usageSentence(
+  usage: PlanColumnUsage & { limit: number },
+  usageOf: PlanChangeLabels["usageOf"],
+  locale: string | undefined,
+): string {
+  const figure = (value: number) => formatNumber(value, { locale });
+  const word = typeof usage.label === "string" ? usage.label : pluralForm(usage.limit, usage.label, locale);
+  return usageOf(figure(usage.used), figure(usage.limit), word);
 }
 
 /** The cell: a component, so the figures follow the provider's locale. */
@@ -167,20 +170,18 @@ function PlanCell({
 }) {
   const locale = useKitLocale();
   const figure = (value: number) => formatNumber(value, { locale });
-  const word = (label: PlanColumnUsage["label"], limit: number) =>
-    typeof label === "string" ? label : pluralForm(limit, label, locale);
   return (
     <div className="whitespace-nowrap" data-plan={code ?? undefined}>
       <div className="flex items-center gap-1.5">
-        <span className={code ? "font-medium" : "text-[var(--text-muted)]"}>{name}</span>
+        <span className={code ? "font-medium" : "text-muted"}>{name}</span>
         {/* The standing at a glance (§6): the kit's word and tone, never colour alone. */}
         {status !== undefined && <SubscriptionStatusChip status={status} size="xs" />}
       </div>
       {usage && usage.limit !== null && (
         // "1/5" under the plan, "1 of 5 budgets" in the tooltip: the sentence spelled out
         // inline was the widest thing in keksdose's table.
-        <Tooltip label={usageOf(figure(usage.used), figure(usage.limit), word(usage.label, usage.limit))}>
-          <span className="block text-xs tabular-nums text-[var(--text-muted)]">
+        <Tooltip label={usageSentence({ ...usage, limit: usage.limit }, usageOf, locale)}>
+          <span className="block text-xs tabular-nums text-muted">
             {figure(usage.used)}/{figure(usage.limit)}
           </span>
         </Tooltip>
@@ -279,8 +280,13 @@ export interface PlanChangeConfirmProps {
   plans: readonly { code: string; name: string }[];
   /** The account's plan now; null for none. The select opens on it. */
   current: string | null;
-  /** What the account uses, in the app's sentence: "3 of 5 budgets". */
-  usage?: ReactNode;
+  /**
+   * What the account uses. The column's shape (0.34, keksdose N1) — `{ used, limit, label }`,
+   * the label a word or its plural forms — is spelled out as the column's tooltip is
+   * (`planChange.usageOf`, the word in the limit's form: "1 of 1 budget"); a `null` limit
+   * gives no line. Or the app's own sentence, as it is: "3 of 5 budgets".
+   */
+  usage?: PlanColumnUsage | ReactNode;
   /** Offer "Free until" — only meaningful while billing is on, where a grant's end
    *  means something to the payer. */
   grantEnd?: boolean;
@@ -295,7 +301,19 @@ export interface PlanChangeConfirmProps {
   onClose: (done: boolean) => void;
   /** The app's words for a failure the kit has no code for. */
   describeError?: (error: unknown) => ReactNode | undefined;
-  labels?: Partial<PlanChangeLabels>;
+  labels?: LabelOverride<PlanChangeLabels>;
+}
+
+/** The column's usage shape, told from a node: a plain object with the three fields. */
+function isPlanUsage(value: PlanChangeConfirmProps["usage"]): value is PlanColumnUsage {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    !isValidElement(value) &&
+    "used" in value &&
+    "limit" in value &&
+    "label" in value
+  );
 }
 
 /** The end of the day `date` (YYYY-MM-DD) names, in this device's time zone, as ISO
@@ -340,6 +358,12 @@ export function PlanChangeConfirm({
   const unchanged = plan === "" || (plan === current && !until);
   // A company has no address: the dialog says its name in the address's place.
   const who = { ...target, email: target.email || personLabel(target, locale) };
+  // The column's shape in the column's sentence; the app's own sentence as it is.
+  const usageLine: ReactNode | undefined = isPlanUsage(usage)
+    ? usage.limit === null
+      ? undefined
+      : usageSentence({ ...usage, limit: usage.limit }, labels.usageOf, locale)
+    : usage;
 
   return (
     <AdminActionConfirm
@@ -354,10 +378,10 @@ export function PlanChangeConfirm({
       onConfirm={(values) => onConfirm({ plan, ...(until ? { comped_until: endOfDay(until) } : {}) }, values)}
       onClose={onClose}
     >
-      {(current !== null || usage !== undefined) && (
-        <div className="space-y-0.5 text-xs text-[var(--text-muted)]" data-plan-current={current ?? undefined}>
+      {(current !== null || usageLine !== undefined) && (
+        <div className="space-y-0.5 text-xs text-muted" data-plan-current={current ?? undefined}>
           {current !== null && <p>{labels.current(nameOf(current))}</p>}
-          {usage !== undefined && <p>{usage}</p>}
+          {usageLine !== undefined && <p>{usageLine}</p>}
         </div>
       )}
       <Select label={labels.plan} hint={labels.keepsItems} value={plan} onChange={(e) => setPlan(e.target.value)}>

package/src/admin/reviewer-scope-editor-labels.ts

@@ -0,0 +1,16 @@
+// The English words of ./reviewer-scope-editor, 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). ./reviewer-scope-editor
+// re-exports them.
+
+import type { ReviewerScopeLabels } from "./reviewer-scope-editor";
+
+export const DEFAULT_REVIEWER_SCOPE_LABELS: ReviewerScopeLabels = {
+  languages: "Languages",
+  hint: "Tick the languages this person reviews.",
+  none: "No language: saving takes the reviewer role away.",
+  areas: "Limit to",
+  legalOnly: "Only the legal pages",
+  legalOnlyHint: "Imprint, Privacy Policy and Terms — for a lawyer rather than a native speaker.",
+  failed: "The reviewer scope couldn’t be saved. Please try again.",
+};

package/src/admin/reviewer-scope-editor.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { KIT_LANGUAGES } from "../i18n/languages";
 import type { KitLanguageCode } from "../i18n/languages";
 import { AlertBanner } from "../components/alert-banner";
@@ -8,9 +8,10 @@ import { CheckboxGroup } from "../components/checkbox-group";
 import type { CheckboxGroupOption } from "../components/checkbox-group";
 import { FormActions } from "../components/form-actions";
 import { Caption } from "../components/text";
-import { hasMessage } from "./admin-parts";
+import { hasContent } from "../lib/presence";
 import type { MaybePromise } from "./admin-parts";
 import type { CommitScope } from "../components/write-lock";
+import { DEFAULT_REVIEWER_SCOPE_LABELS } from "./reviewer-scope-editor-labels";
 
 /**
  * Who may review which translations: the REVIEWER role and its scope, in one editor
@@ -71,15 +72,8 @@ export interface ReviewerScopeLabels {
   failed: string;
 }
 
-export const DEFAULT_REVIEWER_SCOPE_LABELS: ReviewerScopeLabels = {
-  languages: "Languages",
-  hint: "Tick the languages this person reviews.",
-  none: "No language: saving takes the reviewer role away.",
-  areas: "Limit to",
-  legalOnly: "Only the legal pages",
-  legalOnlyHint: "Imprint, Privacy Policy and Terms — for a lawyer rather than a native speaker.",
-  failed: "The reviewer scope couldn’t be saved. Please try again.",
-};
+// Defined in ./reviewer-scope-editor-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_REVIEWER_SCOPE_LABELS };
 
 export interface ReviewerScopeEditorProps {
   /** The scope the server has — the draft starts from it. Key the editor by the
@@ -109,7 +103,7 @@ export interface ReviewerScopeEditorProps {
   columns?: 1 | 2 | 3 | 4;
   /** Save COMMITS: under a locked `WriteLockProvider` it is held with the lock's reason. */
   commit?: CommitScope;
-  labels?: Partial<ReviewerScopeLabels>;
+  labels?: LabelOverride<ReviewerScopeLabels>;
 }
 
 function languageOptions(languages: ReviewerScopeEditorProps["languages"]): CheckboxGroupOption[] {
@@ -154,7 +148,7 @@ export function ReviewerScopeEditor({
   const [areas, setAreas] = useState<string[]>(savedAreas);
   const [pending, setPending] = useState(false);
   const [failure, setFailure] = useState<ReactNode>(null);
-  const locked = hasMessage(disabledReason);
+  const locked = hasContent(disabledReason);
 
   const nextAreas = locales.length === 0 ? [] : areas;
   const dirty = !sameSet(locales, savedLocales) || !sameSet(nextAreas, locales.length === 0 ? [] : savedAreas);
@@ -180,14 +174,14 @@ export function ReviewerScopeEditor({
       (error: unknown) => {
         setPending(false);
         const own = describeError?.(error);
-        setFailure(hasMessage(own) ? own : labels.failed);
+        setFailure(hasContent(own) ? own : labels.failed);
       },
     );
   };
 
   return (
     <div className="space-y-3">
-      {intro && <div className="text-sm text-[var(--text-secondary)]">{intro}</div>}
+      {intro && <div className="text-sm text-secondary">{intro}</div>}
       <CheckboxGroup
         legend={labels.languages}
         options={languageOptions(languages)}

package/src/admin/role-select-labels.ts

@@ -0,0 +1,16 @@
+// The English words of ./role-select, 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). ./role-select re-exports them.
+
+import type { RoleSelectLabels } from "./role-select";
+
+export const DEFAULT_ROLE_SELECT_LABELS: RoleSelectLabels = {
+  label: "Role",
+  rolesLegend: "Roles",
+  roleOf: (name) => `Role of ${name}`,
+  lockedLastAdmin: "The last active administrator keeps this role.",
+  lockedSelf: "You can’t change your own role.",
+  notForLastAdmin: "not for the last administrator",
+  notForSelf: "not for your own account",
+  unavailable: (role, reason) => `${role} (${reason})`,
+};

package/src/admin/role-select.tsx

@@ -1,11 +1,13 @@
 import type { ReactNode } from "react";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { hasContent } from "../lib/presence";
 import type { RoleVocabulary } from "../components/account-chips";
 import { CheckboxGroup } from "../components/checkbox-group";
 import type { CheckboxGroupOption } from "../components/checkbox-group";
-import { Select } from "../components/ui";
-import type { SelectProps } from "../components/ui";
+import { Select } from "../components/select";
+import type { SelectProps } from "../components/select";
 import type { CommitScope } from "../components/write-lock";
+import { DEFAULT_ROLE_SELECT_LABELS } from "./role-select-labels";
 
 /**
  * The role of an account, chosen by an admin (docs/user-admin-harmonization.md §3.3,
@@ -58,16 +60,8 @@ export interface RoleSelectLabels {
   unavailable: (role: string, reason: string) => string;
 }
 
-export const DEFAULT_ROLE_SELECT_LABELS: RoleSelectLabels = {
-  label: "Role",
-  rolesLegend: "Roles",
-  roleOf: (name) => `Role of ${name}`,
-  lockedLastAdmin: "The last active administrator keeps this role.",
-  lockedSelf: "You can’t change your own role.",
-  notForLastAdmin: "not for the last administrator",
-  notForSelf: "not for your own account",
-  unavailable: (role, reason) => `${role} (${reason})`,
-};
+// Defined in ./role-select-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_ROLE_SELECT_LABELS };
 
 /** The whole-control reason, the kit's codes in the kit's words. */
 function lockText(reason: RoleLock, labels: RoleSelectLabels): ReactNode {
@@ -83,10 +77,6 @@ function optionReasonText(reason: string, labels: RoleSelectLabels): string {
   return reason;
 }
 
-function present(node: ReactNode): boolean {
-  return node !== undefined && node !== null && node !== false && node !== "";
-}
-
 /** The vocabulary's keys, in its own order. */
 function keysOf<R extends string>(roles: RoleVocabulary<R>): R[] {
   return Object.keys(roles) as R[];
@@ -126,7 +116,7 @@ export interface RoleSelectProps<R extends string = string>
   /** The account's name, for the select's accessible name in a roster row ("Role of
    *  Ada Example") where no `label` is drawn. */
   name?: string;
-  labels?: Partial<RoleSelectLabels>;
+  labels?: LabelOverride<RoleSelectLabels>;
 }
 
 /**
@@ -163,7 +153,7 @@ export function RoleSelect<R extends string = string>({
       label={label}
       aria-label={ariaLabel}
       value={held ?? ""}
-      disabledReason={present(disabledReason) ? lockText(disabledReason, labels) : undefined}
+      disabledReason={hasContent(disabledReason) ? lockText(disabledReason, labels) : undefined}
       onChange={(event) => {
         const next = event.target.value as R;
         if (next && next !== held) onChange(next);
@@ -175,7 +165,7 @@ export function RoleSelect<R extends string = string>({
         .map((role) => {
           const word = roles[role].label;
           const reason = role === held ? undefined : optionDisabledReason?.(role);
-          const unavailable = !choosable.has(role) || present(reason);
+          const unavailable = !choosable.has(role) || hasContent(reason);
           return (
             <option key={role} value={role} disabled={unavailable && role !== held}>
               {reason ? labels.unavailable(word, optionReasonText(reason, labels)) : word}
@@ -222,7 +212,7 @@ export interface RolesEditorProps<R extends string = string> {
   /** The editor SAVES on change — the write lock's opt-in (CheckboxGroup's `commit`). */
   commit?: CommitScope;
   className?: string;
-  labels?: Partial<RoleSelectLabels>;
+  labels?: LabelOverride<RoleSelectLabels>;
 }
 
 /**
@@ -260,7 +250,7 @@ export function RolesEditor<R extends string = string>({
     .filter((role) => choosable.has(role) || held.has(role))
     .map((role) => {
       const reason = optionDisabledReason?.(role);
-      const locked = present(reason);
+      const locked = hasContent(reason);
       return {
         value: role,
         label: roles[role].label,
@@ -280,7 +270,7 @@ export function RolesEditor<R extends string = string>({
       error={error}
       columns={columns}
       commit={commit}
-      disabledReason={present(disabledReason) ? lockText(disabledReason, labels) : undefined}
+      disabledReason={hasContent(disabledReason) ? lockText(disabledReason, labels) : undefined}
       className={className}
     />
   );

package/src/admin/transfer-ownership-dialog-labels.ts

@@ -0,0 +1,20 @@
+// The English words of ./transfer-ownership-dialog, 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). ./transfer-ownership-dialog
+// re-exports them.
+
+import type { TransferOwnershipLabels } from "./transfer-ownership-dialog";
+
+export const DEFAULT_TRANSFER_OWNERSHIP_LABELS: TransferOwnershipLabels = {
+  title: (name) => `Hand on ${name}’s work`,
+  body: "Everything this account owns moves to the account you choose, in one step.",
+  recipient: "Hand it to",
+  choose: "Choose an account…",
+  chooseFirst: "Choose who receives the work",
+  confirm: "Hand it on",
+  customer: "a customer",
+  deactivated: "deactivated",
+  self: "the same account",
+  unavailable: (account, reason) => `${account} (${reason})`,
+  noCandidates: "No other account can receive it.",
+};

package/src/admin/transfer-ownership-dialog.tsx

@@ -1,12 +1,13 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
-import { useKitLabels } from "../i18n/kit-labels";
-import { Select } from "../components/ui";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { Select } from "../components/select";
 import { Caption } from "../components/text";
 import { AdminActionConfirm } from "./admin-action-confirm";
 import type { AdminActionTarget, AdminConfirmLevel } from "./admin-action-confirm";
 import { usePersonLabel } from "./admin-parts";
 import type { AdminPerson, MaybePromise } from "./admin-parts";
+import { DEFAULT_TRANSFER_OWNERSHIP_LABELS } from "./transfer-ownership-dialog-labels";
 
 /**
  * Hand an account's owned work to another account — Kurvenschmiede's `TypedConfirm`
@@ -68,19 +69,8 @@ export interface TransferOwnershipLabels {
   noCandidates: string;
 }
 
-export const DEFAULT_TRANSFER_OWNERSHIP_LABELS: TransferOwnershipLabels = {
-  title: (name) => `Hand on ${name}’s work`,
-  body: "Everything this account owns moves to the account you choose, in one step.",
-  recipient: "Hand it to",
-  choose: "Choose an account…",
-  chooseFirst: "Choose who receives the work",
-  confirm: "Hand it on",
-  customer: "a customer",
-  deactivated: "deactivated",
-  self: "the same account",
-  unavailable: (account, reason) => `${account} (${reason})`,
-  noCandidates: "No other account can receive it.",
-};
+// Defined in ./transfer-ownership-dialog-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_TRANSFER_OWNERSHIP_LABELS };
 
 export interface TransferOwnershipDialogProps {
   /** The account whose work moves — its address is what the admin types. */
@@ -99,7 +89,7 @@ export interface TransferOwnershipDialogProps {
   describeError?: (error: unknown) => ReactNode | undefined;
   /** Kept-mounted mode. */
   open?: boolean;
-  labels?: Partial<TransferOwnershipLabels>;
+  labels?: LabelOverride<TransferOwnershipLabels>;
 }
 
 export function TransferOwnershipDialog({
@@ -157,7 +147,7 @@ export function TransferOwnershipDialog({
       onClose={onClose}
       describeError={describeError}
     >
-      {summary && <div className="text-sm text-[var(--text-secondary)]">{summary}</div>}
+      {summary && <div className="text-sm text-secondary">{summary}</div>}
       <Select label={labels.recipient} value={chosen} onChange={(event) => setChosen(event.target.value)}>
         <option value="">{labels.choose}</option>
         {rows.map((row) => (

package/src/admin/user-roster-labels.ts

@@ -0,0 +1,17 @@
+// The English words of ./user-roster, 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). ./user-roster re-exports them.
+
+import type { UserRosterLabels } from "./user-roster";
+
+export const DEFAULT_USER_ROSTER_LABELS: UserRosterLabels = {
+  name: "Name",
+  email: "Email",
+  role: "Role",
+  state: "State",
+  created: "Created",
+  lastLogin: "Last login",
+  never: "Never",
+  actions: "Actions",
+  actionsFor: (name) => `Actions for ${name}`,
+};

package/src/admin/user-roster.tsx

@@ -3,7 +3,7 @@ import type { ReactNode } from "react";
 import { cn } from "../lib/cn";
 import type { DateInput } from "../lib/format";
 import type { PersonName } from "../lib/person-name";
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { AccountStateChip, RoleChip, dateColumn } from "../components/account-chips";
 import type { AccountState, RoleVocabulary } from "../components/account-chips";
 import type { ChipTone } from "../components/chip";
@@ -16,6 +16,7 @@ import { UserAvatar } from "../components/user-avatar";
 import { personLabel } from "./admin-parts";
 import { RoleSelect } from "./role-select";
 import type { RoleLock } from "./role-select";
+import { DEFAULT_USER_ROSTER_LABELS } from "./user-roster-labels";
 
 /**
  * The admin's user list (docs/user-admin-harmonization.md §3): a column preset for the
@@ -140,17 +141,8 @@ export interface UserRosterLabels {
   actionsFor: (name: string) => string;
 }
 
-export const DEFAULT_USER_ROSTER_LABELS: UserRosterLabels = {
-  name: "Name",
-  email: "Email",
-  role: "Role",
-  state: "State",
-  created: "Created",
-  lastLogin: "Last login",
-  never: "Never",
-  actions: "Actions",
-  actionsFor: (name) => `Actions for ${name}`,
-};
+// Defined in ./user-roster-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_USER_ROSTER_LABELS };
 
 /* ── UserIdentityCell ───────────────────────────────────────────────────────── */
 
@@ -196,13 +188,13 @@ export function UserIdentityCell({
       {avatar && <UserAvatar person={person} name={name} email={email} size="sm" />}
       <div className="min-w-0">
         <div className="flex min-w-0 items-center gap-1.5">
-          <span data-private className="truncate-until-large font-medium text-[var(--text-primary)]">
+          <span data-private className="truncate-until-large font-medium text-primary">
             {named || address}
           </span>
           {badge}
         </div>
         {named && address && (
-          <div data-private className="truncate-until-large text-xs text-[var(--text-muted)]">
+          <div data-private className="truncate-until-large text-xs text-muted">
             {address}
           </div>
         )}
@@ -225,7 +217,7 @@ export interface UserRowActionsProps {
   actions: UserRowActionList;
   /** The account's name, for the menu's name — "Actions for Ada Example". */
   name: string;
-  labels?: Partial<UserRosterLabels>;
+  labels?: LabelOverride<UserRosterLabels>;
 }
 
 /**
@@ -289,7 +281,7 @@ export interface UserRosterColumnsOptions<T extends UserRosterRow, R extends str
   emailColumn?: boolean;
   /** The words, already resolved. Default English; {@link useUserRosterColumns} reads
    *  the provider's `userRoster` namespace. */
-  labels?: Partial<UserRosterLabels>;
+  labels?: LabelOverride<UserRosterLabels>;
 }
 
 function rolesOf<T extends UserRosterRow, R extends string>(
@@ -390,7 +382,7 @@ export function userRosterColumns<T extends UserRosterRow, R extends string = st
       header: labels.email,
       className: "whitespace-nowrap",
       cell: (row) => (
-        <span data-private className="text-[var(--text-secondary)]">
+        <span data-private className="text-secondary">
           {row.email}
         </span>
       ),

package/src/auth/accept-invitation-labels.ts

@@ -0,0 +1,21 @@
+// The English words of ./accept-invitation, 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). ./accept-invitation re-exports them.
+
+import type { AcceptInvitationLabels } from "./accept-invitation";
+
+export const DEFAULT_ACCEPT_INVITATION_LABELS: AcceptInvitationLabels = {
+  title: "Accept invitation",
+  accepting: "Joining…",
+  accepted: "Invitation accepted.",
+  joined: (name) => `You’ve joined ${name}.`,
+  continue: "Continue",
+  invalid: "Could not join with this link",
+  expired: "This invitation has expired",
+  noToken: "This link is missing its invite token.",
+  askAgain: "Ask the person who invited you to send a new invitation.",
+  signInFirst: "Sign in to accept this invitation",
+  signInHint: "Use the account the invitation was sent to.",
+  signIn: "Sign in",
+  register: "Create account",
+};

package/src/auth/accept-invitation.tsx

@@ -1,14 +1,16 @@
 import { useState } from "react";
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
 import { CheckCircle2, LogIn, TimerOff, XCircle } from "lucide-react";
 import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { useAnnounce } from "../hooks/use-announce";
 import { LoadingState } from "../components/loading-state";
-import { Button, EmptyState } from "../components/ui";
+import { Button } from "../components/button";
+import { EmptyState } from "../components/empty-state";
 import { authErrorCode } from "./auth-errors";
 import { OUTCOME_CLASS, STATUS_HEADING_CLASS, useOncePerKey } from "./status-parts";
 import type { AuthHeadingLevel } from "./status-parts";
+import { DEFAULT_ACCEPT_INVITATION_LABELS } from "./accept-invitation-labels";
 
 /* ── Labels ──────────────────────────────────────────────────────────────── */
 
@@ -41,21 +43,8 @@ export interface AcceptInvitationLabels {
   register: string;
 }
 
-export const DEFAULT_ACCEPT_INVITATION_LABELS: AcceptInvitationLabels = {
-  title: "Accept invitation",
-  accepting: "Joining…",
-  accepted: "Invitation accepted.",
-  joined: (name) => `You’ve joined ${name}.`,
-  continue: "Continue",
-  invalid: "Could not join with this link",
-  expired: "This invitation has expired",
-  noToken: "This link is missing its invite token.",
-  askAgain: "Ask the person who invited you to send a new invitation.",
-  signInFirst: "Sign in to accept this invitation",
-  signInHint: "Use the account the invitation was sent to.",
-  signIn: "Sign in",
-  register: "Create account",
-};
+// Defined in ./accept-invitation-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_ACCEPT_INVITATION_LABELS };
 
 /* ── Types ───────────────────────────────────────────────────────────────── */
 
@@ -72,7 +61,7 @@ export type AcceptInvitationFailure = "invalid" | "expired" | "signIn";
 
 type Outcome = "accepted" | AcceptInvitationFailure;
 
-export interface AcceptInvitationProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "title"> {
+export interface AcceptInvitationProps extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
   /** The invitation's token — the app's `?invite=` / `?token=`. Empty: the link was cut
    *  short, and the page says so without asking anyone. */
   token: string;
@@ -101,7 +90,7 @@ export interface AcceptInvitationProps extends Omit<ComponentPropsWithoutRef<"di
   title?: ReactNode;
   /** The heading's level. Default `h2`, under the page's `h1`. */
   headingAs?: AuthHeadingLevel;
-  labels?: Partial<AcceptInvitationLabels>;
+  labels?: LabelOverride<AcceptInvitationLabels>;
 }
 
 /**