@lotics/ui 44.1.0 → 44.2.0

package/AGENTS.md

@@ -27,8 +27,9 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
 - **Reuse first; the catalog can lag `src/`.** Before hand-rolling ANY capability, `ls src/` and
   grep for a match — a component in `src/` missing from the catalog is a doc bug to fix, not a
   license to hand-roll.
-- **One canonical component per data role** (member → `MemberChip`, select → `OptionBadge`,
-  files → `FilePreview` family, …) — the catalog's Reach-by-role outranks neighboring code.
+- **One canonical component per data role** (member → `MemberChip`, who-is-this →
+  `MemberPeek`/`MemberProfileCard`, select → `OptionBadge`, files → `FilePreview` family, …) —
+  the catalog's Reach-by-role outranks neighboring code.
 - **Responsive layout measures the CONTAINER, not the screen.** `useContainerSize()` reports the
   nearest `SizeBoundary`; wrap one around any region whose width stops tracking its parent's, and
   `Dialog`/`Drawer`/popover bodies already are boundaries so their contents get the panel

package/docs/catalog.md

@@ -78,6 +78,31 @@ inline: a picker option, an assignee, a `select_member` value. Pure: resolve the
 your directory and pass `name` / `image`; never hand-roll `Avatar` + `Text`. (`MemberSelect`
 renders these per option.)
 
