@lotics/ui 4.4.0 → 4.6.0

package/src/prompt_field.tsx

@@ -6,38 +6,38 @@ import {
   TextInputKeyPressEventData,
   View,
 } from "react-native";
-import { colors, solid, tint } from "./colors";
-import { Icon } from "./icon";
-import { IconButton } from "./icon_button";
-import { ActivityIndicator } from "./activity_indicator";
-import { ACTIVE_RING } from "./control_surface";
+import { colors } from "./colors";
+import { Button } from "./button";
 import { getInputTextStyle, fontFamilyRegular } from "./text_utils";
 
 export interface PromptFieldProps {
   value: string;
   onChangeText: (value: string) => void;
-  /** Fired on Enter (without Shift) or the send button. Receives the trimmed
-   *  text; never fires empty or while busy. */
+  /** Fired on Enter or the send button. Receives the trimmed text; never fires
+   *  empty or while busy. */
   onSubmit: (value: string) => void;
   placeholder?: string;
-  /** The agent is working — the field locks and the send slot shows a spinner.
-   *  This is the imperative command surface: one prompt does work, you watch it
-   *  stream (see `AgentRun`), you don't chat. */
+  /** The agent is working — the field locks. Typically the host swaps the field
+   *  for `AgentProgress` while busy (the composer MORPHS into the progress
+   *  pill); the two share the same pill geometry so the swap reads as a morph. */
   busy?: boolean;
   disabled?: boolean;
   autoFocus?: boolean;
   accessibilityLabel?: string;
-  /** When set, a paperclip appears at the left of the footer — the composer can
-   *  attach files (e.g. the photo that starts a run). The host opens the picker. */
+  /** When set, a circular attach button sits at the left of the row — the
+   *  composer can attach files (e.g. the photo that starts a run). */
   onAttach?: () => void;
 }
 
+const ROW = 40;
+
 /**
- * The natural-language command surface for an AI app — a prompt box that
- * triggers agent work, NOT a chat composer. Enter sends (Shift+Enter for a
- * newline); while the agent runs, the field locks and the send slot spins. The
- * violet sparkle marks it as the AI input. Pair with `AgentRun` (the streamed
- * work it kicks off) and a session history of the outputs it produces.
+ * The natural-language command surface for an AI app — a compact single-row
+ * composer pill that triggers agent work, NOT a chat composer. A circular attach
+ * `Button` on the left, the input filling the row at the same height as the
+ * buttons, a circular send-arrow `Button` on the right; Enter sends. While the
+ * agent runs the host swaps this for `AgentProgress` — same pill geometry, so it
+ * morphs into the progress indicator.
  */
 export function PromptField(props: PromptFieldProps) {
   const { value, onChangeText, onSubmit, placeholder, busy, disabled, autoFocus, accessibilityLabel, onAttach } = props;
@@ -50,8 +50,6 @@ export function PromptField(props: PromptFieldProps) {
     onSubmit(value.trim());
   }, [value, busy, disabled, onSubmit]);
 
