@eifi1/ui-kit 0.29.0 → 0.30.0

package/src/components/account-chips.tsx

@@ -118,25 +118,55 @@ export function RoleChip<R extends string = string>({
  * - `registered` — an allowlist row whose address has an account now (Kurvenschmiede).
  * - `unverified` — the email address is not confirmed (keksdose).
  * - `passwordChange` — must set a new password at the next sign-in (keksdose).
+ * - `deletion` — 0.30.0: the user asked for the account to be deleted
+ *   (docs/user-admin-harmonization.md §2.1, §6.4). It is deactivated at once and erased
+ *   on a date (`after_days`: keksdose, Kurvenschmiede) or by an operator (kastlan). The
+ *   chip says the date when there is one ({@link AccountStateChipProps.date}), and
+ *   "Deletion requested" when there is none. It stands IN PLACE of `inactive`: an
+ *   account marked for deletion is always deactivated, and two chips would say it twice.
  *
  * An account can be several at once (inactive AND unverified): render one chip per
  * state, as keksdose's state column does.
  */
-export type AccountState = "active" | "inactive" | "invited" | "registered" | "unverified" | "passwordChange";
+export type AccountState =
+  | "active"
+  | "inactive"
+  | "invited"
+  | "registered"
+  | "unverified"
+  | "passwordChange"
+  | "deletion";
 
-export type AccountStateLabels = Record<AccountState, string>;
+/**
+ * The `accountState` namespace. One word per state, plus the two forms of `deletion`.
+ *
+ * The 0.30 keys are OPTIONAL, like every key added to a namespace an app annotates
+ * (`const L: AccountStateLabels = {…}`): a new required key would be a compile error in
+ * each app on its next update. Left out, they fall back to the provider's, then English.
+ */
+export interface AccountStateLabels extends Record<Exclude<AccountState, "deletion">, string> {
+  /** 0.30.0: an account marked for deletion with no date — kastlan's `operator` mode,
+   *  where an operator erases it (§6.4). "Deletion requested". */
+  deletion?: string;
+  /** 0.30.0: an account that will be erased on `date`, already formatted in the
+   *  reader's locale — the `after_days` mode. "Deletion on 6 Nov 2026". */
+  deletionOn?: (date: string) => string;
+}
 
-export const DEFAULT_ACCOUNT_STATE_LABELS: AccountStateLabels = {
+export const DEFAULT_ACCOUNT_STATE_LABELS = {
   active: "Active",
   inactive: "Inactive",
   invited: "Invited",
   registered: "Registered",
   unverified: "Unverified",
   passwordChange: "Must change password",
-};
+  deletion: "Deletion requested",
+  deletionOn: (date: string) => `Deletion on ${date}`,
+} satisfies Required<AccountStateLabels>;
 
-/** The default tone of each state: green for the normal case, red for switched off,
- *  amber for something the user still has to do, blue for an open invitation. */
+/** The default tone of each state: green for the normal case, red for switched off
+ *  (and for going, `deletion`), amber for something the user still has to do, blue for
+ *  an open invitation. */
 export const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>> = {
   active: "success",
   inactive: "danger",
@@ -144,10 +174,22 @@ export const ACCOUNT_STATE_TONES: Readonly<Record<AccountState, ChipTone>> = {
   registered: "neutral",
   unverified: "warning",
   passwordChange: "warning",
+  // Red like `inactive`, which it replaces: the account cannot sign in, and it is going.
+  deletion: "danger",
 };
 
 export interface AccountStateChipProps extends AccountChipLook {
   state: AccountState;
+  /**
+   * 0.30.0, `state="deletion"` only: the day the account will be erased — the row's
+   * `deletion_scheduled_at` (§3.2, §6.4). Formatted as a date in the reader's locale
+   * ("Deletion on 6 Nov 2026"), through the provider's `formatDate` when the app set
+   * one, as {@link DateMark} does. Missing or `null` — an operator erases it, so there
+   * is no date — the chip says "Deletion requested". Ignored for every other state.
+   */
+  date?: DateInput;
+  /** Over the provider's locale, for the `deletion` date. */
+  locale?: string;
   /** Over {@link ACCOUNT_STATE_TONES} — Kurvenschmiede draws `inactive` neutral. */
   tone?: ChipTone;
   /** Over the label, for an app whose word for the state is its own ("Deactivated"). */
@@ -162,6 +204,8 @@ export interface AccountStateChipProps extends AccountChipLook {
  */
 export function AccountStateChip({
   state,
+  date,
+  locale: localeProp,
   tone,
   children,
   labels: labelsProp,
@@ -175,10 +219,23 @@ export function AccountStateChip({
   // An `undefined` in the prop is skipped (the provider's merge does that), so an
   // optional value cannot blank a default.
   const labels = useKitLabels("accountState", DEFAULT_ACCOUNT_STATE_LABELS, labelsProp);
+  const locale = useKitLocale(localeProp);
+  const fromProvider = useKitDateFormatter();
+  const when = state === "deletion" ? toDate(date ?? null) : null;
+  let text: ReactNode;
+  if (state !== "deletion") text = labels[state];
+  else if (when) {
+    // A date in a SENTENCE, so no weekday (keksdose's rule, KitDateFormatContext).
+    const day =
+      (fromProvider && fromProvider(toLocalIso(when), { unit: "day", source: "dateMark", locale, weekday: false })) ||
+      formatDate(when, "medium", { locale });
+    text = (labels.deletionOn ?? DEFAULT_ACCOUNT_STATE_LABELS.deletionOn)(day);
+  } else text = labels.deletion ?? DEFAULT_ACCOUNT_STATE_LABELS.deletion;
   return (
     <Chip
       {...rest}
       data-state={state}
+      data-date={when ? toLocalIso(when) : undefined}
       tone={tone ?? ACCOUNT_STATE_TONES[state]}
       size={size}
       variant={variant}
@@ -186,7 +243,7 @@ export function AccountStateChip({
       caps={caps}
       className={className}
     >
-      {children ?? labels[state]}
+      {children ?? text}
     </Chip>
   );
 }

package/src/components/account-settings-labels.ts

@@ -20,8 +20,19 @@ export interface ProfileSettingLabels {
   email: string;
   role: string;
   memberSince: string;
+  /** The single name field — the card without `firstName` / `lastName`. */
   displayName: string;
   save: string;
+  /**
+   * 0.30.0 (docs/user-admin-harmonization.md §6.1): the two fields that replace
+   * `displayName` once the card is given `firstName` / `lastName`. OPTIONAL, like
+   * `TwoFactorSettingLabels.qrAlt` and for its reason — this interface is annotated at
+   * call sites — and filled from the provider's `accountSettings.profile`, then English.
+   */
+  firstName?: string;
+  lastName?: string;
+  /** Why Save is held while a name is blank: both are required (§3.1). */
+  nameRequired?: string;
 }
 
 export interface PasswordSettingLabels {
@@ -104,7 +115,7 @@ export interface PasskeysSettingLabels {
 }
 
 export interface AccountSettingsLabels {
-  profile: ProfileSettingLabels;
+  profile: Required<ProfileSettingLabels>;
   password: PasswordSettingLabels;
   // `Required` here, optional on the section interfaces: the namespace is what a full
   // catalogue (`@eifi1/ui-kit/i18n/<code>`, `missingKitLabels`) is written against, so
@@ -121,6 +132,9 @@ export const DEFAULT_ACCOUNT_SETTINGS_LABELS: AccountSettingsLabels = {
     memberSince: "Member since",
     displayName: "Display name",
     save: "Save",
+    firstName: "First name",
+    lastName: "Last name",
+    nameRequired: "Enter both a first and a last name.",
   },
   password: {
     title: "Change password",

package/src/components/account-settings.tsx

@@ -1,10 +1,12 @@
 import { useId, useState } from "react";
-import type { KeyboardEvent, ReactNode } 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 { personNameOk, PERSON_NAME_MAX_LENGTH } from "../auth/form-rules";
 import {
   DEFAULT_PASSWORD_STRENGTH_LABELS,
   passwordByteLength,
@@ -40,38 +42,90 @@ export { DEFAULT_ACCOUNT_SETTINGS_LABELS } from "./account-settings-labels";
  * `accountSettings` namespace, then English (see account-settings-labels.ts).
  */
 
-export function ProfileSetting({
-  name,
-  email,
-  role,
-  memberSince,
-  value,
-  onChange,
-  onSave,
-  saving,
-  labels: labelsProp,
-}: {
+/** What {@link ProfileSetting} hands `onSave` in its two-field form (0.30.0): both
+ *  trimmed, 1–120 characters each — the `PATCH /auth/me` body's `first_name` /
+ *  `last_name` (docs/user-admin-harmonization.md §6.1). */
+export interface ProfileNameValues {
+  firstName: string;
+  lastName: string;
+}
+
+/** What both forms of {@link ProfileSetting} take. */
+interface ProfileSettingCommonProps {
   name?: string | null;
   email?: string | null;
   role?: ReactNode;
   memberSince?: ReactNode;
-  value: string;
-  onChange: (value: string) => void;
-  onSave: () => void;
   saving?: boolean;
   /** Prop > `<UiKitProvider labels={{ accountSettings: { profile } }}>` > English. */
   labels?: Partial<ProfileSettingLabels>;
-}) {
+}
+
+/**
+ * The single display name, as before 0.30.0 — controlled through `value` / `onChange`,
+ * saved by `onSave()`. Kept unchanged for an app that has not moved to first and last
+ * name yet.
+ */
+export interface ProfileSettingDisplayNameProps extends ProfileSettingCommonProps {
+  value: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+  firstName?: undefined;
+  lastName?: undefined;
+}
+
+/**
+ * First and last name (0.30.0, docs/user-admin-harmonization.md §6.1): the saved
+ * values in, the edited ones out through `onSave`. The card keeps the drafts itself.
+ */
+export interface ProfileSettingNamesProps extends ProfileSettingCommonProps {
+  /** The saved given name — `first_name`. `null` reads as empty. */
+  firstName: string | null;
+  /** The saved family name — `last_name`. `null` (a migrated account, §3.3) reads as
+   *  empty, and Save then waits for one. */
+  lastName: string | null;
+  /**
+   * Save the two names (`PATCH /auth/me`, which also clears `name_incomplete`). Return
+   * a promise and Save is busy until it settles. Refresh `firstName` / `lastName` from
+   * the answer: the card compares its drafts with them, so Save turns off once the new
+   * names come back. A rejection keeps what was typed — the app says why (a toast), as
+   * for `PasswordSetting`.
+   */
+  onSave: (values: ProfileNameValues) => void | Promise<unknown>;
+  value?: undefined;
+  onChange?: undefined;
+}
+
+export type ProfileSettingProps = ProfileSettingDisplayNameProps | ProfileSettingNamesProps;
+
+/**
+ * The profile section: avatar, address, role, member since, and the name.
+ *
+ * **Two forms.** Given `firstName` / `lastName` (0.30.0, §6.1) it edits first and last
+ * name in two fields, side by side where the card is wide enough — the order and the
+ * 1–120-character rule of `RegisterForm` (auth §3.1), so the name a person signed up
+ * with is edited the way it was typed. Without them it is the single `displayName`
+ * field it always was, `value` / `onChange` / `onSave()` unchanged, for an app that has
+ * not moved yet (kastlan split the one name at its first space on save; Kurvenschmiede
+ * built its own card instead).
+ *
+ * The two-field form owns its drafts, starting from the saved names and following them
+ * when they change; Save waits for a change, holds — saying why — while a name is
+ * blank, and is a `commit` (a {@link WriteLockProvider} locks it, keksdose's demo).
+ */
+export function ProfileSetting(props: ProfileSettingProps) {
+  const { name, email, role, memberSince, labels: labelsProp } = props;
   const labels = useAccountSettingsLabels("profile", labelsProp);
-  const dirty = value.trim().length > 0 && value.trim() !== (name ?? "");
-  // Generated, not the literal "display-name" it was: two of these on one page (an
-  // admin editing someone else's profile beside their own) shared an id, and the
-  // second label pointed at the first field.
-  const inputId = useId();
+  const names = props.firstName !== undefined || props.lastName !== undefined;
   return (
     <Card className="p-4 space-y-3">
       <div className="flex items-center gap-3">
-        <UserAvatar name={name} email={email} size="lg" />
+        <UserAvatar
+          name={name}
+          email={email}
+          person={names ? { first: props.firstName, last: props.lastName } : undefined}
+          size="lg"
+        />
         <div className="min-w-0">
           <div className="text-sm font-medium">{labels.title}</div>
           <div className="truncate font-mono text-xs text-[var(--text-muted)]">
@@ -88,6 +142,51 @@ export function ProfileSetting({
         <span className="text-[var(--text-muted)]">{labels.memberSince}</span>
         <span>{memberSince ?? "—"}</span>
       </div>
+      {names ? (
+        <PersonNameFields
+          firstName={props.firstName ?? ""}
+          lastName={props.lastName ?? ""}
+          onSave={(props as ProfileSettingNamesProps).onSave}
+          saving={props.saving}
+          labels={labels}
+        />
+      ) : (
+        <DisplayNameField
+          name={name}
+          value={(props as ProfileSettingDisplayNameProps).value}
+          onChange={(props as ProfileSettingDisplayNameProps).onChange}
+          onSave={(props as ProfileSettingDisplayNameProps).onSave}
+          saving={props.saving}
+          labels={labels}
+        />
+      )}
+    </Card>
+  );
+}
+
+/** The single-name form — exactly the 0.29 card's field and button. */
+function DisplayNameField({
+  name,
+  value,
+  onChange,
+  onSave,
+  saving,
+  labels,
+}: {
+  name?: string | null;
+  value: string;
+  onChange: (value: string) => void;
+  onSave: () => void;
+  saving?: boolean;
+  labels: Required<ProfileSettingLabels>;
+}) {
+  const dirty = value.trim().length > 0 && value.trim() !== (name ?? "");
+  // Generated, not the literal "display-name" it was: two of these on one page (an
+  // admin editing someone else's profile beside their own) shared an id, and the
+  // second label pointed at the first field.
+  const inputId = useId();
+  return (
+    <>
       <Input
         id={inputId}
         label={labels.displayName}
@@ -98,7 +197,84 @@ export function ProfileSetting({
       <Button onClick={onSave} disabled={!dirty || saving}>
         {labels.save}
       </Button>
-    </Card>
+    </>
+  );
+}
+
+/** The first-and-last form (0.30.0, §6.1). */
+function PersonNameFields({
+  firstName,
+  lastName,
+  onSave,
+  saving,
+  labels,
+}: {
+  firstName: string;
+  lastName: string;
+  onSave: (values: ProfileNameValues) => void | Promise<unknown>;
+  saving?: boolean;
+  labels: Required<ProfileSettingLabels>;
+}) {
+  const [first, setFirst] = useState(firstName);
+  const [last, setLast] = useState(lastName);
+  // The saved names moved (the save came back, another tab renamed): the drafts follow
+  // them. During render, as DangerConfirm resets its fields, so no frame shows the old
+  // draft beside the new name.
+  const [saved, setSaved] = useState({ firstName, lastName });
+  if (saved.firstName !== firstName || saved.lastName !== lastName) {
+    setSaved({ firstName, lastName });
+    setFirst(firstName);
+    setLast(lastName);
+  }
+  const { pending, run } = usePromisePending();
+  const busy = Boolean(saving) || pending;
+  const valid = personNameOk(first) && personNameOk(last);
+  const dirty = first.trim() !== firstName.trim() || last.trim() !== lastName.trim();
+
+  const submit = (e: FormEvent) => {
+    e.preventDefault();
+    if (!valid || !dirty || busy) return;
+    // A rejection keeps the drafts; the app reports it, as PasswordSetting's does.
+    run(onSave({ firstName: first.trim(), lastName: last.trim() }), () => {});
+  };
+
+  return (
+    <form className="@container space-y-3" onSubmit={submit} noValidate>
+      {/* The order and the rule of RegisterForm's two fields (auth §3.1). */}
+      <div className="grid gap-3 @xs:grid-cols-2">
+        <Input
+          name="given-name"
+          autoComplete="given-name"
+          label={labels.firstName}
+          value={first}
+          onChange={(e) => setFirst(e.target.value)}
+          maxLength={PERSON_NAME_MAX_LENGTH}
+          readOnly={busy}
+          required
+        />
+        <Input
+          name="family-name"
+          autoComplete="family-name"
+          label={labels.lastName}
+          value={last}
+          onChange={(e) => setLast(e.target.value)}
+          maxLength={PERSON_NAME_MAX_LENGTH}
+          readOnly={busy}
+          required
+        />
+      </div>
+      <Button
+        type="submit"
+        commit
+        pending={busy}
+        // A blank name is a reason the person can act on; an unchanged one is not —
+        // there is nothing to save, and the button is simply off.
+        disabled={valid && !dirty}
+        disabledReason={valid ? undefined : labels.nameRequired}
+      >
+        {labels.save}
+      </Button>
+    </form>
   );
 }
 

package/src/hooks/use-anchored-panel.ts

@@ -55,13 +55,21 @@ export interface AnchoredPanel {
 /** Absolute floor: below this a list is useless, so overflow the margin instead. */
 const FLOOR = 96;
 
+/** How much more room above must offer, when neither side fits the preferred height,
+ *  before the panel changes sides — so it never jumps for a few pixels' gain. */
+const FLIP_GAIN = 48;
+
 /**
  * The pure half of {@link useAnchoredPanel}: where a panel goes, given the trigger's
  * rect and the region actually on screen.
  *
  * Prefers below the trigger — the conventional direction, and the one that keeps the
- * trigger's own value visible. Flips above only when below cannot show a usable list
- * AND above is roomier, so a panel never jumps sides for a few pixels' gain. The
+ * trigger's own value visible — whenever the panel's preferred height fits there. When it
+ * does not, the panel opens above if the full height fits there, or if above is clearly
+ * roomier (by {@link FLIP_GAIN}); below an unusable `minHeight` it flips to any roomier
+ * side, as before. It used to flip only below `minHeight`, so a select with 160–319 px
+ * under it opened downward as a cramped list with 600 px free above (keksdose live #384,
+ * the currency select of the new-budget form near the bottom of the screen). The
  * returned `maxHeight` is what makes the flip sufficient rather than merely different:
  * without it a tall panel placed above just runs off the top instead of the bottom.
  *
@@ -77,7 +85,10 @@ export function anchoredPanelPlacement(
   const viewBottom = viewport.top + viewport.height - margin;
   const spaceBelow = viewBottom - (rect.bottom + gap);
   const spaceAbove = rect.top - gap - viewTop;
-  const above = spaceBelow < minHeight && spaceAbove > spaceBelow;
+  const above =
+    spaceAbove > spaceBelow &&
+    (spaceBelow < minHeight ||
+      (spaceBelow < preferredHeight && (spaceAbove >= preferredHeight || spaceAbove - spaceBelow >= FLIP_GAIN)));
   const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);
   const maxHeight = Math.min(preferredHeight, space);
   return {

package/src/i18n/defaults.ts

@@ -70,6 +70,17 @@ import { DEFAULT_VERIFY_EMAIL_LABELS } from "../auth/verify-email";
 import { DEFAULT_NOT_FOUND_LABELS } from "../auth/not-found-page";
 import { DEFAULT_ACCEPT_INVITATION_LABELS } from "../auth/accept-invitation";
 import { DEFAULT_COMPANY_SWITCHER_LABELS } from "../shell/company-switcher";
+import { DEFAULT_EMAIL_CHANGE_LABELS } from "../account/email-change-setting";
+import { DEFAULT_SESSIONS_LABELS } from "../account/sessions-setting";
+import { DEFAULT_DELETE_ACCOUNT_LABELS } from "../account/delete-account-setting";
+import { DEFAULT_DATA_EXPORT_LABELS } from "../account/data-export-setting";
+import { DEFAULT_USER_ROSTER_LABELS } from "../admin/user-roster";
+import { DEFAULT_ROLE_SELECT_LABELS } from "../admin/role-select";
+import { DEFAULT_REVIEWER_SCOPE_LABELS } from "../admin/reviewer-scope-editor";
+import { DEFAULT_ADMIN_ACTION_LABELS } from "../admin/admin-action-confirm";
+import { DEFAULT_ADMIN_ACTION_LOG_LABELS } from "../admin/admin-action-log";
+import { DEFAULT_TRANSFER_OWNERSHIP_LABELS } from "../admin/transfer-ownership-dialog";
+import { DEFAULT_INVITATIONS_LABELS } from "../admin/invitations-panel";
 import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips";
 import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card";
 import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog";
@@ -186,6 +197,17 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   notFound: DEFAULT_NOT_FOUND_LABELS,
   acceptInvitation: DEFAULT_ACCEPT_INVITATION_LABELS,
   companySwitcher: DEFAULT_COMPANY_SWITCHER_LABELS,
+  emailChange: DEFAULT_EMAIL_CHANGE_LABELS,
+  sessions: DEFAULT_SESSIONS_LABELS,
+  deleteAccount: DEFAULT_DELETE_ACCOUNT_LABELS,
+  dataExport: DEFAULT_DATA_EXPORT_LABELS,
+  userRoster: DEFAULT_USER_ROSTER_LABELS,
+  roleSelect: DEFAULT_ROLE_SELECT_LABELS,
+  reviewerScope: DEFAULT_REVIEWER_SCOPE_LABELS,
+  adminAction: DEFAULT_ADMIN_ACTION_LABELS,
+  adminActionLog: DEFAULT_ADMIN_ACTION_LOG_LABELS,
+  transferOwnership: DEFAULT_TRANSFER_OWNERSHIP_LABELS,
+  invitations: DEFAULT_INVITATIONS_LABELS,
   characterCount: DEFAULT_CHARACTER_COUNT_LABELS,
   countrySelect: DEFAULT_COUNTRY_SELECT_LABELS,
   inlineEdit: DEFAULT_INLINE_EDIT_LABELS,