@lotics/ui 28.3.1 → 29.3.0

package/examples/tpl_record.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useEffect, useRef, useState, type ReactNode } from "react";
 import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors } from "@lotics/ui/colors";
@@ -48,6 +48,7 @@ import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { DangerZone } from "@lotics/ui/danger_zone";
 import { FileRow } from "@lotics/ui/file_row";
+import { InlineSlot } from "@lotics/ui/inline_slot";
 import { pickFiles } from "@lotics/ui/file_picker";
 import { FileDropTarget } from "@lotics/ui/file_drop_target";
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
@@ -66,7 +67,9 @@ import { AgentRun } from "@lotics/ui/agent_run";
 import { FollowScroll } from "@lotics/ui/follow_scroll";
 import { useContainerSize } from "@lotics/ui/size_boundary";
 import { type SourceRef } from "@lotics/ui/sources";
-import { ChangeValueInput, Change, ChangeField, ChangeFields, ChangeReasoning, ChangeRecord, ChangeReview, ChangeReviewActions, ChangeReviewHeader, type ChangeStatus } from "@lotics/ui/change_review";
+import { DiffValue } from "@lotics/ui/diff_value";
+import { DiffMark } from "@lotics/ui/diff_mark";
+import { useChangeSet, type ChangeSet } from "@lotics/ui/use_change_set";
 import { CompletionState } from "@lotics/ui/completion_state";
 import type { UIMessagePart, UIDataTypes, UITools } from "ai";
 
@@ -435,9 +438,9 @@ const CHECK_STEPS: ScriptStep[] = [
 ];
 
 // The shapes of an extract decision — an ADD, an UPDATE, a REMOVAL, a source
-// CONFLICT — are the SAME `ChangeField` row: an add has no `before`, an update
-// bands it, a removal is the − band alone, and a conflict's outcome is the
-// read-only + band over the candidate rows.
+// CONFLICT — are the SAME `DiffValue`: an add omits `before`, an update passes
+// both, a removal omits `after` (the struck value IS the change), and a
+// conflict sits on its placeholder over the candidate rows until one is picked.
 const CARRIER_REF_PROPOSED = "MAEU129394855";
 const VESSEL_CURRENT = "MSC AURA";
 const VESSEL_PROPOSED = "MAERSK SALINA";
@@ -448,7 +451,177 @@ const CONSIGNEE_OPTIONS = [
   { value: "Nordic Furniture AB, Jönköping DC", source: "invoice.pdf", recommended: true },
   { value: "NF Distribution ApS, Kolding", source: "packing-list.pdf" },
 ];