-  // Web: Enter sends, Shift+Enter inserts a newline. RN's key event wraps the
-  // DOM event, so shiftKey/preventDefault are read defensively off nativeEvent.
   const onKeyPress = useCallback(
     (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
       const ne = e.nativeEvent as unknown as { key: string; shiftKey?: boolean };
@@ -64,87 +62,47 @@ export function PromptField(props: PromptFieldProps) {
   );
 
   return (
-    <View
-      style={[
-        styles.box,
-        focused ? { borderColor: colors.zinc[900], boxShadow: ACTIVE_RING } : null,
-        disabled ? { backgroundColor: colors.zinc[50] } : null,
-      ]}
-    >
-      <View style={styles.inputRow}>
-        <View style={styles.glyph}>
-          <Icon name="sparkles" size={14} color={solid("violet")} />
-        </View>
-        <RNTextInput
-          accessibilityLabel={accessibilityLabel ?? placeholder}
-          style={[styles.input, getInputTextStyle()]}
-          value={value}
-          onChangeText={onChangeText}
-          onKeyPress={onKeyPress}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setFocused(false)}
-          placeholder={placeholder}
-          placeholderTextColor={colors.zinc[400]}
-          editable={!busy && !disabled}
-          autoFocus={autoFocus}
-          multiline
-          submitBehavior="newline"
-        />
-      </View>
-      <View style={styles.footer}>
-        {onAttach ? (
-          <IconButton icon="paperclip" color="none" size="sm" accessibilityLabel="Attach files" onPress={onAttach} disabled={busy || disabled} />
-        ) : null}
-        <View style={{ flex: 1 }} />
-        {busy ? (
-          <View style={styles.sendSlot}>
-            <ActivityIndicator size={18} color={solid("violet")} />
-          </View>
-        ) : (
-          <IconButton
-            icon="arrow-up"
-            color="primary"
-            accessibilityLabel="Send"
-            onPress={submit}
-            disabled={!canSubmit}
-          />
-        )}
-      </View>
+    <View style={[styles.box, focused ? styles.boxFocused : null, disabled ? styles.boxDisabled : null]}>
+      {onAttach ? (
+        <Button icon="paperclip" color="secondary" accessibilityLabel="Attach files" onPress={onAttach} disabled={busy || disabled} />
+      ) : null}
+      <RNTextInput
+        accessibilityLabel={accessibilityLabel ?? placeholder}
+        style={[styles.input, getInputTextStyle(), { outline: "none", outlineStyle: "none", outlineWidth: 0 } as object]}
+        value={value}
+        onChangeText={onChangeText}
+        onKeyPress={onKeyPress}
+        onSubmitEditing={submit}
+        onFocus={() => setFocused(true)}
+        onBlur={() => setFocused(false)}
+        placeholder={placeholder}
+        placeholderTextColor={colors.zinc[400]}
+        editable={!busy && !disabled}
+        autoFocus={autoFocus}
+      />
+      <Button icon="arrow-up" color="primary" accessibilityLabel="Send" onPress={submit} disabled={!canSubmit} />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   box: {
-    borderWidth: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    minHeight: 52,
+    borderWidth: 1.5,
     borderColor: colors.border,
-    borderRadius: 14,
+    borderRadius: 999,
     backgroundColor: colors.white,
-    paddingHorizontal: 12,
-    paddingTop: 10,
-    paddingBottom: 8,
-    gap: 6,
-  },
-  inputRow: { flexDirection: "row", gap: 8, alignItems: "flex-start" },
-  glyph: {
-    width: 24,
-    height: 24,
-    borderRadius: 7,
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: tint("violet", 0.1),
-    marginTop: 2,
+    paddingHorizontal: 6,
   },
+  boxFocused: { borderColor: colors.zinc[900] },
+  boxDisabled: { backgroundColor: colors.zinc[50] },
   input: {
     flex: 1,
-    minHeight: 48,
-    maxHeight: 160,
-    paddingTop: 4,
-    paddingBottom: 0,
+    height: ROW,
+    paddingHorizontal: 10,
     fontFamily: fontFamilyRegular,
-    // RN-Web focus outline is handled by the box ring, not the raw input.
-    outlineStyle: "none",
   } as object,
-  footer: { flexDirection: "row", alignItems: "center" },
-  sendSlot: { width: 28, height: 28, alignItems: "center", justifyContent: "center" },
 });

package/src/record_review.tsx

