@lotics/ui 22.2.0 → 23.0.0

package/examples/tpl_report.tsx

@@ -21,7 +21,7 @@ import { formatMoney } from "@lotics/ui/format_money";
 import { formatDate, parseDate } from "@lotics/ui/format_date";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Lookup report — answer a question by SCOPING a dataset, not by
+// Template, Lookup report — answer a question by SCOPING a dataset, not by
 // browsing it. The scope bar leads: a period (header band) + ONE search key
 // chosen from several mutually-exclusive dimensions (SegmentedControl → the
 // matching picker; switching the key resets the value). That scope drives
@@ -363,7 +363,7 @@ export function TplReport() {
 
           <CardFooter>
             <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-              {`${rows.length.toLocaleString("en-US")} payments · ${formatMoney(total, { compact: true })}${chips.length > 0 ? " (filtered)" : ""}`}
+              {`${rows.length.toLocaleString("en-US")} payments totalling ${formatMoney(total, { compact: true })}${chips.length > 0 ? " (filtered)" : ""}`}
             </Text>
             <Pagination
               page={page}

package/examples/tpl_rollup.tsx

@@ -12,7 +12,7 @@ import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { Sparkline } from "@lotics/ui/sparkline";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Hierarchy 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
@@ -163,7 +163,7 @@ export function TplRollup() {
         <Card style={{ padding: 0 }}>
           <CardHeader>
             <CardHeaderTitle info="The same three columns at every level — totals are volume-weighted, so a flagged region always traces to flagged lanes inside it.">
-              By region · site · lane
+              By region, site, lane
             </CardHeaderTitle>
           </CardHeader>
 
@@ -239,7 +239,7 @@ export function TplRollup() {
 
           <CardFooter>
             <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-              {`Network · ${NETWORK.volume.toLocaleString("en-US")} units · ${NETWORK.ontime}% on-time · ${NETWORK.margin}% margin`}
+              {`Network: ${NETWORK.volume.toLocaleString("en-US")} units, ${NETWORK.ontime}% on-time, ${NETWORK.margin}% margin`}
             </Text>
           </CardFooter>
         </Card>
@@ -263,14 +263,14 @@ export function TplRollup() {
               <Divider />
               <KVRow label="On-time">
                 <Text size="sm" tabular color={openLane.ontime < ONTIME_TARGET ? "danger" : "default"}>
-                  {`${openLane.ontime}% · target ${ONTIME_TARGET}%`}
+                  {`${openLane.ontime}% (target ${ONTIME_TARGET}%)`}
                 </Text>
               </KVRow>
               <Divider />
               <KVRow label="Margin"><Text size="sm" tabular>{`${openLane.margin}%`}</Text></KVRow>
             </View>
             <View style={{ gap: 8 }}>
-              <Text size="xs" color="muted" weight="medium">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

@@ -20,7 +20,7 @@ import { ProgressBar } from "@lotics/ui/progress_bar";
 import { Screen } from "@lotics/ui/screen_router";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Shift staffing — two-sided allocation: members SIGN UP, the
+// Template, Shift staffing — two-sided allocation: members SIGN UP, the
 // manager DECIDES and FILLS. Three bands reuse the execution grammar:
 // the coverage board is the overview (shifts × days, each cell its
 // filled/required state — press to open the slot), the signup rail is the
@@ -109,7 +109,7 @@ const INITIAL_SIGNUPS: Signup[] = [
 
 const dayOf = (k: DayKey) => DAYS.find((d) => d.key === k)!;
 const shiftOf = (k: ShiftKey) => SHIFTS.find((s) => s.key === k)!;
-const slotLabel = (d: DayKey, s: ShiftKey) => `${dayOf(d).label} ${dayOf(d).date} · ${shiftOf(s).label} ${shiftOf(s).hours}`;
+const slotLabel = (d: DayKey, s: ShiftKey) => `${dayOf(d).label} ${dayOf(d).date}, ${shiftOf(s).label} ${shiftOf(s).hours}`;
 
 function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
@@ -185,7 +185,7 @@ export function TplShifts() {
       <View style={{ width: "100%", maxWidth: 1100, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ gap: 2 }}>
-          <Text size="xxl" weight="semibold">Shift staffing · week 15–21/06</Text>
+          <Text size="xxl" weight="semibold">Shift staffing (week 15–21/06)</Text>
           <Text size="sm" color="muted">Members sign up, you allocate — fill every slot without burning anyone out</Text>
         </View>
 
@@ -254,7 +254,7 @@ export function TplShifts() {
           </View>
           <CardFooter>
             <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-              {`${totalFilled} of ${totalRequired} positions filled · accepting a signup or adding a member updates the board live`}
+              {`${totalFilled} of ${totalRequired} positions filled; accepting a signup or adding a member updates the board live`}
             </Text>
           </CardFooter>
         </Card>
@@ -312,7 +312,7 @@ export function TplShifts() {
           )}
           <CardFooter>
             <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-              {`${signups.length} pending · first come, first served unless coverage says otherwise`}
+              {`${signups.length} pending; first come, first served unless coverage says otherwise`}
             </Text>
           </CardFooter>
         </Card>

package/examples/tpl_statements.tsx

@@ -6,7 +6,7 @@ import { Button } from "@lotics/ui/button";
 import { Divider } from "@lotics/ui/divider";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Financial statements — the income statement, the balance sheet,
+// 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
@@ -35,8 +35,8 @@ interface Line {
 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
+ *  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") =>
@@ -110,7 +110,7 @@ function Statement({ columns, lines }: { columns: string[]; lines: Line[] }) {
   );
 }
 
-/** The statement page: title + the one meta line (entity · period · basis ·
+/** 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 }) {
@@ -158,7 +158,7 @@ export function TplIncomeStatement() {
     { 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">
+    <StatementPage title="Income statement" meta="VITTORIA Logistics, month ended 30/06/2026, VND">
       <Statement columns={["Jun 2026", "May 2026"]} lines={lines} />
     </StatementPage>
   );
@@ -187,7 +187,7 @@ export function TplBalanceSheet() {
     { 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">
+    <StatementPage title="Balance sheet" meta="VITTORIA Logistics, as at 30/06/2026, VND">
       <Statement columns={["30/06/2026", "31/05/2026"]} lines={lines} />
     </StatementPage>
   );
@@ -214,7 +214,7 @@ export function TplCashflow() {
     { 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">
+    <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 · Drill-down 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
@@ -334,7 +334,7 @@ export function TplStock() {
 
           <CardFooter>
             <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-              {`${filtered.length.toLocaleString("en-US")} units in this slice · ${formatMoney(filtered.reduce((s, u) => s + u.value, 0), { compact: true })}`}
+              {`${filtered.length.toLocaleString("en-US")} units in this slice, worth ${formatMoney(filtered.reduce((s, u) => s + u.value, 0), { compact: true })}`}
             </Text>
             <Pagination
               page={page}

package/examples/tpl_task_board.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { Pressable, ScrollView, StyleSheet, View, type ViewStyle } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { TextLink } from "@lotics/ui/text_link";
 import { colors, solid, asColorName } from "@lotics/ui/colors";
@@ -24,7 +24,8 @@ import { Popover, PopoverTrigger, PopoverContent } from "@lotics/ui/popover";
 import { FilesEditor, FilesEditorBar, FilesEditorBarSpacer, FilesEditorRemove, FilesEditorSelect, FilesEditorUpload } 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 } from "@lotics/ui/control_surface";
+import { CONTROL_RADIUS, HOVER_BORDER } from "@lotics/ui/control_surface";
+import { INLINE_CONTROL_HEIGHT } from "@lotics/ui/inline_edit";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Composer } from "@lotics/ui/composer";
 import { AgentRun } from "@lotics/ui/agent_run";
@@ -40,7 +41,7 @@ type Part = UIMessagePart<UIDataTypes, UITools>;
 type TagOption = { value: string; label: string };
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Task board — the manager's view, built on the `DataGrid` primitive
+// Template, Task board — the manager's view, built on the `DataGrid` primitive
 // (the inline-managed grouped table). The board OWNS its data, state, toolbar,
 // columns and per-group add; `DataGrid` owns the sortable header, the collapsible
 // grouped sections and the aligned rows.
@@ -170,13 +171,13 @@ function sortValue(t: Task, key: string): string | number {
   }
 }
 
-// ── AI · draft tasks from notes — agent proposes, the manager keeps/edits/drops ──
+// ── AI, draft tasks from notes — agent proposes, the manager keeps/edits/drops ──
 type Phase = "idle" | "reading" | "review" | "done";
 interface Proposal { id: string; title: string; due: string | null; confidence: ConfidenceLevel; source: string }
 const DRAFT_STEPS: { label: string; detail: string }[] = [
   { label: "Split the notes into candidate tasks", detail: "6 lines" },
   { label: "Drop greetings and lines that aren't actions", detail: "kept 4" },
-  { label: "Infer a due date from each phrase", detail: "2 dated · 2 left open" },
+  { label: "Infer a due date from each phrase", detail: "2 dated, 2 left open" },
 ];
 const DRAFTED: Proposal[] = [
   { id: "p1", title: "Send VITTORIA the revised quote", due: day(1), confidence: "high", source: "“…told VITTORIA they'd have the updated quote by tomorrow.”" },
@@ -269,10 +270,10 @@ export function TplTaskBoard() {
   }
 
   const propertyCols: DataGridColumn<Task>[] = [
-    { key: "assignee", label: "Assignee", width: 160, sortable: true, cell: (t) => <InlineMemberSelect variant="cell" members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} onClear={() => patch(t.id, { ownerId: null })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
-    { key: "due", label: "Due", width: 140, sortable: true, cell: (t) => <InlineDatePicker variant="cell" value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} onClear={() => patch(t.id, { due: null })} placeholder="No date" accessibilityLabel="Due date" /> },
-    { key: "status", label: "Status", width: 130, sortable: true, cell: (t) => <InlineSelect variant="cell" 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) => <InlineSelect multi searchable allowCustom variant="cell" value={t.tags.map((tag) => tag.value)} onSave={(next) => patch(t.id, { tags: next.map(tagOf) })} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" /> },
+    { key: "assignee", label: "Assignee", width: 160, sortable: true, cell: (t) => <InlineMemberSelect variant="bare" members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} onClear={() => patch(t.id, { ownerId: null })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
+    { key: "due", label: "Due", width: 140, sortable: true, cell: (t) => <InlineDatePicker variant="bare" value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} onClear={() => patch(t.id, { due: null })} placeholder="No date" accessibilityLabel="Due date" /> },
+    { key: "status", label: "Status", width: 130, sortable: true, cell: (t) => <InlineSelect variant="bare" 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) => <InlineSelect multi searchable allowCustom variant="bare" value={t.tags.map((tag) => tag.value)} onSave={(next) => patch(t.id, { tags: next.map(tagOf) })} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" /> },
   ];
   const filesCol: DataGridColumn<Task> = {
     key: "files", label: "Files", width: 100, sortable: false,
@@ -299,7 +300,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 variant="cell" 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 variant="bare" value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={t.status === "done"} accessibilityLabel="Title" /> },
     ...addCols,
   ];
 
@@ -446,11 +447,11 @@ 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 variant="cell" value={proposal.title} onSave={(v) => onEdit(proposal.id, { title: v })} accessibilityLabel="Task title" />
+          <InlineTextInput variant="bare" value={proposal.title} onSave={(v) => onEdit(proposal.id, { title: v })} accessibilityLabel="Task title" />
         </View>
       </View>
       <View style={{ width: 220 }}>
-        <InlineDatePicker variant="cell" value={proposal.due} optionalTime onSave={(v) => onEdit(proposal.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" />
+        <InlineDatePicker variant="bare" 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>
@@ -515,13 +516,19 @@ function RowActionCell({ task, result, onAttach, onApprove }: { task: Task; resu
       </View>
     );
   }
-  // The action is its OWN pressable container (cell-sized hit area); the label is a
-  // plain `TextLink` (underlined text, no onPress of its own — the wrapper handles it).
+  // NO CELL TREATMENT. Every other column here is a VALUE and wears the `bare`
+  // field surface; an action is not a value, so it gets no frame, no hover fill
+  // and no cell-sized hit area — otherwise the row shows two things that look
+  // editable and only one is.
+  //
+  // The LINK owns the press, which is also what puts the pointer cursor on the
+  // WORDS rather than across the whole column: a cell-wide pressable makes the
+  // cursor change over empty space, promising a target that isn't there.
   const onPress = a.kind === "attach" ? () => onAttach(task.id) : a.kind === "approve" ? () => onApprove(task.id) : () => {};
   return (
-    <Pressable onPress={onPress} accessibilityRole="button" accessibilityLabel={a.label} style={({ hovered }: { hovered?: boolean }) => [styles.action, hovered ? styles.actionHover : null]}>
-      <TextLink size="sm" numberOfLines={1}>{a.label}</TextLink>
-    </Pressable>
+    <View style={styles.action}>
+      <TextLink size="sm" numberOfLines={1} onPress={onPress}>{a.label}</TextLink>
+    </View>
   );
 }
 
@@ -546,10 +553,10 @@ 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 variant="cell" members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
-    : key === "due" ? <InlineDatePicker variant="cell" value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
-    : key === "status" ? <InlineSelect variant="cell" value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
-    : key === "tags" ? <InlineSelect multi searchable allowCustom variant="cell" value={tags.map((tag) => tag.value)} onSave={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" />
+    key === "assignee" ? <InlineMemberSelect variant="bare" members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
+    : key === "due" ? <InlineDatePicker variant="bare" value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
+    : key === "status" ? <InlineSelect variant="bare" value={status} options={STATUS_OPTIONS} onSave={setStatus} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" />
+    : key === "tags" ? <InlineSelect multi searchable allowCustom variant="bare" value={tags.map((tag) => tag.value)} onSave={(next) => setTags(next.map(tagOf))} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} placeholder="Add tags" accessibilityLabel="Tags" />
     : null;
 
   return (
@@ -576,15 +583,24 @@ const styles = StyleSheet.create({
   addField: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8, paddingRight: 4 },
   // Match the CELL height (40) so the files field lines up with the others — and that
   // height affords a larger thumbnail. Hover = the background-tint WASH (zinc-100), the
-  // standard CELL language (same as the variant="cell" editors beside these).
-  clip: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS, cursor: "pointer" },
-  clipHover: { backgroundColor: colors.zinc[100] },
+  // standard CELL language (same as the variant="bare" editors beside these).
+  // The files cell is a VALUE like every other cell in the row, so it wears the
+  // `bare` editors' surface exactly: nothing at rest, the kit's border on hover,
+  // and the ARROW cursor — a pointer would read as a button and single this cell
+  // out from the editors either side of it.
+  clip: {
+    flexDirection: "row", alignItems: "center", gap: 6, minHeight: INLINE_CONTROL_HEIGHT,
+    paddingHorizontal: 8, borderRadius: CONTROL_RADIUS,
+    borderWidth: 1, borderColor: "transparent",
+    ...({ cursor: "auto", transitionProperty: "border-color", transitionDuration: "0.12s" } as ViewStyle),
+  },
+  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 cells; wash hover.
-  action: { justifyContent: "center", minHeight: 40, paddingHorizontal: 8, borderRadius: CONTROL_RADIUS, cursor: "pointer" },
-  actionHover: { backgroundColor: colors.zinc[100] },
+  // Alignment only — the action column paints nothing.
+  action: { justifyContent: "center", minHeight: INLINE_CONTROL_HEIGHT, flexDirection: "row" },
   source: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
 });

package/examples/tpl_tower.tsx

@@ -15,7 +15,7 @@ import { StatusGrid, StatusLegend } from "@lotics/ui/status_grid";
 import { Timeline } from "@lotics/ui/timeline";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Status grid — 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 =
@@ -262,7 +262,7 @@ export function TplTower() {
             </View>
             <CardFooter>
               <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
-                {`12 of ${EXCEPTIONS.length} · the drawer's › walks the full queue`}
+                {`12 of ${EXCEPTIONS.length} — the drawer's › walks the full queue`}
               </Text>
               <Button title="View all" color="muted" onPress={() => {}} />
             </CardFooter>
@@ -273,7 +273,7 @@ export function TplTower() {
         <Card style={{ padding: 0 }}>
           <CardHeader>
             <CardHeaderTitle info="Alarm count by site and day. Intensity scales to the worst cell — press one to see what drove that day.">
-              Alarm pattern · last 14 days
+              Alarm pattern (last 14 days)
             </CardHeaderTitle>
           </CardHeader>
           <View style={{ paddingHorizontal: 20, paddingVertical: 16, gap: 12 }}>
@@ -288,8 +288,8 @@ export function TplTower() {
             <Text size="sm" color="muted" tabular>
               {hotCell
                 ? hotValue === 0
-                  ? `${siteOf(hotCell.row as SiteKey).label} · ${hotCell.col} — no alarms`
-                  : `${siteOf(hotCell.row as SiteKey).label} · ${hotCell.col} — ${hotValue} alarms · most frequent: ${WARN_MSGS[hash(DAYS.indexOf(hotCell.col), 8) % WARN_MSGS.length]}`
+                  ? `${siteOf(hotCell.row as SiteKey).label}, ${hotCell.col} — no alarms`
+                  : `${siteOf(hotCell.row as SiteKey).label}, ${hotCell.col} — ${hotValue} alarms; most frequent: ${WARN_MSGS[hash(DAYS.indexOf(hotCell.col), 8) % WARN_MSGS.length]}`
                 : "Press a cell to see what drove that day"}
             </Text>
           </View>
@@ -312,7 +312,7 @@ export function TplTower() {
               <Badge label={siteOf(unit.site).label} />
             </View>
             {unit.message ? (
-              <Text size="sm" color="danger">{`${unit.message} · ${formatAge(unit.ageMin ?? 0)} ago`}</Text>
+              <Text size="sm" color="danger">{`${unit.message} (${formatAge(unit.ageMin ?? 0)} ago)`}</Text>
             ) : null}
             <View style={{ gap: 6 }}>
               <KVRow label="Site"><Text size="sm">{siteOf(unit.site).label}</Text></KVRow>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "22.2.0",
+  "version": "23.0.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -137,7 +137,7 @@
     "./badge": "./src/badge.tsx",
     "./callout": "./src/callout.tsx",
     "./inset": "./src/inset.tsx",
-    "./linked_record_box": "./src/linked_record_box.tsx",
+    "./inline_button": "./src/inline_button.tsx",
     "./inline_edit": "./src/inline_edit.tsx",
     "./inline_static": "./src/inline_static.tsx",
     "./inline_text_input": "./src/inline_text_input.tsx",
@@ -199,6 +199,7 @@
     "./list_item": "./src/list_item.tsx",
     "./section_heading": "./src/section_heading.tsx",
     "./section_stack": "./src/section_stack.tsx",
+    "./sequence": "./src/sequence.tsx",
     "./separator": "./src/separator.tsx",
     "./stack": "./src/stack.tsx",
     "./status_badge": "./src/status_badge.tsx",

package/src/agent_run.tsx

@@ -4,6 +4,7 @@ import { colors } from "./colors";
 import { Text } from "./text";
 import { Button } from "./button";
 import { Icon, type IconName } from "./icon";
+import { Callout, CalloutActions, CalloutText } from "./callout";
 import { Markdown } from "./markdown";
 import { JsonPanel, stringifyData } from "./json_panel";
 import { PressableHighlight } from "./pressable_highlight";
@@ -139,7 +140,7 @@ const INK = colors.zinc[700];
  * tools it calls, in the order they happened. While the agent is mid-tools the
  * tail group is a SINGLE pulsing row whose label swaps in place as each call
  * 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
+ * one row — "{final action} ({n} steps)" — that EXPANDS on press to the steps in
  * between. Text segments render as prose. The run always ends on the agent's text.
  * Pair with `Composer` + `ChangeReview`.
  */
@@ -187,27 +188,44 @@ export function AgentRun(props: AgentRunProps) {
           />
         );
       })}
-      {/* A run-level BREAKING error terminates the feed with a danger row. It lives
-          outside `parts` (the stream failed), so the caller passes it explicitly.
-          A retry action rides UNDER it when the caller can restart the run. */}
+      {/* A run-level BREAKING error terminates the feed. It lives outside `parts`
+          (the stream failed), so the caller passes it explicitly.
+          A CONTAINED surface, not another step row: the run didn't advance, it
+          stopped, and a tinted panel says that at a glance where a bare red line
+          in the step gutter reads as one more step that happened to fail. It also
+          gives the retry a container — free-floating, a full-weight button in a
+          column of text reads as a stray control — and `Callout` carries
+          `role="alert"`, which the plain row did not.
+          FULL WIDTH, unlike `reasoning` / `rowDetail`: those indent to a step's
+          text column because they are that step's sub-content. This hangs under
+          no step — it is the whole run ending — so indenting it would make a
+          run-level failure read as the last step's detail. */}
       {props.error ? (
-        <View style={{ gap: 8 }}>
-          <View style={styles.row}>
-            <View style={styles.dotCol}>
-              <Icon name="circle-alert" size={17} color={colors.red[500]} />
-            </View>
-            <View style={styles.rowBody}>
-              <Text size="sm" color="danger">
-                {props.error}
-              </Text>
-            </View>
-          </View>
+        <Callout tone="error">
+          <CalloutText>{props.error}</CalloutText>
           {onRetry ? (
-            <View style={styles.retry}>
-              <Button title={locale.agentRun.retry} color="secondary" icon="rotate-ccw" alignSelf="flex-start" onPress={onRetry} />
-            </View>
+            <CalloutActions>
+              {/* PRIMARY, deliberately. `Callout` is a calm panel by design (a
+                  50 tint behind a soft 100 border), so a filled button inside it
+                  is not emphasis twice — it is the one action on a quiet
+                  surface. Every unfilled variant loses here: default and muted
+                  hover to zinc-100, a grey wash over the red tint, and
+                  danger-secondary puts red ink on a red-50 ground, the weakest
+                  contrast of the options. The run just died; the only way out
+                  should be the most legible thing in the panel.
+                  Still a Button, never a link: a link navigates, this re-fires a
+                  run, and that distinction is what a screen reader and the
+                  keyboard both rely on. */}
+              <Button
+                title={locale.agentRun.retry}
+                color="primary"
+                icon="rotate-ccw"
+                alignSelf="flex-start"
+                onPress={onRetry}
+              />
+            </CalloutActions>
           ) : null}
-        </View>
+        </Callout>
       ) : null}
     </View>
   );
@@ -244,7 +262,7 @@ function ActivityRow(props: {
   return <View style={styles.row}>{inner}</View>;
 }
 
-// The step label, plus a muted "· {awaiting}" annotation when the call is parked
+// The step label, plus a muted "(awaiting …)" qualifier when the call is parked
 // on a human decision (its amber dot already signals the state; the word names it).
 function StepBody({ label, awaiting }: { label: string; awaiting?: string }) {
   return (
@@ -252,7 +270,7 @@ function StepBody({ label, awaiting }: { label: string; awaiting?: string }) {
       {label}
       {awaiting ? (
         <Text size="sm" color="muted">
-          {"  ·  " + awaiting}
+          {" (" + awaiting + ")"}
         </Text>
       ) : null}
     </Text>
@@ -435,7 +453,7 @@ function ToolGroup(props: {
     );
   }
 
-  // SETTLED, expandable — a persistent "{final action} · {n} steps" HEADER that
+  // SETTLED, expandable — a persistent "{final action} ({n} steps)" HEADER that
   // STAYS PUT and rolls the steps out BELOW it (in order) on press, so the row you
   // pressed never moves. The header wears the `complete` terminal dot — an outlined
   // ring + check, a differentiator from the filled `done` step dots; every row
@@ -486,7 +504,4 @@ const styles = StyleSheet.create({
   reasoning: { paddingLeft: 28, paddingBottom: 4 },
   // A step's expanded I/O panels — same left edge as the reasoning body.
   rowDetail: { paddingLeft: 28, paddingBottom: 6, paddingTop: 2 },
-  // The retry action under the terminal error — aligned to the message body
-  // (past the dot column + its gap), so it reads as a response to that row.
-  retry: { paddingLeft: 28 },
 });

package/src/breakdown.tsx

@@ -46,7 +46,7 @@ const DEFAULT_LABELS: BreakdownLabels = { more: (hidden) => `Show ${hidden} more
 /**
  * Composition browser for LARGE populations — the answer to "what is my
  * stock made of, and let me drill into a slice". A stacked bar shows the
- * shares; below it, one pressable row per segment (swatch · label · count ·
+ * shares; below it, one pressable row per segment (swatch, label, count,
  * share). Selecting a segment dims the rest and (in the host) filters the
  * register underneath — the facet pattern for 10,000-record monitoring.
  * Several Breakdowns side by side (by type, by status, by site) compose a

package/src/calendar/calendar_view.tsx

@@ -27,7 +27,7 @@ export interface CalendarViewProps<T = unknown> {
 }
 
 /**
- * Full calendar: a toolbar (prev / today / next + month·week·day switch) over
+ * Full calendar: a toolbar (prev / today / next + month/week/day switch) over
  * the month grid or the week/day time grid. Date + view are owned here so the
  * primitive is drop-in; the consumer only supplies events + callbacks.
  */

package/src/change_review.tsx

@@ -43,7 +43,7 @@ export type ChangeStatus = "pending" | "accepted" | "rejected";
 // context only mirrors it so the header counter, Keep-all, and the
 // apply-disabled logic derive without the host re-wiring them. An add, an
 // update, a removal and a source conflict are compositions of ONE grammar:
-// `ChangeFields` + `ChangeField` (the − band · the + value · candidate rows)
+// `ChangeFields` + `ChangeField` (the − band, the + value, candidate rows)
 // — not separate components; `ChangeRecord` wraps the same grammar in the
 // per-item card for record SETS.
 // ─────────────────────────────────────────────────────────────────────────────
@@ -241,7 +241,7 @@ export function ChangeFields({ children }: { children: ReactNode }) {
 export interface ChangeRecordProps {
   /** Stable identity — registers in the review context like a `Change`. */
   id: string;
-  /** "add" (+, green) · "remove" (−, red) · "edit" (±, neutral — only the
+  /** "add" (+, green), "remove" (−, red), "edit" (±, neutral — only the
    *  changed fields, each with its own mini-diff via `before`). */
   tone: "add" | "remove" | "edit";
   /** The card header title (the item's name). */
@@ -290,16 +290,17 @@ export function ChangeRecord(props: ChangeRecordProps) {
         : { glyph: "±", word: loc.opEdit, color: colors.zinc[600], bg: colors.white, header: colors.zinc[50], border: colors.border };
   return (
     <View style={[styles.recordCard, { backgroundColor: mark.bg, borderColor: mark.border }]}>
-      {/* The op reads on the WHOLE card — a quiet tone wash (50 body ·
-          100 header · 200 border); an edit stays white, its diffs carry it. */}
+      {/* The op reads on the WHOLE card — a quiet tone wash (50 body,
+          100 header, 200 border); an edit stays white, its diffs carry it. */}
       <View style={[styles.recordCardHeader, { backgroundColor: mark.header }]}>
         <Text size="sm" weight="semibold" tabular style={{ color: mark.color, width: 14 }}>
           {mark.glyph}
         </Text>
+        {/* The op word RUNS IN to the title it names, so it takes the colon and
+            the title follows on the row's own gap. */}
         <Text size="sm" weight="semibold" style={{ color: mark.color }}>
-          {mark.word}
+          {mark.word}:
         </Text>
-        <Text size="sm" color="muted">·</Text>
         <Text size="sm" weight="semibold" numberOfLines={1} style={{ flexShrink: 1 }}>
           {props.title}
         </Text>
@@ -380,9 +381,9 @@ export interface ChangeFieldProps {
  * (when replacing/removing), the + value (editable, read-only on a conflict,
  * or absent on a pure removal), conflict candidates + the type-another-value
  * third option, the quiet reasoning — deciding for ITSELF via Keep/Drop.
- * A plain field (no diff, no decision) is the inline label · value row,
+ * A plain field (no diff, no decision) is the inline label, value row,
  * press-to-edit when `onChangeText` is given. Decided → ONE quiet collapsed
- * row: mark · label → value · Undo.
+ * row: mark, label → value, Undo.
  */
 export function ChangeField(props: ChangeFieldProps) {
   const loc = useLoticsLocale().changeReview;