+/**
+ * A field carrying its own verdict. Deliberately LOCAL to this template rather
+ * than a kit component: the row is layout, and the kit's own rule is that an
+ * extraction must encode a contract or a behaviour, never layout convenience.
+ * `dev/pages/ai.tsx` has its own twenty-line version that reads differently, and
+ * that is the system working — one atom, two shapes.
+ */
+function ReviewField<Id extends string>({ id, label, review, kind, why, keepDisabled, children }: {
+  id: Id;
+  label: string;
+  review: ChangeSet<Id>;
+  /**
+   * WHAT this row does to the record, when it does anything.
+   *
+   * The mark rides the LABEL, not the value, and that is an alignment decision
+   * before it is a semantic one. Beside the value it indents every row it marks
+   * by its own width plus a gap, so an unmarked row needs a spacer of exactly
+   * the glyph's width to keep up and the two drift. The label column is a FIXED
+   * width with one left edge, so a mark placed there aligns down the page for
+   * free and the value column keeps the single grid `DetailRow` maintains.
+   */
+  kind?: "added" | "changed" | "removed";
+  why?: string;
+  keepDisabled?: boolean;
+  children: ReactNode;
+}) {
+  const status = review.status(id);
+  const dropped = status === "rejected";
+
+  // ONE slot, fixed width AND height, mark or no mark. The height matters as
+  // much as the width: this is an inline-flex box inside `DetailRow`'s label
+  // Text, so an empty one baselines differently from one holding a glyph, and
+  // the unmarked rows sit several pixels off their own labels for no reason a
+  // reader could ever guess at.
+  const labelNode = (
+    <View style={{ // TOP-aligned, and the slot is sized to the label's own LINE — not
+    // centred on the label BLOCK. Centring is identical while the label
+    // fits on one line and wrong the moment it wraps: a two-line label is
+    // 40px, so the mark drifted to the middle of the pair (+9px, against −1
+    // on its single-line neighbours) and the column of marks stopped being a
+    // column. `DetailRow` solves this for its own label the same way; moving
+    // the mark up here without carrying the rule over is what reopened it.
+    flexDirection: "row", alignItems: "flex-start", gap: 8, opacity: dropped ? 0.5 : 1 }}>
+      <View style={{ width: 22, height: 20, alignItems: "center", justifyContent: "center" }}>
+        {kind === undefined ? null : <DiffMark kind={kind} />}
+      </View>
+      <Text size="sm" color="muted" style={{ flex: 1 }}>{label}</Text>
+    </View>
+  );
+
+  if (status !== "pending") {
+    const kept = status === "accepted";
+    return (
+      <DetailRow label={labelNode}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <View style={{ flex: 1, opacity: kept ? 1 : 0.5 }}>{children}</View>
+          <Button title="Undo" color="muted" onPress={() => review.undo(id)} />
+        </View>
+      </DetailRow>
+    );
+  }
+  return (
+    // The reason renders INSIDE the value block, above the verdict — not via
+    // `DetailRow`'s `description`, which lands under the whole cell and
+    // therefore under the buttons. A justification printed after the two
+    // controls that act on it is a justification nobody reads: the reader has
+    // already decided by the time they reach it.
+    <DetailRow label={labelNode}>
+      <View style={{ gap: 6 }}>
+        {children}
+        {why == null ? null : <Text size="xs" color="muted">{why}</Text>}
+        <View style={{ flexDirection: "row", justifyContent: "flex-end", gap: 8 }}>
+          <Button title="Drop" color="muted" onPress={() => review.reject(id)} />
+          <Button title="Keep" color="secondary" disabled={keepDisabled} onPress={() => review.accept(id)} />
+        </View>
+      </View>
+    </DetailRow>
+  );
+}
+
+/** Keep / Drop for a whole proposed line, collapsing to an Undo once decided. */
+function LineVerdict<Id extends string>({ id, review, label }: { id: Id; review: ChangeSet<Id>; label: string }) {
+  if (review.status(id) !== "pending") {
+    return <Button title="Undo" color="muted" onPress={() => review.undo(id)} />;
+  }
+  return (
+    <View style={{ flexDirection: "row", gap: 4 }}>
+      <IconButton icon="x" accessibilityLabel={`Drop ${label}`} onPress={() => review.reject(id)} />
+      <IconButton icon="check" accessibilityLabel={`Keep ${label}`} onPress={() => review.accept(id)} />
+    </View>
+  );
+}
+
 const EXTRACT_FIELD_IDS = ["carrier_ref", "vessel", "consignee", "gross", "notify"] as const;