@@ -0,0 +1,149 @@
+import { StyleSheet, View } from "react-native";
+import { colors, solid } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { InlineTextInput } from "./inline_text_input";
+import { Confidence, type ConfidenceLevel } from "./confidence";
+
+export interface RecordField {
+  label: string;
+  value: string;
+  /** Unit suffix shown after the value (₫, kg, pcs). */
+  unit?: string;
+  /** Mark a low-confidence field worth double-checking — a subtle amber dot. */
+  uncertain?: boolean;
+}
+
+export interface RecordReviewProps {
+  /** A short identifier for the record ("Carton 1", a code, a name). */
+  title?: string;
+  fields: RecordField[];
+  confidence?: ConfidenceLevel;
+  confidenceScore?: number;
+  /** Edit a field — fired on save of the inline editor (blur / Enter). When set,
+   *  each value is click-to-edit; omit for a read-only review. */
+  onEditField?: (index: number, value: string) => void;
+  /** Confirm the record — it collapses to a summary the host can re-open. */
+  onConfirm?: () => void;
+  /** Remove / skip the record (don't add it). */
+  onRemove?: () => void;
+  /** Re-open a confirmed or removed record. */
+  onUndo?: () => void;
+  status?: "pending" | "confirmed" | "removed";
+}
+
+/**
+ * One extracted record under review before it's saved — the agent's fields, each
+ * click-to-edit (`InlineTextInput`), with a confidence and Confirm / Remove. On
+ * confirm (or remove) the card COLLAPSES to a one-line summary with Undo, so a
+ * long extraction reads as a tidy checklist of what's been reviewed. Stack
+ * several under a "Save all" to capture a whole document → table; the source +
+ * streaming + save belong to the host (see `tpl_extract`). Replaces per-field
+ * confirmable estimates with a whole-record review.
+ */
+export function RecordReview(props: RecordReviewProps) {
+  const status = props.status ?? "pending";
+  const hasConfidence = props.confidence != null || props.confidenceScore != null;
+
+  if (status === "confirmed" || status === "removed") {
+    const removed = status === "removed";
+    return (
+      <View style={styles.collapsed}>
+        <Icon name={removed ? "x" : "check"} size={15} color={removed ? colors.zinc[400] : solid("emerald")} />
+        <Text
+          size="sm"
+          weight="medium"
+          color={removed ? "muted" : "default"}
+          numberOfLines={1}
+          style={[{ flex: 1 }, removed ? styles.strike : null]}
+        >
+          {props.title ?? props.fields[0]?.value ?? "Record"}
+        </Text>
+        <Text size="sm" weight="medium" color="muted">
+          {removed ? "Removed" : "Confirmed"}
+        </Text>
+        {props.onUndo ? <Button title="Undo" color="muted" shape="rounded" onPress={props.onUndo} /> : null}
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.header}>
+        <Text size="sm" weight="semibold" style={{ flex: 1 }} numberOfLines={1}>
+          {props.title ?? "Record"}
+        </Text>
+        {hasConfidence ? <Confidence level={props.confidence} score={props.confidenceScore} /> : null}
+      </View>
+
+      <View style={styles.fields}>
+        {props.fields.map((f, i) => (
+          <View key={`${f.label}-${i}`} style={styles.fieldRow}>
+            <View style={styles.labelCol}>
+              {f.uncertain ? <View style={styles.uncertainDot} /> : null}
+              <Text size="sm" color="muted" numberOfLines={1}>
+                {f.label}
+              </Text>
+            </View>
+            <View style={styles.valueCol}>
+              <View style={{ flex: 1 }}>
+                {props.onEditField ? (
+                  <InlineTextInput value={f.value} accessibilityLabel={`Edit ${f.label}`} onSave={(next) => props.onEditField?.(i, next)} />
+                ) : (
+                  <Text size="sm" weight="medium" tabular>
+                    {f.value}
+                  </Text>
+                )}
+              </View>
+              {f.unit ? (
+                <Text size="sm" color="muted">
+                  {f.unit}
+                </Text>
+              ) : null}
+            </View>
+          </View>
+        ))}
+      </View>
+
+      {props.onConfirm || props.onRemove ? (
+        <View style={styles.footer}>
+          {props.onRemove ? <Button title="Remove" color="muted" shape="rounded" onPress={props.onRemove} /> : null}
+          {props.onConfirm ? <Button title="Confirm" color="secondary" shape="rounded" onPress={props.onConfirm} /> : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 16,
+    gap: 12,
+  },
+  header: { flexDirection: "row", alignItems: "center", gap: 10 },
+  fields: { gap: 2 },
+  fieldRow: { flexDirection: "row", alignItems: "center", gap: 16, minHeight: 34 },
+  labelCol: { flexDirection: "row", alignItems: "center", gap: 6, width: 132 },
+  uncertainDot: { width: 6, height: 6, borderRadius: 999, backgroundColor: solid("amber") },
+  valueCol: { flex: 1, flexDirection: "row", alignItems: "center", gap: 6 },
+  collapsed: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+    backgroundColor: colors.white,
+    borderWidth: 1,
+    borderColor: colors.border,
+    borderRadius: 12,
+    paddingLeft: 14,
+    paddingRight: 8,
+    paddingVertical: 6,
+    minHeight: 48,
+  },
+  strike: { textDecorationLine: "line-through" },
+  footer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+});

package/src/scored_option.tsx

@@ -0,0 +1,139 @@
+import { StyleSheet, View, type ViewStyle } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Button } from "./button";
+import { SpecList, type SpecRow } from "./spec_list";
+
+export interface ScoredOptionProps {
+  /** Rank in the shortlist (1 = top). */
+  rank?: number;
+  title: string;
+  /** Secondary line — the provider, the route summary. */
+  subtitle?: string;
+  /** 0–1 score the agent assigned — drives the score bar + figure. */
+  score?: number;
+  /** One line on why it ranks where it does. */
+  rationale?: string;
+  /** Key specs (price, transit, …) — rendered as a dense `SpecList`. */
+  specs?: SpecRow[];
+  /** The agent's top pick — a "RECOMMENDED" label + a heavier border. */
+  recommended?: boolean;
+  selected?: boolean;
+  onSelect?: () => void;
+  selectLabel?: string;
+}
+
+/**
+ * An AI-RANKED candidate in a shortlist — rank, score, the agent's one-line
+ * reason (a margin note), and the key specs — that the human picks from. The
+ * agent scores and orders; the choice stays the human's. Mark the agent's top
+ * pick `recommended` (a label + heavier border, no colour). The unit of an AI
+ * compare / shortlist / recommend surface (quotes, carriers, suppliers, plans).
+ * Monochrome and iconless. Stack several, highest rank first.
+ */
+export function ScoredOption(props: ScoredOptionProps) {
+  const { rank, title, subtitle, score, rationale, specs, recommended, selected, onSelect, selectLabel } = props;
+  const pct = score != null ? Math.round(score * 100) : null;
+  return (
+    <View style={[styles.card, recommended ? styles.recCard : null, selected ? styles.selected : null]}>
+      {recommended ? (
+        <Text size="xs" color="default" weight="semibold">
+          Recommended
+        </Text>
+      ) : null}
+
+      <View style={styles.head}>
+        {rank != null ? (
+          <View style={styles.rank}>
+            <Text size="sm" weight="semibold" style={{ color: colors.zinc[700] }}>
+              {rank}
+            </Text>
+          </View>
+        ) : null}
+        <View style={styles.titleCol}>
+          <Text size="md" weight="semibold" numberOfLines={1}>
+            {title}
+          </Text>
+          {subtitle ? (
+            <Text size="xs" color="muted" numberOfLines={1}>
+              {subtitle}
+            </Text>
+          ) : null}
+        </View>
+        {pct != null ? (
+          <View style={styles.scoreCol}>
+            <Text size="lg" weight="semibold" tabular>
+              {pct}
+            </Text>
+            <Text size="xs" color="muted">
+              score
+            </Text>
+          </View>
+        ) : null}
+      </View>
+
+      {pct != null ? (
+        <View style={styles.track}>
+          <View style={[styles.fill, { width: `${pct}%` }]} />
+        </View>
+      ) : null}
+
+      {rationale ? (
+        <View style={styles.note}>
+          <Text size="sm" color="muted">
+            {rationale}
+          </Text>
+        </View>
+      ) : null}
+
+      {specs && specs.length > 0 ? <SpecList rows={specs} dense /> : null}
+
+      {onSelect ? (
+        <View style={styles.footer}>
+          <Button
+            title={selected ? "Selected" : selectLabel ?? "Choose"}
+            icon={selected ? "check" : undefined}
+            color={selected ? "secondary" : "primary"}
+            shape="rounded"
+            onPress={onSelect}
+          />
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+const RING: ViewStyle = { boxShadow: `0 0 0 2px ${colors.zinc[900]}` } as ViewStyle;
+
+const styles = StyleSheet.create({
+  card: {
+    borderWidth: 1,
+    borderColor: colors.border,
+    backgroundColor: colors.white,
+    borderRadius: 12,
+    padding: 16,
+    gap: 12,
+  },
+  recCard: { borderColor: colors.zinc[400] },
+  selected: RING,
+  footer: { flexDirection: "row", justifyContent: "flex-end" },
+  head: { flexDirection: "row", alignItems: "center", gap: 12 },
+  rank: {
+    width: 28,
+    height: 28,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: colors.zinc[100],
+  },
+  titleCol: { flex: 1, gap: 1 },
+  scoreCol: { alignItems: "flex-end" },
+  track: {
+    height: 6,
+    borderRadius: 999,
+    backgroundColor: colors.zinc[100],
+    overflow: "hidden",
+  },
+  fill: { height: "100%", borderRadius: 999, backgroundColor: colors.zinc[900] },
+  note: { borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 10 },
+});

package/src/sources.tsx

@@ -1,5 +1,5 @@
 import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
+import { colors, solid, tint, type ColorName } from "./colors";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { PressableHighlight } from "./pressable_highlight";
@@ -10,7 +10,7 @@ export interface SourceRef {
   id: string;
   label: string;
   kind?: SourceKind;
-  /** A locator under the label — "page 2", a record code, a column. */
+  /** A locator after the label — "page 2", a record code, a column. */
   detail?: string;
 }
 
@@ -18,36 +18,41 @@ export interface SourcesProps {
   sources: SourceRef[];
   /** Eyebrow above the chips. Default "Sources". */
   label?: string;
-  /** Pass to make each chip openable (jump to the record / document / page). */
+  /** Pass to make each chip openable (jump to the record / document / page). The
+   *  chips then show a hover state + an open glyph; the host does the navigation. */
   onOpen?: (source: SourceRef) => void;
 }
 
-const KIND_ICON: Record<SourceKind, IconName> = {
-  record: "box",
-  document: "file-text",
-  table: "table-2",
-  web: "external-link",
-  knowledge: "book-open",
+// Each kind carries its own glyph + colour — provenance you can recognise at a
+// glance (echoing the file-badge palette: document red, table green, …).
+const KIND: Record<SourceKind, { icon: IconName; color: ColorName }> = {
+  document: { icon: "file-text", color: "red" },
+  table: { icon: "table-2", color: "emerald" },
+  record: { icon: "box", color: "blue" },
+  knowledge: { icon: "book-open", color: "amber" },
+  web: { icon: "globe", color: "sky" },
 };
 
 /**
  * Where the AI's output came FROM — a row of source chips under a generated
- * answer, summary, or extracted value, each openable. Provenance is what makes
- * AI output verifiable; show it on anything the agent produced from data it
- * read (extraction, summarization, Q&A). Renders nothing for an empty list.
+ * answer, summary, or extracted value, each with a per-kind coloured glyph.
+ * When `onOpen` is set each chip is pressable (hover wash + an open glyph) and
+ * the host navigates to the record / document / page. Provenance is what makes
+ * AI output verifiable; show it on anything the agent produced from data it read.
+ * Renders nothing for an empty list.
  */
 export function Sources(props: SourcesProps) {
   if (props.sources.length === 0) return null;
   return (
-    <View style={{ gap: 6 }}>
-      <Text size="xs" color="muted" transform="uppercase">
+    <View style={{ gap: 8 }}>
+      <Text size="xs" color="muted" weight="medium">
         {props.label ?? "Sources"}
       </Text>
       <View style={styles.row}>
         {props.sources.map((s) =>
           props.onOpen ? (
-            <PressableHighlight key={s.id} onPress={() => props.onOpen?.(s)} style={styles.chip}>
-              <SourceChip source={s} />
+            <PressableHighlight key={s.id} onPress={() => props.onOpen?.(s)} accessibilityLabel={`Open ${s.label}`} style={styles.chip}>
+              <SourceChip source={s} openable />
             </PressableHighlight>
           ) : (
             <View key={s.id} style={styles.chip}>
@@ -60,10 +65,13 @@ export function Sources(props: SourcesProps) {
   );
 }
 
-function SourceChip({ source }: { source: SourceRef }) {
+function SourceChip({ source, openable }: { source: SourceRef; openable?: boolean }) {
+  const k = KIND[source.kind ?? "document"];
   return (
     <>
-      <Icon name={KIND_ICON[source.kind ?? "document"]} size={12} color={colors.zinc[500]} />
+      <View style={[styles.iconDisc, { backgroundColor: tint(k.color, 0.14) }]}>
+        <Icon name={k.icon} size={13} color={solid(k.color)} />
+      </View>
       <Text size="xs" weight="medium" numberOfLines={1}>
         {source.label}
       </Text>
@@ -72,6 +80,7 @@ function SourceChip({ source }: { source: SourceRef }) {
           {source.detail}
         </Text>
       ) : null}
+      {openable ? <Icon name="external-link" size={12} color={colors.zinc[400]} /> : null}
     </>
   );
 }
@@ -81,12 +90,20 @@ const styles = StyleSheet.create({
   chip: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
-    paddingHorizontal: 10,
+    gap: 8,
+    paddingLeft: 5,
+    paddingRight: 10,
     paddingVertical: 5,
-    borderRadius: 8,
+    borderRadius: 10,
     borderWidth: 1,
     borderColor: colors.border,
     backgroundColor: colors.white,
   },
+  iconDisc: {
+    width: 24,
+    height: 24,
+    borderRadius: 7,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });

package/src/spec_list.tsx

@@ -0,0 +1,81 @@
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text";
+import { Divider } from "./divider";
+
+export interface SpecRow {
+  /** The line label (left). */
+  label: string;
+  /** The value (right). A number renders grouped + tabular. */
+  value: string | number;
+  /** Unit after the value (%, mm, kg, ₫). */
+  unit?: string;
+  /** A heavier value — a headline figure or a sub-total inside the list. */
+  emphasis?: boolean;
+}
+
+export interface SpecListProps {
+  rows: SpecRow[];
+  /** A pinned summary row, set off by a divider above and a heavier weight —
+   *  the total of a duty / cost / dimension breakdown. */
+  total?: SpecRow;
+  /** Tighter rows + xs labels for a dense side panel. */
+  dense?: boolean;
+}
+
+/**
+ * A labeled-value breakdown — the structured "spec sheet": a duty table, a
+ * dimensions list, a cost split, the exact numbers behind an answer. Each row is
+ * just label → value (· unit); an optional `total` pins the sum under a divider.
+ * Deliberately minimal — two columns, hierarchy from weight and tabular figures.
+ * The right-hand panel of a lookup / answer surface, the specs of a compared
+ * option.
+ */
+export function SpecList({ rows, total, dense }: SpecListProps) {
+  return (
+    <View>
+      {rows.map((r, i) => (
+        <SpecLine key={`${r.label}-${i}`} row={r} dense={dense} />
+      ))}
+      {total ? (
+        <>
+          <Divider paddingVertical={dense ? 5 : 7} />
+          <SpecLine row={{ ...total, emphasis: true }} dense={dense} isTotal />
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+function SpecLine({ row, dense, isTotal }: { row: SpecRow; dense?: boolean; isTotal?: boolean }) {
+  const { label, value, unit, emphasis } = row;
+  const display = typeof value === "number" ? value.toLocaleString("en-US") : value;
+  return (
+    <View style={[styles.row, { minHeight: dense ? 26 : 32 }]}>
+      <Text
+        size={dense ? "xs" : "sm"}
+        color={isTotal ? "default" : "muted"}
+        weight={isTotal ? "semibold" : "regular"}
+        numberOfLines={1}
+        style={styles.labelText}
+      >
+        {label}
+      </Text>
+      <View style={styles.valueRow}>
+        <Text size={dense && !isTotal ? "sm" : "md"} weight={emphasis ? "semibold" : "medium"} tabular>
+          {display}
+        </Text>
+        {unit ? (
+          <Text size={dense ? "xs" : "sm"} color="muted">
+            {unit}
+          </Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "baseline", justifyContent: "space-between", gap: 16 },
+  labelText: { flexShrink: 1 },
+  valueRow: { flexDirection: "row", alignItems: "baseline", gap: 4 },
+});