@lotics/ui 5.2.0 → 5.4.0

package/AGENTS.md

@@ -13,8 +13,8 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
 - RN-Web only: `View`/`ScrollView` from `react-native`, the `Text` primitive (no raw
   `div`/`span`, no raw `fontSize`/`fontWeight`); styles are RN objects.
 - i18n: most components are string-free; the few that emit their own user-facing strings take
-  a `labels` prop (`DateRangeFilterField`, `Pagination`, `SortHeader`/`Table.sortLabels`) —
-  localize there.
+  a `labels` prop (`DateRangeFilterField`, `Pagination`, `SortHeader`/`Table.sortLabels`,
+  `RemainderMeter`) — localize there.
 
 ---
 
@@ -83,8 +83,9 @@ Pick by capability, not by name. (→ the source file for the API.)
   `AgentRun` (the live streaming work feed) + `AgentProgress` (its compact, floating, expandable
   form — a composer's "working" state), `ReviewCard` (THE single-proposal review card — compositional
   body via `children`: a `RecordFields` record (header-first) or a `MatchSides` pairing (body-first))
-  + `Confidence`; `ChangeReview` (the BATCH review engine — whole-set OR 1-by-1; compositional via
-  `renderItem`, with `ChangeDiff` for the before→after body),
+  + `Confidence`; `ChangeReview` (the BATCH review list — whole-set OR 1-by-1; compositional via
+  `renderItem`, with `ChangeDiff` for the before→after body) + `ChangeReviewActions` (its commit bar,
+  pinned by the host in a `DialogFooter`/`DrawerFooter` or inline),
   `Clarify` (the agent asks back — selectable `ChoiceList` options),
   `Sources` (provenance chips for AI output). For STRUCTURED AI output the review
   surfaces above don't cover: `SpecList` (the "exact breakdown" — a labeled-value spec sheet, the
@@ -281,8 +282,13 @@ Compose the surfaces as a loop, and reach for the right one by job:
     → `tpl_match`). Stack several (rank by confidence) for a shortlist or a document's records.
   - **`ChangeReview`** — THE batch engine for a SET you decide each then commit together. `renderItem`
     draws each proposal (a `ChangeDiff` before→after body, a record, an editable form), 1-by-1
-    Keep/Drop collapses each, "Accept all" + Apply commits only the kept (e.g. ingested rate lines —
-    `tpl_ratedesk`); whole-set mode applies/discards the lot.
+    Keep/Drop collapses each (e.g. ingested rate lines — `tpl_ratedesk`); whole-set mode reviews the
+    lot. It is the LIST only — the commit bar (Accept all / Apply / Discard) is the SEPARATE
+    **`ChangeReviewActions`**, which the host places where commit bars belong (a `DialogFooter` /
+    `DrawerFooter`, or inline under the list). Don't bundle a commit into a scroll body — like every
+    other footer in the kit it's the container's to pin (`tpl_ratedesk` puts it in the `DialogFooter`).
+    `ChangeReviewActions` reads the same `items`/`statusOf`, so it owns Accept-all + the kept count —
+    never re-derive them in the host.
   The body atoms (`RecordFields`, `MatchSides`, `ChangeDiff`) are pure presentation — usable inside
   either engine OR standalone (a live-edit field card). The decide / accept-all / apply mechanics are
   never re-implemented per surface.