+/**
+ * The proposed order lines, each its own verdict.
+ *
+ * Two of them change a VALUE and two change an ATTACHMENT, which is the case a
+ * review surface usually forgets: dropping a supplier invoice on a record does
+ * not edit a number, it decides WHICH LINE the document belongs to, and that
+ * decision is exactly as wrong-able as a misread figure. It gets the same
+ * treatment — shown before it applies, on the line it lands on, with whatever
+ * it displaces still visible.
+ */
+const LINE_IDS = ["line-add", "line-edit-qty", "line-doc", "line-doc-swap"] as const;
+
+/**
+ * What the run proposes for the record's FILES section — the third diff shape,
+ * after the field form and the line table.
+ *
+ * A files section is not a field: it is a SET, so what changes is MEMBERSHIP
+ * plus per-document properties. `added` and `removed` are membership and the
+ * row's own mark carries them. `changed` splits again — a document can be
+ * SUPERSEDED (new bytes in the same slot) or RECLASSIFIED (the same bytes filed
+ * differently), and only the second has a value to diff. Rendering a mark with
+ * no visible diff on a reclassify would say the file itself changed.
+ */
+const DOC_IDS = ["doc-inv", "doc-bol", "doc-coo", "doc-dup"] as const;
+
+type ProposedDoc = {
+  id: (typeof DOC_IDS)[number];
+  kind: "added" | "changed" | "removed";
+  name: string;
+  mimeType: string;
+  note?: string;
+  supersedes?: string;
+  filedAs?: { before: string; after: string };
+};
+
+const PROPOSED_DOCS: ProposedDoc[] = [
+  { id: "doc-inv", kind: "added", name: "invoice-8841.pdf", mimeType: "application/pdf", note: "Split from pages 1-2 of the scanned bundle" },
+  { id: "doc-bol", kind: "changed", name: "bill-of-lading.pdf", mimeType: "application/pdf", supersedes: "scan-0042.jpg" },
+  { id: "doc-coo", kind: "changed", name: "cert-origin.pdf", mimeType: "application/pdf", filedAs: { before: "Other", after: "Certificate of origin" } },
+  { id: "doc-dup", kind: "removed", name: "photos.zip", mimeType: "application/zip", note: "Already on the record under the same name" },
+];
+
+/** The document already filed against a line, and the one being proposed. */
+type LineDoc = { name: string; mimeType: string };
+const PDF = "application/pdf";
+
+/**
+ * A file rendered as a table VALUE — the filename at the size every other cell
+ * uses.
+ *
+ * It carried a `FileBadge` at first, which in a cell that size shrank its own
+ * label to five pixels — off every rung of the type scale. Making it legible
+ * means a 34px box setting the height of a 52px row, for a fact the extension
+ * already carries. The discriminator is what the file IS on the surface: the
+ * row's SUBJECT (a `FileRow`, a tile) earns a badge; one VALUE among columns is
+ * a value, rendered like the quantity beside it.
+ */
+function DocName({ doc }: { doc: LineDoc }) {
+  return <Text size="sm" numberOfLines={1}>{doc.name}</Text>;
+}
+
+/**
+ * The UNTOUCHED lines — the reason this table exists in this shape.
+ *
+ * A fixture of two proposed lines and nothing else flatters the design: every
+ * row carries a change, so any mark at all is findable. A real record has a
+ * dozen lines and a document touches one or two of them, and the question the
+ * operator actually has — WHICH line did this invoice land on — is a search
+ * problem. These rows are here to make the review honest, and they are why an
+ * untouched row renders NO mark: the eye finds the filled discs among the
+ * blanks without reading the column.
+ */
+const UNTOUCHED_LINES: { id: string; item: string; qty: string; doc?: LineDoc }[] = [
+  { id: "l-oak", item: "Kiln-dried oak panels, 18mm", qty: "640 pcs", doc: { name: "packing-list.pdf", mimeType: PDF } },
+  { id: "l-foam", item: "Foam corner guards", qty: "2,400 pcs", doc: { name: "packing-list.pdf", mimeType: PDF } },
+  { id: "l-desiccant", item: "Desiccant sachets, 50g", qty: "900 pcs" },
+];
 
 // Cross-check findings — severity reads through ONE colored dot badge (red /
 // amber / zinc), the rest stays calm text.
@@ -1121,21 +1294,15 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   const [vessel, setVessel] = useState(VESSEL_PROPOSED);
   const [consignee, setConsignee] = useState<string | null>(null);
   const [grossWeight, setGrossWeight] = useState("1,540");
-  // Order lines proposed from the packing list — RECORD ops (ChangeRecord).
-  const [lineAdd, setLineAdd] = useState<ChangeStatus>("pending");
-  const [lineEdit, setLineEdit] = useState<Record<string, "kept" | "dropped">>({});
+  // Order lines proposed from the packing list — one verdict per line.
   const [newItem, setNewItem] = useState("Corner protectors, foam");
   const [newQty, setNewQty] = useState("400");
   const [editedQty, setEditedQty] = useState("1,450");
-  const lineEditRow = (id: string) => ({
-    status: lineEdit[id] ?? ("pending" as const),
-    onKeep: () => setLineEdit((m) => ({ ...m, [id]: "kept" as const })),
-    onDrop: () => setLineEdit((m) => ({ ...m, [id]: "dropped" as const })),
-    onUndo: () => setLineEdit((m) => { const n = { ...m }; delete n[id]; return n; }),
-  });
+  const lines = useChangeSet(LINE_IDS, { initial: "pending" });
   const [consigneePick, setConsigneePick] = useState<number | "custom" | null>(null);
   const [customConsignee, setCustomConsignee] = useState("");
-  const [fieldDecisions, setFieldDecisions] = useState<Record<string, "kept" | "dropped">>({});
+  const fields = useChangeSet(EXTRACT_FIELD_IDS, { initial: "pending" });
+  const docs = useChangeSet(DOC_IDS, { initial: "pending" });
 
   const openAi = () => { setPicked(files.filter((f) => sel.has(f.id))); setUploadFlow(false); setAiOpen(true); };
   // THE standard files intake — one handler, three ways in: the Documents
