@lotics/ui 7.19.3 → 9.0.0

package/examples/tpl_report.tsx

@@ -321,13 +321,13 @@ export function TplReport() {
 
           {/* eyebrow columns */}
           <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 10 }}>
-            <Text size="xs" color="muted" transform="uppercase" style={{ width: 92 }}>Reference</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1.3 }}>Customer</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>Operator</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ width: 70 }}>Date</Text>
-            <Text size="xs" color="muted" transform="uppercase" tabular align="right" style={{ width: 116 }}>Amount</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ width: 92 }}>Receipt</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ width: 96 }}>Status</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ width: 92 }}>Reference</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ flex: 1.3 }}>Customer</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Operator</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ width: 70 }}>Date</Text>
+            <Text size="xs" color="muted" weight="medium" tabular align="right" style={{ width: 116 }}>Amount</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ width: 92 }}>Receipt</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ width: 96 }}>Status</Text>
           </View>
           <Divider />
 

package/examples/tpl_rollup.tsx

@@ -12,7 +12,7 @@ import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { Sparkline } from "@lotics/ui/sparkline";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Network rollup — hierarchical totals with drill: region →
+// Template · Hierarchy rollup — hierarchical totals with drill: region →
 // site → lane, every level carrying the SAME aligned metric columns so a
 // bad number can be chased down the tree ("which branch drags the
 // total?"). Pure composition: nested Accordions + a fixed-width column
@@ -169,10 +169,10 @@ export function TplRollup() {
 
           {/* eyebrow columns — match the tree's column map exactly */}
           <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 10 }}>
-            <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>Branch</Text>
-            <Text size="xs" color="muted" transform="uppercase" align="right" style={{ width: COLS.volume }}>Volume</Text>
-            <Text size="xs" color="muted" transform="uppercase" align="right" style={{ width: COLS.ontime }}>On-time</Text>
-            <Text size="xs" color="muted" transform="uppercase" align="right" style={{ width: COLS.margin }}>Margin</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Branch</Text>
+            <Text size="xs" color="muted" weight="medium" align="right" style={{ width: COLS.volume }}>Volume</Text>
+            <Text size="xs" color="muted" weight="medium" align="right" style={{ width: COLS.ontime }}>On-time</Text>
+            <Text size="xs" color="muted" weight="medium" align="right" style={{ width: COLS.margin }}>Margin</Text>
             <View style={{ width: 16 }} />
           </View>
           <Divider />
