@eifi1/ui-kit 0.28.1 → 0.30.0

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/components/user-avatar.tsx

@@ -1,5 +1,8 @@
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { personInitials } from "../lib/person-name";
+import type { PersonName } from "../lib/person-name";
+import { useKitLocale } from "../i18n/kit-labels";
 import { StatusDot } from "./status-dot";
 import type { StatusDotSize, StatusDotTone } from "./status-dot";
 
@@ -43,10 +46,23 @@ export interface UserAvatarBadge {
 }
 
 /** A `<span>`'s props, minus `children`: the content is the initials this computes
- *  from `name`/`email`, so there is nothing for a caller to put inside. */
+ *  from `person`/`name`/`email`, so there is nothing for a caller to put inside. */
 export interface UserAvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
   name?: string | null;
   email?: string | null;
+  /**
+   * The person's first and last name (0.29.0, docs/auth-harmonization.md §3.2) —
+   * preferred over `name` whenever either part is filled in. The initials follow the
+   * READER's language, the provider's `locale`: "AE" for Ada Example, "EA" in Hungarian
+   * (family name first), the family name's first character alone in Chinese. See
+   * {@link personInitials}.
+   *
+   * `name` stays the fallback for an API that still sends only `display_name`, and
+   * `email` after it: a person whose two parts are both blank falls through to them.
+   * A migrated user (the whole old display name in `first`, no `last`, §3.3) keeps the
+   * initials they had.
+   */
+  person?: PersonName | null;
   size?: keyof typeof AVATAR_SIZES;
   /**
    * A status dot in the top-end corner (the top-right in LTR, top-left in RTL), ringed
@@ -64,7 +80,9 @@ export interface UserAvatarProps extends Omit<ComponentPropsWithoutRef<"span">,
  * A round initials avatar — the common user chip shared across apps (feedback
  * #333). Purely presentational; wrap it in a button for the account menu trigger.
  */
-export function UserAvatar({ name, email, size = "md", badge, className, ...rest }: UserAvatarProps) {
+export function UserAvatar({ name, email, person, size = "md", badge, className, ...rest }: UserAvatarProps) {
+  const locale = useKitLocale();
+  const initials = (person ? personInitials(person, locale) : "") || avatarInitials(name, email);
   if (badge) {
     // A wrapper, because the chip itself is `aria-hidden` and the badge label must not
     // be. `className` stays on the chip (a size override still sizes the circle); the
@@ -80,7 +98,7 @@ export function UserAvatar({ name, email, size = "md", badge, className, ...rest
             className,
           )}
         >
-          {avatarInitials(name, email)}
+          {initials}
         </span>
         <StatusDot
           ring
@@ -109,7 +127,7 @@ export function UserAvatar({ name, email, size = "md", badge, className, ...rest
         className,
       )}
     >
-      {avatarInitials(name, email)}
+      {initials}
     </span>
   );
 }

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

@@ -61,6 +61,26 @@ import { DEFAULT_IMAGE_GRID_LABELS } from "../components/image-grid";
 import { DEFAULT_LIGHTBOX_LABELS } from "../components/lightbox";
 import { DEFAULT_WRITE_LOCK_LABELS } from "../components/write-lock";
 import { DEFAULT_LEGAL_LABELS } from "../components/legal";
+import { DEFAULT_SIGN_IN_LABELS } from "../auth/sign-in-form";
+import { DEFAULT_REGISTER_LABELS } from "../auth/register-form";
+import { DEFAULT_COMPLETE_NAME_LABELS } from "../auth/complete-name-dialog";
+import { DEFAULT_FORGOT_PASSWORD_LABELS } from "../auth/forgot-password-form";
+import { DEFAULT_RESET_PASSWORD_LABELS } from "../auth/reset-password-form";
+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";
@@ -168,6 +188,26 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   serverWake: DEFAULT_SERVER_WAKE_LABELS,
   translationReview: DEFAULT_TRANSLATION_REVIEW_LABELS,
   legal: DEFAULT_LEGAL_LABELS,
+  signIn: DEFAULT_SIGN_IN_LABELS,
+  register: DEFAULT_REGISTER_LABELS,
+  completeName: DEFAULT_COMPLETE_NAME_LABELS,
+  forgotPassword: DEFAULT_FORGOT_PASSWORD_LABELS,
+  resetPassword: DEFAULT_RESET_PASSWORD_LABELS,
+  verifyEmail: DEFAULT_VERIFY_EMAIL_LABELS,
+  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,