@lotics/ui 7.19.2 → 8.0.0

package/examples/tpl_lookup.tsx

@@ -7,7 +7,6 @@ import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
 import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { Composer } from "@lotics/ui/composer";
 import { AgentRun, type AgentRunStep, type AgentRunItem } from "@lotics/ui/agent_run";
-import { SpecList, type SpecRow } from "@lotics/ui/spec_list";
 import { Confidence, type ConfidenceLevel } from "@lotics/ui/confidence";
 import { Badge } from "@lotics/ui/badge";
 import { Sources, type SourceRef } from "@lotics/ui/sources";
@@ -19,7 +18,7 @@ import { Sources, type SourceRef } from "@lotics/ui/sources";
 // single confident verdict: classification is ambiguous, so the alternatives are
 // first-class (the prep/pack push the goods to a different code with a different
 // duty). The answer is a panel of scannable components — the code, the exact duty
-// breakdown (SpecList), the policies, the sources. Refine the description ("what
+// breakdown (hand-composed spec rows), the policies, the sources. Refine the description ("what
 // if it's pre-cooked?") and the ranking updates. Same shape for any
 // look-up-and-explain: tariff/HS, fee lookup, policy Q&A, a spec/compliance desk.
 // ─────────────────────────────────────────────────────────────────────────────
