@lotics/ui 4.9.0 → 5.1.0

package/src/change_review.tsx

@@ -1,33 +1,38 @@
+import { type ReactNode } from "react";
 import { StyleSheet, View } from "react-native";
 import { colors } from "./colors";
+import { reviewCardStyle, reviewResolvedStyle } from "./control_surface";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { Button } from "./button";
 
 export type ChangeReviewItemStatus = "pending" | "accepted" | "rejected";
 
-export interface ChangeReviewItem {
-  /** What changed — a field/parameter name. */
-  label: string;
-  /** Prior value. Omit for a newly-added value (renders as just the `+` line). */
-  before?: string;
-  /** Proposed value. */
-  after: string;
-  /** Per-item decision — only meaningful in the 1-by-1 mode (when the host
-   *  passes `onAcceptItem`/`onRejectItem`). */
-  status?: ChangeReviewItemStatus;
-}
-
-export interface ChangeReviewProps {
-  changes: ChangeReviewItem[];
-  /** The instruction that produced the edit ("make it 5 mm taller"). */
+export interface ChangeReviewProps<T> {
+  /** The proposed changes to review. Each renders however the host wants via
+   *  `renderItem` — a field diff (`ChangeDiff`), a record card, an editable
+   *  data-entry form. The component owns the review MECHANICS, not the look. */
+  items: T[];
+  /** Stable identity per item. */
+  getKey: (item: T, index: number) => string;
+  /** The PENDING proposal body — render it however fits. The host owns any edit
+   *  state inside it (e.g. an editable price), so a "kept" item carries the
+   *  host's edits when applied. */
+  renderItem: (item: T, index: number) => ReactNode;
+  /** The collapsed one-line preview shown AFTER a decision (1-by-1 mode). The
+   *  component frames it with the Kept/Dropped tag + Undo; this fills the row.
+   *  Omit to fall back to `getTitle` (struck when dropped). */
+  renderSummary?: (item: T, accepted: boolean, index: number) => ReactNode;
+  /** Short title for the default collapsed row when `renderSummary` is omitted. */
+  getTitle?: (item: T, index: number) => string;
+  /** Per-item decision, controlled by the host (default "pending"). Drives the
+   *  collapse + the "N of M kept" counter in 1-by-1 mode. */
+  statusOf?: (item: T, index: number) => ChangeReviewItemStatus;
+  /** The instruction that produced the changes ("make it 5 mm taller"). */
   summary?: string;
-  onApply?: () => void;
-  onDiscard?: () => void;
-  applyLabel?: string;
-  /** Once resolved the card settles to a quiet outcome line (no actions). */
-  status?: "open" | "applied" | "discarded";
-  /** Providing either flips the card into 1-BY-1 mode: each edit is its own
+  /** Card heading. Default "Suggested edits". */
+  title?: string;
+  /** Providing either flips the card into 1-BY-1 mode: each proposal is its own
    *  card with Keep / Drop; deciding COLLAPSES it to a preview the host can
    *  `onUndoItem`. "Accept all" + "Apply kept" sit in a separate footer. The
    *  decision is recorded — nothing writes until Apply. Omit both for whole-set. */
@@ -35,11 +40,22 @@ export interface ChangeReviewProps {
   onRejectItem?: (index: number) => void;
   /** Revert a decided item back to pending (the Undo on a collapsed card). */
   onUndoItem?: (index: number) => void;
+  onApply?: () => void;
+  onDiscard?: () => void;
+  applyLabel?: string;
+  /** 1-by-1 per-item action labels. Default "Keep" / "Drop". */
+  acceptLabel?: string;
+  rejectLabel?: string;
+  acceptAllLabel?: string;
+  /** Once resolved the card settles to a quiet outcome line (no actions). */
+  status?: "open" | "applied" | "discarded";
 }
 
-/** A git-style stacked diff: the old value on a red `−` line (struck), the new
- *  value on a green `+` line. An addition (no `before`) is just the `+` line. */
-function DiffLines({ before, after }: { before?: string; after: string }) {
+/** A git-style diff body: the old value on a red `−` line (struck), the new
+ *  value on a green `+` line. An addition (no `before`) is just the `+` line.
+ *  The canonical `renderItem` for a single-field change — compose it under your
+ *  own field label. */
+export function ChangeDiff({ before, after }: { before?: string; after: string }) {
   return (
     <View style={styles.diff}>
       {before != null ? (
@@ -65,23 +81,26 @@ function DiffLines({ before, after }: { before?: string; after: string }) {
 }
 
 /**
- * An agent-proposed edit to existing state, reviewed before it lands — never
- * auto-applied. Two modes. Whole-set: a list of before→after diffs + apply /
- * discard the lot. 1-BY-1 (when the host passes `onAcceptItem`/`onRejectItem`):
- * each edit is its own card with Keep / Drop; deciding COLLAPSES the card to a
- * preview with Undo, and a separate footer carries Accept-all + the single Apply
- * that commits the kept set. Where `Suggestion` proposes a NEW value, this
- * reviews CHANGES to existing ones.
+ * An agent-proposed set of changes, reviewed before it lands — never
+ * auto-applied. The component owns the review MECHANICS; `renderItem` owns how
+ * each proposal looks, so it serves a field diff, a record, or an editable form
+ * equally. Two modes. Whole-set: the list + apply / discard the lot. 1-BY-1
+ * (when the host passes `onAcceptItem`/`onRejectItem`): each proposal is its own
+ * card with Keep / Drop; deciding COLLAPSES the card to a preview with Undo, and
+ * a separate footer carries Accept-all + the single Apply that commits the kept
+ * set. Where a `ReviewCard` reviews a SINGLE proposal, this is the BATCH engine.
  */
-export function ChangeReview(props: ChangeReviewProps) {
+export function ChangeReview<T>(props: ChangeReviewProps<T>) {
   const status = props.status ?? "open";
   const perItem = props.onAcceptItem != null || props.onRejectItem != null;
-  const total = props.changes.length;
-  const keptCount = props.changes.filter((c) => c.status === "accepted").length;
+  const total = props.items.length;
+  const statusFor = (item: T, i: number) => props.statusOf?.(item, i) ?? "pending";
+  const keptCount = props.items.filter((it, i) => statusFor(it, i) === "accepted").length;
+  const title = props.title ?? "Suggested edits";
 
   const acceptAll = () =>
-    props.changes.forEach((c, i) => {
-      if ((c.status ?? "pending") === "pending") props.onAcceptItem?.(i);
+    props.items.forEach((it, i) => {
+      if (statusFor(it, i) === "pending") props.onAcceptItem?.(i);
     });
 
   const summaryNote = props.summary ? (
@@ -92,13 +111,14 @@ export function ChangeReview(props: ChangeReviewProps) {
     </View>
   ) : null;
 
-  // ── 1-BY-1: each edit a card; deciding collapses it to a preview ──────────
+  // ── 1-BY-1: each proposal a bordered card; deciding collapses it to a quiet,
+  //    lighter row — visual weight tracks whether it still needs you ──────────
   if (perItem) {
     return (
-      <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
+      <View style={status !== "open" ? styles.resolvedCard : styles.stack}>
         <View style={styles.head}>
           <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>
-            Suggested edits
+            {title}
           </Text>
           {status === "open" ? (
             <Text size="xs" color="muted" tabular>
@@ -115,41 +135,31 @@ export function ChangeReview(props: ChangeReviewProps) {
         ) : (
           <>
             <View style={styles.list}>
-              {props.changes.map((c, i) => {
-                const st = c.status ?? "pending";
+              {props.items.map((item, i) => {
+                const st = statusFor(item, i);
                 if (st === "pending") {
                   return (
-                    <View key={`${c.label}-${i}`} style={styles.block}>
-                      <Text size="xs" color="muted" weight="medium">
-                        {c.label}
-                      </Text>
-                      <DiffLines before={c.before} after={c.after} />
-                      <View style={styles.cardActions}>
-                        <Button title="Drop" color="muted" shape="rounded" onPress={() => props.onRejectItem?.(i)} />
-                        <Button title="Keep" color="secondary" shape="rounded" onPress={() => props.onAcceptItem?.(i)} />
+                    <View key={props.getKey(item, i)} style={styles.itemCard}>
+                      {props.renderItem(item, i)}
+                      <View style={styles.itemActions}>
+                        <Button title={props.rejectLabel ?? "Drop"} color="muted" shape="rounded" onPress={() => props.onRejectItem?.(i)} />
+                        <Button title={props.acceptLabel ?? "Keep"} color="secondary" shape="rounded" onPress={() => props.onAcceptItem?.(i)} />
                       </View>
                     </View>
                   );
                 }
                 const kept = st === "accepted";
                 return (
-                  <View key={`${c.label}-${i}`} style={styles.collapsed}>
-                    <Text size="sm" weight="medium" numberOfLines={1}>
-                      {c.label}
-                    </Text>
-                    <Text
-                      size="sm"
-                      color={kept ? "default" : "muted"}
-                      numberOfLines={1}
-                      style={[{ flex: 1 }, kept ? null : styles.strike]}
-                    >
-                      {kept ? c.after : c.before ?? c.after}
-                    </Text>
-                    <View style={styles.statusTag}>
-                      <Icon name={kept ? "check" : "x"} size={14} color={kept ? colors.emerald[600] : colors.zinc[400]} />
-                      <Text size="sm" weight="medium" color="muted">
-                        {kept ? "Kept" : "Dropped"}
-                      </Text>
+                  <View key={props.getKey(item, i)} style={[styles.decidedRow, kept ? null : styles.decidedDrop]}>
+                    <Icon name={kept ? "check" : "x"} size={15} color={kept ? colors.emerald[600] : colors.zinc[400]} />
+                    <View style={{ flex: 1 }}>
+                      {props.renderSummary ? (
+                        props.renderSummary(item, kept, i)
+                      ) : (
+                        <Text size="sm" color={kept ? "default" : "muted"} numberOfLines={1} style={kept ? null : styles.strike}>
+                          {props.getTitle?.(item, i) ?? ""}
+                        </Text>
+                      )}
                     </View>
                     {props.onUndoItem ? (
                       <Button title="Undo" color="muted" shape="rounded" onPress={() => props.onUndoItem?.(i)} />
@@ -160,7 +170,7 @@ export function ChangeReview(props: ChangeReviewProps) {
             </View>
 
             <View style={styles.footer}>
-              <Button title="Accept all" color="muted" shape="rounded" onPress={acceptAll} />
+              <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" shape="rounded" onPress={acceptAll} />
               <View style={{ flex: 1 }} />
               {props.onDiscard ? <Button title="Discard" color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
               {props.onApply ? (
@@ -173,20 +183,17 @@ export function ChangeReview(props: ChangeReviewProps) {
     );
   }
 
-  // ── WHOLE-SET: review the lot, apply / discard together ───────────────────
+  // ── WHOLE-SET: one bordered card, review the lot, apply / discard together ─
   return (
-    <View style={[styles.card, status !== "open" ? styles.resolved : null]}>
+    <View style={[reviewCardStyle, status !== "open" ? reviewResolvedStyle : null]}>
       <Text size="xs" color="muted" weight="medium">
-        Suggested edit
+        {title}
       </Text>
       {summaryNote}
-      <View style={styles.block}>
-        {props.changes.map((c, i) => (
-          <View key={`${c.label}-${i}`} style={i > 0 ? styles.changeSpacer : undefined}>
-            <Text size="xs" color="muted" weight="medium">
-              {c.label}
-            </Text>
-            <DiffLines before={c.before} after={c.after} />
+      <View>
+        {props.items.map((item, i) => (
+          <View key={props.getKey(item, i)} style={i > 0 ? styles.changeSpacer : undefined}>
+            {props.renderItem(item, i)}
           </View>
         ))}
       </View>
@@ -209,37 +216,37 @@ export function ChangeReview(props: ChangeReviewProps) {
 
 const styles = {
   ...StyleSheet.create({
-    card: {
-      borderWidth: 1,
-      borderColor: colors.border,
-      backgroundColor: colors.white,
-      borderRadius: 12,
-      padding: 16,
-      gap: 14,
-    },
-    resolved: { backgroundColor: colors.zinc[50] },
+    // 1-by-1 outer: no chrome — the parent (dialog / message column) is the
+    // boundary. A nested card-in-card with two fills reads muddy. (Whole-set
+    // wears the shared `reviewCardStyle`; the resolved summary just stacks.)
+    stack: { gap: 14 },
+    resolvedCard: { gap: 14 },
     head: { flexDirection: "row", alignItems: "center", gap: 8 },
-    note: { borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 },
+    note: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 12 },
     list: { gap: 8 },
-    block: { backgroundColor: colors.zinc[50], borderRadius: 10, padding: 14, gap: 10 },
-    cardActions: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
-    collapsed: {
+    // A PENDING proposal: a hairline-bordered card, no fill — it needs a decision.
+    itemCard: { borderWidth: 1, borderColor: colors.border, borderRadius: 12, padding: 16, gap: 14, backgroundColor: colors.white },
+    // Actions sit in a divided footer so they read intentional, not floating.
+    itemActions: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8, borderTopWidth: 1, borderTopColor: colors.zinc[100], paddingTop: 12 },
+    // A DECIDED proposal: a lighter, quieter row — resolved, out of the way.
+    decidedRow: {
       flexDirection: "row",
       alignItems: "center",
       gap: 10,
-      backgroundColor: colors.zinc[50],
+      borderWidth: 1,
+      borderColor: colors.zinc[100],
       borderRadius: 10,
-      paddingLeft: 14,
+      paddingLeft: 12,
       paddingRight: 8,
       paddingVertical: 6,
-      minHeight: 48,
+      minHeight: 44,
     },
-    statusTag: { flexDirection: "row", alignItems: "center", gap: 4 },
-    changeSpacer: { marginTop: 10, borderTopWidth: 1, borderTopColor: colors.zinc[200], paddingTop: 10 },
+    decidedDrop: { backgroundColor: colors.zinc[50] },
+    changeSpacer: { marginTop: 12, borderTopWidth: 1, borderTopColor: colors.zinc[100], paddingTop: 12 },
     diff: { gap: 3 },
     diffLine: { flexDirection: "row", alignItems: "baseline", gap: 8 },
     strike: { textDecorationLine: "line-through" },
-    footer: { flexDirection: "row", alignItems: "center", gap: 8 },
+    footer: { flexDirection: "row", alignItems: "center", gap: 8, borderTopWidth: 1, borderTopColor: colors.zinc[200], paddingTop: 14 },
   }),
   marker: (color: string) => ({ color, width: 12 }),
   value: (color: string) => ({ color }),

package/src/combobox.tsx

@@ -9,7 +9,7 @@ import {
 } from "react-native";
 import { useCallback, useEffect, useId, useMemo, useRef, useState, type ReactNode } from "react";
 import { colors } from "./colors";
-import { ACTIVE_RING } from "./control_surface";
+import { ACTIVE_RING, inputPillStyle } from "./control_surface";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { TextInputField } from "./text_input_field";
@@ -70,6 +70,11 @@ export interface ComboboxProps<T extends string = string, D = unknown> {
    *  picker, not a free-text search box. Opt IN to the search-box look explicitly
    *  with `icon="search"` (leading glyph, no chevron). Multi-select shows neither. */
   icon?: IconName;
+  /** Render the input on the white toolbar-pill surface (rounded-full, white
+   *  fill, zinc-300 border) — the same surface SearchInput/ChipGroup/FilterPill
+   *  wear — so a combobox used as a toolbar filter reads as a view-control on the
+   *  zinc-50 canvas, not a form field. Single-select only. */
+  pill?: boolean;
   placeholder?: string;
   recentsLabel?: string;
   emptyText?: string;
@@ -123,6 +128,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     loading = false,
     searchDebounceMs = 200,
     icon,
+    pill = false,
     placeholder,
     recentsLabel = "Recent",
     emptyText = "No results",
@@ -340,6 +346,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
           autoCorrect={false}
           style={[
             multi ? styles.multiInput : showChevron ? styles.selectInput : undefined,
+            !multi && pill ? inputPillStyle : undefined,
             // Single-select wears the open ring on the input (which holds the
             // border); multi wears it on the wrapper above (the input is borderless).
             // Gate on `showList`, not `open`: an empty query with no options has

package/src/confidence.tsx

@@ -26,7 +26,7 @@ export function levelFromScore(score: number): ConfidenceLevel {
  * How sure the AI is — a calibrated high / medium / low read as a 3-tick meter
  * (emerald / amber / zinc) beside the level word. The fill count and the colour
  * both carry the level. The human weights an AI proposal or estimate by it. Pair
- * with `Suggestion` and `RecordReview`.
+ * with `ReviewCard` or `ChangeReview`.
  */
 export function Confidence(props: ConfidenceProps) {
   const level = props.level ?? (props.score != null ? levelFromScore(props.score) : "medium");

package/src/control_surface.ts

@@ -1,4 +1,4 @@
-import { type ViewStyle } from "react-native";
+import { type TextStyle, type ViewStyle } from "react-native";
 import { colors } from "./colors";
 
 /** The system control height — every band control (chips, pills, search,
@@ -13,6 +13,32 @@ export const CONTROL_HEIGHT = 40;
  *  beside the kit's focus outline and selected-pill ring. */
 export const ACTIVE_RING = `0 0 0 2px ${colors.zinc[900]}`;
 
+/** THE white toolbar-input surface — a rounded-full white pill with a one-step-up
+ *  zinc-300 border. A search/select control (SearchInput, and Combobox via `pill`)
+ *  wears it so it reads as a view-control beside ChipGroup/FilterPill on the
+ *  zinc-50 canvas (where the fill pops), not as a form field that vanishes into a
+ *  white card. One definition so the two controls never drift. */
+export const inputPillStyle: TextStyle = {
+  borderRadius: 999,
+  backgroundColor: colors.white,
+  borderColor: colors.zinc[300],
+};
+
+/** THE review-card surface — the bordered white card every "AI proposes, you
+ *  decide" surface wears (`ReviewCard`, and the whole-set `ChangeReview`), so the
+ *  review family reads as ONE contract instead of look-alikes drifting apart. One
+ *  definition; each adds its own header / body / footer on top.
+ *  `reviewResolvedStyle` is the settled wash once decided. */
+export const reviewCardStyle: ViewStyle = {
+  borderWidth: 1,
+  borderColor: colors.border,
+  backgroundColor: colors.white,
+  borderRadius: 12,
+  padding: 16,
+  gap: 12,
+};
+export const reviewResolvedStyle: ViewStyle = { backgroundColor: colors.zinc[50] };
+
 /**
  * THE pill-surface contract — the single definition of the bordered, white,
  * rounded interactive surface shared by `ChipGroup` chips and `PillButton` (and

package/src/file_thumbnail.tsx

@@ -3,6 +3,7 @@ import { fontFamilySemiBold } from "./text_utils";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { Checkbox } from "./checkbox";
+import { ActivityIndicator } from "./activity_indicator";
 import { colors } from "./colors";
 import { useCallback, useState } from "react";
 import {
@@ -66,6 +67,9 @@ interface FileThumbnailProps {
   onRemove?: () => void;
   /** When defined, renders a selection overlay with a checkbox. */
   selected?: boolean;
+  /** While true, dims the thumbnail with a spinner — the file is still uploading
+   *  (the local preview shows immediately; this marks it as in-flight). */
+  uploading?: boolean;
 }
 
 /**
@@ -73,7 +77,7 @@ interface FileThumbnailProps {
  * Works with any file source via DisplayFile interface.
  */
 export function FileThumbnail(props: FileThumbnailProps) {
-  const { file, size, onPress, onLongPress, onRemove, selected } = props;
+  const { file, size, onPress, onLongPress, onRemove, selected, uploading } = props;
 
   const rootStyle =
     size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
@@ -82,6 +86,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
     return (
       <View style={rootStyle}>
         <ImageThumbnail file={file} size={size} onPress={onPress} onLongPress={onLongPress} />
+        {uploading && <UploadingOverlay size={size} />}
         {onRemove && <RemoveButton onPress={onRemove} />}
         {selected !== undefined && <SelectionOverlay selected={selected} />}
       </View>
@@ -99,6 +104,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           onPress={onPress ?? (() => Linking.openURL(file.url))}
           onLongPress={onLongPress}
         />
+        {uploading && <UploadingOverlay size={size} />}
         {onRemove && <RemoveButton onPress={onRemove} />}
       </View>
     );
@@ -124,12 +130,37 @@ export function FileThumbnail(props: FileThumbnailProps) {
           onLongPress={onLongPress}
         />
       )}
+      {uploading && <UploadingOverlay size={size} />}
       {onRemove && <RemoveButton onPress={onRemove} />}
       {selected !== undefined && <SelectionOverlay selected={selected} />}
     </View>
   );
 }
 
+/** A dim + spinner overlay shown while a file is still uploading. `pointerEvents`
+ *  none so the RemoveButton beneath it stays clickable (cancel an in-flight upload). */
+function UploadingOverlay({ size }: { size?: number }) {
+  return (
+    <View style={uploadingOverlayStyles.overlay} pointerEvents="none">
+      <ActivityIndicator size={size !== undefined && size <= COMPACT_THUMBNAIL_SIZE ? 12 : 18} color={colors.white} />
+    </View>
+  );
+}
+
+const uploadingOverlayStyles = StyleSheet.create({
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(24,24,27,0.42)",
+    borderRadius: 8,
+  },
+});
+
 // =============================================================================
 // Base Components (exported for direct use when needed)
 // =============================================================================

package/src/icon.tsx

@@ -116,6 +116,7 @@ import LockOpen from "lucide-react-native/dist/esm/icons/lock-open";
 import LogIn from "lucide-react-native/dist/esm/icons/log-in";
 import LogOut from "lucide-react-native/dist/esm/icons/log-out";
 import Mail from "lucide-react-native/dist/esm/icons/mail";
+import MapPin from "lucide-react-native/dist/esm/icons/map-pin";
 import Maximize2 from "lucide-react-native/dist/esm/icons/maximize-2";
 import Megaphone from "lucide-react-native/dist/esm/icons/megaphone";
 import Mic from "lucide-react-native/dist/esm/icons/mic";
@@ -310,6 +311,7 @@ const iconComponents = {
   "log-in": LogIn,
   "log-out": LogOut,
   mail: Mail,
+  "map-pin": MapPin,
   "maximize-2": Maximize2,
   megaphone: Megaphone,
   menu: Menu,

package/src/match_sides.tsx

@@ -0,0 +1,79 @@
+import { type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "./colors";
+import { Text } from "./text";
+import { Icon } from "./icon";
+
+export interface MatchSideTextProps {
+  /** Primary line — the record name / id. */
+  title: string;
+  /** Secondary line — amount, date, customer. */
+  detail?: string;
+  /** Right-align for the proposed (right) side of a pairing. */
+  align?: "left" | "right";
+}
+
+/**
+ * The DEFAULT side content — a title + a muted detail line. Pass it into a
+ * `MatchSides` slot for the common case; drop a different node in when a side
+ * needs more (a `Peek` to preview the record, an interactive card, a thumbnail).
+ */
+export function MatchSideText({ title, detail, align }: MatchSideTextProps) {
+  const right = align === "right";
+  return (
+    <>
+      <Text size="sm" weight="semibold" numberOfLines={1} align={right ? "right" : undefined}>
+        {title}
+      </Text>
+      {detail ? (
+        <Text size="xs" color="muted" numberOfLines={1} align={right ? "right" : undefined}>
+          {detail}
+        </Text>
+      ) : null}
+    </>
+  );
+}
+
+export interface MatchSidesProps {
+  /** Left content — ANY node. `MatchSideText` for the default, or a `Peek` /
+   *  interactive card / thumbnail when a side needs to do more. */
+  source: ReactNode;
+  /** Right content. Omit → the "no confident match" placeholder. */
+  match?: ReactNode;
+  /** The connector between the sides. Default: a right arrow. Override to carry
+   *  a swap control, a label, or a different glyph. */
+  connector?: ReactNode;
+}
+
+/**
+ * The two-sided PAIRING — a left slot, a connector, a right slot. A pure LAYOUT
+ * primitive: it owns the two-column arrangement and the connector, the CONTENT
+ * of each side is yours (`MatchSideText`, a `Peek`, anything). The hero of a
+ * reconciliation; the confidence, reason, and decision come from the `ReviewCard`.
+ */
+export function MatchSides(props: MatchSidesProps) {
+  return (
+    <View style={styles.pair}>
+      <View style={styles.side}>{props.source}</View>
+      {props.connector ?? <Icon name="arrow-right" size={16} color={colors.zinc[400]} />}
+      <View style={[styles.side, styles.sideRight]}>
+        {props.match ?? (
+          <>
+            <Text size="sm" weight="medium" color="muted" align="right" numberOfLines={1}>
+              No confident match
+            </Text>
+            <Text size="xs" color="muted" align="right" numberOfLines={1}>
+              Pick a counterpart
+            </Text>
+          </>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  pair: { flexDirection: "row", alignItems: "center", gap: 14 },
+  side: { flex: 1, gap: 3, minWidth: 0 },
+  sideRight: { alignItems: "flex-end" },
+});

package/src/record_fields.tsx

@@ -0,0 +1,68 @@
+import { StyleSheet, View } from "react-native";
+import { solid } from "./colors";
+import { Text } from "./text";
+import { InlineTextInput } from "./inline_text_input";
+
+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 RecordFieldsProps {
+  fields: RecordField[];
+  /** 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 record. */
+  onEditField?: (index: number, value: string) => void;
+}
+
+/**
+ * The BODY of an extracted record — a label/value list, each value click-to-edit
+ * (`InlineTextInput`) or read-only. A pure body atom: drop it into a `ReviewCard`
+ * to review-before-save (a confidence + Confirm / Remove, stacked under a Save-all
+ * → `tpl_extract`), or use it standalone as a live-edit field card (a params
+ * panel). The review MECHANICS belong to the host / `ReviewCard`, not here.
+ */
+export function RecordFields(props: RecordFieldsProps) {
+  return (
+    <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>
+  );
+}
+
+const styles = StyleSheet.create({
+  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 },
+});