@@ -590,7 +596,7 @@ spacer · stack · section_card · page_header · page_content · calendar (cale
 comments_thread · agent_run (live streaming work feed) · agent_progress (its compact floating
 expandable form — a composer's working state) · composer (Composer — the adaptive command/chat
 composer: a compact pill that expands for long text + attachments) · review_card (ReviewCard — THE single-proposal review card; compositional body via children + a generic actions footer; header-first with a title/eyebrow, body-first without) · confidence (calibrated high/med/low) ·
-record_fields (RecordFields — the editable extracted-record BODY for a ReviewCard, or a standalone live-edit field card) · change_review (ChangeReview — the BATCH review engine, whole-set OR 1-by-1; compositional `renderItem` body + the `ChangeDiff` before→after helper) ·
+record_fields (RecordFields — the editable extracted-record BODY for a ReviewCard, or a standalone live-edit field card) · change_review (ChangeReview — the BATCH review LIST, whole-set OR 1-by-1; compositional `renderItem` body + the `ChangeDiff` before→after helper, `labels` localizes Undo/Applied/Discarded/counter — PLUS `ChangeReviewActions`, the separate commit bar the host pins in a `DialogFooter`/`DrawerFooter` or inline so it never scrolls away) ·
 clarify (the agent asks back, via ChoiceList) · choice_list (ChoiceList — selectable answer options,
 the agent's quick-reply surface) · sources (provenance chips, per-kind glyphs) · spec_list (SpecList — the exact
 labeled-value breakdown, the panel of an answer) · match_sides (MatchSides — the two-sided pairing BODY for a body-first ReviewCard reconciliation; composable side slots + the MatchSideText default) ·

package/examples/tpl_assistant.tsx

@@ -4,7 +4,7 @@ import { colors } from "@lotics/ui/colors";
 import { Text } from "@lotics/ui/text";
 import { DotsIndicator } from "@lotics/ui/dots_indicator";
 import { Composer } from "@lotics/ui/composer";
-import { ChangeReview, ChangeDiff, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
+import { ChangeReview, ChangeReviewActions, ChangeDiff, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Template · AI assistant — a CHAT workflow, a different shape from the design
@@ -115,30 +115,42 @@ export function TplAssistant() {
                 ) : null}
                 {m.text ? <Text size="sm">{m.text}</Text> : null}
                 {m.changes ? (
-                  <ChangeReview
-                    items={m.changes}
-                    getKey={(c, i) => `${m.id}:${i}`}
-                    statusOf={(_, i) => decisions[`${m.id}:${i}`] ?? "pending"}
-                    renderItem={(c) => (
-                      <>
-                        <Text size="xs" color="muted" weight="medium">{c.label}</Text>
-                        <ChangeDiff before={c.before} after={c.after} />
-                      </>
-                    )}
-                    renderSummary={(c, kept) => (
-                      <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                        <Text size="sm" weight="medium" numberOfLines={1}>{c.label}</Text>
-                        <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={[{ flex: 1 }, kept ? undefined : { textDecorationLine: "line-through" }]}>{kept ? c.after : (c.before ?? c.after)}</Text>
+                  <View style={{ gap: 14 }}>
+                    <ChangeReview
+                      items={m.changes}
+                      getKey={(c, i) => `${m.id}:${i}`}
+                      statusOf={(_, i) => decisions[`${m.id}:${i}`] ?? "pending"}
+                      renderItem={(c) => (
+                        <>
+                          <Text size="xs" color="muted" weight="medium">{c.label}</Text>
+                          <ChangeDiff before={c.before} after={c.after} />
+                        </>
+                      )}
+                      renderSummary={(c, kept) => (
+                        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+                          <Text size="sm" weight="medium" numberOfLines={1}>{c.label}</Text>
+                          <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={[{ flex: 1 }, kept ? undefined : { textDecorationLine: "line-through" }]}>{kept ? c.after : (c.before ?? c.after)}</Text>
+                        </View>
+                      )}
+                      status={m.applied ? "applied" : "open"}
+                      onAcceptItem={active ? (i) => decide(m.id, i, "accepted") : undefined}
+                      onRejectItem={active ? (i) => decide(m.id, i, "rejected") : undefined}
+                      onUndoItem={active ? (i) => setDecisions((d) => { const n = { ...d }; delete n[`${m.id}:${i}`]; return n; }) : undefined}
+                    />
+                    {/* Inline (no dialog) — the commit bar sits under the list behind a divider. */}
+                    {active && !m.applied ? (
+                      <View style={{ borderTopWidth: 1, borderTopColor: colors.zinc[200], paddingTop: 14, flexDirection: "row" }}>
+                        <ChangeReviewActions
+                          items={m.changes}
+                          statusOf={(_, i) => decisions[`${m.id}:${i}`] ?? "pending"}
+                          applyLabel="Apply accepted"
+                          onAcceptItem={(i) => decide(m.id, i, "accepted")}
+                          onApply={() => applyMsg(m.id)}
+                          onDiscard={() => setMessages((ms) => ms.map((x) => (x.id === m.id ? { ...x, applied: true } : x)))}
+                        />
                       </View>
-                    )}
-                    status={m.applied ? "applied" : "open"}
-                    applyLabel="Apply accepted"
-                    onAcceptItem={active ? (i) => decide(m.id, i, "accepted") : undefined}
-                    onRejectItem={active ? (i) => decide(m.id, i, "rejected") : undefined}
-                    onUndoItem={active ? (i) => setDecisions((d) => { const n = { ...d }; delete n[`${m.id}:${i}`]; return n; }) : undefined}
-                    onApply={active ? () => applyMsg(m.id) : undefined}
-                    onDiscard={active ? () => setMessages((ms) => ms.map((x) => (x.id === m.id ? { ...x, applied: true } : x))) : undefined}
-                  />
+                    ) : null}
+                  </View>
                 ) : null}
               </View>
             </View>

package/examples/tpl_ratedesk.tsx

@@ -17,7 +17,7 @@ import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { InlineNumberInput } from "@lotics/ui/inline_number_input";
 import { CompletionState } from "@lotics/ui/completion_state";
-import { ChangeReview, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
+import { ChangeReview, ChangeReviewActions, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
 import { Dialog, DialogHeader, DialogHeaderTitle, DialogScrollArea, DialogFooter } from "@lotics/ui/dialog";
 import { formatDate } from "@lotics/ui/format_date";
 import { colors, solid, type ColorName } from "@lotics/ui/colors";
@@ -254,12 +254,9 @@ export function TplRatedesk() {
                 <Text size="xs" color="muted" numberOfLines={1} tabular style={[{ flex: 1 }, kept ? undefined : { textDecorationLine: "line-through" }]}>{l.carrier} · {l.unit} · sell {usd(l.sell)}</Text>
               </View>
             )}
-            applyLabel={`Apply ${lines.filter((l) => decisions[l.id] === "accepted").length} kept`}
             onAcceptItem={(i) => decide(lines[i].id, "accepted")}
             onRejectItem={(i) => decide(lines[i].id, "rejected")}
             onUndoItem={(i) => decide(lines[i].id, null)}
-            onApply={applyAccepted}
-            onDiscard={reset}
           />
         ) : null}
 
@@ -268,21 +265,29 @@ export function TplRatedesk() {
         ) : null}
       </DialogScrollArea>
 
