@lotics/ui 44.1.0 → 44.3.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/ai_patterns.md

@@ -108,6 +108,7 @@ Key props (full API: `../src/composer.tsx`):
 | `footerRight` | Footer-right content before Send (a model picker); forces expanded |
 | `maxLines` | Expanded growth cap before the input scrolls (default 10) |
 | `sendLabel` / `stopLabel` | Accessible/tooltip labels (default English "Send"/"Stop" — pass translations) |
+| `highlightRanges` | Character ranges of `value` to tint. What a range MEANS is yours — the composer paints a ground behind those characters and nothing more. It renders a mirror BEHIND the real field rather than styling the field itself, so the browser stays the editor and IME, undo, paste and selection are untouched; omit the prop and no mirror is rendered at all |
 | `textInputProps` | Extra `TextInput` props; a consumer `onKeyPress` runs before Enter-to-send and can `preventDefault()` to suppress it |
 
 For a run that needs a FILE + a prompt together (attach a photo, review/remove it, add a note,

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
 
@@ -1562,6 +1599,11 @@ component rather than showing it at zero.
 - **`matrix_totals`** — the data layer for `Matrix`: `matrixTotals` (the cross-tab
   aggregation) + `MatrixAxisItem` / `MatrixCellRef` / `MatrixTotalsResult`; React-free, so a
   KPI can be driven off the same numbers the grid shows.
+- **`highlight_segments`** — `splitHighlightSegments`: cuts a string into plain and
+  highlighted runs for `Composer`'s `highlightRanges`. React-free, and the reason it is
+  separate: it feeds a mirror sitting behind a real text field, so a boundary off by one
+  paints the tint adrift while everything still looks like a working composer. Overlapping,
+  unsorted and out-of-bounds ranges all normalize; no input drops a character.
 - **`legend_item`** — `LegendItem`: one swatch + label of a chart legend.
 - **`remainder_meter`** — `RemainderMeter`: allocated-vs-remaining meter
   (`RemainderMeterLabels` localized via the provider).

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.3.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/composer.tsx

@@ -1,9 +1,19 @@
-import React, { type ReactNode, type Ref, useCallback, useEffect, useState } from "react";
-import { View, TextInput as RNTextInput, ScrollView, StyleSheet, type TextInputProps } from "react-native";
+import React, { type ReactNode, type Ref, useCallback, useEffect, useMemo, useState } from "react";
+import {
+  View,
+  Text as RNText,
+  TextInput as RNTextInput,
+  ScrollView,
+  StyleSheet,
+  type NativeSyntheticEvent,
+  type TextInputProps,
+  type TextInputScrollEventData,
+} from "react-native";
 import { IconButton } from "./icon_button";
 import { colors } from "./colors";
 import { Text } from "./text";
 import { fontFamilyRegular, getInputTextStyle, INPUT_LETTER_SPACING } from "./text_utils";
+import { splitHighlightSegments, type HighlightRange } from "./highlight_segments";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 import { useLoticsLocale } from "./locale";
 
@@ -43,6 +53,10 @@ export interface ComposerProps {
   /** Control text externally; omit to let the composer manage its own state. */
   value?: string;
   onChangeText?: (text: string) => void;
+  /** Ranges of `value` to tint. What they MEAN is the caller's business — this
+   *  package never learns what a skill or a document is. Omit it and nothing is
+   *  rendered, so a consumer that never tints pays nothing. */
+  highlightRanges?: readonly HighlightRange[];
   /** Extra TextInput props (ref, onKeyPress, …). `onKeyPress` runs before the
    *  built-in Enter-to-send and can `preventDefault()` to suppress it. */
   textInputProps?: Partial<TextInputProps> & { ref?: Ref<RNTextInput> };
@@ -79,6 +93,7 @@ export function Composer(props: ComposerProps) {
     autoFocus,
     testID,
     textInputProps,
+    highlightRanges,
     pills,
     files,
     children,
@@ -186,12 +201,85 @@ export function Composer(props: ComposerProps) {
   // padding; `measureScrollHeight` subtracts that padding, so wrap-detection is
   // unaffected. Growth past one line is the EXPANDED layout's job (up to maxLines).
   const compactPadV = Math.max(2, Math.round((COMPACT_INPUT_HEIGHT - lineHeight) / 2));
+
+  // Null — not an empty array — when there is nothing to tint, so the mirror is
+  // not rendered at all for the ordinary message or for a consumer that never
+  // passes ranges.
+  const highlightSegments = useMemo(
+    () =>
+      highlightRanges && highlightRanges.length > 0
+        ? splitHighlightSegments(text, highlightRanges)
+        : null,
+    [text, highlightRanges],
+  );
+  const [mirrorScrollY, setMirrorScrollY] = useState(0);
+  const handleInputScroll = useCallback(
+    (e: NativeSyntheticEvent<TextInputScrollEventData>) => {
+      // The two platforms report the offset in different places and neither has
+      // the other's: RN measures the content and sends `contentOffset`, while
+      // rn-web forwards the <textarea>'s DOM scroll event verbatim, where the
+      // only offset is the element's own `scrollTop`. Reading just the native
+      // shape type-checks — RN's types promise `contentOffset` — and then throws
+      // on the web, on every scroll tick, while the tint silently stops tracking
+      // the words in exactly the long message this handler exists to follow.
+      const native: Partial<TextInputScrollEventData> & { target?: { scrollTop?: number } } =
+        e.nativeEvent;
+      setMirrorScrollY(native.contentOffset?.y ?? native.target?.scrollTop ?? 0);
+    },
+    [],
+  );
   const field = (
     <View
       key="field"
       onLayout={measure}
       style={expanded ? { height: containerHeight } : [styles.field, { height: COMPACT_INPUT_HEIGHT }]}
     >
+      {highlightSegments ? (
+        // A MIRROR, not a replacement. The real <textarea> stays and keeps every
+        // behaviour the browser gives it — IME composition (this workspace types
+        // Vietnamese), undo, paste, spellcheck, selection, a11y — none of which
+        // survives a contentEditable rewrite. It renders TRANSPARENT text purely
+        // to lay out identically, and paints the tint behind the words the field
+        // is drawing on top; the field's own text and caret are untouched, so
+        // there is nothing here that can swallow a keystroke.
+        //
+        // Alignment is by construction: same text style object, same padding
+        // expressions, same width. It translates with the field's own scroll so
+        // the tint cannot drift once the message outgrows `maxLines`.
+        <View
+          pointerEvents="none"
+          style={[
+            StyleSheet.absoluteFill,
+            { overflow: "hidden" },
+            expanded ? null : { paddingHorizontal: 10, paddingVertical: compactPadV },
+          ]}
+        >
+          <RNText
+            testID="composer-highlight-mirror"
+            // The RAW react-native Text, never the kit's: `Text` bakes tracking
+            // per type-ramp rung, which quietly overrode the explicit
+            // `letterSpacing` the field uses and drifted the tint a fraction of
+            // a pixel per character — invisible on a short line, off the words
+            // by the end of a long one. The mirror takes the field's own style
+            // array and nothing else.
+            style={[
+              styles.textInput,
+              getInputTextStyle(),
+              { color: "transparent" },
+              { transform: [{ translateY: -mirrorScrollY }] },
+            ]}
+          >
+            {highlightSegments.map((segment, i) => (
+              <RNText
+                key={i}
+                style={segment.highlighted ? styles.highlightSegment : undefined}
+              >
+                {segment.text}
+              </RNText>
+            ))}
+          </RNText>
+        </View>
+      ) : null}
       <RNTextInput
         ref={mergedInputRef}
         autoFocus={autoFocus}
@@ -205,11 +293,19 @@ export function Composer(props: ComposerProps) {
         multiline
         scrollEnabled={expanded && scrollEnabled}
         onContentSizeChange={onContentSizeChange}
+        onScroll={highlightSegments ? handleInputScroll : undefined}
         {...spreadInputProps}
         onKeyPress={handleKeyPress}
         style={[
           styles.textInput,
           getInputTextStyle(),
+          // ABOVE the mirror. The mirror is absolutely positioned, and a
+          // positioned box paints over static in-flow content whatever the
+          // source order — so without this its tint is an opaque ground drawn
+          // ON TOP of the field, and the words inside a mention disappear
+          // entirely. Geometry and font metrics can all agree while this is
+          // wrong; only rendering the thing shows it.
+          { position: "relative" as const, zIndex: 1 },
           { outlineStyle: "none" },
           (!expanded || !scrollEnabled) && { overflow: "hidden" as const },
           expanded ? null : { paddingHorizontal: 10, paddingVertical: compactPadV },
@@ -348,4 +444,10 @@ const styles = StyleSheet.create({
     fontFamily: fontFamilyRegular,
     letterSpacing: INPUT_LETTER_SPACING,
   },
+  // A GROUND, not coloured text: the words on screen are the field's, drawn on
+  // top, so the tint has to sit behind them rather than replace them.
+  highlightSegment: {
+    backgroundColor: colors.blue[100],
+    borderRadius: 4,
+  },
 });

package/src/highlight_segments.ts

@@ -0,0 +1,61 @@
+export interface HighlightRange {
+  /** Index of the first highlighted character. */
+  start: number;
+  /** Index one past the last highlighted character. */
+  end: number;
+}
+
+export interface HighlightSegment {
+  text: string;
+  highlighted: boolean;
+}
+
+/**
+ * Cut `value` into alternating plain and highlighted runs.
+ *
+ * Split out from the composer because it is the part that can be wrong in a way
+ * nobody sees: the mirror it feeds sits behind a real text field, so a segment
+ * boundary off by one paints the tint half a character adrift and everything
+ * still looks like a working composer. Ranges arrive from a caller that is
+ * matching text it does not control, so overlapping, unsorted, reversed and
+ * out-of-bounds inputs are all normal here — none of them may drop or duplicate
+ * a character, because the mirror has to lay out identically to the field it
+ * sits behind or the tint drifts from the words.
+ */
+export function splitHighlightSegments(
+  value: string,
+  ranges: readonly HighlightRange[],
+): HighlightSegment[] {
+  if (value.length === 0) return [];
+
+  const clamped = ranges
+    .map((r) => ({
+      start: Math.max(0, Math.min(r.start, value.length)),
+      end: Math.max(0, Math.min(r.end, value.length)),
+    }))
+    .filter((r) => r.end > r.start)
+    .sort((a, b) => a.start - b.start);
+
+  // Overlaps merge rather than nest: two tints over one character would render
+  // twice as dark, and the caller's ranges are matches over shared text.
+  const merged: HighlightRange[] = [];
+  for (const range of clamped) {
+    const last = merged[merged.length - 1];
+    if (last && range.start <= last.end) last.end = Math.max(last.end, range.end);
+    else merged.push({ ...range });
+  }
+
+  const segments: HighlightSegment[] = [];
+  let cursor = 0;
+  for (const range of merged) {
+    if (range.start > cursor) {
+      segments.push({ text: value.slice(cursor, range.start), highlighted: false });
+    }
+    segments.push({ text: value.slice(range.start, range.end), highlighted: true });
+    cursor = range.end;
+  }
+  if (cursor < value.length) {
+    segments.push({ text: value.slice(cursor), highlighted: false });
+  }
+  return segments;
+}

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