@@ -1156,7 +1323,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
   const commitUpload = () => setFiles((fs) => [...fs, ...picked.filter((p2) => !fs.some((f) => f.id === p2.id))]);
   const closeAi = () => {
     setAiOpen(false); setTask(null); setPhase("fork"); setRevealed(0); setUploadFlow(false); setBrief(""); setTaskChoice(null);
-    setCarrierRef(CARRIER_REF_PROPOSED); setVessel(VESSEL_PROPOSED); setConsignee(null); setConsigneePick(null); setCustomConsignee(""); setGrossWeight("1,540"); setLineAdd("pending"); setLineEdit({}); setNewItem("Corner protectors, foam"); setNewQty("400"); setEditedQty("1,450"); setFieldDecisions({});
+    setCarrierRef(CARRIER_REF_PROPOSED); setVessel(VESSEL_PROPOSED); setConsignee(null); setConsigneePick(null); setCustomConsignee(""); setGrossWeight("1,540"); lines.reset(); setNewItem("Corner protectors, foam"); setNewQty("400"); setEditedQty("1,450"); fields.reset();
   };
   const startTask = (t: Task) => { setTask(t); setRevealed(0); setPhase("running"); };
   // ⋯ menu per document row. "Edit with AI" is the app→chat handoff for
@@ -1206,19 +1373,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
       ],
     );
   };
-  const decideField = (id: string, d: "kept" | "dropped" | undefined) =>
-    setFieldDecisions((m) => {
-      const n = { ...m };
-      if (d) n[id] = d;
-      else delete n[id];
-      return n;
-    });
-  const fieldRow = (id: string) => ({
-    status: fieldDecisions[id] ?? ("pending" as const),
-    onKeep: () => decideField(id, "kept"),
-    onDrop: () => decideField(id, "dropped"),
-    onUndo: () => decideField(id, undefined),
-  });
 
   // The streaming timer idiom — reveal one script step at a time, then settle.
   const script = task === "check" ? CHECK_STEPS : EXTRACT_STEPS;
@@ -1244,21 +1398,19 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     runItems.push({ type: "text", text: task === "check" ? "Checked 18 fields — 2 disagree, 1 worth noting. The findings are below." : "3 fields already match; 3 need a decision, and the invoice carries 2 lines the order doesn't have yet." });
   }
 
-  // Apply counts what actually commits: the kept fields.
-  const applyCount = Object.values(fieldDecisions).filter((d) => d === "kept").length + Object.values(lineEdit).filter((d) => d === "kept").length + (lineAdd === "accepted" ? 1 : 0);
-  // Keep-all lives with the HOST (field decisions the registry can't see):
-  // keep every still-pending field; the unresolved conflict stays pending.
+  // Apply counts what actually commits: kept fields plus kept lines.
+  // Every set the review renders, or the button claims a smaller write than the
+  // screen shows. The documents block was added after this line existed, which
+  // is exactly how a commit count drifts from its surface.
+  const applyCount = fields.keptCount + lines.keptCount + docs.keptCount;
+  // Keep-all stays the HOST's — only this screen knows that an unresolved
+  // conflict (`consignee == null`) must stay pending rather than be swept in.
   const keepAll = () => {
-    setLineAdd((st) => (st === "pending" ? "accepted" : st));
-    setLineEdit((m) => ({ qty: m.qty ?? "kept", ...m }));
-    setFieldDecisions((m) => {
-    const n = { ...m };
     for (const f of EXTRACT_FIELD_IDS) {
       if (f === "consignee" && consignee == null) continue;
-      if (n[f] == null) n[f] = "kept";
+      if (fields.status(f) === "pending") fields.accept(f);
     }
-    return n;
-  });
+    lines.acceptAll();
   };
 
   // ── the classification fields — each one carries the input its shape wants
@@ -3365,7 +3517,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
     {/* Use AI — fork → running → review → done, all inside one dialog. The review
         provider wraps the WHOLE dialog so the `Change`s (scroll area) and the
         commit bar (`DialogFooter`) share one review context. */}
-    <ChangeReview>
     <Dialog open={aiOpen} onOpenChange={(o) => { if (!o) closeAi(); }} maxWidth={620}>
       <DialogHeader>
         <DialogHeaderTitle>{task === "extract" ? "Extract data" : task === "check" ? "Cross-check" : `Use AI (${picked.length} ${picked.length === 1 ? "file" : "files"})`}</DialogHeaderTitle>
@@ -3429,88 +3580,202 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
               <View style={{ gap: 8 }}>{picked.map((f, fi) => <FileRow key={f.id} name={f.name} mimeType={f.mimeType} onPress={() => openPreview(picked, fi)} />)}</View>
             </View>
             <View style={{ gap: 8 }}>