-      {/* idle + done carry footer actions; reading streams and review owns its
-          own Accept-all / Apply footer inside ChangeReview */}
-      {phase === "idle" || phase === "done" ? (
+      {/* idle / review / done carry footer actions; reading just streams. The
+          review commit bar pins HERE via ChangeReviewActions — it never scrolls
+          away inside the list. */}
+      {phase === "idle" ? (
         <DialogFooter>
-          {phase === "idle" ? (
-            <>
-              {files.length > 0 ? <Button title="Clear" color="muted" shape="rounded" onPress={() => setFiles([])} /> : null}
-              <Button title={files.length ? `Read ${files.length} sheets` : "Read sheets"} color="primary" shape="rounded" disabled={!files.length} onPress={() => { setRevealed(0); setPhase("reading"); }} />
-            </>
-          ) : (
-            <>
-              <Button title="Import more" color="secondary" shape="rounded" onPress={reset} />
-              <Button title="Done" color="primary" shape="rounded" onPress={closeImport} />
-            </>
-          )}
+          {files.length > 0 ? <Button title="Clear" color="muted" shape="rounded" onPress={() => setFiles([])} /> : null}
+          <Button title={files.length ? `Read ${files.length} sheets` : "Read sheets"} color="primary" shape="rounded" disabled={!files.length} onPress={() => { setRevealed(0); setPhase("reading"); }} />
+        </DialogFooter>
+      ) : phase === "review" ? (
+        <DialogFooter>
+          <ChangeReviewActions
+            items={lines}
+            statusOf={(l) => decisions[l.id] ?? "pending"}
+            onAcceptItem={(i) => decide(lines[i].id, "accepted")}
+            onApply={applyAccepted}
+            onDiscard={reset}
+            applyLabel={`Apply ${lines.filter((l) => decisions[l.id] === "accepted").length} kept`}
+          />
+        </DialogFooter>
+      ) : phase === "done" ? (
+        <DialogFooter>
+          <Button title="Import more" color="secondary" shape="rounded" onPress={reset} />
+          <Button title="Done" color="primary" shape="rounded" onPress={closeImport} />
         </DialogFooter>
       ) : null}
     </Dialog>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/change_review.tsx

@@ -32,22 +32,45 @@ export interface ChangeReviewProps<T> {
   summary?: string;
   /** 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. */
+  /** 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;
-  onApply?: () => void;
-  onDiscard?: () => void;
-  applyLabel?: string;
   /** 1-by-1 per-item action labels. Default "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;
+  };
+}
+
+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;
-  /** Once resolved the card settles to a quiet outcome line (no actions). */
+  discardLabel?: string;
+  /** Self-hides unless open — the host can always render it. */
   status?: "open" | "applied" | "discarded";
 }
 
@@ -82,13 +105,15 @@ export function ChangeDiff({ before, after }: { before?: string; after: string }
 
 /**
  * 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.
+ * 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.
  */
 export function ChangeReview<T>(props: ChangeReviewProps<T>) {
   const status = props.status ?? "open";
@@ -97,11 +122,13 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
   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.items.forEach((it, i) => {
-      if (statusFor(it, i) === "pending") props.onAcceptItem?.(i);
-    });
+  const L = {
+    undo: "Undo",
+    applied: "Applied",
+    discarded: "Discarded",
+    keptCount: (kept: number, total: number) => `${kept} of ${total} kept`,
+    ...props.labels,
+  };
 
   const summaryNote = props.summary ? (
     <View style={styles.note}>
@@ -111,6 +138,13 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
     </View>
   ) : null;
 
+  const resolvedLine =
+    status !== "open" ? (
+      <Text size="xs" color="muted" weight="medium">
+        {status === "applied" ? L.applied : L.discarded}
+      </Text>
+    ) : null;
+
   // ── 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) {
@@ -122,68 +156,55 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
           </Text>
           {status === "open" ? (
             <Text size="xs" color="muted" tabular>
-              {keptCount} of {total} kept
+              {L.keptCount(keptCount, total)}
             </Text>
           ) : null}
         </View>
         {summaryNote}
 
         {status !== "open" ? (
-          <Text size="xs" color="muted" weight="medium">
-            {status === "applied" ? "Applied" : "Discarded"}
-          </Text>
+          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 ?? "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";
+          <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.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 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>
-                    {props.onUndoItem ? (
-                      <Button title="Undo" color="muted" shape="rounded" onPress={() => props.onUndoItem?.(i)} />
-                    ) : null}
                   </View>
                 );
-              })}
-            </View>
-
-            <View style={styles.footer}>
-              <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 ? (
-                <Button title={props.applyLabel ?? "Apply kept"} color="primary" shape="rounded" disabled={keptCount === 0} onPress={props.onApply} />
-              ) : null}
-            </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" shape="rounded" onPress={() => props.onUndoItem?.(i)} />
+                  ) : null}
+                </View>
+              );
+            })}
+          </View>
         )}
       </View>
     );
   }
 
