@lotics/ui 7.19.3 → 9.0.0

package/examples/tpl_tasks.tsx

@@ -12,13 +12,13 @@ import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
 import { InlineSelect } from "@lotics/ui/inline_select";
 import { Select } from "@lotics/ui/select";
-import { TextInputField } from "@lotics/ui/text_input_field";
+import { CaptureRow } from "@lotics/ui/capture_row";
 import { Button } from "@lotics/ui/button";
 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";
@@ -27,7 +27,7 @@ import { formatDate, toISODate } from "@lotics/ui/format_date";
 type TagOption = { value: string; label: string };
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Tasks (quick list) — the Apple-Reminders shape for PERSONAL lists.
+// Template · Task list — the Apple-Reminders shape for PERSONAL lists.
 // There's no Task component: a row is composed directly from primitives
 // (CheckCircle + an inline-editable title + a quiet meta line), which is the most
 // flexible way to build a task surface. Quiet, scannable rows you tick to finish
@@ -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(() => {
@@ -259,15 +259,7 @@ export function TplTasks() {
 
         {/* Capture — type to add; the submit button lives inside the field on the right. */}
         <View style={styles.capture}>
-          <View style={[styles.row, { gap: 12 }]}>
-            <View style={styles.emptyRing} />
-            <View style={styles.captureField}>
-              <View style={{ flex: 1 }}>
-                <TextInputField value={draft} onChangeText={setDraft} onSubmitEditing={add} placeholder="Add a task…" style={styles.titleInput} accessibilityLabel="Add a task" />
-              </View>
-              {draft.trim() ? <Button title="Save" color="primary" onPress={add} /> : null}
-            </View>
-          </View>
+          <CaptureRow value={draft} onChangeText={setDraft} onSubmit={add} placeholder="Add a task…" accessibilityLabel="Add a task" />
         </View>
 
         <View>
@@ -294,7 +286,7 @@ export function TplTasks() {
                     <View style={styles.row}>
                       <CheckCircle checked={done} onChange={(on) => patch(t.id, { status: on ? "done" : "todo" })} accessibilityLabel={t.title} />
                       <View style={{ flex: 1 }}>
-                        <InlineTextInput value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={done} accessibilityLabel="Title" />
+                        <InlineTextInput background="transparent" value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={done} accessibilityLabel="Title" />
                       </View>
                       <Pressable
                         onPress={() => toggleExpand(t.id, !open)}
@@ -320,16 +312,16 @@ export function TplTasks() {
                     {open ? (
                       <View style={styles.detail}>
                         <Field label="Due">
-                          <InlineDatePicker value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="Set a due date" accessibilityLabel="Due date" />
+                          <InlineDatePicker background="transparent" value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="Set a due date" accessibilityLabel="Due date" />
                         </Field>
                         <Field label="Status">
-                          <InlineSelect value={t.status} options={STATUS_OPTIONS} onSave={(st) => patch(t.id, { status: st })} renderSelected={(o) => <OptionBadge value={STATUS[o.value as Status]} variant="dot" />} renderOptionContent={(o) => <OptionBadge value={STATUS[o.value as Status]} variant="dot" />} accessibilityLabel="Status" />
+                          <InlineSelect background="transparent" value={t.status} options={STATUS_OPTIONS} onSave={(st) => patch(t.id, { status: st })} renderSelected={(o) => <OptionBadge value={STATUS[o.value as Status]} variant="dot" />} renderOptionContent={(o) => <OptionBadge value={STATUS[o.value as Status]} variant="dot" />} accessibilityLabel="Status" />
                         </Field>
                         <Field label="Tags">
                           <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" />
                         </Field>
                         <Field label="Note">
-                          <InlineTextInput value={t.note} onSave={(v) => patch(t.id, { note: v })} placeholder="Add a note…" accessibilityLabel="Note" />
+                          <InlineTextInput background="transparent" value={t.note} onSave={(v) => patch(t.id, { note: v })} placeholder="Add a note…" accessibilityLabel="Note" />
                         </Field>
                         <Field label="Files" top>
                           <FilesEditor files={t.files} itemSize={72} onAdd={(picked) => addFiles(t.id, picked)} onRemove={(id) => removeFile(t.id, id)} />
@@ -345,7 +337,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 +352,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 +382,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 +391,7 @@ export function TplTasks() {
         </DialogFooter>
       ) : null}
     </Dialog>
+    </ChangeReview>
     </>
   );
 }
@@ -396,12 +401,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: 200 }}>
-        <InlineDatePicker value={proposal.due} onSave={(v) => onEdit(proposal.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" />
+        <InlineDatePicker background="transparent" value={proposal.due} 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>
@@ -429,25 +434,20 @@ const styles = StyleSheet.create({
   rowHover: { backgroundColor: colors.white },
   // The expand affordance — its own button (meta + chevron), sibling to the ring
   // and title so no interactive control nests inside another.
-  expand: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 36, paddingHorizontal: 8, borderRadius: 8 },
+  // FIXED width so every title cell ends at the same x — the meta content
+  // (clip count · tag dots · date) varies per row and right-aligns inside;
+  // without it the title editors read ragged/misaligned across rows.
+  expand: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 10, minHeight: 36, paddingHorizontal: 8, borderRadius: 8, width: 148 },
   capture: {
     borderBottomWidth: 1,
     borderBottomColor: colors.zinc[100],
     paddingBottom: 6,
   },
-  // Borderless title input that matches an InlineTextInput's resting inset (8),
-  // so the capture title lines up with the task titles below it.
-  titleInput: {
-    borderWidth: 0,
-    backgroundColor: "transparent",
-    paddingVertical: 0,
-  },
-  captureField: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8, paddingRight: 4 },
+
   sectionHead: { flexDirection: "row", alignItems: "center", gap: 8, paddingBottom: 6 },
   sectionLabel: { letterSpacing: 0.3, textTransform: "uppercase" },
-  meta: { flexDirection: "row", alignItems: "center", gap: 10 },
+  meta: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 10, flex: 1 },
   clip: { flexDirection: "row", alignItems: "center", gap: 2 },
-  emptyRing: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed" },
   dots: { flexDirection: "row", alignItems: "center", gap: 4 },
   dot: { width: 8, height: 8, borderRadius: 999 },
   // ring (20) + gap (12) + the title's 8 inset → labels line up with the title text

package/examples/tpl_tower.tsx

@@ -15,7 +15,7 @@ import { StatusGrid, StatusLegend } from "@lotics/ui/status_grid";
 import { Timeline } from "@lotics/ui/timeline";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Control tower — continuous monitoring of hundreds of live
+// Template · Status grid — continuous monitoring of hundreds of live
 // units (machines, gates, chargers, sensors). Three bands answer the three
 // ops questions in order: KPI strip + StatusGrid = "is everything OK right
 // now?" (scan for red; the legend drills a state), exceptions rail =
@@ -200,7 +200,7 @@ export function TplTower() {
                 return (
                   <View key={site.key} style={{ gap: 8 }}>
                     <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
-                      <Text size="xs" color="muted" transform="uppercase">{site.label}</Text>
+                      <Text size="xs" color="muted" weight="medium">{site.label}</Text>
                       <Text size="xs" color="muted" tabular>{siteUnits.length}</Text>
                     </View>
                     <StatusGrid

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "7.19.3",
+  "version": "9.0.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -30,6 +30,9 @@
     "./rotatable_image": "./src/rotatable_image.tsx",
     "./use_image_rotation": "./src/use_image_rotation.ts",
     "./use_selection": "./src/use_selection.ts",
+    "./use_section_nav": "./src/use_section_nav.ts",
+    "./ledger": "./src/ledger.tsx",
+    "./inline_tag_select": "./src/inline_tag_select.tsx",
     "./use_selection_mode": "./src/use_selection_mode.ts",
     "./file_thumbnail_grid": "./src/file_thumbnail_grid.tsx",
     "./uploading_thumbnail": "./src/uploading_thumbnail.tsx",
@@ -81,18 +84,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",
@@ -161,6 +157,10 @@
     "./table": "./src/table.tsx",
     "./data_grid": "./src/data_grid.tsx",
     "./detail_row": "./src/detail_row.tsx",
+    "./record_summary": "./src/record_summary.tsx",
+    "./capture_row": "./src/capture_row.tsx",
+    "./checklist": "./src/checklist.tsx",
+    "./suggestion_chip": "./src/suggestion_chip.tsx",
     "./danger_zone": "./src/danger_zone.tsx",
     "./scan_field": "./src/scan_field.tsx",
     "./completion_state": "./src/completion_state.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;

package/src/capture_row.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, View } from "react-native";
+import { Button } from "./button";
+import { colors } from "./colors";
+import { useLoticsLocale } from "./locale";
+import { TextInputField } from "./text_input_field";
+
+export interface CaptureRowProps {
+  /** The draft text — controlled by the host list. */
+  value: string;
+  onChangeText: (next: string) => void;
+  /** Commit the draft (Enter, or the Save button that appears on type). The
+   *  host trims/validates and clears `value`. */
+  onSubmit: () => void;
+  /** The invitation ("Add a task…"). */
+  placeholder?: string;
+  /** Save button title. Defaults to the locale's inline Save. */
+  saveLabel?: string;
+  accessibilityLabel: string;
+}
+
+/**
+ * The add-an-item row that closes an editable list: a dashed empty ring where
+ * the item's leading control will be, a borderless input on the same inset as
+ * the item titles above it, and a primary Save that appears once there's text.
+ * Enter commits too. One shape wherever a list grows in place — task
+ * checklists, simple item lists — so the affordance reads the same everywhere.
+ */
+export function CaptureRow(props: CaptureRowProps) {
+  const { value, onChangeText, onSubmit, placeholder, saveLabel, accessibilityLabel } = props;
+  const labels = useLoticsLocale().inline;
+  return (
+    <View style={styles.row}>
+      <View style={styles.emptyRing} />
+      <View style={styles.field}>
+        <View style={styles.grow}>
+          <TextInputField
+            value={value}
+            onChangeText={onChangeText}
+            onSubmitEditing={onSubmit}
+            placeholder={placeholder}
+            style={styles.input}
+            accessibilityLabel={accessibilityLabel}
+          />
+        </View>
+        {value.trim() !== "" ? <Button title={saveLabel ?? labels.save} color="primary" onPress={onSubmit} /> : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 32 },
+  emptyRing: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed" },
+  field: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8 },
+  grow: { flex: 1 },
+  // Borderless, matching an inline title's resting inset so the invitation
+  // lines up with the item titles above.
+  input: { borderWidth: 0, backgroundColor: "transparent", paddingVertical: 0 },
+});