@lotics/ui 7.19.3 → 8.0.0

package/src/change_review.tsx

@@ -1,259 +1,732 @@
-import { type ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { StyleSheet, TextInput as RNTextInput, 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";
+import { TextInputField } from "./text_input_field";
+import { FocusRingPressable } from "./focus_ring_pressable";
+import { CardSelectItem } from "./card_select_item";
 import { useLoticsLocale } from "./locale";
+import { fontFamilyMedium } from "./text_utils";
 
-export type ChangeReviewItemStatus = "pending" | "accepted" | "rejected";
-
-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;
-  /** Card heading. Default "Suggested edits". */
-  title?: string;
-  /** Providing either flips into 1-BY-1 mode: each proposal is its own card with
-   *  Keep / Drop; deciding COLLAPSES it to a preview the host can `onUndoItem`.
-   *  Omit both for whole-set (the list, reviewed together). The commit bar
-   *  (Accept all / Apply / Discard) is NOT here — it's `ChangeReviewActions`,
-   *  which the host places in a `DialogFooter` / `DrawerFooter` / inline. */
-  onAcceptItem?: (index: number) => void;
-  onRejectItem?: (index: number) => void;
-  /** Revert a decided item back to pending (the Undo on a collapsed card). */
-  onUndoItem?: (index: number) => void;
-  /** 1-by-1 per-item action labels. Default "Keep" / "Drop". */
+export type ChangeStatus = "pending" | "accepted" | "rejected";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// ChangeReview — THE review-before-apply surface, as a COMPOUND family. The
+// host composes exactly what each change shows; the family owns the review
+// mechanics (decide → collapse → undo, the kept counter, the commit bar).
+//
+//   <ChangeReview>
+//     <ChangeReviewHeader />                        ← title + auto "N/M kept"
+//     <Change id="vessel" status={…} onAccept={…} onReject={…} onUndo={…}>
+//       <ChangeLabel>Vessel</ChangeLabel>
+//       …any body — ChangeFields, a finding, prose…
+//       <ChangeSummary>Vessel → MAERSK SALINA</ChangeSummary>    ← decided row
+//     </Change>
+//     …
+//     <ChangeReviewActions onApply={…} onDiscard={…} />
+//   </ChangeReview>
+//
+// State is the HOST's (controlled `status` per Change / ChangeRecord) — the
+// context only mirrors it so the header counter, Keep-all, and the
+// apply-disabled logic derive without the host re-wiring them. An add, an
+// update, a removal and a source conflict are compositions of ONE grammar:
+// `ChangeFields` + `ChangeField` (the − band · the + value · candidate rows)
+// — not separate components; `ChangeRecord` wraps the same grammar in the
+// per-item card for record SETS.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface ChangeEntry {
+  status: ChangeStatus;
+  accept?: () => void;
+}
+
+interface ChangeReviewCtx {
+  register: (id: string, entry: ChangeEntry) => void;
+  unregister: (id: string) => void;
+  entries: ReadonlyMap<string, ChangeEntry>;
+}
+
+const Ctx = createContext<ChangeReviewCtx | null>(null);
+
+const useReviewCtx = (who: string): ChangeReviewCtx => {
+  const ctx = useContext(Ctx);
+  if (!ctx) throw new Error(`${who} must render inside <ChangeReview>`);
+  return ctx;
+};
+
+/** Mirrors a decidable entry's controlled state into the review context — the
+ *  registration `Change` and `ChangeRecord` share (the header counter, Keep-all
+ *  and the apply gate derive from the registry). */
+function useRegisterEntry(who: string, id: string, status: ChangeStatus, onAccept?: () => void) {
+  const { register, unregister } = useReviewCtx(who);
+  const acceptRef = useRef(onAccept);
+  acceptRef.current = onAccept;
+  const stableAccept = useCallback(() => acceptRef.current?.(), []);
+  useEffect(() => {
+    register(id, { status, accept: onAccept ? stableAccept : undefined });
+  }, [register, id, status, onAccept, stableAccept]);
+  useEffect(() => () => unregister(id), [unregister, id]);
+}
+
+export function ChangeReview({ children }: { children: ReactNode }) {
+  const [entries, setEntries] = useState<Map<string, ChangeEntry>>(new Map());
+  const register = useCallback((id: string, entry: ChangeEntry) => {
+    setEntries((m) => {
+      const cur = m.get(id);
+      if (cur && cur.status === entry.status && cur.accept === entry.accept) return m;
+      const n = new Map(m);
+      n.set(id, entry);
+      return n;
+    });
+  }, []);
+  const unregister = useCallback((id: string) => {
+    setEntries((m) => {
+      if (!m.has(id)) return m;
+      const n = new Map(m);
+      n.delete(id);
+      return n;
+    });
+  }, []);
+  const value = useMemo(() => ({ register, unregister, entries }), [register, unregister, entries]);
+  // Containerless: changes are OPEN sections separated by hairline dividers —
+  // spacing and rules, never card boxes (controls keep their own affordances).
+  const kids = Children.toArray(children);
+  const withDividers: ReactNode[] = [];
+  kids.forEach((k, i) => {
+    const prev = kids[i - 1];
+    if (i > 0 && isValidElement(k) && k.type === Change && isValidElement(prev) && prev.type === Change) {
+      withDividers.push(<View key={`div-${i}`} style={styles.divider} />);
+    }
+    withDividers.push(k);
+  });
+  return (
+    <Ctx.Provider value={value}>
+      <View style={styles.stack}>{withDividers}</View>
+    </Ctx.Provider>
+  );
+}
+
+/** Title line + the automatic "N of M kept" counter (derived from the
+ *  registered `Change`s / `ChangeRecord`s). `children` slots extra header
+ *  content on the right. */
+export function ChangeReviewHeader({ title, children }: { title?: string; children?: ReactNode }) {
+  const loc = useLoticsLocale().changeReview;
+  return (
+    <View style={styles.header}>
+      <Text size="md" weight="semibold" style={{ flex: 1 }}>
+        {title ?? loc.title}
+      </Text>
+      {children}
+    </View>
+  );
+}
+
+export interface ChangeProps {
+  /** Stable identity — the counter/commit derive from registered ids. */
+  id: string;
+  /** The HOST owns the decision. */
+  status?: ChangeStatus;
+  onAccept?: () => void;
+  onReject?: () => void;
+  /** Revert a decided change back to pending (the Undo on the collapsed row). */
+  onUndo?: () => void;
+  /** Labels for the per-change actions. Defaults localize ("Keep"/"Drop"). */
   acceptLabel?: string;
   rejectLabel?: string;
-  /** Once resolved the list settles to a quiet outcome line. */
-  status?: "open" | "applied" | "discarded";
-  /** Localize the chrome the LIST emits itself (Keep/Drop take their own props;
-   *  the commit-bar labels live on `ChangeReviewActions`). */
-  labels?: {
-    undo?: string;
-    applied?: string;
-    discarded?: string;
-    /** The "N of M kept" counter — default `${kept} of ${total} kept`. */
-    keptCount?: (kept: number, total: number) => string;
-  };
+  /** Disable Accept until a precondition holds (an unresolved conflict). */
+  acceptDisabled?: boolean;
+  children: ReactNode;
 }
 
-export interface ChangeReviewActionsProps<T> {
-  /** The same items + per-item status the list reads, so Accept-all knows which
-   *  are pending and Apply knows the kept count. */
-  items: T[];
-  statusOf?: (item: T, index: number) => ChangeReviewItemStatus;
-  /** Presence enables 1-by-1: shows Accept-all and disables Apply at 0 kept. Omit
-   *  for whole-set (no Accept-all; Apply commits the lot). */
-  onAcceptItem?: (index: number) => void;
-  onApply?: () => void;
-  onDiscard?: () => void;
-  applyLabel?: string;
-  acceptAllLabel?: string;
-  discardLabel?: string;
-  /** Self-hides unless open — the host can always render it. */
-  status?: "open" | "applied" | "discarded";
-}
+/**
+ * ONE proposed change. Pending → renders the composed body + a labeled action
+ * row (only the callbacks you pass render buttons — omit both for a display-
+ * only entry). Decided → collapses to the `ChangeSummary` child (falls back to
+ * the body) behind a status mark + Undo. The body is ANY composition —
+ * `ChangeLabel` + `ChangeFields` for a record's fields, a finding, an
+ * editable form.
+ */
+export function Change(props: ChangeProps) {
+  const loc = useLoticsLocale().changeReview;
+  const status = props.status ?? "pending";
+  useRegisterEntry("Change", props.id, status, props.onAccept);
+
+  const kids = Children.toArray(props.children);
+  const summary = kids.filter((k) => isValidElement(k) && k.type === ChangeSummary);
+  const header = kids.filter((k) => isValidElement(k) && k.type === ChangeLabel);
+  const body = kids.filter((k) => !(isValidElement(k) && (k.type === ChangeSummary || k.type === ChangeLabel)));
+
+  if (status !== "pending") {
+    const kept = status === "accepted";
+    return (
+      <View style={styles.decidedRow}>
+        <Icon name={kept ? "check" : "x"} size={15} color={kept ? colors.emerald[600] : colors.zinc[400]} />
+        <View style={{ flex: 1, opacity: kept ? 1 : 0.6 }}>
+          {summary.length > 0 ? summary : <View style={styles.summaryFallback}>{body}</View>}
+        </View>
+        {props.onUndo ? <Button title={loc.undo} color="muted" onPress={props.onUndo} /> : null}
+      </View>
+    );
+  }
 
-/** 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 }) {
+  const hasActions = props.onAccept != null || props.onReject != null;
   return (
-    <View style={styles.diff}>
-      {before != null ? (
-        <View style={styles.diffLine}>
-          <Text size="sm" weight="medium" tabular style={styles.marker(colors.red[600])}>
-            −
-          </Text>
-          <Text size="sm" tabular style={[styles.strike, styles.value(colors.red[600])]}>
-            {before}
-          </Text>
+    <View style={styles.changeSection}>
+      {header.length > 0 ? header : null}
+      <View style={styles.changeBody}>{body}</View>
+      {hasActions ? (
+        <View style={styles.changeActions}>
+          {props.onReject ? <Button title={props.rejectLabel ?? loc.reject} color="muted" onPress={props.onReject} /> : null}
+          {props.onAccept ? (
+            <Button title={props.acceptLabel ?? loc.accept} color="secondary" disabled={props.acceptDisabled} onPress={props.onAccept} />
+          ) : null}
         </View>
       ) : null}
-      <View style={styles.diffLine}>
-        <Text size="sm" weight="medium" tabular style={styles.marker(colors.emerald[700])}>
-          +
+    </View>
+  );
+}
+
+/** The change's SUBJECT — the section heading; a stack of changes skims by
+ *  subject. Provenance goes at the section's BOTTOM (`<Sources>` before the
+ *  actions), never crowded into the heading. */
+export function ChangeLabel({ children }: { children: ReactNode }) {
+  return (
+    <View style={styles.labelBand}>
+      <Text size="sm" weight="semibold" style={{ flexShrink: 1 }} numberOfLines={1}>
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+/** The agent's optional reasoning — for a change that is not
+ *  self-explanatory. A quiet hairline-quoted aside: present when it earns its
+ *  place, never competing with the value decision. */
+export function ChangeReasoning({ children }: { children: ReactNode }) {
+  return (
+    <View style={styles.reasoning}>
+      <Text size="sm" color="muted">
+        {children}
+      </Text>
+    </View>
+  );
+}
+
+/** The stacked FIELD container — the open form of the record grammar: use it
+ *  directly when the section IS the record under review (no card chrome);
+ *  `ChangeRecord` wraps the same container in the item card. */
+export function ChangeFields({ children }: { children: ReactNode }) {
+  const kids = Children.toArray(children);
+  const withRules: ReactNode[] = [];
+  kids.forEach((k, i) => {
+    if (i > 0) withRules.push(<View key={`rule-${i}`} style={styles.fieldRule} />);
+    withRules.push(k);
+  });
+  return <View style={styles.fields}>{withRules}</View>;
+}
+
+export interface ChangeRecordProps {
+  /** Stable identity — registers in the review context like a `Change`. */
+  id: string;
+  /** "add" (+, green) · "remove" (−, red) · "edit" (±, neutral — only the
+   *  changed fields, each with its own mini-diff via `before`). */
+  tone: "add" | "remove" | "edit";
+  /** The card header title (the item's name). */
+  title: string;
+  /** The record's fields — `ChangeField`s (or any inline content). */
+  children: ReactNode;
+  status?: ChangeStatus;
+  onAccept?: () => void;
+  onReject?: () => void;
+  onUndo?: () => void;
+  /** The collapsed one-liner after a decision. */
+  summary: string;
+}
+
+/**
+ * A whole RECORD as ONE bordered card — the right altitude for line items:
+ * the tinted header carries the +/±/− op for the entire record, the body is
+ * the same stacked field grammar (`ChangeFields`), and the card's ONE
+ * Keep/Drop pair sits bottom-right. The verb level follows the decision
+ * level: add/remove cards carry the card verbs and their fields none; an
+ * edit card carries NO card verbs — its fields decide. Decided → the same
+ * compact bordered row every decided change collapses to.
+ */
+export function ChangeRecord(props: ChangeRecordProps) {
+  const loc = useLoticsLocale().changeReview;
+  const status = props.status ?? "pending";
+  useRegisterEntry("ChangeRecord", props.id, status, props.onAccept);
+
+  if (status !== "pending") {
+    const kept = status === "accepted";
+    return (
+      <View style={styles.fieldCollapsed}>
+        <Icon name={kept ? "check" : "x"} size={15} color={kept ? colors.emerald[600] : colors.zinc[400]} />
+        <Text size="sm" numberOfLines={1} style={[{ flex: 1 }, kept ? null : styles.strike]}>
+          {props.summary}
         </Text>
-        <Text size="sm" weight="medium" tabular style={styles.value(colors.emerald[700])}>
-          {after}
+        {props.onUndo ? <Button title={loc.undo} color="muted" onPress={props.onUndo} /> : null}
+      </View>
+    );
+  }
+  const mark =
+    props.tone === "add"
+      ? { glyph: "+", word: loc.opAdd, color: colors.emerald[700], bg: colors.emerald[50], header: colors.emerald[100], border: colors.emerald[200] }
+      : props.tone === "remove"
+        ? { glyph: "−", word: loc.opRemove, color: colors.red[600], bg: colors.red[50], header: colors.red[100], border: colors.red[200] }
+        : { glyph: "±", word: loc.opEdit, color: colors.zinc[600], bg: colors.white, header: colors.zinc[50], border: colors.border };
+  return (
+    <View style={[styles.recordCard, { backgroundColor: mark.bg, borderColor: mark.border }]}>
+      {/* The op reads on the WHOLE card — a quiet tone wash (50 body ·
+          100 header · 200 border); an edit stays white, its diffs carry it. */}
+      <View style={[styles.recordCardHeader, { backgroundColor: mark.header }]}>
+        <Text size="sm" weight="semibold" tabular style={{ color: mark.color, width: 14 }}>
+          {mark.glyph}
         </Text>
+        <Text size="sm" weight="semibold" style={{ color: mark.color }}>
+          {mark.word}
+        </Text>
+        <Text size="sm" color="muted">·</Text>
+        <Text size="sm" weight="semibold" numberOfLines={1} style={{ flexShrink: 1 }}>
+          {props.title}
+        </Text>
+      </View>
+      <View style={styles.recordCardBody}>
+        {/* Plain 6px stack — the hairline rhythm belongs to the OPEN form;
+            inside a card the border already scopes the record. */}
+        <View style={styles.recordFieldStack}>{props.children}</View>
+        {props.onAccept || props.onReject ? (
+          <View style={styles.verbRow}>
+            {props.onReject ? <Button title={loc.reject} color="muted" onPress={props.onReject} /> : null}
+            {props.onAccept ? <Button title={loc.accept} color="secondary" onPress={props.onAccept} /> : null}
+          </View>
+        ) : null}
       </View>
     </View>
   );
 }
 
+export interface ChangeFieldCandidate {
+  value: string;
+  /** Where the candidate came from (a document name) — quiet meta on the row;
+   *  deciding between values requires knowing which source said what. */
+  source?: string;
+  /** A one-line qualifier (a score, a reason) for ranked picks. */
+  description?: string;
+  /** The row the current value matches — the host computes it. */
+  selected?: boolean;
+}
+
+export interface ChangeFieldProps {
+  label: string;
+  /** The proposed value. Omit for a pure REMOVAL (`before` alone — the − band
+   *  is the whole change). */
+  value?: string;
+  /** Present ⇒ the value is press-to-edit in place (an input swaps in). */
+  onChangeText?: (value: string) => void;
+  /** The record's CURRENT value — the − band above the value (the field's
+   *  mini-diff). Omit for a field the record doesn't hold yet (an add). */
+  before?: string;
+  /** Per-field decision — the same tri-state as a `Change` (dropping a field
+   *  narrows the update diff). */
+  status?: "pending" | "kept" | "dropped";
+  onKeep?: () => void;
+  onDrop?: () => void;
+  onUndo?: () => void;
+  /** Gate Keep until a precondition holds (an unresolved conflict). */
+  keepDisabled?: boolean;
+  /** Conflict candidates — full-width decision rows under the value; the
+   *  value band is the READ-ONLY outcome (`valueReadOnly`). */
+  candidates?: ChangeFieldCandidate[];
+  onPickCandidate?: (candidate: ChangeFieldCandidate) => void;
+  /** Offer "type another value" as an explicit third option under the
+   *  candidates; selecting it reveals an input. The host stores the text and
+   *  treats it like any picked value. */
+  customValue?: string;
+  customSelected?: boolean;
+  onCustomValue?: (value: string) => void;
+  onCustomSelect?: () => void;
+  /** The field's quiet why — the hairline aside under the value. */
+  reasoning?: string;
+  /** Render the value as the read-only outcome band (a conflict): the + band
+   *  shows the value — or the muted `placeholder` while it's still empty. */
+  valueReadOnly?: boolean;
+  placeholder?: string;
+  /** The one-line resolved value on the collapsed row after a decision.
+   *  Falls back to `value`. */
+  summary?: string;
+  /** Replace the built-in value surface — `ChangeValueInput` (the diff-at-rest
+   *  editor) or any input. */
+  children?: ReactNode;
+  accessibilityLabel?: string;
+}
+
 /**
- * An agent-proposed set of changes, reviewed before it lands — never
- * auto-applied. This is the LIST half: it owns the review MECHANICS (per-item
- * decide + collapse, the kept counter), `renderItem` owns how each proposal
- * looks. The COMMIT BAR is `ChangeReviewActions` — a separate piece the host
- * places where commit bars belong (a `DialogFooter`, a `DrawerFooter`, or
- * inline under the list), so the commit never scrolls away inside a dialog.
- * Two modes. Whole-set: the list, reviewed together. 1-BY-1 (when the host
- * passes `onAcceptItem`/`onRejectItem`): each proposal is its own card with
- * Keep / Drop; deciding COLLAPSES it to a preview with Undo. Where a
- * `ReviewCard` reviews a SINGLE proposal, this is the BATCH engine.
+ * THE field of the record grammar — one proposed value inside `ChangeFields`.
+ * A CHANGED field reads like the field diff: the label line, the − band
+ * (when replacing/removing), the + value (editable, read-only on a conflict,
+ * or absent on a pure removal), conflict candidates + the type-another-value
+ * third option, the quiet reasoning — deciding for ITSELF via Keep/Drop.
+ * A plain field (no diff, no decision) is the inline label · value row,
+ * press-to-edit when `onChangeText` is given. Decided → ONE quiet collapsed
+ * row: mark · label → value · Undo.
  */
-export function ChangeReview<T>(props: ChangeReviewProps<T>) {
+export function ChangeField(props: ChangeFieldProps) {
   const loc = useLoticsLocale().changeReview;
-  const status = props.status ?? "open";
-  const perItem = props.onAcceptItem != null || props.onRejectItem != null;
-  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 ?? loc.title;
-  const L = {
-    undo: loc.undo,
-    applied: loc.applied,
-    discarded: loc.discarded,
-    keptCount: loc.keptCount,
-    ...props.labels,
-  };
-
-  const summaryNote = props.summary ? (
-    <View style={styles.note}>
-      <Text size="sm" color="muted">
-        {props.summary}
-      </Text>
-    </View>
-  ) : null;
-
-  const resolvedLine =
-    status !== "open" ? (
-      <Text size="xs" color="muted" weight="medium">
-        {status === "applied" ? L.applied : L.discarded}
-      </Text>
-    ) : null;
+  const [editing, setEditing] = useState(false);
+  const status = props.status ?? "pending";
 
-  // ── 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) {
+  if (status !== "pending") {
+    const kept = status === "kept";
+    const resolved = props.summary ?? props.value;
     return (
-      <View style={status !== "open" ? styles.resolvedCard : styles.stack}>
-        <View style={styles.head}>
-          <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>
-            {title}
+      <View style={styles.fieldCollapsed}>
+        <Icon name={kept ? "check" : "x"} size={15} color={kept ? colors.emerald[600] : colors.zinc[400]} />
+        <View style={{ flex: 1, flexDirection: "row", alignItems: "baseline", gap: 6, flexWrap: "wrap" }}>
+          <Text size="sm" weight="medium" numberOfLines={1} style={kept ? null : styles.strike}>
+            {props.label}
           </Text>
-          {status === "open" ? (
-            <Text size="xs" color="muted" tabular>
-              {L.keptCount(keptCount, total)}
+          {kept && resolved ? (
+            <Text size="sm" color="muted" numberOfLines={1} style={{ flexShrink: 1 }}>
+              {resolved}
             </Text>
           ) : null}
         </View>
-        {summaryNote}
+        {props.onUndo ? <Button title={loc.undo} color="muted" onPress={props.onUndo} /> : null}
+      </View>
+    );
+  }
 
-        {status !== "open" ? (
-          resolvedLine
-        ) : (
-          <View style={styles.list}>
-            {props.items.map((item, i) => {
-              const st = statusFor(item, i);
-              if (st === "pending") {
-                return (
-                  <View key={props.getKey(item, i)} style={styles.itemCard}>
-                    {props.renderItem(item, i)}
-                    <View style={styles.itemActions}>
-                      <Button title={props.rejectLabel ?? loc.reject} color="muted" onPress={() => props.onRejectItem?.(i)} />
-                      <Button title={props.acceptLabel ?? loc.accept} color="secondary" onPress={() => props.onAcceptItem?.(i)} />
-                    </View>
-                  </View>
-                );
-              }
-              const kept = st === "accepted";
-              return (
-                <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={L.undo} color="muted" onPress={() => props.onUndoItem?.(i)} />
-                  ) : null}
-                </View>
-              );
-            })}
+  const isRemoval = props.before != null && !props.value && !props.onChangeText && !props.candidates && props.children == null;
+  if (props.before != null || props.candidates || props.reasoning || props.onKeep || props.onDrop || props.children != null || props.valueReadOnly) {
+    return (
+      <View style={styles.fieldDiff}>
+        <Text size="sm" weight="medium" numberOfLines={1}>
+          {props.label}
+        </Text>
+        {/* The agent's why sits under the label — consistent with the
+            record-level ChangeReasoning under its heading. */}
+        {props.reasoning ? (
+          <View style={styles.reasoning}>
+            <Text size="sm" color="muted">{props.reasoning}</Text>
           </View>
-        )}
+        ) : null}
+        {props.before != null ? <ChangeBand tone="remove">{props.before}</ChangeBand> : null}
+        {!isRemoval
+          ? (props.children ??
+            (props.valueReadOnly || !props.onChangeText ? (
+              <ChangeBand tone="add">
+                {props.value ? (
+                  props.value
+                ) : (
+                  <Text size="sm" color="muted" style={{ flexShrink: 1 }}>
+                    {props.placeholder ?? ""}
+                  </Text>
+                )}
+              </ChangeBand>
+            ) : (
+              <ChangeValueInput
+                value={props.value ?? ""}
+                onChangeText={props.onChangeText}
+                placeholder={props.placeholder}
+                accessibilityLabel={props.accessibilityLabel ?? props.label}
+              />
+            )))
+          : null}
+        {props.candidates && props.candidates.length > 0 ? (
+          <View style={styles.candidateList}>
+            {props.candidates.map((c, i) => (
+              <CardSelectItem
+                key={`${c.value}-${i}`}
+                onPress={() => props.onPickCandidate?.(c)}
+                selected={c.selected}
+                accessibilityLabel={`${props.label}: ${c.value}`}
+                style={styles.candidateItem}
+              >
+                <Text size="sm" weight="medium" tabular numberOfLines={2} style={{ flexShrink: 1 }}>
+                  {c.value}
+                </Text>
+              </CardSelectItem>
+            ))}
+            {props.onCustomValue ? (
+              props.customSelected ? (
+                <TextInputField
+                  value={props.customValue ?? ""}
+                  onChangeText={props.onCustomValue}
+                  placeholder={loc.customValue}
+                  accessibilityLabel={`${props.label}: ${loc.customValue}`}
+                  autoFocus
+                />
+              ) : (
+                <CardSelectItem
+                  onPress={() => props.onCustomSelect?.()}
+                  accessibilityLabel={`${props.label}: ${loc.customValue}`}
+                  style={styles.candidateItem}
+                >
+                  <Text size="sm" color="muted">{loc.customValue}</Text>
+                </CardSelectItem>
+              )
+            ) : null}
+          </View>
+        ) : null}
+        {props.onKeep || props.onDrop ? (
+          <View style={styles.verbRow}>
+            {props.onDrop ? <Button title={loc.reject} color="muted" onPress={props.onDrop} /> : null}
+            {props.onKeep ? <Button title={loc.accept} color="secondary" disabled={props.keepDisabled} onPress={props.onKeep} /> : null}
+          </View>
+        ) : null}
       </View>
     );
   }
 
-  // ── WHOLE-SET: one bordered card, review the lot together ──────────────────
+  // A plain field: the inline-record row — DetailRow metrics (the record
+  // template's labelWidth 130 / minHeight 40); the value is press-to-edit
+  // when `onChangeText` is given.
+  // Rest and edit share ONE constant box (the full value column at 40px):
+  // editing swaps the Text for a borderless input with identical metrics.
+  const valueBlock =
+    editing && props.onChangeText ? (
+      <View style={[styles.fieldPress, styles.fieldPressHovered]}>
+        <RNTextInput
+          value={props.value}
+          onChangeText={props.onChangeText}
+          accessibilityLabel={props.accessibilityLabel ?? props.label}
+          autoFocus
+          onBlur={() => setEditing(false)}
+          onSubmitEditing={() => setEditing(false)}
+          style={styles.valueInput}
+        />
+      </View>
+    ) : (
+      <Text size="sm" weight="medium" tabular numberOfLines={1}>
+        {props.value}
+      </Text>
+    );
+  // The label names the SUBJECT of a decision — full color, never muted
+  // (DetailRow's muted label is the passive record-page convention).
   return (
-    <View style={[reviewCardStyle, status !== "open" ? reviewResolvedStyle : null]}>
-      <Text size="xs" color="muted" weight="medium">
-        {title}
+    <View style={styles.fieldPlainRow}>
+      <Text size="sm" weight="medium" style={styles.fieldPlainLabel} numberOfLines={1}>
+        {props.label}
       </Text>
-      {summaryNote}
-      <View>
-        {props.items.map((item, i) => (
-          <View key={props.getKey(item, i)} style={i > 0 ? styles.changeSpacer : undefined}>
-            {props.renderItem(item, i)}
-          </View>
-        ))}
+      <View style={{ flex: 1 }}>
+        {!editing && props.onChangeText ? (
+          <FocusRingPressable
+            onPress={() => setEditing(true)}
+            accessibilityRole="button"
+            accessibilityLabel={props.accessibilityLabel ?? props.label}
+            style={(state: { hovered: boolean }) => [styles.fieldPress, state.hovered ? styles.fieldPressHovered : null]}
+          >
+            {valueBlock}
+          </FocusRingPressable>
+        ) : (
+          valueBlock
+        )}
       </View>
-      {resolvedLine}
     </View>
   );
 }
 
+export interface ChangeBandProps {
+  /** "add" = the green + band (incoming); "remove" = the red − band. */
+  tone: "add" | "remove";
+  /** Clamp string content to N lines. Default UNCLAMPED — a review must show
+   *  the whole value being decided (prose edits included). */
+  numberOfLines?: number;
+  children: ReactNode;
+}
+
+/** The raw diff BAND — a light tinted row with the aligned +/− marker. The
+ *  pieces `ChangeField`/`ChangeValueInput` are built from it; reach for it
+ *  directly for record-scale strokes (a removed record's one-line summary)
+ *  or any custom body. */
+export function ChangeBand(props: ChangeBandProps) {
+  const add = props.tone === "add";
+  return (
+    <View style={styles.diffBlock(add ? colors.emerald[50] : colors.red[50])}>
+      <Text size="sm" weight="medium" tabular style={styles.marker(add ? colors.emerald[700] : colors.red[600])}>
+        {add ? "+" : "−"}
+      </Text>
+      {typeof props.children === "string" ? (
+        <Text size="sm" tabular numberOfLines={props.numberOfLines} style={{ flexShrink: 1 }}>
+          {props.children}
+        </Text>
+      ) : (
+        props.children
+      )}
+    </View>
+  );
+}
+
+export interface ChangeValueInputProps {
+  value: string;
+  onChangeText?: (value: string) => void;
+  /** Shown (muted) at rest while the value is empty — an undecided conflict. */
+  placeholder?: string;
+  /** A fixed suffix (a unit — "pcs", "EUR"): renders after the editable core
+   *  and never enters the input. Type the number, not the unit. */
+  unit?: string;
+  accessibilityLabel: string;
+}
+
 /**
- * The commit bar for a `ChangeReview` — Accept all (1-by-1) · Discard · Apply.
- * SEPARATE from the list so the host pins it where commit bars belong: drop it
- * into a `DialogFooter` / `DrawerFooter`, or render it inline under the list.
- * It reads the same `items` + `statusOf` the list does, so it owns Accept-all
- * and the apply-disabled-at-0-kept logic — the host never re-derives them.
- * Renders a right-aligned button row (no divider — the footer container or an
- * inline wrapper provides the chrome); self-hides once `status` isn't open.
+ * The proposed value as a PROPER DIFF at rest — the green `+` line — that
+ * becomes a real input on press. The review scans like a diff; editing is one
+ * click away. Rest and edit states share one height (no layout shift).
  */
-export function ChangeReviewActions<T>(props: ChangeReviewActionsProps<T>) {
+export function ChangeValueInput(props: ChangeValueInputProps) {
+  const [editing, setEditing] = useState(false);
+  const editable = props.onChangeText != null;
+
+  const marker = (
+    <Text size="sm" weight="medium" tabular style={styles.marker(colors.emerald[700])}>
+      +
+    </Text>
+  );
+  const unit = props.unit ? (
+    <Text size="sm" color="muted" tabular>
+      {props.unit}
+    </Text>
+  ) : null;
+
+  // Editing happens INSIDE the band — the container never changes (no width /
+  // font / height shift): the value Text swaps for a borderless input with
+  // IDENTICAL type metrics; the unit stays fixed outside the editable core.
+  if (editing && editable) {
+    return (
+      <View style={[styles.valueRest, styles.valueRestHovered]}>
+        {marker}
+        <RNTextInput
+          value={props.value}
+          onChangeText={props.onChangeText}
+          placeholder={props.placeholder}
+          accessibilityLabel={props.accessibilityLabel}
+          autoFocus
+          onBlur={() => setEditing(false)}
+          onSubmitEditing={() => setEditing(false)}
+          style={styles.valueInput}
+        />
+        {unit}
+      </View>
+    );
+  }
+
+  const content = (
+    <>
+      {marker}
+      {props.value ? (
+        <Text size="sm" weight="medium" tabular numberOfLines={2} style={{ flexShrink: 1 }}>
+          {props.value}
+        </Text>
+      ) : (
+        <Text size="sm" color="muted" style={{ flexShrink: 1 }}>
+          {props.placeholder ?? ""}
+        </Text>
+      )}
+      {unit}
+      {props.value && !props.unit ? null : <View style={{ flex: 1 }} />}
+    </>
+  );
+  if (!editable) {
+    return <View style={styles.valueRest}>{content}</View>;
+  }
+  return (
+    <FocusRingPressable
+      onPress={() => setEditing(true)}
+      accessibilityRole="button"
+      accessibilityLabel={props.accessibilityLabel}
+      style={(state: { hovered: boolean }) => [styles.valueRest, state.hovered ? styles.valueRestHovered : null]}
+    >
+      {content}
+    </FocusRingPressable>
+  );
+}
+
+/** The collapsed one-line content a decided `Change` shows. Compose text or
+ *  anything row-sized; the frame (status mark + Undo) is the Change's. */
+export function ChangeSummary({ children }: { children: ReactNode }) {
+  return typeof children === "string" ? (
+    <Text size="sm" numberOfLines={1}>
+      {children}
+    </Text>
+  ) : (
+    <>{children}</>
+  );
+}
+
+export interface ChangeReviewActionsProps {
+  onApply?: () => void;
+  onDiscard?: () => void;
+  /** Keep-all presses every pending entry's own `onAccept`. Rendered only
+   *  when at least one registered entry is acceptable (or `onAcceptAll`). */
+  showAcceptAll?: boolean;
+  /** Host-owned Keep-all — replaces the context-derived handler ENTIRELY
+   *  (for decisions the registry can't see: field-level state, unresolved
+   *  conflicts). With it, the button renders even when no registered entry
+   *  is acceptable. */
+  onAcceptAll?: () => void;
+  applyLabel?: string;
+  discardLabel?: string;
+  acceptAllLabel?: string;
+  /** Disable Apply below this many kept (default 1 when any entry carries
+   *  accept/reject; pass 0 for a whole-set review that always applies). */
+  minKept?: number;
+  /** Host-level gate — for state the registry can't see (field inclusion, an
+   *  unresolved conflict still on its placeholder). ORs with the kept gate. */
+  applyDisabled?: boolean;
+  /** The host's committing state — a real apply is an async write. */
+  applyLoading?: boolean;
+}
+
+/**
+ * The commit bar — place it where commit bars belong (a `DialogFooter`, a
+ * `DrawerFooter`, inline under the list). Reads the registered entries, so
+ * Keep-all and the apply-disabled-at-0-kept logic never live in the host.
+ */
+export function ChangeReviewActions(props: ChangeReviewActionsProps) {
   const loc = useLoticsLocale().changeReview;
-  if ((props.status ?? "open") !== "open") return null;
-  const perItem = props.onAcceptItem != null;
-  const statusFor = (item: T, i: number) => props.statusOf?.(item, i) ?? "pending";
-  const keptCount = props.items.filter((it, i) => statusFor(it, i) === "accepted").length;
-  const acceptAll = () =>
-    props.items.forEach((it, i) => {
-      if (statusFor(it, i) === "pending") props.onAcceptItem?.(i);
-    });
+  const { entries } = useReviewCtx("ChangeReviewActions");
+  const all = [...entries.values()];
+  const acceptable = all.filter((e) => e.accept != null);
+  const kept = all.filter((e) => e.status === "accepted").length;
+  const pendingAccepts = acceptable.filter((e) => e.status === "pending");
+  const minKept = props.minKept ?? (acceptable.length > 0 ? 1 : 0);
   return (
     <View style={styles.actionsRow}>
-      {perItem ? <Button title={props.acceptAllLabel ?? loc.acceptAll} color="muted" onPress={acceptAll} /> : null}
+      {props.showAcceptAll !== false && (props.onAcceptAll != null || acceptable.length > 0) ? (
+        <Button
+          title={props.acceptAllLabel ?? loc.acceptAll}
+          color="secondary"
+          disabled={props.onAcceptAll == null && pendingAccepts.length === 0}
+          onPress={props.onAcceptAll ?? (() => pendingAccepts.forEach((e) => e.accept?.()))}
+        />
+      ) : null}
+      {acceptable.length > 0 ? (
+        <Text size="xs" color="muted" tabular>
+          {loc.keptCount(kept, acceptable.length)}
+        </Text>
+      ) : null}
       <View style={{ flex: 1 }} />
       {props.onDiscard ? <Button title={props.discardLabel ?? loc.discard} color="muted" onPress={props.onDiscard} /> : null}
       {props.onApply ? (
         <Button
-          title={props.applyLabel ?? (perItem ? loc.applyKept : loc.apply)}
+          title={props.applyLabel ?? loc.apply}
           color="primary"
-          disabled={perItem && keptCount === 0}
+          disabled={props.applyDisabled === true || kept < minKept}
+          loading={props.applyLoading}
           onPress={props.onApply}
         />
       ) : null}
@@ -263,41 +736,64 @@ export function ChangeReviewActions<T>(props: ChangeReviewActionsProps<T>) {
 
 const styles = {
   ...StyleSheet.create({
-    // 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[200], paddingLeft: 12 },
-    list: { gap: 8 },
-    // 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,
-      borderWidth: 1,
-      borderColor: colors.zinc[100],
-      borderRadius: 10,
-      paddingLeft: 12,
-      paddingRight: 8,
-      paddingVertical: 6,
-      minHeight: 44,
-    },
-    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 },
+    stack: { gap: 10 },
+    header: { flexDirection: "row", alignItems: "center", gap: 8, paddingBottom: 2 },
+    // An OPEN section — no card box; the divider between changes is the only rule.
+    changeSection: { gap: 12, paddingVertical: 4 },
+    divider: { height: 1, backgroundColor: colors.zinc[100] },
+    // The heading line: subject left at full weight, meta right. No border —
+    // the subject's weight carries the hierarchy.
+    labelBand: { flexDirection: "row", alignItems: "center", gap: 8, minHeight: 24 },
+    changeBody: { gap: 8 },
+    changeActions: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+    // A DECIDED change: the same open row, settled and quiet.
+    decidedRow: { flexDirection: "row", alignItems: "center", gap: 10, paddingVertical: 10, minHeight: 44 },
+    summaryFallback: { opacity: 0.7 },
+    reasoning: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
+    fields: { gap: 12 },
+    recordFieldStack: { gap: 6 },
+    fieldPlainRow: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 40 },
+    fieldPlainLabel: { width: 130 },
+    fieldRule: { height: 1, backgroundColor: colors.zinc[100] },
+    fieldDiff: { gap: 6, paddingVertical: 4 },
+    recordCard: { borderWidth: 1, borderColor: colors.border, borderRadius: 10, backgroundColor: colors.white, overflow: "hidden" },
+    recordCardHeader: { flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 12, paddingVertical: 9, minHeight: 38 },
+    recordCardBody: { padding: 12, gap: 10 },
+    verbRow: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 8 },
+    fieldPress: { borderRadius: 8, borderWidth: 1, borderColor: "transparent", paddingHorizontal: 8, marginHorizontal: -8, minHeight: 40, justifyContent: "center", alignSelf: "stretch" },
+    fieldPressHovered: { borderColor: colors.border },
+    fieldCollapsed: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 44, borderWidth: 1, borderColor: colors.border, borderRadius: 10, paddingHorizontal: 12, paddingVertical: 6, backgroundColor: colors.white },
+    candidateList: { gap: 8 },
+    candidateItem: { flexDirection: "row", alignItems: "center", gap: 10, paddingVertical: 10, paddingHorizontal: 12 },
     strike: { textDecorationLine: "line-through" },
-    // The commit bar: a plain right-aligned row. The container (DialogFooter / an
-    // inline wrapper) owns any divider — the bar itself stays chrome-less so it
-    // nests cleanly in a footer without double borders. flex:1 fills the row.
     actionsRow: { flexDirection: "row", alignItems: "center", gap: 8, flex: 1 },
+    // Reserves the input's height so rest ↔ edit never shifts the layout. The
+    // GitHub-diff idiom: a light GREEN band with dark text carries "incoming";
+    // an editable value hovers via its BORDER (the transparent edge reveals).
+    valueRest: { flexDirection: "row", alignItems: "center", gap: 8, minHeight: 40, borderRadius: 8, borderWidth: 1, borderColor: "transparent", paddingHorizontal: 10, backgroundColor: colors.emerald[50], alignSelf: "stretch" },
+    // The in-band editor: the SAME type metrics as the resting value Text —
+    // editing never shifts the band.
+    valueInput: {
+      flex: 1,
+      padding: 0,
+      borderWidth: 0,
+      backgroundColor: "transparent",
+      fontFamily: fontFamilyMedium,
+      fontSize: 14,
+      lineHeight: 20,
+      color: colors.zinc[900],
+      fontVariant: ["tabular-nums"],
+    },
+    valueRestHovered: { borderColor: colors.border },
   }),
   marker: (color: string) => ({ color, width: 12 }),
-  value: (color: string) => ({ color }),
+  diffBlock: (bg: string) => ({
+    flexDirection: "row" as const,
+    alignItems: "center" as const,
+    gap: 8,
+    minHeight: 40,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    backgroundColor: bg,
+  }),
 };