@@ -46,7 +45,6 @@ interface Candidate {
 // One query, several plausible HS codes — the agent RANKS them; the declarant
 // picks. The prep and the pack push the goods to a different code with a
 // different duty, which is exactly why a single confident verdict is wrong.
-const QUERY = "Black tiger shrimp, headless shell-on, IQF frozen, 1 kg retail packs";
 
 const CANDIDATES: Candidate[] = [
   {
@@ -204,9 +202,11 @@ export function TplLookup() {
           {/* current run */}
           <AgentRun items={items} state={streaming ? "streaming" : "done"} />
 
+          {/* Matches surface only once the run settles — the agent's output,
+              never a pre-filled list; they sit at the bottom, under the run. */}
+          {phase === "ready" ? (
           <View style={{ gap: 8 }}>
             <Text size="xs" color="muted" weight="medium">Nearest matches</Text>
-            <Text size="xs" color="muted" numberOfLines={2}>{QUERY}</Text>
             {CANDIDATES.map((c) => (
               <PressableHighlight
                 key={c.id}
@@ -231,6 +231,7 @@ export function TplLookup() {
               </PressableHighlight>
             ))}
           </View>
+          ) : null}
         </ScrollView>
 
         <View style={{ padding: 12, borderTopWidth: 1, borderTopColor: colors.zinc[200] }}>
@@ -247,9 +248,9 @@ export function TplLookup() {
       {/* ── RIGHT · the pinned structured answer ───────────────────── */}
       <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 28, paddingBottom: 48 }}>
         <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
-          <View style={{ borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 16, backgroundColor: colors.white, overflow: "hidden" }}>
-            {/* verdict header */}
-            <View style={{ padding: 22, gap: 10, backgroundColor: colors.white, borderBottomWidth: 1, borderBottomColor: colors.zinc[200] }}>
+          <View style={{ gap: 4 }}>
+            {/* verdict header — open, no card box: the panel IS the answer */}
+            <View style={{ paddingVertical: 6, gap: 10 }}>
               <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                 <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Suggested HS code</Text>
                 <Confidence level={active.confidence} />
@@ -258,21 +259,22 @@ export function TplLookup() {
               <Text size="sm" color="muted">{active.heading}</Text>
             </View>
 
-            <View style={{ padding: 22, gap: 18 }}>
+            <Divider />
+            <View style={{ paddingVertical: 16, gap: 18 }}>
               <View style={{ borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 }}>
                 <Text size="sm" color="muted">{active.basis}</Text>
               </View>
 
               <View style={{ gap: 8 }}>
                 <Text size="sm" weight="semibold">Duty & tax</Text>
-                <SpecList rows={active.duty} total={active.dutyTotal} />
+                <SpecRows rows={active.duty} total={active.dutyTotal} />
               </View>
 
               <Divider />
 
               <View style={{ gap: 8 }}>
                 <Text size="sm" weight="semibold">Classification basis</Text>
-                <SpecList rows={active.specs} dense />
+                <SpecRows rows={active.specs} dense />
               </View>
 
               {active.policies.length > 0 ? (
@@ -300,3 +302,28 @@ export function TplLookup() {
     </View>
   );
 }
+
+// The structured label → value breakdown behind the answer — the duty table,
+// the classification basis. Hand-composed two-column rows: hierarchy from
+// weight and tabular figures; the total pins under a divider.
+interface SpecRow { label: string; value: string }
+
+function SpecRows({ rows, total, dense }: { rows: SpecRow[]; total?: SpecRow; dense?: boolean }) {
+  const line = (row: SpecRow, isTotal?: boolean) => (
+    <View key={row.label} style={{ flexDirection: "row", alignItems: "baseline", justifyContent: "space-between", gap: 16, minHeight: dense ? 26 : 32 }}>
+      <Text size={dense ? "xs" : "sm"} color={isTotal ? "default" : "muted"} weight={isTotal ? "semibold" : "regular"} numberOfLines={1} style={{ flexShrink: 1 }}>{row.label}</Text>
+      <Text size={dense && !isTotal ? "sm" : "md"} weight={isTotal ? "semibold" : "medium"} tabular>{row.value}</Text>
+    </View>
+  );
+  return (
+    <View>
+      {rows.map((r) => line(r))}
+      {total ? (
+        <>
+          <Divider paddingVertical={dense ? 5 : 7} />
+          {line(total, true)}
+        </>
+      ) : null}
+    </View>
+  );
+}

package/examples/tpl_task_board.tsx

@@ -28,7 +28,7 @@ import { DataGrid, gridRowStyle, type DataGridColumn, type DataGridGroup } from
 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 +225,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 +233,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(() => {
@@ -371,7 +371,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 +386,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 +416,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 +425,7 @@ export function TplTaskBoard() {
         </DialogFooter>
       ) : null}
     </Dialog>
+    </ChangeReview>
     </>
   );
 }

package/examples/tpl_tasks.tsx

@@ -18,7 +18,7 @@ import { FilesEditor } from "@lotics/ui/files_editor";
 import type { DisplayFile } from "@lotics/ui/file_thumbnail";
 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";
@@ -160,7 +160,7 @@ export function TplTasks() {
   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 patch = (id: string, next: Partial<Task>) =>
@@ -182,7 +182,7 @@ export function TplTasks() {
   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(() => {
@@ -345,7 +345,10 @@ export function TplTasks() {
       </View>
     </ScrollView>
 
-    {/* Draft from notes — Composer → AgentRun → ChangeReview → commit. */}
+    {/* Draft from notes — Composer → AgentRun → ChangeReview → commit. 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>
@@ -357,20 +360,29 @@ export function TplTasks() {
         ) : 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 in your list, grouped by due date." />
@@ -378,7 +390,7 @@ export function TplTasks() {
       </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>
@@ -387,6 +399,7 @@ export function TplTasks() {
         </DialogFooter>
       ) : null}
     </Dialog>
+    </ChangeReview>
     </>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.19.2",
+  "version": "8.0.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -81,18 +81,11 @@
     },
     "./markdown.css": "./src/markdown.css",
     "./confidence": "./src/confidence.tsx",
-    "./review_card": "./src/review_card.tsx",
     "./change_review": "./src/change_review.tsx",
+    "./finding": "./src/finding.tsx",
     "./clarify": "./src/clarify.tsx",
     "./choice_list": "./src/choice_list.tsx",
     "./sources": "./src/sources.tsx",
-    "./record_fields": "./src/record_fields.tsx",
-    "./spec_list": "./src/spec_list.tsx",
-    "./match_sides": "./src/match_sides.tsx",
-    "./finding": "./src/finding.tsx",
-    "./discrepancy": "./src/discrepancy.tsx",
-    "./triage_row": "./src/triage_row.tsx",
-    "./scored_option": "./src/scored_option.tsx",
     "./icon": "./src/icon.tsx",
     "./dynamic_icon": {
       "react-native": "./src/dynamic_icon.tsx",

package/src/agent_run.tsx

@@ -147,7 +147,7 @@ const INK = colors.zinc[700];
  * fires (not a growing stack of dots); once prose resumes the group settles into
  * one row — "{final action} · {n} steps" — that EXPANDS on press to the steps in
  * between. Text segments render as prose, the last one carrying a live caret. The
- * run always ends on the agent's text. Pair with `Composer` + `ReviewCard`.
+ * run always ends on the agent's text. Pair with `Composer` + `ChangeReview`.
  */
 export function AgentRun(props: AgentRunProps) {
   const { items, labelForTool, stepsLabel = (n) => `${n} steps`, accessibilityLabel } = props;