@lotics/ui 7.9.0 → 7.10.0

package/AGENTS.md

@@ -69,7 +69,8 @@ Pick by capability, not by name. (→ the source file for the API.)
   via `TimePicker`.
 - **Edit a record's fields in place** — the `Inline*` family: `InlineTextInput` ·
   `InlineNumberInput` · `InlineSelect` · `InlineMemberSelect` · `InlineDatePicker` ·
-  `InlineTimePicker` (see §Data entry).
+  `InlineTimePicker`; a READ-ONLY field in that same column uses `InlineStatic` (matches the
+  editor box exactly, no input chrome, so it aligns pixel-for-pixel) (see §Data entry).
 - **Tasks / to-dos** — there is NO Task component (a task row varies too much app-to-app to abstract
   well — a Reminders row and a Linear column-grid share almost nothing). Compose the row directly:
   `CheckCircle` (the completion ring — fills with a spring, distinct from the square `Checkbox`) + an
@@ -112,10 +113,11 @@ Pick by capability, not by name. (→ the source file for the API.)
   `CardFooter`), `Section` (the card-less twin of `Card`: bare gap-spaced region + `SectionHeading`/
   `SectionHeadingTitle`/`SectionHeadingMeta`; no body component — children are the body), `SectionCard`,
   `PageHeader` /
-  `PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`, `Stepper`.
+  `PageContent`, `Stack`, `Spacer`, `Divider`, `Accordion`, `Tabs`, `SegmentedControl`, `Stepper`,
+  `DangerZone` (the destructive section — delete/archive — set apart at the bottom of a record/settings surface).
 - **Rows & registers** — `PressableRow` (THE register row), `ListItem`, `MenuButton`,
