@lotics/ui 8.0.0 → 10.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,6 +25,7 @@ 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";
@@ -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,
   ];
 
@@ -435,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>
@@ -527,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;
 
@@ -557,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 },
 });

package/examples/tpl_tasks.tsx

@@ -12,7 +12,7 @@ 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";
@@ -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
@@ -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)} />
@@ -409,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>
@@ -442,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": "8.0.0",
+  "version": "10.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",
@@ -66,7 +69,6 @@
     "./theme": "./src/theme.tsx",
     "./progress_bar": "./src/progress_bar.tsx",
     "./form_date_picker": "./src/form_date_picker.tsx",
-    "./form_time_picker": "./src/form_time_picker.tsx",
     "./form_picker": "./src/form_picker.tsx",
     "./picker": "./src/picker.tsx",
     "./select": "./src/select.tsx",
@@ -154,6 +156,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",
@@ -163,7 +169,6 @@
     "./container": "./src/container.tsx",
     "./count": "./src/count.tsx",
     "./dots_indicator": "./src/dots_indicator.tsx",
-    "./highlighted_text": "./src/highlighted_text.tsx",
     "./list": "./src/list.tsx",
     "./list_item": "./src/list_item.tsx",
     "./section": "./src/section.tsx",
@@ -178,11 +183,9 @@
     "./tabs": "./src/tabs.tsx",
     "./segmented_control": "./src/segmented_control.tsx",
     "./auto_sizer": "./src/auto_sizer.tsx",
-    "./animation_horizontal_slide": "./src/animation_horizontal_slide.tsx",
     "./group_avatar": "./src/group_avatar.tsx",
     "./page_content": "./src/page_content.tsx",
     "./page_header": "./src/page_header.tsx",
-    "./pager_view": "./src/pager_view.tsx",
     "./date_picker": "./src/date_picker.tsx",
     "./date_filter": "./src/date_filter.tsx",
     "./date_range_filter_field": "./src/date_range_filter_field.tsx",
@@ -193,7 +196,6 @@
     "./modal": "./src/modal.tsx",
     "./screen_router": "./src/screen_router.tsx",
     "./route_matching": "./src/route_matching.ts",
-    "./menu_title": "./src/menu_title.tsx",
     "./avatar": {
       "react-native": "./src/avatar.tsx",
       "default": "./src/avatar.web.tsx"
@@ -209,7 +211,6 @@
     "./json_panel": "./src/json_panel.tsx",
     "./timeline": "./src/timeline.tsx",
     "./loading": "./src/loading.tsx",
-    "./popover_header": "./src/popover_header.tsx",
     "./switch_button": "./src/switch_button.tsx",
     "./alert": "./src/alert.tsx",
     "./landmark": "./src/landmark.tsx",