-  // ── WHOLE-SET: one bordered card, review the lot, apply / discard together ─
+  // ── WHOLE-SET: one bordered card, review the lot together ──────────────────
   return (
     <View style={[reviewCardStyle, status !== "open" ? reviewResolvedStyle : null]}>
       <Text size="xs" color="muted" weight="medium">
@@ -197,19 +218,43 @@ export function ChangeReview<T>(props: ChangeReviewProps<T>) {
           </View>
         ))}
       </View>
-      {status !== "open" ? (
-        <Text size="xs" color="muted" weight="medium">
-          {status === "applied" ? "Applied" : "Discarded"}
-        </Text>
-      ) : (
-        <View style={styles.footer}>
-          <View style={{ flex: 1 }} />
-          {props.onDiscard ? <Button title="Discard" color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
-          {props.onApply ? (
-            <Button title={props.applyLabel ?? "Apply"} color="primary" shape="rounded" onPress={props.onApply} />
-          ) : null}
-        </View>
-      )}
+      {resolvedLine}
+    </View>
+  );
+}
+
+/**
+ * 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.
+ */
+export function ChangeReviewActions<T>(props: ChangeReviewActionsProps<T>) {
+  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);
+    });
+  return (
+    <View style={styles.actionsRow}>
+      {perItem ? <Button title={props.acceptAllLabel ?? "Accept all"} color="muted" shape="rounded" onPress={acceptAll} /> : null}
+      <View style={{ flex: 1 }} />
+      {props.onDiscard ? <Button title={props.discardLabel ?? "Discard"} color="muted" shape="rounded" onPress={props.onDiscard} /> : null}
+      {props.onApply ? (
+        <Button
+          title={props.applyLabel ?? (perItem ? "Apply kept" : "Apply")}
+          color="primary"
+          shape="rounded"
+          disabled={perItem && keptCount === 0}
+          onPress={props.onApply}
+        />
+      ) : null}
     </View>
   );
 }