@@ -270,7 +270,7 @@ export function TplRollup() {
               <KVRow label="Margin"><Text size="sm" tabular>{`${openLane.margin}%`}</Text></KVRow>
             </View>
             <View style={{ gap: 8 }}>
-              <Text size="xs" color="muted" transform="uppercase">Volume · last 12 weeks</Text>
+              <Text size="xs" color="muted" weight="medium">Volume · last 12 weeks</Text>
               <Sparkline
                 data={Array.from({ length: 12 }, (_, w) => openLane.volume / 4 + (hash(w, openLane.volume) - 500) * (openLane.volume / 12000))}
                 width={200}

package/examples/tpl_shifts.tsx

@@ -210,7 +210,7 @@ export function TplShifts() {
               <View style={{ width: 110 }} />
               {DAYS.map((d) => (
                 <View key={d.key} style={{ flex: 1, alignItems: "center" }}>
-                  <Text size="xs" color="muted" transform="uppercase">{d.label}</Text>
+                  <Text size="xs" color="muted" weight="medium">{d.label}</Text>
                   <Text size="xs" color="muted" tabular>{d.date}</Text>
                 </View>
               ))}
@@ -389,7 +389,7 @@ export function TplShifts() {
               </PopoverTrigger>
               <PopoverContent style={{ width: 320 }}>
                 <View style={{ paddingHorizontal: 12, paddingTop: 10, paddingBottom: 6 }}>
-                  <Text size="xs" color="muted" transform="uppercase">{`Fill ${slotLabel(open.day, open.shift)}`}</Text>
+                  <Text size="xs" color="muted" weight="medium">{`Fill ${slotLabel(open.day, open.shift)}`}</Text>
                 </View>
                 <ScrollView style={{ maxHeight: 280 }} contentContainerStyle={{ paddingHorizontal: 6, paddingBottom: 8, gap: 2 }}>
                   {MEMBERS.filter((m) => !openAssigned.includes(m)).map((m) => {

package/examples/tpl_statements.tsx

@@ -0,0 +1,221 @@
+import { ReactNode } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors } from "@lotics/ui/colors";
+import { Button } from "@lotics/ui/button";
+import { Divider } from "@lotics/ui/divider";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Financial statements — the income statement, the balance sheet,
+// and the cash flow statement, all speaking ONE statement grammar: column
+// captions right-aligned over fixed money columns, items indented under their
+// group, a hairline rule above every subtotal, the grand total DOUBLE-RULED
+// (the accounting convention), negatives in accounting parentheses, no bars,
+// no charts — the numbers are the interface. The three statements TIE: net
+// income flows into retained earnings, the cash flow's closing cash IS the
+// balance sheet's cash, the loan repayment moves the debt line. Figures are
+// per-cell currency-free (the meta line says "VND" once).
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Accounting formatting: thousands-dotted, negatives in parentheses. */
+const num = (n: number) => {
+  const s = Math.abs(n).toLocaleString("vi-VN");
+  return n < 0 ? `(${s})` : s;
+};
+
+type LineKind = "header" | "item" | "subtotal" | "total";
+
+interface Line {
+  kind: LineKind;
+  label: string;
+  /** One value per column; null renders an empty cell (headers usually). */
+  values?: (number | null)[];
+}
+
+const COL_WIDTH = 124;
+
+/** One statement: right-aligned column captions, then the lines. The grammar —
+ *  header (group label, no values) · item (indented, plain) · subtotal (rule
+ *  above, semibold) · total (DOUBLE rule above, semibold) — covers all three
+ *  statements; only the data differs. */
+function Statement({ columns, lines }: { columns: string[]; lines: Line[] }) {
+  const cells = (l: Line, weight?: "medium" | "semibold") =>
+    (l.values ?? columns.map(() => null)).map((v, i) => (
+      <Text key={i} size="sm" weight={weight} tabular align="right" style={{ width: COL_WIDTH }}>
+        {v == null ? "" : num(v)}
+      </Text>
+    ));
+  return (
+    <View>
+      {/* column captions */}
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingBottom: 6 }}>
+        <View style={{ flex: 1 }} />
+        {columns.map((c) => (
+          <Text key={c} size="xs" weight="medium" color="muted" align="right" style={{ width: COL_WIDTH }}>
+            {c}
+          </Text>
+        ))}
+      </View>
+      <Divider />
+      <View style={{ paddingTop: 6, gap: 2 }}>
+        {lines.map((l, i) => {
+          if (l.kind === "header") {
+            return (
+              <Text key={i} size="sm" weight="semibold" style={{ paddingTop: i === 0 ? 0 : 10 }}>
+                {l.label}
+              </Text>
+            );
+          }
+          if (l.kind === "item") {
+            return (
+              <View key={i} style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 26 }}>
+                <Text size="sm" style={{ flex: 1, paddingLeft: 12 }}>{l.label}</Text>
+                {cells(l)}
+              </View>
+            );
+          }
+          if (l.kind === "subtotal") {
+            return (
+              <View key={i} style={{ gap: 2 }}>
+                <View style={{ flexDirection: "row", gap: 12 }}>
+                  <View style={{ flex: 1 }} />
+                  <View style={{ width: COL_WIDTH * columns.length + 12 * (columns.length - 1), borderTopWidth: 1, borderTopColor: colors.zinc[200] }} />
+                </View>
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 26 }}>
+                  <Text size="sm" weight="medium" style={{ flex: 1 }}>{l.label}</Text>
+                  {cells(l, "medium")}
+                </View>
+              </View>
+            );
+          }
+          // total — the double rule
+          return (
+            <View key={i} style={{ gap: 2, paddingTop: 4 }}>
+              <View style={{ flexDirection: "row", gap: 12 }}>
+                <View style={{ flex: 1 }} />
+                <View style={{ width: COL_WIDTH * columns.length + 12 * (columns.length - 1), gap: 2 }}>
+                  <View style={{ borderTopWidth: 1, borderTopColor: colors.zinc[400] }} />
+                  <View style={{ borderTopWidth: 1, borderTopColor: colors.zinc[400] }} />
+                </View>
+              </View>
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 30 }}>
+                <Text size="sm" weight="semibold" style={{ flex: 1 }}>{l.label}</Text>
+                {cells(l, "semibold")}
+              </View>
+            </View>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+/** The statement page: title + the one meta line (entity · period · basis ·
+ *  currency, stated ONCE so cells stay currency-free) + Export, then the
+ *  statement column. */
+function StatementPage({ title, meta, children }: { title: string; meta: string; children: ReactNode }) {
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28, paddingBottom: 96 }}>
+      <View style={{ width: "100%", maxWidth: 680, alignSelf: "center", gap: 20 }}>
+        <View style={{ flexDirection: "row", alignItems: "flex-start", flexWrap: "wrap", columnGap: 12, rowGap: 8 }}>
+          <View style={{ flexGrow: 1, flexBasis: 240, gap: 2 }}>
+            <Text size="xl" weight="semibold">{title}</Text>
+            <Text size="sm" color="muted">{meta}</Text>
+          </View>
+          <Button title="Export" color="secondary" icon="file-down" onPress={() => {}} />
+        </View>
+        {children}
+        <Text size="xs" color="muted">Unaudited management accounts. Figures in VND.</Text>
+      </View>
+    </ScrollView>
+  );
+}
+
+// ── the data — internally exact AND tied across the three statements:
+//    net income 81.840 → retained earnings 203.600 + 81.840 − 40.740 dividends
+//    = 244.700; closing cash 400.800 IS the balance sheet's cash; the loan
+//    repayment takes long-term debt 90.000 → 80.000. (thousands of VND)
+const K = 1000;
+
+export function TplIncomeStatement() {
+  const lines: Line[] = [
+    { kind: "header", label: "Revenue" },
+    { kind: "item", label: "Service revenue", values: [842_500 * K, 781_200 * K] },
+    { kind: "item", label: "Disbursement recharges", values: [128_400 * K, 118_900 * K] },
+    { kind: "subtotal", label: "Total revenue", values: [970_900 * K, 900_100 * K] },
+    { kind: "header", label: "Cost of services" },
+    { kind: "item", label: "Carrier & handling", values: [-512_300 * K, -471_800 * K] },
+    { kind: "item", label: "Customs & levies", values: [-148_200 * K, -139_600 * K] },
+    { kind: "subtotal", label: "Gross profit", values: [310_400 * K, 288_700 * K] },
+    { kind: "header", label: "Operating expenses" },
+    { kind: "item", label: "Salaries & benefits", values: [-142_000 * K, -138_500 * K] },
+    { kind: "item", label: "Office & software", values: [-38_400 * K, -37_200 * K] },
+    { kind: "item", label: "Marketing", values: [-21_500 * K, -18_900 * K] },
+    { kind: "subtotal", label: "Operating income", values: [108_500 * K, 94_100 * K] },
+    { kind: "item", label: "Interest expense", values: [-6_200 * K, -6_400 * K] },
+    { kind: "subtotal", label: "Profit before tax", values: [102_300 * K, 87_700 * K] },
+    { kind: "item", label: "Income tax (20%)", values: [-20_460 * K, -17_540 * K] },
+    { kind: "total", label: "Net income", values: [81_840 * K, 70_160 * K] },
+  ];
+  return (
+    <StatementPage title="Income statement" meta="VITTORIA Logistics · month ended 30/06/2026 · VND">
+      <Statement columns={["Jun 2026", "May 2026"]} lines={lines} />
+    </StatementPage>
+  );
+}
+
+export function TplBalanceSheet() {
+  const lines: Line[] = [
+    { kind: "header", label: "Assets" },
+    { kind: "item", label: "Cash & equivalents", values: [400_800 * K, 355_100 * K] },
+    { kind: "item", label: "Accounts receivable", values: [386_200 * K, 401_600 * K] },
+    { kind: "item", label: "Advances & deposits", values: [54_500 * K, 48_200 * K] },
+    { kind: "subtotal", label: "Current assets", values: [841_500 * K, 804_900 * K] },
+    { kind: "item", label: "Equipment, net", values: [130_400 * K, 121_900 * K] },
+    { kind: "total", label: "Total assets", values: [971_900 * K, 926_800 * K] },
+    { kind: "header", label: "Liabilities" },
+    { kind: "item", label: "Accounts payable", values: [268_300 * K, 259_400 * K] },
+    { kind: "item", label: "Taxes payable", values: [42_100 * K, 38_600 * K] },
+    { kind: "item", label: "Accrued salaries", values: [36_800 * K, 35_200 * K] },
+    { kind: "subtotal", label: "Current liabilities", values: [347_200 * K, 333_200 * K] },
+    { kind: "item", label: "Long-term debt", values: [80_000 * K, 90_000 * K] },
+    { kind: "subtotal", label: "Total liabilities", values: [427_200 * K, 423_200 * K] },
+    { kind: "header", label: "Equity" },
+    { kind: "item", label: "Contributed capital", values: [300_000 * K, 300_000 * K] },
+    { kind: "item", label: "Retained earnings", values: [244_700 * K, 203_600 * K] },
+    { kind: "subtotal", label: "Total equity", values: [544_700 * K, 503_600 * K] },
+    { kind: "total", label: "Total liabilities & equity", values: [971_900 * K, 926_800 * K] },
+  ];
+  return (
+    <StatementPage title="Balance sheet" meta="VITTORIA Logistics · as at 30/06/2026 · VND">
+      <Statement columns={["30/06/2026", "31/05/2026"]} lines={lines} />
+    </StatementPage>
+  );
+}
+
+export function TplCashflow() {
+  const lines: Line[] = [
+    { kind: "header", label: "Operating activities" },
+    { kind: "item", label: "Net income", values: [81_840 * K] },
+    { kind: "item", label: "Depreciation", values: [3_500 * K] },
+    { kind: "item", label: "Decrease in accounts receivable", values: [15_400 * K] },
+    { kind: "item", label: "Increase in accounts payable", values: [8_900 * K] },
+    { kind: "item", label: "Other working-capital movements", values: [-1_200 * K] },
+    { kind: "subtotal", label: "Net cash from operating activities", values: [108_440 * K] },
+    { kind: "header", label: "Investing activities" },
+    { kind: "item", label: "Purchases of equipment", values: [-12_000 * K] },
+    { kind: "subtotal", label: "Net cash used in investing activities", values: [-12_000 * K] },
+    { kind: "header", label: "Financing activities" },
+    { kind: "item", label: "Repayment of long-term debt", values: [-10_000 * K] },
+    { kind: "item", label: "Dividends paid", values: [-40_740 * K] },
+    { kind: "subtotal", label: "Net cash used in financing activities", values: [-50_740 * K] },
+    { kind: "subtotal", label: "Net increase in cash", values: [45_700 * K] },
+    { kind: "item", label: "Cash at 01/06/2026", values: [355_100 * K] },
+    { kind: "total", label: "Cash at 30/06/2026", values: [400_800 * K] },
+  ];
+  return (
+    <StatementPage title="Cash flow statement" meta="VITTORIA Logistics · month ended 30/06/2026 · VND">
+      <Statement columns={["Jun 2026"]} lines={lines} />
+    </StatementPage>
+  );
+}