-  `MenuListItem`, `DetailRow` (label+value for drawers/peeks), `ActionMenu` (⋯), `FloatingActionBar`
-  (bulk-select bar).
+  `MenuListItem`, `DetailRow` (label+value for drawers/peeks; optional `trailing` slot for a
+  right-side action/badge/unit), `ActionMenu` (⋯), `FloatingActionBar` (bulk-select bar).
 - **Filters & view controls** — `SearchInput`, `ChipGroup`, `FilterChip` (+ `RangeSlider`,
   `Counter`), `Chip`.
 - **Overlays** — `Dialog` (centered card over a scrim), `Modal` (+ `ModalHeader`/`ModalBody`/
@@ -188,15 +190,22 @@ hover reveals its border (it's a field — no grey tint, no pencil that shifts),
 reflow, the whole point), and it commits on blur (Enter saves, Escape reverts) or via
 `controls="buttons"` (✓ primary / ✕). One per type — `InlineTextInput` · `InlineNumberInput`
 (`format` for currency/units) · `InlineSelect` (plain options OR `renderOptionContent`; floats an
-`OptionList` in a popover so the row never grows; `renderSelected` renders the RESTING value as a
-node — a colored `OptionBadge`, not just a label) · `InlineMemberSelect` (a `MemberChip` at rest →
+`OptionList` in a popover so the row never grows; the RESTING value renders like its option
+(`renderOptionContent` by default; `renderSelected` overrides) — a colored `OptionBadge`, not just a label) · `InlineMemberSelect` (a `MemberChip` at rest →
 member picker; the inline twin of `MemberSelect`) · `InlineDatePicker` (`format="datetime"` for
 always-on time; `optionalTime` to let the user ADD/REMOVE a time — the value's own shape, date vs
 datetime, is the source of truth) · `InlineTimePicker` — all
 on `useInlineEdit` + `InlineEditView` (custom inputs join via those). `onSave` is async: the
 saving spinner sits INSIDE the control (never a sibling — that reflows); an error shows inline
-without losing the edit. Pair with `DetailRow` (label left, inline value right). Not every field
-is a same-height swap — a tag field, a status, or an attachment grid edit in place too (below).
+without losing the edit. Pair with `DetailRow` (label left, inline value right). A READ-ONLY value
+in the same column — a computed total, a system ID, a synced/locked field — is `InlineStatic`: it
+copies the editor box exactly (height, padding, 1px transparent border) but is non-interactive, so
+it sits FLUSH with the editors instead of reading as a disabled input. To hang a right-side
+action/badge/unit off a row, use `DetailRow`'s `trailing` slot (wrap the editor in a `flex:1` View
+so it takes the slack and the trailing pins right) — see the "Row anatomy" section of
+`tpl_record_plain`, which also reads top→bottom as a full drawer record (header → fields →
+`DangerZone`). Not every field is a same-height swap — a tag field, a status, or an attachment grid
+edit in place too (below).
 
 ### Fieldset form — fields lay out on a RESPONSIVE two-column grid
 Never hard-code columns, never 3-up. A fieldset is `flexDirection:row, flexWrap:wrap,
@@ -818,7 +827,7 @@ recipe for a screen JOB; copy and adapt). Pick by the job:
   transactional form: find-or-create + line items + attachment CRUD + 2-col grid) · `tpl_billing`
   (charges→invoice→collect: the invoice DOCUMENT is the unit — editable charge lines + method,
   live total, status, inline-gated issue; validated receipt; separate deposit) · `tpl_quick`
-  (quick-capture log) · `tpl_wizard` (`Stepper` form + review) · `tpl_record` (inline edit + Stage
+  (quick-capture log) · `tpl_wizard` (`Stepper` form + review) · `tpl_record_plain` (inline edit + Stage
   disposition + `Select` tags + Documents grid; `tpl_record_plain` = card-less).
 - **Records & lookup** — `tpl_detail` (full record + tabs) · `tpl_directory` (searchable register) ·
   `tpl_timeline` (audit feed).
@@ -856,8 +865,9 @@ text_input_field · number_input · search_input · form_field · checkbox · ch
 radio_picker · counter · range_slider · date_picker · date_range_filter_field · time_picker ·
 inline_text_input · inline_number_input · inline_select · inline_member_select · inline_date_picker ·
 inline_time_picker (the Inline* family — per-field editors on `inline_edit`'s `useInlineEdit` +
-`InlineEditView`; `InlineSelect`/`InlineMemberSelect` take `renderSelected` for a chip/badge at rest) ·
-list · list_item · menu_button · menu_list_item · detail_row · pressable_row ·
+`InlineEditView`; `InlineSelect`/`InlineMemberSelect` render the resting value like its option — `renderOptionContent` by default, `renderSelected` to override — a chip/badge at rest, not just text) ·
+inline_static (InlineStatic — a READ-ONLY value matching the Inline* box metrics EXACTLY (height, padding, 1px transparent border) so a non-editable field — a computed total, a system ID, a synced/locked value — aligns pixel-for-pixel in the same column; non-interactive, NOT a disabled input; `muted`/`tabular`/`align="right"` for a number column) ·
+list · list_item · menu_button · menu_list_item · detail_row (DetailRow — label+value row for drawer/peek detail; optional `trailing` slot renders a right-side action/badge/unit after the value) · danger_zone (DangerZone — the destructive section: a soft danger-tinted frame (`tint`/`solid`, never raw hex) + a danger heading + a description + a destructive action slot (children, e.g. a `danger` Button); sits APART at the bottom of a record/settings surface) · pressable_row ·
 check_circle (CheckCircle — the completion ring: an empty ring that springs to a filled check when done, distinct from the square checkbox; the task/to-do/checklist toggle. Compose task rows directly, no Task component) · action_menu ·
 floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·

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.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.9.0",
+  "version": "7.10.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -122,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",
@@ -160,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/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/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] },
+});

package/examples/tpl_record.tsx

@@ -1,302 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, solid, type ColorName } from "@lotics/ui/colors";
-import { Card, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@lotics/ui/popover";
-import { MenuButton } from "@lotics/ui/menu_button";
-import { InlineTextInput } from "@lotics/ui/inline_text_input";
-import { InlineNumberInput } from "@lotics/ui/inline_number_input";
-import { InlineSelect } from "@lotics/ui/inline_select";
-import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
-import { InlineTimePicker } from "@lotics/ui/inline_time_picker";
-import { Select } from "@lotics/ui/select";
-import { Chip } from "@lotics/ui/chip";
-import { FileDropzone } from "@lotics/ui/file_dropzone";
-import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
-import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
-import type { DisplayFile } from "@lotics/ui/file_thumbnail";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Inline record — a record edited entirely IN PLACE. Every value
-// reads as plain text; hovering tints it, clicking swaps the field in at the
-// same height (no reflow), and it saves on its own. The data-capture
-// alternative to a form: no screen-wide edit mode, no one big Save — each field
-// is its own atomic edit. Banded cards over zinc-50, label-left / value-right.
-// ─────────────────────────────────────────────────────────────────────────────
-
-const PLAN = [
-  { value: "starter", label: "Starter" },
-  { value: "growth", label: "Growth" },
-  { value: "enterprise", label: "Enterprise" },
-];
-
-const HEALTH = [
-  { value: "healthy", label: "Healthy" },
-  { value: "at_risk", label: "At risk" },
-  { value: "churning", label: "Churning" },
-];
-
-const HEALTH_DOT: Record<string, string> = {
-  healthy: colors.emerald[500],
-  at_risk: colors.amber[500],
-  churning: colors.red[500],
-};
-
-// Tags — an inline MULTI-select: chips render in the field, search to add, ✕ to
-// remove, free-entry to coin a new tag (`allowCustom`).
-const TAG_OPTIONS = [
-  { value: "vip", label: "VIP" },
-  { value: "priority", label: "Priority support" },
-  { value: "renewal_risk", label: "Renewal risk" },
-  { value: "expansion", label: "Expansion" },
-  { value: "reference", label: "Referenceable" },
-];
-
-// Seed the attachment grid with self-contained SVG data-URI "scans" so the
-// thumbnails AND the preview modal work offline; dropped files are real blobs.
-const scan = (id: string, label: string, bg: string): DisplayFile => ({
-  id,
-  filename: `${label.toLowerCase().replaceAll(" ", "-")}.svg`,
-  mimeType: "image/svg+xml",
-  url:
-    "data:image/svg+xml," +
-    encodeURIComponent(
-      `<svg xmlns="http://www.w3.org/2000/svg" width="420" height="560"><rect width="100%" height="100%" fill="${bg}"/><text x="210" y="290" fill="#ffffff" font-family="sans-serif" font-size="30" text-anchor="middle">${label}</text></svg>`,
-    ),
-});
-
-const SEED_DOCS: DisplayFile[] = [
-  scan("doc_1", "Master agreement", "#1e3a8a"),
-  scan("doc_2", "Tax certificate", "#065f46"),
-];
-
-// Simulate an async persist so the saving state is visible.
-function persist<T>(set: (v: T) => void) {
-  return (v: T) =>
-    new Promise<void>((resolve) => {
-      setTimeout(() => {
-        set(v);
-        resolve();
-      }, 350);
-    });
-}
-
-function Field({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <DetailRow label={label} labelWidth={130} minHeight={40}>
-      <View style={{ flex: 1 }}>{children}</View>
-    </DetailRow>
-  );
-}
-
-function Group({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <Card style={{ padding: 0 }}>
-      <CardHeader>
-        <CardHeaderTitle>{title}</CardHeaderTitle>
-      </CardHeader>
-      <View style={{ paddingHorizontal: 16, paddingVertical: 8, gap: 2 }}>{children}</View>
-    </Card>
-  );
-}
-
-// ── Lifecycle disposition (NOT a plain select). "Lead" is the OPEN default;
-// "Closed"/"Lost" are terminal OUTCOMES the user decides. The control is
-// asymmetric by phase: while open it surfaces the two outcomes as ACTIONS;
-// once resolved it shows the colored STATE with a quiet, reversible Change
-// (reopen to Lead, or switch to the other outcome — valence lives on the badge,
-// not the buttons). States/colors/labels vary per domain, so it's a composition
-// (Badge + Button + Popover/MenuButton), not a shipped primitive.
-type Stage = "lead" | "closed" | "lost";
-
-const STAGE_META: Record<Stage, { label: string; color: ColorName }> = {
-  lead: { label: "Lead", color: "blue" },
-  closed: { label: "Closed", color: "emerald" },
-  lost: { label: "Lost", color: "red" },
-};
-
-function StageField({ value, onChange }: { value: Stage; onChange: (next: Stage) => void }) {
-  const [open, setOpen] = useState(false);
-  const meta = STAGE_META[value];
-
-  // Pending: the decision is the action.
-  if (value === "lead") {
-    return (
-      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-        <Badge variant="dot" label={meta.label} color={meta.color} />
-        <View style={{ flex: 1 }} />
-        <Button title="Mark closed" color="primary" onPress={() => onChange("closed")} />
-        <Button title="Mark lost" color="danger-secondary" onPress={() => onChange("lost")} />
-      </View>
-    );
-  }
-
-  // Resolved: the badge is the state; Change opens a quiet, colored state
-  // switcher (each option a dot + label, current marked) — a status control,
-  // not a generic text menu.
-  return (
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-      <Badge variant="dot" label={meta.label} color={meta.color} />
-      <View style={{ flex: 1 }} />
-      <Popover open={open} onOpenChange={setOpen} side="bottom" align="end">
-        <PopoverTrigger>
-          <Button title="Change" color="muted" onPress={() => setOpen(true)} />
-        </PopoverTrigger>
-        <PopoverContent>
-          <View style={{ gap: 2, padding: 4, minWidth: 200 }}>
-            {(["lead", "closed", "lost"] as Stage[]).map((s) => (
-              <MenuButton
-                key={s}
-                icon={<View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: solid(STAGE_META[s].color) }} />}
-                title={s === value ? `${STAGE_META[s].label} · current` : STAGE_META[s].label}
-                selected={s === value}
-                disabled={s === value}
-                onPress={() => { onChange(s); setOpen(false); }}
-              />
-            ))}
-          </View>
-        </PopoverContent>
-      </Popover>
-    </View>
-  );
-}
-
-export function TplRecord() {
-  const [name, setName] = useState("Northwind Traders");
-  const [contact, setContact] = useState("Mara Lindqvist");
-  const [email, setEmail] = useState("mara@northwind.co");
-  const [phone, setPhone] = useState("");
-  const [city, setCity] = useState("Gothenburg");
-  const [value, setValue] = useState<number | null>(48000);
-  const [plan, setPlan] = useState("growth");
-  const [health, setHealth] = useState("healthy");
-  const [renews, setRenews] = useState("2026-05-22");
-  const [review, setReview] = useState("2026-04-10T14:30");
-  const [opens, setOpens] = useState("09:00");
-  const [stage, setStage] = useState<Stage>("lead");
-  const [tags, setTags] = useState<string[]>([TAG_OPTIONS[0].value, TAG_OPTIONS[3].value]);
-  const [docs, setDocs] = useState<DisplayFile[]>(SEED_DOCS);
-  const [activeDoc, setActiveDoc] = useState<number | null>(null);
-
-  const money = (v: number | null) => (v == null ? "" : `$${v.toLocaleString("en-US")}`);
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 560, alignSelf: "center", gap: 16 }}>
-        <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
-          </Text>
-        </View>
-
-        <Group title="Contact">
-          <Field label="Account name">
-            <InlineTextInput value={name} onSave={persist(setName)} accessibilityLabel="Account name" />
-          </Field>
-          <Field label="Primary contact">
-            <InlineTextInput value={contact} onSave={persist(setContact)} accessibilityLabel="Primary contact" />
-          </Field>
-          <Field label="Email">
-            <InlineTextInput value={email} onSave={persist(setEmail)} placeholder="Add email…" accessibilityLabel="Email" />
-          </Field>
-          <Field label="Phone">
-            <InlineTextInput value={phone} onSave={persist(setPhone)} placeholder="Add phone…" accessibilityLabel="Phone" />
-          </Field>
-          <Field label="City">
-            <InlineTextInput value={city} onSave={persist(setCity)} accessibilityLabel="City" />
-          </Field>
-        </Group>
-
-        <Group title="Commercial">
-          <Field label="Stage">
-            <StageField value={stage} onChange={setStage} />
-          </Field>
-          <Field label="Annual value">
-            <InlineNumberInput value={value} onSave={persist(setValue)} format={money} accessibilityLabel="Annual value" />
-          </Field>
-          <Field label="Plan">
-            <InlineSelect value={plan} onSave={persist(setPlan)} options={PLAN} accessibilityLabel="Plan" />
-          </Field>
-          <Field label="Health">
-            <InlineSelect
-              value={health}
-              onSave={persist(setHealth)}
-              options={HEALTH}
-              accessibilityLabel="Health"
-              renderOptionContent={(o) => (
-                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                  <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: HEALTH_DOT[o.value] }} />
-                  <Text size="sm">{o.label}</Text>
-                </View>
-              )}
-            />
-          </Field>
-          <Field label="Tags">
-            <Select multi searchable allowCustom value={tags} onValueChange={setTags} options={TAG_OPTIONS} renderSelected={(item, { remove }) => <Chip onDismiss={remove}><Text size="sm">{item.label}</Text></Chip>} placeholder="Add tags…" accessibilityLabel="Tags" />
-          </Field>
-        </Group>
-
-        <Group title="Schedule">
-          <Field label="Renews on">
-            <InlineDatePicker value={renews} onSave={persist(setRenews)} locale="en-US" accessibilityLabel="Renews on" />
-          </Field>
-          <Field label="Next review">
-            <InlineDatePicker value={review} onSave={persist(setReview)} format="datetime" locale="en-US" accessibilityLabel="Next review" />
-          </Field>
-          <Field label="Support opens">
-            <InlineTimePicker value={opens} onSave={persist(setOpens)} accessibilityLabel="Support opens" />
-          </Field>
-        </Group>
-
-        {/* Documents — a richer in-place field: drop to add, click a thumbnail to
-            preview in the gallery, ✕ to delete. Not every inline field is a
-            same-height swap; an attachment grid edits in place too. */}
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            <CardHeaderTitle>Documents</CardHeaderTitle>
-          </CardHeader>
-          <View style={{ paddingHorizontal: 16, paddingVertical: 12, gap: 12 }}>
-            {docs.length > 0 ? (
-              <FileThumbnailGrid
-                files={docs}
-                itemSize={84}
-                onFilePress={(f) => setActiveDoc(docs.findIndex((x) => x.id === f.id))}
-                onRemove={(id) => setDocs((prev) => prev.filter((x) => x.id !== id))}
-              />
-            ) : null}
-            <FileDropzone
-              height={96}
-              label="Drop contracts or scans"
-              hint="or click to browse · PDF, images"
-              dropLabel="Release to attach"
-              accept="application/pdf,image/*"
-              accessibilityLabel="Attach documents"
-              onFiles={(dropped) =>
-                setDocs((prev) => [
-                  ...prev,
-                  ...dropped.map((f, i) => ({
-                    id: `${f.name}-${prev.length + i}`,
-                    filename: f.name,
-                    mimeType: f.type || "application/octet-stream",
-                    url: URL.createObjectURL(f),
-                  })),
-                ])
-              }
-            />
-          </View>
-        </Card>
-      </View>
-
-      <FileGalleryModal files={docs} activeIndex={activeDoc} onIndexChange={setActiveDoc} />
-    </ScrollView>
-  );
-}