-              <ChangeReviewHeader />
-              {/* ONE section for the RECORD — ChangeFields stacks a ChangeField
-                  per proposed value: label, the − band when replacing, the
-                  editable + value. Editing IS the review; each field decides
-                  for ITSELF (Keep/Drop), and Apply commits the kept rows. */}
-              <Change id="order">
-                <ChangeReasoning>{EXTRACT_REASONING}</ChangeReasoning>
-                <ChangeFields>
-                  {/* An ADD — the record holds nothing yet, so no `before`. */}
-                  <ChangeField label="Carrier reference" value={carrierRef} summary={carrierRef} {...fieldRow("carrier_ref")}>
-                    <ChangeValueInput value={carrierRef} onChangeText={setCarrierRef} accessibilityLabel="Carrier reference" />
-                  </ChangeField>
-                  {/* An UPDATE — the current value banded above the editor. */}
-                  <ChangeField label="Vessel" value={vessel} summary={vessel} before={VESSEL_CURRENT} {...fieldRow("vessel")}>
-                    <ChangeValueInput value={vessel} onChangeText={setVessel} accessibilityLabel="Vessel" />
-                  </ChangeField>
-                  {/* A CONFLICT — the sources disagree: the read-only outcome
-                      band stays on its placeholder until the user picks a
-                      candidate below or types a third value — never a
-                      pre-selection; Keep is gated until resolved. */}
-                  <ChangeField
-                    label="Consignee"
-                    value={consignee ?? ""}
-                    summary={consignee ?? undefined}
-                    before={CONSIGNEE_CURRENT}
-                    valueReadOnly
-                    placeholder="Pick a candidate below"
-                    reasoning="The invoice and the packing list disagree — pick a candidate or type your own."
-                    candidates={CONSIGNEE_OPTIONS.map((c, i2) => ({ value: c.value, source: c.source, selected: consigneePick === i2 }))}
-                    onPickCandidate={(c) => { const i2 = CONSIGNEE_OPTIONS.findIndex((x) => x.value === c.value); setConsigneePick(i2); setConsignee(c.value); }}
-                    customValue={customConsignee}
-                    customSelected={consigneePick === "custom"}
-                    onCustomSelect={() => { setConsigneePick("custom"); setConsignee(customConsignee || null); }}
-                    onCustomValue={(v) => { setCustomConsignee(v); setConsignee(v || null); }}
-                    keepDisabled={consignee == null}
-                    {...fieldRow("consignee")}
-                  />
-                  {/* An ADD-only field — new information the documents carry:
-                      the + band alone, same grammar as every diff. */}
-                  <ChangeField label="Gross weight" value={grossWeight} summary={grossWeight} {...fieldRow("gross")}>
-                    <ChangeValueInput value={grossWeight} onChangeText={setGrossWeight} unit="kg" accessibilityLabel="Gross weight" />
-                  </ChangeField>
-                  {/* A REMOVAL — the − band alone (empty value, no editor): the
-                      documents show this value no longer applies. */}
-                  <ChangeField
-                    label="Notify party"
-                    before={NOTIFY_CURRENT}
-                    reasoning="No notify party appears on any document — the consignee is notified directly."
-                    {...fieldRow("notify")}
-                  />
-                </ChangeFields>
-              </Change>
-              {/* RECORD ops — the packing list also proposes ORDER LINES:
-                  a ChangeRecord card per item (add = one card decision;
-                  edit = its changed fields decide themselves). A divider +
-                  breathing room set the sub-section off from the fields. */}
+              {/* The heading, its counter and every row below are ordinary
+                  components reading ONE `useChangeSet`. `DiffValue` carries each
+                  field's mini-diff; the row around it belongs to this template,
+                  so a screen that needs a different shape writes a different
+                  row instead of bending a container. */}
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                <Text size="md" weight="semibold" style={{ flex: 1 }}>Suggested edits</Text>
+                <Text size="xs" color="muted">{`${fields.keptCount} of ${fields.total} kept`}</Text>
+              </View>
+              <Text size="sm" color="muted">{EXTRACT_REASONING}</Text>
+              <DetailTable labelWidth={140}>
+                {/* An ADD — the record holds nothing yet, so no `before`. */}
+                <ReviewField id="carrier_ref" label="Carrier reference" review={fields} kind="added">
+                  <InlineTextInput value={carrierRef} onSave={setCarrierRef} accessibilityLabel="Carrier reference" />
+                </ReviewField>
+                {/* An UPDATE — both values stay visible. */}
+                <ReviewField id="vessel" label="Vessel" review={fields} kind="changed">
+                  <InlineSlot><DiffValue layout="inline" before={VESSEL_CURRENT} after={vessel} /></InlineSlot>
+                </ReviewField>
+                {/* A CONFLICT — the sources disagree, so the value is the
+                    read-only outcome of a pick and Keep is gated until one is
+                    made. Never a pre-selection. */}
+                <ReviewField id="consignee" label="Consignee" review={fields} kind="changed" keepDisabled={consignee == null}
+                  why="The invoice and the packing list disagree — pick a candidate or type your own.">
+                  <View style={{ gap: 6 }}>
+                    <InlineSlot><DiffValue layout="inline" before={CONSIGNEE_CURRENT} after={consignee ?? undefined} placeholder="Pick a candidate below" /></InlineSlot>
+                    {CONSIGNEE_OPTIONS.map((c, ci) => (
+                      <CardSelectItem key={c.value} selected={consigneePick === ci} accessibilityLabel={c.value}
+                        onPress={() => { setConsigneePick(ci); setConsignee(c.value); }}>
+                        <View style={{ gap: 2 }}>
+                          <Text size="sm">{c.value}</Text>
+                          <Text size="xs" color="muted">{c.source}</Text>
+                        </View>
+                      </CardSelectItem>
+                    ))}
+                    <CardSelectItem selected={consigneePick === "custom"} accessibilityLabel="Type another value"
+                      onPress={() => { setConsigneePick("custom"); setConsignee(customConsignee || null); }}>
+                      <Text size="sm">{customConsignee === "" ? "Type another value" : customConsignee}</Text>
+                    </CardSelectItem>
+                    {consigneePick === "custom" ? (
+                      <InlineTextInput value={customConsignee} onSave={(v) => { setCustomConsignee(v); setConsignee(v || null); }} placeholder="Consignee…" accessibilityLabel="Custom consignee" />
+                    ) : null}
+                  </View>
+                </ReviewField>
+                <ReviewField id="gross" label="Gross weight" review={fields}>
+                  <InlineTextInput value={grossWeight} onSave={setGrossWeight} accessibilityLabel="Gross weight" />
+                </ReviewField>
+                {/* A REMOVAL — `after` omitted, so the struck value IS the change. */}
+                <ReviewField id="notify" label="Notify party" review={fields} kind="removed"
+                  why="No notify party appears on any document — the consignee is notified directly.">
+                  <InlineSlot><DiffValue layout="inline" before={NOTIFY_CURRENT} placeholder="removed" /></InlineSlot>
+                </ReviewField>
+              </DetailTable>
+
+              {/* RECORD ops — the packing list also proposes ORDER LINES. They
+                  read as a TABLE because that is what they are; the old family
+                  could only render them as a stack of cards. */}
               <View style={{ paddingTop: 10 }}>
                 <Divider />
               </View>
