@lotics/ui 7.7.0 → 7.9.0

package/examples/tpl_record_plain.tsx

@@ -83,7 +83,7 @@ export function TplRecordPlain() {
   const money = (v: number | null) => (v == null ? "" : `$${v.toLocaleString("en-US")}`);
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 560, alignSelf: "center", gap: 28 }}>
         <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
           <Text size="xl" weight="semibold">

package/examples/tpl_report.tsx

@@ -217,7 +217,7 @@ export function TplReport() {
   ];
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
         {/* header band — title + the persistent period + the one primary action */}
         <View style={{ flexDirection: "row", gap: 16, alignItems: "flex-start", flexWrap: "wrap", zIndex: 20 }}>

package/examples/tpl_rollup.tsx

@@ -143,7 +143,7 @@ export function TplRollup() {
   const openLane = open ? open.site.lanes[open.idx] : null;
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 980, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ gap: 2 }}>

package/examples/tpl_settings.tsx

@@ -89,7 +89,7 @@ export function TplSettings() {
 
   return (
     <ScrollView
-      style={{ flex: 1, backgroundColor: colors.zinc[50] }}
+      style={{ flex: 1, backgroundColor: colors.white }}
       contentContainerStyle={{ padding: 28 }}
     >
       <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>

package/examples/tpl_shifts.tsx

@@ -181,7 +181,7 @@ export function TplShifts() {
     filled >= req ? solid("emerald") : filled === 0 ? solid("red") : solid("amber");
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ gap: 2 }}>

package/examples/tpl_stock.tsx

@@ -188,7 +188,7 @@ export function TplStock() {
   ];
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>

package/examples/tpl_task_board.tsx

@@ -40,7 +40,7 @@ type TagOption = { value: string; label: string };
 // Template · Task board — the manager's view, built on the `DataGrid` primitive
 // (the inline-managed grouped table). The board OWNS its data, state, toolbar,
 // columns and per-group add; `DataGrid` owns the sortable header, the collapsible
-// grouped sections and the aligned rows. Sibling: tpl_pipeline (same shape, deals).
+// grouped sections and the aligned rows.
 // Moderate data only — for 10k+ records you browse, use the paginated register.
 // ─────────────────────────────────────────────────────────────────────────────
 
@@ -552,6 +552,6 @@ const styles = StyleSheet.create({
   result: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40 },
   // Fills the cell (height + width) so the link's hit area matches the inline cells.
   action: { justifyContent: "center", minHeight: 40, paddingHorizontal: 8, borderRadius: 8, cursor: "pointer" },
-  actionHover: { backgroundColor: colors.zinc[50] },
+  actionHover: { backgroundColor: colors.white },
   source: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
 });

package/examples/tpl_tasks.tsx

@@ -426,7 +426,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
     borderRadius: 10,
   },
-  rowHover: { backgroundColor: colors.zinc[50] },
+  rowHover: { backgroundColor: colors.white },
   // The expand affordance — its own button (meta + chevron), sibling to the ring
   // and title so no interactive control nests inside another.
   expand: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 36, paddingHorizontal: 8, borderRadius: 8 },

package/examples/tpl_timeline.tsx

@@ -206,7 +206,7 @@ export function TplTimeline() {
     .filter((d) => d.events.length > 0);
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>

package/examples/tpl_tower.tsx

@@ -162,7 +162,7 @@ export function TplTower() {
     : 0;
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ gap: 2 }}>

package/examples/tpl_triage.tsx

@@ -54,7 +54,7 @@ export function TplTriage() {
   const review = open.filter((r) => r.confidence !== "high").length;
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 820, alignSelf: "center", gap: 16 }}>
         <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
           <View style={{ flex: 1, gap: 2 }}>

package/examples/tpl_wizard.tsx

