@lotics/ui 7.8.0 → 7.10.0

package/examples/tpl_record_plain.tsx

@@ -1,11 +1,14 @@
 import { useState } from "react";
 import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
+import { colors, type ColorName } from "@lotics/ui/colors";
 import { SectionHeading, SectionHeadingTitle } from "@lotics/ui/section_heading";
 import { Divider } from "@lotics/ui/divider";
 import { DetailRow } from "@lotics/ui/detail_row";
 import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { DangerZone } from "@lotics/ui/danger_zone";
+import { InlineStatic } from "@lotics/ui/inline_static";
 import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { InlineNumberInput } from "@lotics/ui/inline_number_input";
 import { InlineSelect } from "@lotics/ui/inline_select";
@@ -13,10 +16,17 @@ import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
 import { InlineTimePicker } from "@lotics/ui/inline_time_picker";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Inline record (plain) — the same in-place record edit as the card
-// variant, but CARD-LESS: sections are set off by a clear `SectionHeading` + a
-// hairline and generous vertical rhythm, not card chrome. The lighter look for
-// a single full-screen record where banded cards would be visual noise.
+// Template · Inline record (plain) — a full record DRAWER, card-less. It reads
+// top → bottom like a real drawer: a HEADER surfacing the record's identity +
+// status + key facts, then the in-place inline fields, then a DANGER ZONE for
+// the destructive action. Sections are set off by a `SectionHeading` + hairline
+// and generous rhythm, not card chrome — the lighter look for a single
+// full-screen record where banded cards would be visual noise.
+//
+// It's also the reference for the THREE-PART ROW — label · inline editor ·
+// optional `trailing` (an action / badge / unit) — and for read-only alignment:
+// an `InlineStatic` value sits PIXEL-FOR-PIXEL in the same column as the editors
+// (see the "Row anatomy" section).
 // ─────────────────────────────────────────────────────────────────────────────
 
 const PLAN = [
@@ -37,6 +47,20 @@ const HEALTH_DOT: Record<string, string> = {
   churning: colors.red[500],
 };
 
+// The same health states as a Badge color family (the header's status chip).
+const HEALTH_BADGE: Record<string, ColorName> = {
+  healthy: "emerald",
+  at_risk: "amber",
+  churning: "red",
+};
+
+const STAGE = [
+  { value: "lead", label: "Lead" },
+  { value: "qualified", label: "Qualified" },
+  { value: "proposal", label: "Proposal" },
+  { value: "won", label: "Won" },
+];
+
 function persist<T>(set: (v: T) => void) {
   return (v: T) =>
     new Promise<void>((resolve) => {
@@ -47,9 +71,9 @@ function persist<T>(set: (v: T) => void) {
     });
 }
 
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
+function Field({ label, children, trailing }: { label: string; children: React.ReactNode; trailing?: React.ReactNode }) {
   return (
-    <DetailRow label={label} labelWidth={130} minHeight={40}>
+    <DetailRow label={label} labelWidth={130} minHeight={40} trailing={trailing}>
       <View style={{ flex: 1 }}>{children}</View>
     </DetailRow>
   );
@@ -67,6 +91,20 @@ function Section({ title, children }: { title: string; children: React.ReactNode
   );
 }
 
+// A compact label-over-value pair for the header's key-facts strip.
+function HeaderStat({ label, value }: { label: string; value: string }) {
+  return (
+    <View style={{ gap: 2 }}>
+      <Text size="xs" color="muted" transform="uppercase">
+        {label}
+      </Text>
+      <Text size="sm" weight="medium" tabular>
+        {value}
+      </Text>
+    </View>
+  );
+}
+
 export function TplRecordPlain() {
   const [name, setName] = useState("Northwind Traders");
   const [contact, setContact] = useState("Mara Lindqvist");
@@ -79,21 +117,42 @@ export function TplRecordPlain() {
   const [renews, setRenews] = useState("2026-05-22");
   const [review, setReview] = useState("2026-04-10T14:30");
   const [opens, setOpens] = useState("09:00");
+  // "Row anatomy" fields.
+  const [taxId, setTaxId] = useState("SE556677-8899");
+  const [stage, setStage] = useState("proposal");
+  const [seats, setSeats] = useState<number | null>(25);
 
   const money = (v: number | null) => (v == null ? "" : `$${v.toLocaleString("en-US")}`);
+  const planLabel = PLAN.find((p) => p.value === plan)?.label ?? "—";
+  const healthLabel = HEALTH.find((h) => h.value === health)?.label ?? "";
+  // Read-only, system-owned values that still align with the editors above.
+  const accountId = "ACC-4821";
+  const lifetimeValue = 128400;
 
   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">
-            {name}
-          </Text>
-          <Badge label="Customer" color="blue" />
-          <View style={{ flex: 1 }} />
-          <Text size="xs" color="muted">
-            Click any value to edit
+        {/* Record header — identity + status + the facts you'd want at a glance,
+            composed in-place (not worth a primitive until a 2nd screen needs it). */}
+        <View style={{ gap: 12 }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+            <Text size="xl" weight="semibold">
+              {name}
+            </Text>
+            <Badge label={healthLabel} color={HEALTH_BADGE[health]} />
+            <View style={{ flex: 1 }} />
+            <Text size="xs" color="muted">
+              Click any value to edit
+            </Text>
+          </View>
+          <Text size="sm" color="muted">
+            {contact} · {email}
           </Text>
+          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 28 }}>
+            <HeaderStat label="Plan" value={planLabel} />
+            <HeaderStat label="Annual value" value={money(value) || "—"} />
+            <HeaderStat label="City" value={city || "—"} />
+          </View>
         </View>
 
         <Section title="Contact">
@@ -148,6 +207,52 @@ export function TplRecordPlain() {
             <InlineTimePicker value={opens} onSave={persist(setOpens)} accessibilityLabel="Support opens" />
           </Field>
         </Section>
+
+        {/* Row anatomy — the three-part row (label · editor · trailing) and
+            read-only alignment, ALL in one 130px-label column so the editors and
+            the InlineStatic values line up to the pixel. Copy these shapes. */}
+        <Section title="Row anatomy">
+          {/* editor + a trailing ACTION */}
+          <Field
+            label="Tax ID"
+            trailing={<Button title="Verify" color="secondary" onPress={() => {}} />}
+          >
+            <InlineTextInput value={taxId} onSave={persist(setTaxId)} placeholder="Add tax ID…" accessibilityLabel="Tax ID" />
+          </Field>
+          {/* editor + a trailing STATUS dot */}
+          <Field
+            label="Pipeline stage"
+            trailing={<Badge variant="dot" color="emerald" label="Active" />}
+          >
+            <InlineSelect value={stage} onSave={persist(setStage)} options={STAGE} accessibilityLabel="Pipeline stage" />
+          </Field>
+          {/* editor + a trailing UNIT label */}
+          <Field
+            label="Licensed seats"
+            trailing={
+              <Text size="sm" color="muted">
+                seats
+              </Text>
+            }
+          >
+            <InlineNumberInput value={seats} onSave={persist(setSeats)} min={0} accessibilityLabel="Licensed seats" />
+          </Field>
+          {/* READ-ONLY value — aligns with the editors above, no input chrome */}
+          <Field label="Account ID">
+            <InlineStatic value={accountId} tabular />
+          </Field>
+          {/* READ-ONLY value + a trailing MARK */}
+          <Field label="Lifetime value" trailing={<Badge label="Computed" color="zinc" />}>
+            <InlineStatic value={money(lifetimeValue)} tabular />
+          </Field>
+        </Section>
+
+        <DangerZone
+          title="Delete account"
+          description="Permanently remove this account and all of its contacts, deals, and history. This can't be undone."
+        >
+          <Button title="Delete account" color="danger" onPress={() => {}} />
+        </DangerZone>
       </View>
     </ScrollView>
   );

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.8.0",
+  "version": "7.10.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",
@@ -120,6 +122,7 @@
     "./badge": "./src/badge.tsx",
     "./callout": "./src/callout.tsx",
     "./inline_edit": "./src/inline_edit.tsx",
+    "./inline_static": "./src/inline_static.tsx",
     "./inline_text_input": "./src/inline_text_input.tsx",
     "./inline_number_input": "./src/inline_number_input.tsx",
     "./inline_select": "./src/inline_select.tsx",
@@ -158,6 +161,7 @@
     "./table": "./src/table.tsx",
     "./data_grid": "./src/data_grid.tsx",
     "./detail_row": "./src/detail_row.tsx",
+    "./danger_zone": "./src/danger_zone.tsx",
     "./scan_field": "./src/scan_field.tsx",
     "./completion_state": "./src/completion_state.tsx",
     "./remainder_meter": "./src/remainder_meter.tsx",

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/danger_zone.tsx

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import { View, StyleSheet } from "react-native";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { solid, tint } from "./colors";
+
+export interface DangerZoneProps {
+  /** Section heading. Default "Danger zone". */
+  title?: string;
+  /** A short line spelling out the consequence of the action (it's usually
+   *  irreversible — say so here). */
+  description?: string;
+  /** The destructive action(s) — typically a `danger` `Button`. */
+  children: ReactNode;
+}
+
+/**
+ * A destructive section set visually APART — for the irreversible record actions
+ * (delete, archive, transfer ownership) that belong at the BOTTOM of a record or
+ * settings surface, away from the everyday fields. A soft danger-tinted frame +
+ * a danger heading mark it as a hazard without shouting (the kit's `tint`/`solid`
+ * discipline, never a raw hex); the consequence goes in `description`, and the
+ * action(s) go in `children`.
+ */
+export function DangerZone(props: DangerZoneProps) {
+  const { title = "Danger zone", description, children } = props;
+  return (
+    <View style={styles.zone}>
+      <View style={styles.heading}>
+        <Icon name="triangle-alert" size={16} color={solid("red")} />
+        <Text size="sm" weight="semibold" color="danger">
+          {title}
+        </Text>
+      </View>
+      {description ? (
+        <Text size="sm" color="muted">
+          {description}
+        </Text>
+      ) : null}
+      <View style={styles.actions}>{children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // A soft danger frame: a low-alpha red hairline over the faintest red wash —
+  // the "set apart, not shouting" treatment via the kit's tint discipline.
+  zone: {
+    gap: 8,
+    padding: 16,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: tint("red", 0.3),
+    backgroundColor: tint("red", 0.03),
+  },
+  heading: { flexDirection: "row", alignItems: "center", gap: 6 },
+  actions: { flexDirection: "row", flexWrap: "wrap", gap: 8, marginTop: 4 },
+});

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/detail_row.tsx

@@ -7,6 +7,12 @@ export interface DetailRowProps {
   label: ReactNode;
   /** The value — any node (a `Text`, a `Badge`, a stack). */
   children: ReactNode;
+  /** An optional right-side slot, rendered as the LAST child of the row (after
+   *  `children`) — a small action `Button`, a status `Badge`, a unit label, an
+   *  `IconButton`. For it to sit at the right edge, wrap the value/editor in a
+   *  `flex:1` View so the value takes the slack and the trailing pins right (the
+   *  inline-record templates do this). */
+  trailing?: ReactNode;
   /** Fixed label-column width (px) to align labels in a left column — for a peek
    *  or form-like stack. Omit for a spread row: the label takes the slack and the
    *  value sits at the right edge (the default drawer-detail look). */
@@ -24,13 +30,14 @@ export interface DetailRowProps {
  * with the values flowing immediately after instead.
  */
 export function DetailRow(props: DetailRowProps) {
-  const { label, children, labelWidth, labelSize = "sm", minHeight = 28 } = props;
+  const { label, children, trailing, labelWidth, labelSize = "sm", minHeight = 28 } = props;
   return (
     <View style={[styles.row, { minHeight }]}>
       <Text size={labelSize} color="muted" style={labelWidth != null ? { width: labelWidth } : styles.flexLabel}>
         {label}
       </Text>
       {children}
+      {trailing != null ? trailing : null}
     </View>
   );
 }

package/src/inline_edit.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useRef, useState, type ReactNode, type Ref } from "react";
-import { View, StyleSheet, type GestureResponderEvent } from "react-native";
+import { View, StyleSheet, type GestureResponderEvent, type TextStyle } from "react-native";
 import { Text } from "./text";
 import { IconButton } from "./icon_button";
 import { ActivityIndicator } from "./activity_indicator";
@@ -232,9 +232,19 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
   );
 }
 
-// The view text reuses the input's own canonical metrics (font, size, spacing)
-// so the value reads identically and occupies the same box in both modes.
-const viewTextStyle = [getInputTextStyle(), { flex: 1, fontFamily: fontFamilyRegular, letterSpacing: -0.4 }];
+// The canonical text treatment for an inline value AT REST — the input's own
+// metrics (font, size, line height, letter spacing) so the value reads
+// identically and occupies the same box in view and edit mode. A read-only
+// `InlineStatic` reuses this so its baseline lines up with the editors.
+export const inlineValueTextStyle: TextStyle = {
+  ...getInputTextStyle(),
+  fontFamily: fontFamilyRegular,
+  letterSpacing: -0.4,
+};
+
+// In the view ROW the value text takes the flex slot so the trailing adornment
+// right-aligns; `InlineStatic` uses the base style above without this flex.
+const viewTextStyle = [inlineValueTextStyle, { flex: 1 }];
 
 const styles = StyleSheet.create({
   view: {

package/src/inline_select.tsx

@@ -17,8 +17,9 @@ export interface InlineSelectProps<T extends string> {
    *  Omit for a plain label list — both render through the same `OptionList`. */
   renderOptionContent?: (option: PickerOption<T>) => React.ReactNode;
   /** Render the SELECTED value in the resting view as a node (an avatar chip, a
-   *  colored badge) instead of its plain label. Falls back to the label when
-   *  omitted; the empty state always shows the placeholder. */
+   *  colored badge) instead of its plain label. Falls back to `renderOptionContent`
+   *  (so the trigger renders like the options), then the plain label, when omitted;
+   *  the empty state always shows the placeholder. */
   renderSelected?: (selected: PickerOption<T>) => React.ReactNode;
   placeholder?: string;
   disabled?: boolean;
@@ -28,11 +29,11 @@ export interface InlineSelectProps<T extends string> {
 }
 
 /**
- * An inline-editable single-select. The value reads as plain text; clicking it
- * floats the option list (an `OptionList`) in a popover anchored to the view, so
- * the row never changes height. Picking commits; dismissing reverts. Pass
- * `renderOptionContent` for rich options, or omit it for a plain list — the
- * standard and custom-rendered pickers are both supported here.
+ * An inline-editable single-select. The selected value renders like its option
+ * (`renderOptionContent`) — a badge stays a badge in the resting trigger, not just
+ * text; clicking it floats the option list (an `OptionList`) in a popover anchored
+ * to the view, so the row never changes height. Picking commits; dismissing reverts.
+ * Pass `renderOptionContent` for rich options, or omit it for a plain label list.
  */
 export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
   const { value, onSave, options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false } = props;
@@ -64,7 +65,7 @@ export function InlineSelect<T extends string>(props: InlineSelectProps<T>) {
       <Popover open={open && !disabled} onOpenChange={setOpen} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
-            display={selected ? (renderSelected ? renderSelected(selected) : (selected.label ?? "")) : ""}
+            display={selected ? (renderSelected ? renderSelected(selected) : renderOptionContent ? renderOptionContent(selected) : (selected.label ?? "")) : ""}
             placeholder={placeholder}
             disabled={disabled}
             active={open && !disabled}

package/src/inline_static.tsx

@@ -0,0 +1,63 @@
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { CONTROL_RADIUS } from "./control_surface";
+import { INLINE_CONTROL_HEIGHT, inlineValueTextStyle } from "./inline_edit";
+
+export interface InlineStaticProps {
+  /** The value to show. Empty → `placeholder` (default "—"). */
+  value: string;
+  /** Shown when `value` is empty. Default "—". */
+  placeholder?: string;
+  /** Mute the value (zinc-600) — a secondary or derived figure. */
+  muted?: boolean;
+  /** Fixed-width (tabular) numerals — for a value sitting in a NUMBER column so
+   *  its digits line up with the `InlineNumberInput`s above and below it. */
+  tabular?: boolean;
+  /** Horizontal alignment — `right` for a number column. Default `left`. */
+  align?: "left" | "right";
+}
+
+/**
+ * A READ-ONLY value that aligns PIXEL-FOR-PIXEL with the `Inline*` editors in a
+ * record: the same control height, horizontal padding, and a 1px TRANSPARENT
+ * border, so a non-editable field — a computed total, a system ID, a synced or
+ * locked value — sits flush in the same column as the editable rows. It is
+ * NON-interactive (no hover, no pointer, no focus ring): it reads as a plain
+ * value, NOT a disabled input. Pair with `DetailRow` exactly like the `Inline*`
+ * editors; wrap it in a `flex:1` View when the row also carries a `trailing`
+ * slot, so the value takes the slack and the trailing pins right.
+ */
+export function InlineStatic(props: InlineStaticProps) {
+  const { value, placeholder, muted, tabular, align = "left" } = props;
+  const isEmpty = value.length === 0;
+  const display = isEmpty ? (placeholder ?? "—") : value;
+  return (
+    <View style={styles.box}>
+      <Text
+        numberOfLines={1}
+        tabular={tabular}
+        align={align}
+        color={muted ? "muted" : "default"}
+        style={[inlineValueTextStyle, isEmpty ? styles.placeholder : null]}
+      >
+        {display}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  // Matches `inline_edit`'s view box exactly (height, radius, padding, 1px
+  // transparent border) so the value's baseline aligns with the editors — minus
+  // the FocusRingPressable, so it never reads as an interactive control.
+  box: {
+    minHeight: INLINE_CONTROL_HEIGHT,
+    borderRadius: CONTROL_RADIUS,
+    borderWidth: 1,
+    borderColor: "transparent",
+    paddingHorizontal: 8,
+    justifyContent: "center",
+  },
+  placeholder: { color: colors.zinc[400] },
+});