-              <ChangeReviewHeader title="Order lines" />
-              <ChangeRecord
-                id="line-add"
-                tone="add"
-                title="New line"
-                status={lineAdd}
-                onAccept={() => setLineAdd("accepted")}
-                onReject={() => setLineAdd("rejected")}
-                onUndo={() => setLineAdd("pending")}
-                summary={`${newItem} (${newQty} pcs)`}
-              >
-                <ChangeField label="Item" value={newItem} summary={newItem}>
-                  <ChangeValueInput value={newItem} onChangeText={setNewItem} accessibilityLabel="Item" />
-                </ChangeField>
-                <ChangeField label="Quantity" value={newQty} summary={`${newQty} pcs`}>
-                  <ChangeValueInput value={newQty} onChangeText={setNewQty} unit="pcs" accessibilityLabel="Quantity" />
-                </ChangeField>
-              </ChangeRecord>
-              <ChangeRecord id="line-edit" tone="edit" title="Flat-pack cartons — existing line" summary={`Flat-pack cartons — ${editedQty} pcs`}>
-                <ChangeField label="Quantity" before="1,200 pcs" value={editedQty} summary={`${editedQty} pcs`} {...lineEditRow("qty")}>
-                  <ChangeValueInput value={editedQty} onChangeText={setEditedQty} unit="pcs" accessibilityLabel="Line quantity" />
-                </ChangeField>
-              </ChangeRecord>
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                <Text size="md" weight="semibold" style={{ flex: 1 }}>Order lines</Text>
+                <Text size="xs" color="muted">{`${lines.keptCount} of ${lines.total} kept`}</Text>
+              </View>
+              {/* The WHOLE line set, changed and untouched together. Showing
+                  only the two proposals would answer "what did it find" while
+                  leaving the operator's real question — where does this sit in
+                  the order — to a second screen. The `Document` column is a
+                  first-class diff: a dropped invoice's proposal IS which line
+                  it attaches to. */}
+              <Table columns={[
+                { key: "mark", label: "", width: 30, priority: 4 },
+                { key: "item", label: "Item", flex: 1 },
+                { key: "qty", label: "Quantity", width: 116, align: "right", priority: 1 },
+                { key: "doc", label: "Document", width: 168, priority: 2 },
+                { key: "act", label: "", width: 92, priority: 3 },
+              ]}>
+                <TableRow>
+                  <TableCell><DiffMark kind="unchanged" /></TableCell>
+                  <TableCell><Text size="sm" numberOfLines={2}>{UNTOUCHED_LINES[0].item}</Text></TableCell>
+                  <TableCell><Text size="sm" tabular style={{ textAlign: "right" }}>{UNTOUCHED_LINES[0].qty}</Text></TableCell>
+                  <TableCell><DocName doc={UNTOUCHED_LINES[0].doc!} /></TableCell>
+                  <TableCell><View /></TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><DiffMark kind={lines.status("line-edit-qty") === "rejected" ? "unchanged" : "changed"} /></TableCell>
+                  <TableCell><Text size="sm" numberOfLines={2}>Flat-pack cartons</Text></TableCell>
+                  <TableCell><DiffValue align="right" tabular before="1,200 pcs" after={`${editedQty} pcs`} delta="+250 pcs" /></TableCell>
+                  <TableCell><DocName doc={{ name: "packing-list.pdf", mimeType: PDF }} /></TableCell>
+                  <TableCell><LineVerdict id="line-edit-qty" review={lines} label="Flat-pack cartons" /></TableCell>
+                </TableRow>
+                <TableRow>
+                  {/* THE ATTACHMENT. The line's values do not move at all — the
+                      whole proposal is that this invoice belongs HERE, so the
+                      document cell is the only thing that reads as a change. */}
+                  <TableCell><DiffMark kind={lines.status("line-doc") === "rejected" ? "unchanged" : "changed"} /></TableCell>
+                  <TableCell><Text size="sm" numberOfLines={2}>Steel banding coils</Text></TableCell>
+                  <TableCell><Text size="sm" tabular style={{ textAlign: "right" }}>80 pcs</Text></TableCell>
+                  <TableCell>
+                    {lines.status("line-doc") === "rejected"
+                      ? <Text size="xs" color="muted">None</Text>
+                      : <DiffValue after={<DocName doc={{ name: "invoice-8841.pdf", mimeType: PDF }} />} />}
+                  </TableCell>
+                  <TableCell><LineVerdict id="line-doc" review={lines} label="the invoice on Steel banding coils" /></TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><DiffMark kind="unchanged" /></TableCell>
+                  <TableCell><Text size="sm" numberOfLines={2}>{UNTOUCHED_LINES[1].item}</Text></TableCell>
+                  <TableCell><Text size="sm" tabular style={{ textAlign: "right" }}>{UNTOUCHED_LINES[1].qty}</Text></TableCell>
+                  <TableCell><DocName doc={UNTOUCHED_LINES[1].doc!} /></TableCell>
+                  <TableCell><View /></TableCell>
+                </TableRow>
+                <TableRow>
+                  {/* A document REPLACING one already filed. `DiffValue` strikes
+                      a node with a drawn rule, because `line-through` on a Text
+                      does not cross a View child — without it the superseded
+                      scan would sit at full strength beside its replacement. */}
+                  <TableCell><DiffMark kind={lines.status("line-doc-swap") === "rejected" ? "unchanged" : "changed"} /></TableCell>
+                  <TableCell><Text size="sm" numberOfLines={2}>Pallet collars</Text></TableCell>
+                  <TableCell><Text size="sm" tabular style={{ textAlign: "right" }}>320 pcs</Text></TableCell>
+                  <TableCell>
+                    {lines.status("line-doc-swap") === "rejected"
+                      ? <DocName doc={{ name: "scan-0042.jpg", mimeType: "image/jpeg" }} />
+                      : (
+                        <DiffValue
+                          before={<DocName doc={{ name: "scan-0042.jpg", mimeType: "image/jpeg" }} />}
+                          after={<DocName doc={{ name: "invoice-8841-p2.pdf", mimeType: PDF }} />}
+                        />
+                      )}
+                  </TableCell>
+                  <TableCell><LineVerdict id="line-doc-swap" review={lines} label="the replacement scan on Pallet collars" /></TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><DiffMark kind={lines.status("line-add") === "rejected" ? "unchanged" : "added"} /></TableCell>
+                  <TableCell><InlineTextInput value={newItem} onSave={setNewItem} accessibilityLabel="Item" /></TableCell>
+                  <TableCell><InlineTextInput value={newQty} onSave={setNewQty} accessibilityLabel="Quantity" /></TableCell>
+                  <TableCell><Text size="xs" color="muted">None</Text></TableCell>
+                  <TableCell><LineVerdict id="line-add" review={lines} label={newItem} /></TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell><DiffMark kind="unchanged" /></TableCell>
+                  <TableCell><Text size="sm" numberOfLines={2}>{UNTOUCHED_LINES[2].item}</Text></TableCell>
+                  <TableCell><Text size="sm" tabular style={{ textAlign: "right" }}>{UNTOUCHED_LINES[2].qty}</Text></TableCell>
+                  <TableCell><Text size="xs" color="muted">None</Text></TableCell>
+                  <TableCell><View /></TableCell>
+                </TableRow>
+              </Table>
+
+              {/* THE FILES SECTION — the record's document set, reviewed in the
+                  shape the record renders it in. `FileRow` takes the mark in
+                  `leading` so the names still form a column, and a node `meta`
+                  so a reclassify can carry its diff on the PROPERTY that moved
+                  rather than implying the bytes changed. */}
+              <View style={{ paddingTop: 10 }}>
+                <Divider />
+              </View>
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                <Text size="md" weight="semibold" style={{ flex: 1 }}>Documents</Text>
+                <Text size="xs" color="muted">{`${docs.keptCount} of ${docs.total} kept`}</Text>
+              </View>
+              <View style={{ gap: 2 }}>
+                {PROPOSED_DOCS.map((d) => {
+                  const status = docs.status(d.id);
+                  const dropped = status === "rejected";
+                  const meta =
+                    dropped ? d.note
+                    : d.supersedes ? `Replaces ${d.supersedes}`
+                    : d.filedAs ? (
+                      <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
+                        <Text size="xs" color="muted">Filed as</Text>
+                        <DiffValue layout="inline" size="xs" before={d.filedAs.before} after={d.filedAs.after} />
+                      </View>
+                    ) : d.note;
+                  return (
+                    <View key={d.id} style={{ opacity: dropped || d.kind === "removed" ? 0.55 : 1 }}>
+                      <FileRow
+                        size="md"
+                        name={d.name}
+                        mimeType={d.mimeType}
+                        meta={meta}
+                        leading={<DiffMark kind={dropped ? "unchanged" : d.kind} />}
+                        trailing={
+                          status === "pending" ? (
+                            <View style={{ flexDirection: "row", gap: 4 }}>
+                              <IconButton icon="x" accessibilityLabel={`Drop ${d.name}`} onPress={() => docs.reject(d.id)} />
+                              <IconButton icon="check" accessibilityLabel={`Keep ${d.name}`} onPress={() => docs.accept(d.id)} />
+                            </View>
+                          ) : (
+                            <Button title="Undo" color="muted" onPress={() => docs.undo(d.id)} />
+                          )
+                        }
+                      />
+                    </View>
+                  );
+                })}
+              </View>
             </View>
           </View>
         ) : null}