package/examples/tpl_stock.tsx

@@ -18,7 +18,7 @@ import { SearchInput } from "@lotics/ui/search_input";
 import { formatMoney } from "@lotics/ui/format_money";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Stock overview — monitoring a population too large to browse
+// Template · Drill-down overview — monitoring a population too large to browse
 // (10,000+ units). The funnel: KPI strip (population health) → Breakdown
 // cards (composition by dimension; pressing a segment is the drill-down) →
 // dismissible facet chips + search → PAGINATED register (the data is the
@@ -283,12 +283,12 @@ export function TplStock() {
 
           {/* eyebrow columns */}
           <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 10 }}>
-            <Text size="xs" color="muted" transform="uppercase" style={{ width: 110 }}>Unit no</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>Type</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ width: 96 }}>Depot</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ width: 76 }}>Last move</Text>
-            <Text size="xs" color="muted" transform="uppercase" tabular align="right" style={{ width: 104 }}>Value</Text>
-            <Text size="xs" color="muted" transform="uppercase" style={{ width: 110 }}>Status</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ width: 110 }}>Unit no</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Type</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ width: 96 }}>Depot</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ width: 76 }}>Last move</Text>
+            <Text size="xs" color="muted" weight="medium" tabular align="right" style={{ width: 104 }}>Value</Text>
+            <Text size="xs" color="muted" weight="medium" style={{ width: 110 }}>Status</Text>
             <View style={{ width: 28 }} />
           </View>
           <Divider />