@@ -246,7 +291,10 @@ const styles = {
     diff: { gap: 3 },
     diffLine: { flexDirection: "row", alignItems: "baseline", gap: 8 },
     strike: { textDecorationLine: "line-through" },
-    footer: { flexDirection: "row", alignItems: "center", gap: 8, borderTopWidth: 1, borderTopColor: colors.zinc[200], paddingTop: 14 },
+    // 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 },
   }),
   marker: (color: string) => ({ color, width: 12 }),
   value: (color: string) => ({ color }),

package/src/remainder_meter.tsx

@@ -2,6 +2,26 @@ import { StyleSheet, View, type DimensionValue } from "react-native";
 import { colors, solid } from "./colors";
 import { Text } from "./text";
 
+/**
+ * Override the meter's captions for localization. Each key is optional and
+ * falls back to English (mirrors `PaginationLabels` / `DateRangeFilterField`).
+ */
+export interface RemainderMeterLabels {
+  /** The left caption. Default: `{allocated} of {total} applied`. */
+  applied?: (allocated: string, total: string) => string;
+  /** UNDER state (a remainder still to place). Default: `{remainder} unapplied`. */
+  remaining?: (remainder: string) => string;
+  /** OVER state (over-allocated). Default: `Over by {amount}`. */
+  over?: (amount: string) => string;
+  /** EXACT state. Default: `Fully applied`. */
+  exact?: string;
+}
+
+const defaultApplied = (allocated: string, total: string) => `${allocated} of ${total} applied`;
+const defaultRemaining = (remainder: string) => `${remainder} unapplied`;
+const defaultOver = (amount: string) => `Over by ${amount}`;
+const DEFAULT_EXACT = "Fully applied";
+
 export interface RemainderMeterProps {
   /** The source amount being distributed — the payment, the available stock. */
   total: number;
@@ -9,6 +29,8 @@ export interface RemainderMeterProps {
   allocated: number;
   /** Format amounts (money / units). Defaults to a plain locale string. */
   format?: (n: number) => string;
+  /** Localize the captions; each key falls back to English. */
+  labels?: RemainderMeterLabels;
 }
 
 /**
@@ -20,17 +42,21 @@ export interface RemainderMeterProps {
  * distribution, budgeting.
  */
 export function RemainderMeter(props: RemainderMeterProps) {
-  const { total, allocated, format = (n) => n.toLocaleString() } = props;
+  const { total, allocated, format = (n) => n.toLocaleString(), labels } = props;
   const remainder = total - allocated;
   const state = remainder > 0 ? "under" : remainder < 0 ? "over" : "exact";
   const pct: DimensionValue = `${total <= 0 ? 0 : Math.min(100, (allocated / total) * 100)}%`;
   const barColor = state === "over" ? solid("red") : state === "exact" ? solid("emerald") : solid("blue");
   const right =
-    state === "exact" ? "Fully applied" : state === "over" ? `Over by ${format(-remainder)}` : `${format(remainder)} unapplied`;
+    state === "exact"
+      ? (labels?.exact ?? DEFAULT_EXACT)
+      : state === "over"
+        ? (labels?.over ?? defaultOver)(format(-remainder))
+        : (labels?.remaining ?? defaultRemaining)(format(remainder));
   return (
     <View style={{ gap: 8 }}>
       <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
-        <Text size="sm" color="muted" style={{ flex: 1 }}>{`${format(allocated)} of ${format(total)} applied`}</Text>
+        <Text size="sm" color="muted" style={{ flex: 1 }}>{(labels?.applied ?? defaultApplied)(format(allocated), format(total))}</Text>
         <Text size="sm" weight="medium" tabular color={state === "over" ? "danger" : state === "exact" ? "success" : "default"}>
           {right}
         </Text>