@@ -3522,7 +3787,7 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
               <View style={{ gap: 8 }}>{picked.map((f, fi) => <FileRow key={f.id} name={f.name} mimeType={f.mimeType} onPress={() => openPreview(picked, fi)} />)}</View>
             </View>
             <View style={{ gap: 14 }}>
-              <ChangeReviewHeader title="Findings" />
+              <Text size="md" weight="semibold">Findings</Text>
               {/* Display-only: findings inform the verdict the footer records.
                   The kit `Finding` owns severity word, title, detail, the
                   PROMINENT metric, Sources; hairlines separate them. */}
@@ -3582,7 +3847,10 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
           {/* N = the kept fields; the minKept swap disables Apply exactly at
               N = 0 (the registry can't see field-level decisions, so the host
               gates — and hands Keep-all its own handler). */}
-          <ChangeReviewActions onAcceptAll={keepAll} onDiscard={closeAi} discardLabel="Cancel" onApply={() => setPhase("done")} applyLabel={`Update record (${applyCount})`} minKept={0} applyDisabled={applyCount === 0} />
+          <Button title="Keep all" color="muted" onPress={keepAll} />
+          <View style={{ flex: 1 }} />
+          <Button title="Cancel" color="secondary" onPress={closeAi} />
+          <Button title={`Update record (${applyCount})`} color="primary" disabled={applyCount === 0} onPress={() => setPhase("done")} />
         </DialogFooter>
       ) : phase === "review" && task === "check" ? (
         <DialogFooter>
@@ -3597,7 +3865,6 @@ export function TplRecord({ chrome = "page", code = "RC-2026-0418", openSection
         </DialogFooter>
       ) : null}
     </Dialog>
-    </ChangeReview>
 
     {/* Rename — small focused dialog; Save disabled while empty. */}
     <Dialog open={renameTarget != null} onOpenChange={(o) => { if (!o) setRenameTarget(null); }} maxWidth={420}>