package/examples/tpl_task_board.tsx

@@ -25,10 +25,11 @@ import { Popover, PopoverTrigger, PopoverContent } from "@lotics/ui/popover";
 import { FilesEditor } from "@lotics/ui/files_editor";
 import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
 import { DataGrid, gridRowStyle, type DataGridColumn, type DataGridGroup } from "@lotics/ui/data_grid";
+import { CONTROL_RADIUS, HOVER_BORDER } from "@lotics/ui/control_surface";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Composer } from "@lotics/ui/composer";
 import { AgentRun, type AgentRunItem } from "@lotics/ui/agent_run";
-import { ChangeReview, ChangeReviewActions, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
+import { Change, ChangeReview, ChangeReviewActions, ChangeReviewHeader, ChangeSummary, type ChangeStatus } from "@lotics/ui/change_review";
 import { Dialog, DialogHeader, DialogHeaderTitle, DialogScrollArea, DialogFooter } from "@lotics/ui/dialog";
 import { CompletionState } from "@lotics/ui/completion_state";
 import { Confidence, type ConfidenceLevel } from "@lotics/ui/confidence";
@@ -225,7 +226,7 @@ export function TplTaskBoard() {
   const [phase, setPhase] = useState<Phase>("idle");
   const [revealed, setRevealed] = useState(0);
   const [proposals, setProposals] = useState<Proposal[]>([]);
-  const [decisions, setDecisions] = useState<Record<string, ChangeReviewItemStatus>>({});
+  const [decisions, setDecisions] = useState<Record<string, ChangeStatus>>({});
   const [addedCount, setAddedCount] = useState(0);
 
   const startDraft = useCallback(() => { setRevealed(0); setPhase("reading"); }, []);
@@ -233,7 +234,7 @@ export function TplTaskBoard() {
   const closeDraft = useCallback(() => { setDraftOpen(false); resetDraft(); }, [resetDraft]);
   const editProposal = useCallback((id: string, p: Partial<Proposal>) =>
     setProposals((ps) => ps.map((x) => (x.id === id ? { ...x, ...p } : x))), []);
-  const decide = useCallback((id: string, status: ChangeReviewItemStatus | null) =>
+  const decide = useCallback((id: string, status: ChangeStatus | null) =>
     setDecisions((dec) => { const n = { ...dec }; if (status) n[id] = status; else delete n[id]; return n; }), []);
   const acceptedCount = proposals.filter((p) => decisions[p.id] === "accepted").length;
   const addAccepted = useCallback(() => {
@@ -264,9 +265,9 @@ export function TplTaskBoard() {
   }
 
   const propertyCols: DataGridColumn<Task>[] = [
-    { key: "assignee", label: "Assignee", width: 160, sortable: true, cell: (t) => <InlineMemberSelect members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
-    { key: "due", label: "Due", width: 140, sortable: true, cell: (t) => <InlineDatePicker value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" /> },
-    { key: "status", label: "Status", width: 130, sortable: true, cell: (t) => <InlineSelect value={t.status} options={STATUS_OPTIONS} onSave={(s) => patch(t.id, { status: s })} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" /> },
+    { key: "assignee", label: "Assignee", width: 160, sortable: true, cell: (t) => <InlineMemberSelect background="transparent" members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
+    { key: "due", label: "Due", width: 140, sortable: true, cell: (t) => <InlineDatePicker background="transparent" value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" /> },
+    { key: "status", label: "Status", width: 130, sortable: true, cell: (t) => <InlineSelect background="transparent" value={t.status} options={STATUS_OPTIONS} onSave={(s) => patch(t.id, { status: s })} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" /> },
     { key: "tags", label: "Tags", width: 168, cell: (t) => <Select multi searchable allowCustom value={t.tags.map((tag) => tag.value)} onValueChange={(next) => patch(t.id, { tags: next.map(tagOf) })} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} style={{ borderColor: "transparent" }} placeholder="Add tags" accessibilityLabel="Tags" /> },
   ];
   const filesCol: DataGridColumn<Task> = {
@@ -294,7 +295,7 @@ export function TplTaskBoard() {
   const visibleProps = propertyCols.filter((c) => c.key !== groupBy);
   const addCols = [...visibleProps, filesCol, actionCol, menuCol];
   const columns: DataGridColumn<Task>[] = [
-    { key: "title", label: "Task", sortable: true, cell: (t) => <InlineTextInput value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={t.status === "done"} accessibilityLabel="Title" /> },
+    { key: "title", label: "Task", sortable: true, cell: (t) => <InlineTextInput background="transparent" value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={t.status === "done"} accessibilityLabel="Title" /> },
     ...addCols,
   ];
 
@@ -371,7 +372,10 @@ export function TplTaskBoard() {
       </View>
     </ScrollView>
 
-    {/* Draft from notes — Composer → AgentRun → ChangeReview → commit (adds tasks). */}
+    {/* Draft from notes — Composer → AgentRun → ChangeReview → commit (adds tasks).
+        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={draftOpen} onOpenChange={(o) => { if (!o) closeDraft(); }} maxWidth={620}>
       <DialogHeader><DialogHeaderTitle>Draft from notes</DialogHeaderTitle></DialogHeader>
       <DialogScrollArea>
@@ -383,20 +387,29 @@ export function TplTaskBoard() {
         ) : null}
         {phase === "reading" ? <AgentRun items={runItems} state={revealed >= DRAFT_STEPS.length ? "done" : "streaming"} /> : null}
         {phase === "review" ? (
-          <ChangeReview
-            title="Drafted tasks"
-            summary={`${proposals.length} from your notes — keep, edit, or drop each. A “Low” mark is worth a glance.`}
-            items={proposals}
-            getKey={(p) => p.id}
-            statusOf={(p) => decisions[p.id] ?? "pending"}
-            renderItem={(p) => <TaskProposal proposal={p} onEdit={editProposal} />}
-            renderSummary={(p, kept) => (
-              <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={kept ? undefined : { textDecorationLine: "line-through" }}>{p.title}</Text>
-            )}
-            onAcceptItem={(i) => decide(proposals[i].id, "accepted")}
-            onRejectItem={(i) => decide(proposals[i].id, "rejected")}
-            onUndoItem={(i) => decide(proposals[i].id, null)}
-          />
+          <View style={{ gap: 8 }}>
+            <ChangeReviewHeader title="Drafted tasks" />
+            <Text size="sm" color="muted">{`${proposals.length} from your notes — keep, edit, or drop each. A “Low” mark is worth a glance.`}</Text>
+            {proposals.map((p) => {
+              const status = decisions[p.id] ?? "pending";
+              const kept = status === "accepted";
+              return (
+                <Change
+                  key={p.id}
+                  id={p.id}
+                  status={status}
+                  onAccept={() => decide(p.id, "accepted")}
+                  onReject={() => decide(p.id, "rejected")}
+                  onUndo={() => decide(p.id, null)}
+                >
+                  <TaskProposal proposal={p} onEdit={editProposal} />
+                  <ChangeSummary>
+                    <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={kept ? undefined : { textDecorationLine: "line-through" }}>{p.title}</Text>
+                  </ChangeSummary>
+                </Change>
+              );
+            })}
+          </View>
         ) : null}
         {phase === "done" ? (
           <CompletionState title={`${addedCount} ${addedCount === 1 ? "task" : "tasks"} added`} summary="They're on the board now." />
@@ -404,7 +417,7 @@ export function TplTaskBoard() {
       </DialogScrollArea>
       {phase === "review" ? (
         <DialogFooter>
-          <ChangeReviewActions items={proposals} statusOf={(p) => decisions[p.id] ?? "pending"} onAcceptItem={(i) => decide(proposals[i].id, "accepted")} onApply={addAccepted} onDiscard={resetDraft} applyLabel={`Add ${acceptedCount} ${acceptedCount === 1 ? "task" : "tasks"}`} />
+          <ChangeReviewActions onApply={addAccepted} onDiscard={resetDraft} applyLabel={`Add ${acceptedCount} ${acceptedCount === 1 ? "task" : "tasks"}`} />
         </DialogFooter>
       ) : phase === "done" ? (
         <DialogFooter>
@@ -413,6 +426,7 @@ export function TplTaskBoard() {
         </DialogFooter>
       ) : null}
     </Dialog>
+    </ChangeReview>
     </>
   );
 }
@@ -422,12 +436,12 @@ function TaskProposal({ proposal, onEdit }: { proposal: Proposal; onEdit: (id: s
     <View style={{ gap: 10 }}>
       <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
         <View style={{ flex: 1 }}>
-          <InlineTextInput value={proposal.title} onSave={(v) => onEdit(proposal.id, { title: v })} accessibilityLabel="Task title" />
+          <InlineTextInput background="transparent" value={proposal.title} onSave={(v) => onEdit(proposal.id, { title: v })} accessibilityLabel="Task title" />
         </View>
         <View style={{ paddingTop: 10 }}><Confidence level={proposal.confidence} /></View>
       </View>
       <View style={{ width: 220 }}>
-        <InlineDatePicker value={proposal.due} optionalTime onSave={(v) => onEdit(proposal.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" />
+        <InlineDatePicker background="transparent" value={proposal.due} optionalTime onSave={(v) => onEdit(proposal.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" />
       </View>
       <View style={styles.source}><Text size="xs" color="muted">{proposal.source}</Text></View>
     </View>
@@ -514,9 +528,9 @@ function TaskAddRow({ preset, columns, onAdd }: { preset: Partial<Task>; columns
   // Files / action / ⋯ act on a task that already exists, so the add row leaves
   // those columns empty — the widths are still reserved so the columns stay aligned.
   const editor = (key: string) =>
-    key === "assignee" ? <InlineMemberSelect members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
-    : key === "due" ? <InlineDatePicker value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
-    : key === "status" ? <InlineSelect value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
+    key === "assignee" ? <InlineMemberSelect background="transparent" members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
+    : key === "due" ? <InlineDatePicker background="transparent" value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
+    : key === "status" ? <InlineSelect background="transparent" value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
     : key === "tags" ? <Select multi searchable allowCustom value={tags.map((tag) => tag.value)} onValueChange={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} style={{ borderColor: "transparent" }} placeholder="Add tags" accessibilityLabel="Tags" />
     : null;
 
@@ -544,14 +558,16 @@ const styles = StyleSheet.create({
   addField: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8, paddingRight: 4 },
   // Match the inline-editor cells' resting box (INLINE_CONTROL_HEIGHT = 40) so the
   // files field lines up with the others — and that height affords a larger thumbnail.
-  clip: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40, paddingHorizontal: 8, borderRadius: 8, cursor: "pointer" },
-  clipHover: { backgroundColor: colors.zinc[100] },
+  // Hover = the control-surface BORDER reveal, the same language as the
+  // inline-editor cells beside these — never a background wash of its own.
+  clip: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS, borderWidth: 1, borderColor: "transparent", cursor: "pointer" },
+  clipHover: { borderColor: HOVER_BORDER },
   clipPreview: { flexDirection: "row", alignItems: "center", gap: 6 },
   summary: { flexDirection: "row", alignItems: "center", gap: 4 },
   summaryDot: { width: 8, height: 8, borderRadius: 999 },
   result: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40 },
   // Fills the cell (height + width) so the link's hit area matches the inline cells.
-  action: { justifyContent: "center", minHeight: 40, paddingHorizontal: 8, borderRadius: 8, cursor: "pointer" },
-  actionHover: { backgroundColor: colors.white },
+  action: { justifyContent: "center", minHeight: 40, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS, borderWidth: 1, borderColor: "transparent", cursor: "pointer" },
+  actionHover: { borderColor: HOVER_BORDER },
   source: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
 });