+**To answer "who IS this?" — `MemberPeek`**, the same chip made a door onto a
+`MemberProfileCard`: a 72px avatar, what they sign in as, their role, their teams and when they
+joined. The chip wears `marker` there — a pressable that paints nothing at rest is text, and its
+hover wash does not exist on touch. Feed it
+a member (an app's `ResolvedMember` already carries `groups`); `role` arrives ALREADY
+TRANSLATED, never a raw enum — the kit holds no domain vocabulary. Use `MemberProfileCard`
+alone wherever the card is not behind a press (a profile header, a drawer).
+
+**Where a peek must NOT go**, both cases being one rule — *two destinations behind one
+object*: a PICKER OPTION (`MemberSelect` / `InlineMemberSelect` render a chip per option, and
+a card over the open menu fires exactly when the reader is choosing), and a ROW THAT ALREADY
+PRESSES (the row opens the record; a chip inside it would open something else four pixels
+away). Those keep the plain `MemberChip`. A peek belongs where nothing else on the line
+presses — a person named in prose, a static header, a detail row, a log whose rows do not
+navigate. **Judge the container, not its look:** a `DataGrid` group band names a person and
+reads inert, but it is a button that collapses the group, so a peek there nests a button in a
+button. A fully interactive screen often has NO valid spot — `examples/tpl_task_board.tsx`
+names a person three times (collapsing band, inline editor, picker option) and correctly
+peeks on none of them.
+
+**`groups` distinguishes absent from empty, and the card renders the difference**: omitted
+drops the row (this caller was never told — a public-app response, an older server), `[]`
+keeps it and says "None". Passing `[]` for "we don't know" states as fact that a colleague is
+on no team.
+
 **Size is a RUNG, never a pixel count** — `sm | md | lg | xl` = 24 / 28 / 40 / 72
 (`@lotics/ui/avatar_size`, shared by `Avatar`, `MemberChip` and `GroupAvatar`). Default `md`.
 Pick by density:
@@ -545,7 +570,19 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`member_chip`** — `MemberChip`: avatar + name; the universal person render. `size` scales
   BOTH — `sm` gives a 24px avatar and a 12px name, every larger rung keeps the name at body
   size. Reach for `sm` when the chip sits inside a sentence or a dense row, where a body-size
-  name would collide with the 12px text around it.
+  name would collide with the 12px text around it. Also exports `memberDisplayName(name,
+  unknown)` — the shared "a blank name is called X" rule, so a chip and the card it opens
+  cannot name the same nameless member two different things.
+- **`member_profile_card`** — `MemberProfileCard`: WHO IS THIS — `xl` avatar, name, sign-in
+  identity, role, join date and groups, plus one optional `action`. Every row is conditional, so a
+  card told nothing is a header and nothing else. `role` comes in pre-translated (vocabulary only
+  the product can name); `joined` comes in as an ISO DATE and the card formats it to month + year
+  (a date has a canonical form the kit owns, so two hosts formatting it themselves would drift);
+  `groups` distinguishes absent (no row) from `[]` ("None"). `inactive` draws the departed state as
+  a `Badge` — a lifecycle state, not another muted line.
+- **`member_peek`** — `MemberPeek`: `MemberChip` + `Peek` + the card above, with the trigger's
+  announced name taken from the locale. Off picker options and off rows that already press —
+  see the person-display section for why.
 
 ### Layout & surfaces
 

package/docs/composition.md

@@ -83,6 +83,17 @@ restyle a heading level per-page.
 - **Card header** — a card's own title band (or separate banded cards): `CardHeader` +
   `CardHeaderTitle` (`sm` semibold; pass `info` whenever the title alone doesn't define the
   numbers) + optional `CardHeaderMeta` (a count/unit/period, xs muted tabular).
+- **Panel identity band** — a self-contained OVERLAY (a peek, a profile card, a small drawer)
+  whose subject is an ENTITY rather than a dataset. The name takes `###` — `lg` semibold, the
+  lowest heading rank — and neither of the two constructs it sits between: `CardHeaderTitle`
+  (`sm`) labels a CONTAINER of data, whereas here the name IS the content; `RecordSummary`'s `#`
+  is a page/drawer rung, and a page rung inside a popover flattens the very altitude distinction
+  the ramp exists to keep. **The failure it prevents is measurable:** a body-size name leaves the
+  panel's subject separated from its own supporting line by WEIGHT alone, which is a separate
+  font file rather than a step, and the whole surface then measures ~1.17x — flatter than a
+  register with no page band. Its supporting line takes the rung that gives it SIBLINGS (the
+  other muted lines in the same block), which is what "one rung below" is serving; applied
+  literally against that it produces a singleton treatment instead.
 - **Section title** — ONE construct: `Section` › `SectionHeading` › `SectionHeadingTitle`
   (`##` — xl semibold, optional muted `description` and `info` popover), everything left-aligned
   at the column edge; `SectionHeadingMeta`, any VIEW control, and the section's own ADD ride the
@@ -1045,6 +1056,29 @@ gate's SCOPE, once** — never prose beside the button, never revealed only on p
   **One verb set across every reference of a group** (a party wall's five links all read "Gỡ", not
   a mix of "Đổi"/"Gỡ"): with a clearable link, changing = remove → the empty-state picker
   re-prompts, so the destructive verb covers both required anchors and optional adds.
+- **A PERSON token peeks the same way a record reference does — but only where nothing else
+  on the line presses.** `MemberPeek` makes a `MemberChip` a door onto `MemberProfileCard`
+  (a `xl` avatar, the sign-in identity, role, teams), and it is the same drill-down grammar:
+  identity on the surface, the facts one layer in. The constraint is where it may live, and
+  it is the interior-verb lesson above generalised past the reference field: **a token inside
+  something already pressable puts two destinations behind one object.** Two surfaces fail it
+  and both keep the plain chip — a PICKER OPTION (a card over the open menu, fired at the one
+  moment the reader is choosing rather than browsing) and a ROW THAT NAVIGATES (press the row,
+  open the record; press four pixels left, open a card). What is left is where a peek is
+  actually for: a person named in prose, a static header, a detail row, a log whose rows do
+  not navigate. The test generalises to any token — ask what ELSE the press would have done,
+  and if the answer is "something", the token stays inert and the surface it sits on carries
+  the drill-down.
+  **Judge the CONTAINER, not how inert it looks.** A grouped register's band header names a
+  person, carries no visible control, and is a button — it collapses the group — so a token
+  inside it nests a button in a button and splits one gesture in two. The corollary is worth
+  stating because it reads as a failure and is not: a screen built entirely of editors,
+  pickers and navigating rows has NOWHERE a peek belongs, and the right move there is no peek
+  at all rather than the least-bad host.
+  **A profile's rows are conditional, and absent is not empty**: a field nobody supplied has
+  no row, while a field supplied as EMPTY keeps its row and says so. Collapsing the two turns
+  "we were not told" into a confident claim about a colleague — the same distinction a
+  resolved member cell already carries on the wire, and it must survive the render.
 
 ## The pointer cursor
 
@@ -1377,6 +1411,22 @@ default nobody chose — the giveaway is that the call site mentions no colour a
 arrived from a component's fallback rather than from a decision. Either give it siblings or take it
 back to a neutral.
 
+**SCALE may vary by altitude; INK may not.** Two surfaces rendering the same thing at different
+sizes is the ramp working — a dense chip and a panel legitimately put a person's name on different
+rungs. Two surfaces rendering it in different INKS is a defect, because an ink is a MEANING
+(supporting, departed, danger) while a rung is only a size. The signature is one fact measuring two
+colours on one screen: collect every element's `color` grouped by what it MEANS, and any meaning
+holding more than one value — or any value serving more than one meaning — is the finding, whatever
+the sizes are.
+
+**Supporting text is `muted`, and a raw neutral in its place is the usual cause of the above.**
+`color="muted"` is the token that means "this supports something else"; a hand-written
+`color="zinc-500"` is a *different, lighter* neutral that typechecks, renders plausibly, and is
+already spoken for — components mute a DEPARTED or disabled subject to it. Reach for the raw shade
+and a supporting line ends up wearing the ink that means "this person has left", so on a departed
+row the mute and the metadata come out identical and the state stops signalling anything. Grep a
+component for a raw neutral on `Text` before trusting that it reads muted.
+
 **TEXT never wears `solid()`** — the 500 is a FILL shade (dots, series). A status word/number uses
 `Text`'s valence tokens: `color="danger"` (red-900) / `"warning"` (amber-700) / `"success"`
 (emerald-700) — all AA on white. Map a dynamic `ColorName` to a token at the call site; hue nuance

package/docs/reviewing.md

@@ -96,8 +96,26 @@ rule behind it lives in the area doc named beside it; this file never restates o
   before meaning, so an unexplained difference reads as an accident however principled the reason.
 - **Singletons.** A rung/weight/ink combination appearing ONCE either wants siblings or wants to
   join an existing class. Pick the sibling set by STRUCTURAL ROLE, not visual resemblance.
+- **Count DISTINCT rungs on the surface, then name the role each one carries.** More rungs than
+  roles means a role has been split across two sizes, and that is the defect a reader calls
+  "inconsistent" without being able to point at which element is wrong — because none of them is:
+  each was chosen defensibly, one at a time. This is the probe to re-run after EVERY fix, and the
+  reason is procedural rather than visual: a treatment fix aimed at the element someone pointed at
+  leaves its neighbours unaligned, so the next look finds a new mismatch and the surface never
+  converges. Fixing the SET is a different act from fixing an element, and only this count tells
+  the two apart. A small panel wants two or three rungs; if the tally exceeds the number of things
+  the surface has to SAY, the excess is the finding.
 - **Pairs.** For every primary+supporting pair, divide. A spread in the RATIOS is the finding, not
-  a spread in the sizes.
+  a spread in the sizes. **A ratio of 1.00 is the loudest version** — a subject and its supporting
+  line on one rung are distinguishable only by ink, and if they also share a weight, only by ink.
+- **Stacked pairs: measure the STACK against the type inside it.** Collect each line's `font-size`
+  and `line-height` and the pair's total height. Prose leading is ~1.7x the rung, so two stacked
+  lines carry roughly half a line of empty box between the glyphs and read as two objects rather
+  than one — the signature is a stack noticeably taller than the sum of its font sizes (14+14 in a
+  48px box), with the lines' own boxes TOUCHING, so no margin or gap appears anywhere to explain
+  it and every spacing probe passes. Beside a mark, the same pair also outgrows the mark it labels.
+  The fix is `leading="tight"` on BOTH lines, never a negative margin, and never on a lone line —
+  one line is not a pair, and tightening it changes the geometry of every single-line instance.
 - **A label sharing a row with a flexible value: measure the LABEL across rows whose values differ
   in LENGTH.** Whichever of the two cannot shrink forces the other to, so a value floored at its
   longest word leaves the label absorbing every pixel and collapsing to a one-character column

package/examples/tpl_task_board.tsx

@@ -322,6 +322,15 @@ export function TplTaskBoard() {
       out = STATUS_ORDER.map((s) => ({ key: s, header: <OptionBadge value={STATUS[s]} variant="dot" />, items: pool.filter((t) => t.status === s) }));
     } else if (groupBy === "assignee") {
       out = [
+        // A PLAIN chip, and deliberately so. It is tempting to make the person
+        // here open their profile (`MemberPeek`), and it would be wrong: this
+        // band is itself a button — `DataGrid` wraps a group header in a
+        // pressable that collapses the group — so a card on the chip puts two
+        // destinations behind one object and nests a button inside a button.
+        // The same holds everywhere this screen names somebody: the assignee
+        // CELL is an editor, and the assignee FILTER is a picker option. A
+        // working board has no inert person on it, which is why the peek lives
+        // on static surfaces — a header that does nothing, a detail row, a log.
         ...MEMBERS.map((m) => ({ key: m.id, header: <MemberChip name={m.name} size="sm" />, items: pool.filter((t) => t.ownerId === m.id) })),
         { key: "none", header: <Text size="sm" color="muted">Unassigned</Text>, items: pool.filter((t) => !t.ownerId) },
       ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "44.1.0",
+  "version": "44.2.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -16,6 +16,8 @@
     "./option_picker": "./src/option_picker.tsx",
     "./option_badge": "./src/option_badge.tsx",
     "./member_chip": "./src/member_chip.tsx",
+    "./member_profile_card": "./src/member_profile_card.tsx",
+    "./member_peek": "./src/member_peek.tsx",
     "./member_select": "./src/member_select.tsx",
     "./inline_member_select": "./src/inline_member_select.tsx",
     "./mime": "./src/mime.ts",

package/src/locale.tsx

@@ -9,6 +9,7 @@ import { type DateRangeFilterFieldLabels } from "./date_range_filter_field";
 import { type GalleryLabels } from "./file_preview_types";
 import { type FindingLabels } from "./finding";
 import { type DeadlineLabels } from "./deadline";
+import { type MemberProfileLabels } from "./member_profile_card";
 
 /**
  * The kit's localizable strings, one slice per string-bearing component. A
@@ -125,8 +126,13 @@ export interface LoticsLocale {
    *  string cannot mean both. Agnostic on purpose: the kit does not know
    *  whether it is showing a recording, a clip or an attachment. */
   mediaPlayer: { loadFailed: string };
-  /** `Avatar`: the fallback name (initials + a11y label) shown when no `name`. */
+  /** `Avatar`: the fallback name (initials + a11y label) shown when no `name`.
+   *  `MemberChip` resolves the same blank through it, so a person with no name
+   *  is called one thing on both. */
   avatar: { unknown: string };
+  /** `MemberProfileCard` + `MemberPeek`: the profile card's row labels, its
+   *  "no groups" and departed notes, and the trigger's announced name. */
+  memberProfile: Required<MemberProfileLabels>;
   /** `BackButton` + `PopoverNavHeader`: the back-chevron's a11y name. */
   nav: { back: string };
   /** `BarChart` / `LineChart` / `PieChart`: the empty-state caption and the
@@ -338,6 +344,14 @@ export const en: LoticsLocale = {
     passwordProtected: "This file is password-protected and cannot be previewed",
   },
   avatar: { unknown: "Unknown" },
+  memberProfile: {
+    role: "Role",
+    groups: "Groups",
+    joined: "Joined",
+    noGroups: "None",
+    inactive: "No longer active",
+    profile: (name) => `Profile of ${name}`,
+  },
   nav: { back: "Back" },
   chart: { noData: "No data", total: "Total" },
   composer: { send: "Send", stop: "Stop" },
@@ -510,6 +524,17 @@ export const vi: LoticsLocale = {
   },
   mediaPlayer: { loadFailed: "Không tải được nội dung" },
   avatar: { unknown: "Không rõ" },
+  memberProfile: {
+    role: "Vai trò",
+    groups: "Nhóm",
+    joined: "Tham gia",
+    noGroups: "Không có",
+    inactive: "Đã nghỉ",
+    // "Thông tin của …", not "Hồ sơ của …": in a Vietnamese workspace a hồ sơ is
+    // a DOSSIER — an application file, a case — so announcing a colleague's card
+    // that way names the wrong object on the very surface that has no picture.
+    profile: (name) => `Thông tin của ${name}`,
+  },
   nav: { back: "Quay lại" },
   chart: { noData: "Không có dữ liệu", total: "Tổng" },
   composer: { send: "Gửi", stop: "Dừng" },

package/src/member_chip.tsx

@@ -3,6 +3,20 @@ import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
 import { Avatar } from "./avatar";
 import { Text } from "./text";
 import type { AvatarSize } from "./avatar_size";
+import { useLoticsLocale } from "./locale";
+
+/**
+ * What a member with no usable name is CALLED — one answer, shared by every
+ * surface that renders a person, so a chip and the profile card it opens cannot
+ * name the same blank differently.
+ *
+ * The word comes in as a parameter rather than out of a hook: the fallback is
+ * pure string logic, and keeping it that way lets the rule be tested without a
+ * provider and reused where no hook may run.
+ */
+export function memberDisplayName(name: string | null | undefined, unknown: string): string {
+  return name?.trim() || unknown;
+}
 
 interface MemberChipProps {
   /** Display name. Empty/blank falls back to a neutral label — pass
@@ -20,6 +34,22 @@ interface MemberChipProps {
    *  than as a current assignment. The chip keeps its height, because its usual
    *  home is a fixed row: this is a colour change, never an extra line. */
   inactive?: boolean;
+  /**
+   * This chip is a DOOR — something opens when it is pressed. Underlines the
+   * name in neutral ink, the kit's marker for "leads somewhere, and not away"
+   * (see `TextLink` with no `href`).
+   *
+   * It exists because a pressable that paints nothing at rest is text: with no
+   * ground, no border and no underline, its only affordance is a hover wash,
+   * which does not exist on touch and has not happened yet for anyone who has
+   * not already pointed at it. The chip then measures perfectly, carries a real
+   * focus ring, and is never pressed.
+   *
+   * Set it ONLY when the chip itself opens something. A chip inside a row that
+   * navigates must not wear it — the row is the door, and marking the chip
+   * promises a second destination that is not there.
+   */
+  marker?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -45,9 +75,13 @@ export function MemberChip({
   secondary,
   size = "md",
   inactive,
+  marker,
   style,
 }: MemberChipProps) {
-  const displayName = name?.trim() || "Unknown";
+  // `Avatar` has always taken this word from the pack; the NAME beside it was a
+  // hardcoded "Unknown", so a Vietnamese workspace drew initials from "Không rõ"
+  // and then printed "Unknown" next to them. One resolver, one word.
+  const displayName = memberDisplayName(name, useLoticsLocale().avatar.unknown);
   // THE TEXT FOLLOWS THE RUNG. `size` used to scale the avatar alone, so a chip
   // asked for the dense rung got a 24px avatar beside a 14px name — half-dense,
   // and the mismatch surfaces wherever the chip sits INSIDE a sentence: a 12px
@@ -58,6 +92,19 @@ export function MemberChip({
   // Only `sm` steps down, because only `sm` claims to be dense; every larger
   // rung keeps the body size, where a person's name belongs.
   const textSize = size === "sm" ? "xs" : "sm";
+  // ONE RUNG BELOW the name. It used to share the name's rung, so a chip's two
+  // lines were the same size AND the same weight and differed only in ink — the
+  // flattest a subject-over-supporting pair can be, and unreadable as a pair at
+  // a glance. `xs` is the ramp's floor, which is why the dense `sm` chip's two
+  // lines sit level: there is nothing under it to step to.
+  const secondarySize = "xs";
+  // TIGHT ONLY WHEN THERE IS A PAIR. Prose leading puts a 24px box around 14px
+  // text, so two stacked lines carried ~10px of empty box between the glyphs and
+  // read as two separate things rather than one person — see `Text.leading`,
+  // which exists for exactly this and asks for BOTH lines of the pair. A lone
+  // name is not a pair, and leaving it on prose leading keeps every single-line
+  // chip — every picker option, every cell — pixel-identical to before.
+  const pairLeading = secondary ? ("tight" as const) : undefined;
   return (
     <View style={[styles.row, style]}>
       <Avatar size={size} name={displayName} source={image ? { uri: image } : undefined} />
@@ -65,13 +112,36 @@ export function MemberChip({
         <Text
           userSelect="none"
           size={textSize}
+          // MEDIUM, never semibold: a chip is a ROW SUBJECT, and semibold is the
+          // heading ladder's weight (`MemberProfileCard`'s name is a heading and
+          // takes it). At `regular` the name was indistinguishable from its own
+          // supporting line except by colour.
+          weight="medium"
+          leading={pairLeading}
+          // NEUTRAL underline, never the navigation blue: pressing this opens
+          // the person in place rather than travelling to them, and blue
+          // underlined text promises a destination.
+          decoration={marker ? "underline" : undefined}
           color={inactive ? "zinc-500" : undefined}
           numberOfLines={1}
         >
           {displayName}
         </Text>
         {secondary ? (
-          <Text userSelect="none" size={textSize} color="zinc-500" numberOfLines={1}>
+          <Text
+            userSelect="none"
+            size={secondarySize}
+            leading={pairLeading}
+            // `muted`, the kit's supporting-text TOKEN, not the raw `zinc-500`
+            // this used to carry. Two things were wrong with the raw value: it
+            // is the minority spelling of a colour the kit names 137 times as
+            // `muted`, and `inactive` above resolves to zinc-500 too — so on a
+            // departed member the muted NAME and this line came out the same
+            // ink and the mute stopped signalling anything. An ink is a
+            // MEANING; two meanings may not share one.
+            color="muted"
+            numberOfLines={1}
+          >
             {secondary}
           </Text>
         ) : null}

package/src/member_peek.tsx

@@ -0,0 +1,91 @@
+import { StyleProp, ViewStyle } from "react-native";
+import type { AvatarSize } from "./avatar_size";
+import { MemberChip, memberDisplayName } from "./member_chip";
+import { MemberProfileCard, type MemberProfileCardProps } from "./member_profile_card";
+import { Peek } from "./peek";
+import type { PopoverAlign, PopoverSide } from "./popover";
+import { useLoticsLocale } from "./locale";
+
+export interface MemberPeekProps extends MemberProfileCardProps {
+  /** The chip's rung on the shared avatar scale — the TRIGGER's size, not the
+   *  card's (the card is always a profile header). Default `md`. */
+  size?: AvatarSize;
+  /** Optional secondary line on the CHIP. The card carries the full detail, so
+   *  reach for this only where the resting row needs it on its own. */
+  secondary?: string | null;
+  side?: PopoverSide;
+  align?: PopoverAlign;
+  /** Override the trigger's announced name. Defaults to the locale's
+   *  `memberProfile.profile(name)` — "Profile of Nguyễn Thị An". */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * A member chip that OPENS — press the person and their profile appears in
+ * place: bigger avatar, what they sign in as, their role, their teams.
+ *
+ * The composition is deliberately narrow (a `Peek` around a `MemberChip`, with
+ * `MemberProfileCard` as the body) and it is a named component anyway, because
+ * the three things a hand-rolled version gets wrong are invisible one at a
+ * time: the popover width, the announced name, and WHICH fields the card
+ * shows. Three call sites rolling their own give a workspace three different
+ * answers to "who is this".
+ *
+ * ### Where this must NOT go
+ *
+ * **Not inside a picker option.** `MemberSelect` and `InlineMemberSelect`
+ * render a `MemberChip` per option; a peek there pops an anchored popover over
+ * an anchored popover, at the one moment the reader is trying to CHOOSE rather
+ * than to browse. Option rows keep the plain chip.
+ *
+ * **Not inside a row that is itself pressable.** A `PressableRow` that opens a
+ * record, holding a chip that opens a card, puts two destinations behind one
+ * object — press the row, navigate; press four pixels left, peek — and the kit
+ * has removed that shape once already (see the reference field's interior
+ * verb, `composition.md`). Where a row already presses, let it press: the
+ * profile belongs on the record it opens.
+ *
+ * **Test the container, not its look.** "It is only a header" is not an answer:
+ * a `DataGrid` group band NAMES a person and reads perfectly inert, and it is a
+ * button that collapses the group — a peek there nests a button inside a button.
+ * Ask what the press would otherwise have done; if the answer is anything, the
+ * chip stays plain.
+ *
+ * That leaves the surfaces a peek is actually for: a person named in prose, a
+ * static header that does nothing, a detail row, a log or register whose ROWS do
+ * not navigate. In practice a fully interactive screen has none of them, and
+ * that is the correct outcome rather than a gap to work around.
+ *
+ * PURE — pass the member's fields in; this fetches nothing.
+ *
+ * ```tsx
+ * <MemberPeek name={m.name} image={m.image} identity={m.email} groups={m.groups} />
+ * ```
+ */
+export function MemberPeek(props: MemberPeekProps) {
+  const locale = useLoticsLocale();
+  const { size = "md", secondary, side, align, accessibilityLabel, style, ...card } = props;
+  const displayName = memberDisplayName(card.name, locale.avatar.unknown);
+  const words = { ...locale.memberProfile, ...card.labels };
+  return (
+    <Peek
+      accessibilityLabel={accessibilityLabel ?? words.profile(displayName)}
+      content={<MemberProfileCard {...card} />}
+      side={side}
+      align={align}
+    >
+      <MemberChip
+        name={card.name}
+        image={card.image}
+        secondary={secondary}
+        size={size}
+        inactive={card.inactive}
+        // This chip IS the door — without the marker it paints nothing at rest
+        // and only a pointer already on it would ever learn that.
+        marker
+        style={style}
+      />
+    </Peek>
+  );
+}

package/src/member_profile_card.tsx

@@ -0,0 +1,261 @@
+import { type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { Avatar } from "./avatar";
+import { DetailRow, DetailTable } from "./detail_row";
+import { Badge } from "./badge";
+import { Divider } from "./divider";
+import { Text } from "./text";
+import { memberDisplayName } from "./member_chip";
+import { useLoticsLocale, useLocaleTag } from "./locale";
+import { formatDate } from "./format_date";
+
+/** The card's own words — see `LoticsLocale.memberProfile`. */
+export interface MemberProfileLabels {
+  /** Row label for the organization role. */
+  role?: string;
+  /** Row label for the member's groups — the platform's "department". */
+  groups?: string;
+  /** Row label for when this person joined the organization. */
+  joined?: string;
+  /** Stands in for the groups VALUE when the member belongs to none. */
+  noGroups?: string;
+  /** Said under the name when this person has left the organization. */
+  inactive?: string;
+  /** Screen-reader name of the trigger that opens this card — used by
+   *  {@link MemberProfileCard}'s companion `MemberPeek`, which is why it lives
+   *  in this slice rather than Peek's: the words describe the CARD, not the
+   *  popover mechanism. */
+  profile?: (name: string) => string;
+}
+
+export interface MemberProfileCardProps {
+  /** Display name. Blank falls back to the locale's unknown label, exactly as
+   *  `MemberChip` does — the two render the same person. */
+  name?: string | null;
+  /** Avatar image URL. Absent → initials. */
+  image?: string | null;
+  /**
+   * What this person signs in as — an email address for a self-managed member,
+   * an administrator-issued name for an admin-managed one. Not labelled
+   * "Email" anywhere in the card, because for half the accounts in a workspace
+   * it is not one and cannot receive mail.
+   */
+  identity?: string | null;
+  /**
+   * The organization role, **already translated for display** ("Quản trị
+   * viên") — never the raw `owner`/`admin`/`member` enum.
+   *
+   * The kit carries no domain vocabulary and no i18n logic, so a role arrives
+   * as the word the product decided to show. It is also the one field here
+   * that a reader routinely mis-reads: a role is a PERMISSION level, not
+   * seniority, and "Admin" beside a name on a sales register says nothing
+   * about who that person is in the company. Pass it where it means
+   * something; omit it (the row disappears) where it does not.
+   */
+  role?: string | null;
+  /**
+   * The member's group names — what an org actually uses to say Sale, Kế toán,
+   * CSKH.
+   *
+   * ABSENT ≠ EMPTY, and the card renders the difference rather than flattening
+   * it: `undefined` drops the row entirely (this caller was never told — a
+   * public app response, an older server), while `[]` keeps the row and says
+   * so. Collapsing the two turns "we do not know" into the confident claim
+   * "they are on no team".
+   */
+  groups?: readonly string[] | null;
+  /**
+   * When this person joined the organization, as an ISO date or timestamp.
+   *
+   * A DATE, not a formatted string — unlike `role`, which is vocabulary only the
+   * product can translate, a date has a canonical form the kit already owns, so
+   * it renders through `formatDate` under the active locale. Two hosts left to
+   * format it themselves would drift ("March 2024" against "03/2024") for a
+   * value that means the same thing.
+   *
+   * Rendered as MONTH AND YEAR. The question it answers is "is this the new
+   * person?", and a day is more precision than that asks for — it also stops
+   * the row reading as an event the reader is meant to act on.
+   */
+  joined?: string | null;
+  /** This person has left the organization — shows the state as a badge and
+   *  mutes the name, so a record that still names them reads as history. */
+  inactive?: boolean;
+  /** ONE door to the fuller record ("View profile"). A peek that needs a second
+   *  verb wanted to be a screen. */
+  action?: ReactNode;
+  /** Per-instance overrides; anything omitted comes from the active locale. */
+  labels?: MemberProfileLabels;
+}
+
+/**
+ * THE CARD'S THREE TEXT CLASSES, named once so every line below picks from a
+ * system instead of being decided on its own.
+ *
+ * This is here because deciding per element is how the card ended up with four
+ * type sizes inside 200px, each defensible alone: a heading rung, a value rung,
+ * an identity line one step under the name, and a label rung "for a compact
+ * peek". Every one had a reason and the set had no shape, so each fix to one
+ * element left a neighbour unaligned and the surface never converged.
+ *
+ *   SUBJECT     the person — the only heading here
+ *   VALUE       any fact's content: the identity line, a row's value
+ *   SUPPORTING  anything that DESCRIBES a value rather than being one
+ *
+ * SUPPORTING shares VALUE's rung and separates by INK. In a label/value ROW the
+ * label is already identified by its column, so a size step would be a third
+ * signal for a distinction position and ink already carry — unlike a STACKED
+ * pair (see `MemberChip`), where top-to-bottom reading needs the step to say
+ * which line leads.
+ */
+const SUBJECT = { size: "lg", weight: "semibold" } as const;
+const VALUE = { size: "sm" } as const;
+const SUPPORTING = { size: "sm", color: "muted" } as const;
+
+/**
+ * WHO IS THIS PERSON — a bigger avatar, their name, what they sign in as, their
+ * role and their teams, in one card that reads identically everywhere.
+ *
+ * It is the body `MemberPeek` reveals, and the reason that body is a component
+ * rather than four lines at each call site: the interesting failure of a
+ * hand-composed profile is not that it looks different, it is that each copy
+ * picks a different SUBSET — one shows the email, the next the role, a third
+ * neither — so the same colleague answers a different question depending on
+ * which screen you met them on. That is the defect `AvatarSize` was written to
+ * fix for pixels, one level up.
+ *
+ * PURE: pass the fields in (an app feeds a `ResolvedMember`, the product feeds
+ * its member directory); this fetches nothing and knows no domain types.
+ *
+ * Rows appear only when their field does — a card with no role and no groups is
+ * a header and nothing else, which is the correct rendering of "that is all we
+ * were told", not a degraded one.
+ *
+ * ```tsx
+ * <MemberProfileCard
+ *   name={m.name}
+ *   image={m.image}
+ *   identity={m.email}
+ *   groups={m.groups}
+ *   action={<Button title="View profile" color="secondary" onPress={open} />}
+ * />
+ * ```
+ */
+
+export function MemberProfileCard(props: MemberProfileCardProps) {
+  const locale = useLoticsLocale();
+  const words = { ...locale.memberProfile, ...props.labels };
+  const { name, image, identity, role, groups, joined, inactive, action } = props;
+  const localeTag = useLocaleTag();
+
+  const displayName = memberDisplayName(name, locale.avatar.unknown);
+  // An empty string is a value nobody chose — a role that failed to resolve, an
+  // identity that came back blank. Treated as absent so the row disappears
+  // rather than rendering a labelled void.
+  const roleText = role?.trim() || null;
+  const identityText = identity?.trim() || null;
+  // `null` joins `undefined` in meaning "not told"; only a real array is data.
+  const groupList = groups ?? null;
+  // An unparseable date yields "" from `formatDate`, which drops the row rather
+  // than printing an empty labelled slot — same rule as an empty role.
+  const joinedText = joined ? formatDate(joined, { format: "monthYear", locale: localeTag }) : "";
+  const hasRows = roleText !== null || groupList !== null || joinedText !== "";
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        {/* `xl` is the rung documented for "a profile's own header", and this is
+            one. The chip that opens this card is `md` (28) — a preview whose
+            avatar is the same size as its trigger's has not previewed
+            anything. */}
+        <Avatar size="xl" name={displayName} source={image ? { uri: image } : undefined} />
+        <View style={styles.identity}>
+          {/* SUBJECT — the card's one heading, and its whole hierarchy. At body
+              size it was separated from its own identity line by WEIGHT alone,
+              which is a separate font file rather than a step, and the surface
+              measured 1.17x — flatter than a register with no page band. */}
+          <Text {...SUBJECT} color={inactive ? "zinc-500" : undefined} numberOfLines={2}>
+            {displayName}
+          </Text>
+          {identityText ? (
+            <Text {...SUPPORTING} numberOfLines={2}>
+              {identityText}
+            </Text>
+          ) : null}
+          {inactive ? (
+            // A BADGE, not another muted line. Departed is a lifecycle STATE and
+            // this is the one status the card can carry, which is precisely what
+            // a badge is for — as a `SUPPORTING` line it wore the identical
+            // treatment to the email above it, so a state and a piece of
+            // metadata read as the same kind of thing and the state lost.
+            //
+            // No `color`: departed is neutral, not a danger. `alignSelf` because
+            // a tonal pill stretches to its container otherwise — see `Badge`.
+            <Badge variant="tonal" label={words.inactive} style={styles.status} />
+          ) : null}
+        </View>
+      </View>
+
+      {hasRows ? (
+        <>
+          <Divider />
+          {/* A SHORT label column, and it is load-bearing rather than taste:
+              `DetailTable` stacks itself when the columns would crush the value
+              below `minValueWidth` (160), and the kit's default label column
+              (130) plus that floor plus the gutter exceeds the width a peek has
+              to give. At the default every row in this card would render
+              stacked — correct-looking in isolation, and quietly nothing like
+              the same card in a drawer. */}
+          <DetailTable labelWidth={64} minHeight={24}>
+            {roleText !== null ? (
+              <DetailRow label={words.role} flat>
+                <Text {...VALUE}>{roleText}</Text>
+              </DetailRow>
+            ) : null}
+            {joinedText !== "" ? (
+              <DetailRow label={words.joined} flat>
+                <Text {...VALUE}>{joinedText}</Text>
+              </DetailRow>
+            ) : null}
+            {groupList !== null ? (
+              <DetailRow label={words.groups} flat>
+                {groupList.length > 0 ? (
+                  // Joined, not one chip per group: a group is a CATEGORY, and
+                  // `Badge`'s own contract reserves it for status ("if you're
+                  // adding a Badge to show more info, that's text"). Text also
+                  // wraps predictably where a pill row reflows.
+                  <Text {...VALUE}>{groupList.join(", ")}</Text>
+                ) : (
+                  // The one place a VALUE wears the supporting ink: "None" is
+                  // the absence of a value, not one.
+                  <Text {...SUPPORTING}>{words.noGroups}</Text>
+                )}
+              </DetailRow>
+            ) : null}
+          </DetailTable>
+        </>
+      ) : null}
+
+      {action ? (
+        <>
+          <Divider />
+          {action}
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: { gap: 10 },
+  // Centered: the avatar is the tallest thing here by a wide margin, and a
+  // top-aligned two-line name beside a 72px circle reads as a caption that
+  // slipped.
+  header: { flexDirection: "row", alignItems: "center", gap: 12 },
+  identity: { flex: 1, minWidth: 0, gap: 1, alignItems: "flex-start" },
+  // The pill sits on its own line under the identity rather than beside the
+  // name: at this width a 20px name plus a tonal pill overruns the 236px text
+  // column and wraps, and a status that wraps under its own subject reads as a
+  // third line rather than as the subject's state.
+  status: { marginTop: 4 },
+});

package/src/record_summary.tsx

@@ -26,7 +26,8 @@ export interface RecordSummaryMetric {
 }
 
 export interface RecordSummaryProps {
-  /** The record's id/name — xl semibold, tabular so ids align across records. */
+  /** The record's id/name — `xxl` semibold (the ramp's `#`), tabular so ids
+   *  align across records. */
   title: string;
   /** Heading level of the title (`role="header"` + aria-level). Default 1 —
    *  the record page's one h1; pass 2 when the band sits inside a surface