@@ -86,7 +86,7 @@ export function TplWizard() {
   const goEdit = (s: number) => setStep(s);
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
         <View style={{ gap: 2 }}>
           <Text size="xl" weight="semibold">New partner application</Text>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.7.0",
+  "version": "7.9.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -29,6 +29,7 @@
     "./image_gallery": "./src/image_gallery.tsx",
     "./rotatable_image": "./src/rotatable_image.tsx",
     "./use_image_rotation": "./src/use_image_rotation.ts",
+    "./use_selection": "./src/use_selection.ts",
     "./use_selection_mode": "./src/use_selection_mode.ts",
     "./file_thumbnail_grid": "./src/file_thumbnail_grid.tsx",
     "./uploading_thumbnail": "./src/uploading_thumbnail.tsx",
@@ -44,6 +45,7 @@
     "./section_card": "./src/section_card.tsx",
     "./kpi_card": "./src/kpi_card.tsx",
     "./kpi_strip": "./src/kpi_strip.tsx",
+    "./summary_line": "./src/summary_line.tsx",
     "./empty_state": "./src/empty_state.tsx",
     "./format_date": "./src/format_date.ts",
     "./format_money": "./src/format_money.ts",

package/src/card.tsx

@@ -16,6 +16,10 @@ interface CardProps {
  * for a pressable/selectable card use CardSelectItem (a real focusable button),
  * or compose PressableHighlight for a bespoke action.
  *
+ * A Card is ALWAYS a card — a bordered, lifted container that groups and
+ * separates. A work-execution register that wants a flat look uses NO Card (the
+ * register sits directly on the page); there is no "flat card".
+ *
  * Two shapes:
  * - Plain: `<Card>` with the default 20px padding, author owns the content.
  * - Banded: `<Card style={{ padding: 0 }}>` composed from the family slots —
@@ -140,26 +144,15 @@ export function CardFooter(props: CardFooterProps) {
 }
 
 const styles = StyleSheet.create({
+  // The bordered, lifted card — border anchors, shadow lifts; the shadow uses a
+  // warm-neutral tint (38,38,38), not pure black (premium signal).
   container: {
     padding: 20,
     borderRadius: 16,
-    // Clip banded content (full-bleed rows, their hover/selected wash) to the
-    // rounded corners. The CSS box-shadow below is painted outside the border
-    // box, so `overflow: hidden` on the same element doesn't clip it — the lift
-    // survives. In-card overlays (Peek/ActionMenu/Popover/Tooltip) are
-    // portaled, so they aren't clipped either.
     overflow: "hidden",
     backgroundColor: colors.background,
-    // 1px hairline + 2-layer shadow: the research-validated default across
-    // shadcn/ui, Geist, Tailwind v4. Without either, cards on a near-white
-    // page bg float without rhythm. Border anchors; shadow lifts. The shadow
-    // uses warm-neutral tint (38,38,38), not pure black — premium signal vs
-    // cheap-feeling pure-black shadows.
     borderWidth: 1,
     borderColor: colors.zinc["200"],
-    // Slightly more visible than shadcn's `shadow-sm` — chosen because our
-    // page bg is `colors.background` (off-white), making `shadow-sm` nearly
-    // invisible. Stripe / Linear use this stronger value on similar bg.
     ...({
       boxShadow:
         "0 1px 2px 0 rgba(38,38,38,0.06), 0 4px 12px -2px rgba(38,38,38,0.06)",

package/src/combobox.tsx

@@ -182,7 +182,13 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
   const single = value ?? null;
   const reflectedText = single ? (single.label ?? single.value) : "";
 
-  const [query, setQuery] = useState(reflectSelection && single ? reflectedText : "");
+  // The live edit buffer. `null` = the user isn't editing: the input reflects the
+  // committed selection's label and the list browses the FULL set. A string (incl.
+  // "") = the user is searching: the input shows it and the list filters by it.
+  // This one nullable carries the bit that (value, inputText) alone can't — after
+  // selecting FPP, the input reads "FPP" whether the user just reopened (browse)
+  // or retyped it (filter); `draft` is null in the first case, "FPP" in the second.
+  const [draft, setDraft] = useState<string | null>(null);
   const [open, setOpen] = useState(autoFocus);
   const triggerRef = useRef<View>(null);
   const inputRef = useRef<RNTextInput>(null);
@@ -197,9 +203,11 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
   const isServer = onSearchChange !== undefined;
   const debouncedSearch = useDebouncedCallback(onSearchChange ?? (() => {}), searchDebounceMs);
 
-  // The displayed text equals the reflected selection until the user types — show
-  // ALL options then (browse), not the list filtered to the selected label.
-  const filterQuery = reflectSelection && single && query === reflectedText ? "" : query;
+  // What the input shows: the live draft while editing, else the reflected label.
+  const inputText = draft ?? (reflectSelection && single ? reflectedText : "");
+  // What the list filters by: nothing while reflecting a selection (browse), the
+  // draft while editing — so retyping the selected label still filters to it.
+  const filterQuery = draft ?? "";
 
   const findOption = useCallback(
     (val: T): PickerOption<T, D> =>
@@ -215,7 +223,9 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
         debouncedSearch.cancel();
         onSearchChange?.("");
       }
-      setQuery(reflectSelection ? (opt.label ?? opt.value) : "");
+      // Stop editing — the input reflects the new label (or clears, when
+      // reflectSelection is off) and the next open browses the full set.
+      setDraft(null);
       setOpen(false);
       // The refocus below must not reopen the just-closed menu.
       suppressFocusOpenRef.current = true;
@@ -247,7 +257,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
 
   const handleChangeText = useCallback(
     (text: string) => {
-      setQuery(text);
+      setDraft(text);
       if (!disabled) setOpen(true);
       if (isServer) debouncedSearch(text);
     },
@@ -285,7 +295,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     // Boundary cast: the engine is generic per-instance, the context type is not.
     // `ComboboxContent` casts back to its own `<T, D>` before touching rows.
     list: list as unknown as UseOptionList<string, unknown>,
-    query,
+    query: inputText,
     open,
     showList,
     loading,
@@ -349,9 +359,14 @@ export interface ComboboxInputProps {
 export function ComboboxInput(props: ComboboxInputProps) {
   const { icon, placeholder, clearable = false, onClear, clearLabel, accessibilityLabel, testID } = props;
   const ctx = useComboboxContext("ComboboxInput");
-  // Select mode (no leading icon): a trailing chevron so the field reads as a
-  // picker, not a free-text search. The clear ✕ owns the right slot when present.
-  const showChevron = !icon && !clearable;
+  // Select mode (no leading icon): the right slot holds the clear ✕ when the field
+  // carries text (a reflected selection or a live query) AND it's clearable;
+  // otherwise the trailing chevron, so an EMPTY picker still reads as a picker.
+  // The two never show together — ✕ replaces the chevron once there's something to
+  // clear, and pressing it resets the query + reopens the browse list (via
+  // `handleChangeText("")`) so the consumer's `onClear` lands back on the full set.
+  const showClear = clearable && ctx.query.length > 0;
+  const showChevron = !icon && !showClear;
 
   return (
     <View ref={ctx.triggerRef}>
@@ -375,7 +390,9 @@ export function ComboboxInput(props: ComboboxInputProps) {
         autoCorrect={false}
         accessibilityLabel={accessibilityLabel}
         style={[
-          showChevron ? styles.selectInput : undefined,
+          // Select mode reserves the right gutter for whichever trailing affordance
+          // is up (chevron when empty, ✕ when there's text) so neither overlaps it.
+          !icon ? styles.selectInput : undefined,
           // Gate on `showList`, not `open`: an empty query with no options has
           // `open=true` but renders NO dropdown, so a ring tied to `open` would
           // show with nothing below it AND linger after blur (no popover fires a

package/src/data_grid.tsx

@@ -52,7 +52,7 @@ export interface DataGridProps<T> {
  * (search · group-by · filters), the per-group add (`renderGroupFooter`), and every
  * CELL (`columns[].cell` renders ANY field). It renders ALL rows — no pagination /
  * virtualization — so it's for hundreds, low-thousands; at 10k+ use the register.
- * Worked examples: `tpl_task_board`, `tpl_pipeline`.
+ * Worked example: `tpl_task_board`.
  */
 export function DataGrid<T>(props: DataGridProps<T>) {
   const { columns, groups, getRowKey, leading, sort, onSort, labels, collapsed, onToggleCollapse, renderGroupFooter } = props;

package/src/kpi_strip.tsx

@@ -34,11 +34,11 @@ export interface KPIStripProps {
 }
 
 /**
- * THE stat band at the top of a screen — one Card, hairline-divided columns
- * of KPICard with a uniform value scale. Screens must not hand-compose stat
- * strips: the same four-numbers-in-a-row should look identical on a
- * dashboard, an inventory register, or a payroll page. Wraps on narrow
- * screens (columns keep a 180px floor).
+ * THE dashboard stat band — one Card, hairline-divided columns of KPICard with a
+ * uniform value scale, at the TOP of a DASHBOARD page. It is NOT for register /
+ * list pages: a list summarizes the FILTERED view with the light inline
+ * `SummaryLine` below its toolbar, never this boxed metric grid. Screens must
+ * not hand-compose stat bands. Wraps on narrow screens (columns keep a 180px floor).
  */
 export function KPIStrip(props: KPIStripProps) {
   const { items, size = "lg" } = props;

package/src/pressable_row.tsx

@@ -11,16 +11,19 @@ export interface PressableRowProps {
    *  it's the resting state of a ticked row in a bulk-select register. */
   marked?: boolean;
   /**
-   * - "bleed" (default): the standalone REGISTER row — px-20, square wash to
-   *   the card edges, separated by full-bleed `Divider`s. The one pattern for
-   *   top-level record lists.
+   * - "register" (THE record-list default): a rounded row whose hover/open/`marked`
+   *   wash spans the FULL row width (incl. nested controls); content stays on the
+   *   20px column gutter so a `Table` header and its cells still align. The `Table`
+   *   separates rows with a `Divider` (the wash is the hover/selection state, the
+   *   hairline the resting separation) — every app inherits this register look.
+   * - "bleed" (legacy): px-20, square wash to the edges, `Divider`-separated.
+   *   The pre-rounded register row — kept for an edge-to-edge data grid that
+   *   genuinely wants hard rules, not the floating default.
    * - "inset": a rounded, contained row — the wash is a rounded pill pulled in
    *   from the edge (radius 8, marginH -8). Lives inside a padded container (an
-   *   `Accordion`'s drill-down rows, or a gap-separated selectable list) so the
-   *   wash insets from the card edge instead of bleeding to it. Use when rows are
-   *   GAP-separated rather than `Divider`-separated.
+   *   `Accordion`'s drill-down rows, or a gap-separated selectable list).
    */
-  variant?: "bleed" | "inset";
+  variant?: "register" | "bleed" | "inset";
   /** Cells + trailing controls. Nested pressables (CTAs, checkboxes, ⋯)
    * claim their own presses; put the accessible door inside — a plain
    * `Pressable` with role="button" + "Open …" label around the row body. */
@@ -42,7 +45,7 @@ export interface PressableRowProps {
  * `variant` picks bleed (registers) or inset (Accordion drill-down rows).
  */
 export function PressableRow(props: PressableRowProps) {
-  const { onPress, selected = false, marked = false, variant = "bleed", children, style } = props;
+  const { onPress, selected = false, marked = false, variant = "register", children, style } = props;
   const [hovered, setHovered] = useState(false);
 
   // RN's types don't declare mouse handlers; react-native-web forwards them
@@ -62,7 +65,7 @@ export function PressableRow(props: PressableRowProps) {
       {...mouseProps}
       style={({ pressed }) => [
         styles.row,
-        variant === "inset" ? styles.inset : styles.bleed,
+        variant === "inset" ? styles.inset : variant === "bleed" ? styles.bleed : styles.register,
         {
           backgroundColor: pressed ? colors.zinc[200] : selected ? colors.zinc[100] : hovered ? colors.zinc[100] : marked ? colors.blue[50] : undefined,
         },
@@ -81,7 +84,16 @@ const styles = StyleSheet.create({
     gap: 12,
     ...({ cursor: "pointer", userSelect: "none", transitionDuration: "0.1s", transitionProperty: "background-color" } as ViewStyle),
   },
-  // Square, full-bleed — lines up with the Dividers between register rows.
+  // THE register row — FULL-WIDTH rounded highlight. The hover/selected wash
+  // spans the entire row (so the pressable area === the row, never narrower than
+  // the dividers around it) and rounds (radius 10); content sits on the 20px
+  // column gutter so a Table header + cells align. The Divider between rows (the
+  // Table renders it) is the resting separation; this wash is the hover state.
+  register: {
+    borderRadius: 10,
+    paddingHorizontal: 20,
+  },
+  // Square, full-bleed — lines up with the Dividers between register rows. Legacy.
   bleed: {
     paddingHorizontal: 20,
   },

package/src/sort_header.tsx

@@ -77,18 +77,23 @@ export function SortHeader(props: SortHeaderProps) {
   const { label, sortKey, sort, onSort, align = "left", style, labels } = props;
   const loc = useLoticsLocale().sortHeader;
   const active = sort?.key === sortKey;
-  const arrow = active ? (sort.dir === "asc" ? "chevron-up" : "chevron-down") : undefined;
+  // Always show a sort glyph so every sortable column READS as sortable — a faint
+  // up/down hint at rest, the solid direction chevron once active. (Before, the
+  // affordance only appeared after sorting, so columns looked un-sortable.)
+  const glyph = active ? (sort.dir === "asc" ? "chevron-up" : "chevron-down") : "chevrons-up-down";
+  const glyphColor = active ? colors.zinc[600] : colors.zinc[400];
   const dirText = active ? (sort.dir === "asc" ? (labels?.ascending ?? loc.ascending) : (labels?.descending ?? loc.descending)) : "";
   const sortByLabel = (labels?.sortBy ?? loc.sortBy)(label);
 
   return (
     <PressableHighlight
-      focusRing      accessibilityRole="button"
+      focusRing
+      accessibilityRole="button"
       accessibilityLabel={`${sortByLabel}${dirText}`}
       onPress={() => onSort(sortKey)}
       style={[styles.header, align === "right" ? styles.right : null, style]}
     >
-      {align === "right" && arrow ? <Icon name={arrow} size={12} color={colors.zinc[500]} /> : null}
+      {align === "right" ? <Icon name={glyph} size={12} color={glyphColor} /> : null}
       <Text
         size="xs"
         color={active ? "default" : "muted"}
@@ -98,7 +103,7 @@ export function SortHeader(props: SortHeaderProps) {
       >
         {label}
       </Text>
-      {align === "left" && arrow ? <Icon name={arrow} size={12} color={colors.zinc[500]} /> : null}
+      {align === "left" ? <Icon name={glyph} size={12} color={glyphColor} /> : null}
     </PressableHighlight>
   );
 }

package/src/summary_line.tsx

@@ -0,0 +1,76 @@
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { Metric, type MetricFormat, type MetricTone } from "./metric";
+import { TrendChip } from "./trend_chip";
+import { InfoPopover } from "./info_popover";
+
+export interface SummaryLineItem {
+  /** Label that reads AFTER the value ("below minimum", "stock value"). */
+  label: string;
+  value: number | string | null | undefined;
+  format?: MetricFormat;
+  currency?: string;
+  locale?: string;
+  emptyLabel?: string;
+  tone?: MetricTone;
+  /** Abbreviate large values (≥1 triệu → "486 tr"). */
+  compact?: boolean;
+  /** Optional ±% trend chip. */
+  trend?: number | null;
+  /** What this metric means — the ⓘ next to the value opens it in a popover. */
+  info?: string;
+}
+
+export interface SummaryLineProps {
+  items: SummaryLineItem[];
+}
+
+/**
+ * A LIGHT, inline "value label" summary of the CURRENT view — sits BETWEEN the
+ * toolbar and a register/list and is recomputed from the FILTERED rows, so it
+ * always describes WHAT'S SHOWN (not the whole dataset). This is NOT the
+ * dashboard stat band: that's `KPIStrip` (a boxed metric grid for dashboard
+ * pages, left untouched). Here there's no card, no big numbers, no column rules
+ * — a small `Metric` value + a muted label, items wrapping, separated by space.
+ */
+export function SummaryLine(props: SummaryLineProps) {
+  const { items } = props;
+  return (
+    <View style={styles.row}>
+      {items.map((item) => (
+        <View key={item.label} style={styles.item}>
+          <Metric
+            value={item.value}
+            format={item.format}
+            currency={item.currency}
+            locale={item.locale}
+            emptyLabel={item.emptyLabel}
+            compact={item.compact}
+            tone={item.tone}
+            size="sm"
+          />
+          <Text size="sm" color="muted">
+            {item.label}
+          </Text>
+          {item.trend != null ? <TrendChip value={item.trend} /> : null}
+          {item.info ? <InfoPopover text={item.info} accessibilityLabel={`About ${item.label}`} /> : null}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center",
+    columnGap: 22,
+    rowGap: 8,
+  },
+  item: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+});

package/src/table.tsx

@@ -9,8 +9,9 @@ import {
 } from "react";
 import { StyleSheet, View, Pressable, type ViewStyle } from "react-native";
 import { Text } from "./text";
-import { Divider } from "./divider";
+import { colors } from "./colors";
 import { PressableRow } from "./pressable_row";
+import { Divider } from "./divider";
 import { SortHeader, type SortState, type SortHeaderLabels } from "./sort_header";
 import { FOCUS_RING } from "./control_surface";
 import { useFocusRing } from "./use_focus_ring";
@@ -54,6 +55,9 @@ export interface TableProps {
   onSort?: (key: string) => void;
   /** Localized a11y strings for the sortable headers. Omit to keep English. */
   sortLabels?: SortHeaderLabels;
+  /** A node for the header's leading gutter — a select-all `CheckboxInput` aligned over
+   * the rows' `leading` checkboxes. Set `leading` too, to reserve the gutter width. */
+  selectAll?: ReactNode;
   /** Reserve a leading gutter (px) for rows that render a `leading` slot (a checkbox). */
   leading?: number;
   /** Reserve a trailing gutter (px) for rows that render a `trailing` slot (a ⋯ / button). */
@@ -71,13 +75,13 @@ export interface TableProps {
  * non-columnar list (entity piles, card stacks) use `PressableRow` directly.
  */
 export function Table(props: TableProps) {
-  const { columns, sort, onSort, sortLabels, leading = 0, trailing = 0, children } = props;
+  const { columns, sort, onSort, sortLabels, selectAll, leading = 0, trailing = 0, children } = props;
   const rows = Children.toArray(children).filter(isValidElement);
 
   return (
     <TableContext.Provider value={{ columns, leading, trailing }}>
       <View style={styles.headerBand}>
-        {leading > 0 ? <View style={{ width: leading }} /> : null}
+        {leading > 0 ? <View style={{ width: leading }}>{selectAll}</View> : null}
         {columns.map((col) => (
           <View key={col.key} style={colStyle(col)}>
             {col.label ? (
@@ -93,12 +97,14 @@ export function Table(props: TableProps) {
         ))}
         {trailing > 0 ? <View style={{ width: trailing }} /> : null}
       </View>
-      {rows.map((row, i) => (
-        <View key={(row as ReactElement).key ?? i}>
-          <Divider />
-          {row}
-        </View>
-      ))}
+      <View style={styles.body}>
+        {rows.map((row, i) => (
+          <View key={i}>
+            {i > 0 ? <Divider /> : null}
+            {row}
+          </View>
+        ))}
+      </View>
     </TableContext.Provider>
   );
 }
@@ -107,6 +113,8 @@ export interface TableRowProps {
   /** Opens the record (the drawer). The door + the full-row surface both call it. */
   onPress?: () => void;
   selected?: boolean;
+  /** Part of a multi-select set — a resting blue tint (the open/hover wash overrides it). */
+  marked?: boolean;
   /** Accessible name for the door (the keyboard-focusable open target). */
   accessibilityLabel?: string;
   /** Outside the door, BEFORE the cells (a selection checkbox) — width = Table `leading`. */
@@ -127,7 +135,7 @@ export interface TableRowProps {
  * win. Cells map to `Table`'s columns by position.
  */
 export function TableRow(props: TableRowProps) {
-  const { onPress, selected, accessibilityLabel, leading, trailing, minHeight = 52, children } = props;
+  const { onPress, selected, marked, accessibilityLabel, leading, trailing, minHeight = 52, children } = props;
   const ctx = useContext(TableContext);
   if (!ctx) throw new Error("TableRow must be used within a Table");
 
@@ -137,7 +145,7 @@ export function TableRow(props: TableRowProps) {
   const { focusVisible, focusProps } = useFocusRing();
 
   return (
-    <PressableRow onPress={onPress ?? noop} selected={selected} style={styles.row}>
+    <PressableRow onPress={onPress ?? noop} selected={selected} marked={marked} style={styles.row}>
       {ctx.leading > 0 ? <View style={{ width: ctx.leading }}>{leading}</View> : null}
       <Pressable
         accessibilityRole={onPress ? "button" : undefined}
@@ -168,12 +176,20 @@ export function TableCell(props: TableCellProps) {
 const noop = () => {};
 
 const styles = StyleSheet.create({
+  // A hairline under the column header anchors the columns; the rows below it are
+  // Divider-separated.
   headerBand: {
     paddingHorizontal: 20,
     paddingVertical: 10,
     flexDirection: "row",
     alignItems: "center",
     gap: 14,
+    borderBottomWidth: 1,
+    borderColor: colors.border,
+  },
+  // Rows are Divider-separated — the hairline between rows is the separation.
+  body: {
+    gap: 0,
   },
   row: {
     gap: 14,