@lotics/ui 22.3.0 → 23.0.0

package/examples/tpl_item_list.tsx

@@ -6,6 +6,7 @@ import { colors, solid, type ColorName } from "@lotics/ui/colors";
 import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { Alert } from "@lotics/ui/alert";
 import { Badge } from "@lotics/ui/badge";
+import { InlineButton } from "@lotics/ui/inline_button";
 import { Button } from "@lotics/ui/button";
 import { CardFooter } from "@lotics/ui/card";
 import { CheckboxInput } from "@lotics/ui/checkbox_input";
@@ -73,14 +74,14 @@ import { InlineTextInput } from "@lotics/ui/inline_text_input";
 import { useSelection } from "@lotics/ui/use_selection";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Register — THE canonical register, and the ONE work-execution list
+// Template, Register — THE canonical register, and the ONE work-execution list
 // shape. A flat, paginated, SELECTABLE list of records: one toolbar row (search +
-// consolidated filters LEFT, New CTA RIGHT) · a light SummaryLine of the filtered
-// view · a sortable, Divider-separated register where every row has a leading
+// consolidated filters LEFT, New CTA RIGHT), a light SummaryLine of the filtered
+// view, a sortable, Divider-separated register where every row has a leading
 // checkbox (a row that can't take the bulk action — here an "Awaiting docs" case —
 // gets a DISABLED one), a per-row PRINT action button, and a ⋯ overflow (press the
-// row = the sequenced workspace Drawer) · a select-all band · footer totals +
-// Pagination · a FloatingActionBar for the bulk action over the ticked rows. The
+// row = the sequenced workspace Drawer), a select-all band, footer totals +
+// Pagination, a FloatingActionBar for the bulk action over the ticked rows. The
 // example is a documents-workflow register, but this one shape subsumes the old
 // approvals / dispatch / batch / run screens — register, per-row action, gated
 // selection, and act-on-many all in one.
@@ -212,7 +213,7 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
           </TaskStatus>
           <TaskTitle>
             <InlineTextInput
-              variant="cell"
+              variant="bare"
               value={t.label}
               onSave={(v) => patch(t.id, { label: v })}
               struck={t.done}
@@ -234,7 +235,7 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
               value={t.assignee}
               onSave={(m) => patch(t.id, { assignee: m })}
               placeholder="Assign…"
-              accessibilityLabel={`Assignee · ${t.label}`}
+              accessibilityLabel={`Assignee for ${t.label}`}
             />
           </TaskSubRow>
           <TaskSubRow label="Due">
@@ -242,7 +243,7 @@ function TasksChecklist({ tasks, onChange, suggestions, onDismissSuggestion }: {
               value={t.due}
               onSave={(v) => patch(t.id, { due: v })}
               placeholder="Set due…"
-              accessibilityLabel={`Due · ${t.label}`}
+              accessibilityLabel={`Due for ${t.label}`}
             />
           </TaskSubRow>
         </TaskItem>
@@ -439,7 +440,7 @@ function HoSoRow({ hs, daThu, tasks, onTasksChange, suggestions, onDismissSugges
 }
 
 // The case workspace behind a register row — the drawer mirrors a REAL record
-// workspace: inline-editable fields (the zinc-50 chips; `InlineStatic` for the
+// workspace: inline-editable fields (the bordered control surface; `InlineStatic` for the
 // system-owned ones) and the record's CHARGES SUMMARY (grouped fee rows with
 // the status as a quiet suffix → divider → ONE emphasized closing number — the
 // same shape at popover density). Keyed by id from the caller so per-record
@@ -473,12 +474,12 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
   // (bar, group sums, the closing number) recomputes from the two lists.
   const charges = isSeed
     ? [
-        { id: "f1", item: "Service fee", amount: hs.phi, basis: "Fixed tariff · type A", chargedOn: "03/06", by: "Sarah Chen", ref: "" },
+        { id: "f1", item: "Service fee", amount: hs.phi, basis: "Fixed tariff, type A", chargedOn: "03/06", by: "Sarah Chen", ref: "" },
         { id: "f2", item: "Notarization", amount: 350_000, basis: "Per notarized copy × 2", chargedOn: "04/06", by: "David Park", ref: "" },
         { id: "f3", item: "Government levy", amount: 1_200_000, basis: "State fee schedule 2026", chargedOn: "04/06", by: "System", ref: "LEVY-2026-118" },
       ]
     : hs.phi > 0
-      ? [{ id: "f1", item: "Service fee", amount: hs.phi, basis: "Fixed tariff · type A", chargedOn: "Today", by: "Sarah Chen", ref: "" }]
+      ? [{ id: "f1", item: "Service fee", amount: hs.phi, basis: "Fixed tariff, type A", chargedOn: "Today", by: "Sarah Chen", ref: "" }]
       : [];
   const [receipts, setReceipts] = useState(() =>
     isSeed
@@ -542,11 +543,11 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
   const [logNote, setLogNote] = useState("");
   const [followUp, setFollowUp] = useState<string | null>(null);
   const [events, setEvents] = useState<TimelineItem[]>(() => isSeed ? [
-    { id: "e1", icon: "phone", iconColor: colors.amber[500], label: "Call — call back", description: "Asked for the signed contract · follow up 08/06", right: <Text size="xs" color="muted">04/06</Text> },
-    { id: "e2", icon: "credit-card", iconColor: colors.emerald[500], label: "Payment received — 1.550.000 ₫", description: "Cash · disbursements advance", right: <Text size="xs" color="muted">03/06</Text> },
+    { id: "e1", icon: "phone", iconColor: colors.amber[500], label: "Call — call back", description: "Asked for the signed contract; follow up 08/06", right: <Text size="xs" color="muted">04/06</Text> },
+    { id: "e2", icon: "credit-card", iconColor: colors.emerald[500], label: "Payment received — 1.550.000 ₫", description: "Cash for disbursements advance", right: <Text size="xs" color="muted">03/06</Text> },
     { id: "e3", icon: "phone", iconColor: colors.zinc[400], label: "Call — no answer", right: <Text size="xs" color="muted">03/06</Text> },
     { id: "e4", icon: "file-text", iconColor: colors.zinc[500], label: "Receipt printed", right: <Text size="xs" color="muted">03/06</Text> },
-    { id: "e5", icon: "phone", iconColor: colors.emerald[500], label: "Call — connected", description: "Walked through the required documents · 1 file", right: <Text size="xs" color="muted">02/06</Text>, details: attachmentDetails([sampleDoc("checklist", "#8b5cf6")]) },
+    { id: "e5", icon: "phone", iconColor: colors.emerald[500], label: "Call — connected", description: "Walked through the required documents; 1 file", right: <Text size="xs" color="muted">02/06</Text>, details: attachmentDetails([sampleDoc("checklist", "#8b5cf6")]) },
     { id: "e6", icon: "plus", iconColor: colors.blue[500], label: "Record created", right: <Text size="xs" color="muted">02/06</Text> },
   ] : [
     { id: "e1", icon: "plus", iconColor: colors.blue[500], label: "Record created", right: <Text size="xs" color="muted">Today</Text> },
@@ -572,7 +573,7 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
         icon: meta ? meta.icon : "message-square",
         iconColor: meta ? meta.color : colors.blue[500],
         label: meta ? meta.label : note,
-        description: parts.join(" · ") || undefined,
+        description: parts.join("; ") || undefined,
         right: <Text size="xs" color="muted">Today</Text>,
         details: docs.length > 0 ? attachmentDetails(docs) : undefined,
       },
@@ -591,28 +592,49 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
             <Text size="lg" weight="semibold" tabular>{hs.ma}</Text>
             <Badge label={TRANG_THAI[hs.trangThai].label} color={TRANG_THAI[hs.trangThai].color} />
           </View>
-          <Text size="sm" color="muted">{`Received ${hs.ngayNhan} · ${hs.phuTrach}`}</Text>
+          <Text size="sm" color="muted">{`Received ${hs.ngayNhan} by ${hs.phuTrach}`}</Text>
         </View>
         <Divider />
         {/* DETAILS — every field type in the inline vocabulary, on ONE
-            DetailTable grid: text · member · dates (plain + optional-time) ·
-            select-with-dots · money number · a multi-value TAG field · a
+            DetailTable grid: text, member, dates (plain + optional-time),
+            select-with-dots, money number, a multi-value TAG field, a
             system-owned static. The chips mark what's editable. */}
         <Section>
           <SectionHeading>
             <SectionHeadingTitle>Details</SectionHeadingTitle>
           </SectionHeading>
-          <DetailTable labelWidth={120} trailingWidth={76}>
+          <DetailTable labelWidth={120}>
             <DetailRow label="Customer"><InlineTextInput value={khach} onSave={persist(setKhach)} accessibilityLabel="Customer" /></DetailRow>
-            <DetailRow label="Phone" trailing={<Button title="Call" color="secondary" icon="phone" onPress={() => {}} />}>
-              <InlineTextInput value={dienThoai} onSave={persist(setDienThoai)} accessibilityLabel="Phone" />
+            {/* A verb about the VALUE rides the FIELD — `InlineButton` in the
+                editor's `actions`, never a column beside it. Passed
+                unconditionally and disabled when there is nothing to act on: a
+                verb that appears once the value is filled resizes the field as
+                the user types. */}
+            <DetailRow label="Phone">
+              <InlineTextInput
+                value={dienThoai}
+                onSave={persist(setDienThoai)}
+                accessibilityLabel="Phone"
+                actions={<InlineButton title="Call" accessibilityLabel="Call this number" disabled={!dienThoai} onPress={() => {}} />}
+              />
             </DetailRow>
             <DetailRow label="Assignee">
               <InlineMemberSelect members={MEMBERS} value={assignee} onSave={persist(setAssignee)} placeholder="Assign…" accessibilityLabel="Assignee" />
             </DetailRow>
             <DetailRow label="Received"><InlineDatePicker value={ngayNhan} onSave={persist(setNgayNhan)} accessibilityLabel="Received date" /></DetailRow>
-            <DetailRow label="Due" trailing={<Button title="Today" color="secondary" onPress={() => void persist(setDue)(toISODate(new Date()))} />}>
-              <InlineDatePicker value={due} optionalTime onSave={persist(setDue)} placeholder="Set due date…" accessibilityLabel="Due date" />
+            {/* The verb rides the FIELD, like every other value verb — including
+                on a popover editor: the field exposes its outer box separately
+                from the control inside it, so the calendar still opens at the
+                field's own width. */}
+            <DetailRow label="Due">
+              <InlineDatePicker
+                value={due}
+                optionalTime
+                onSave={persist(setDue)}
+                placeholder="Set due date…"
+                accessibilityLabel="Due date"
+                actions={<InlineButton title="Today" accessibilityLabel="Set due date to today" onPress={() => void persist(setDue)(toISODate(new Date()))} />}
+              />
             </DetailRow>
             <DetailRow label="Priority">
               <InlineSelect
@@ -642,8 +664,13 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
                 accessibilityLabel="Tags"
               />
             </DetailRow>
-            <DetailRow label="Record ID" trailing={<Badge label="System" color="zinc" />}>
-              <InlineStatic value={hs.ma} tabular />
+            {/* A `Badge` is not a verb and never was a column — it qualifies the
+                VALUE, so it sits beside it inside the value cell. */}
+            <DetailRow label="Record ID" flat>
+              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                <InlineStatic value={hs.ma} tabular />
+                <Badge label="System" color="zinc" />
+              </View>
             </DetailRow>
           </DetailTable>
         </Section>
@@ -727,7 +754,7 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
         </FileDropTarget>
         <Divider />
         {/* the PAYMENT summary — a plain financial STATEMENT: the two sides
-            of the ledger (charges owed · receipts received), every amount on
+            of the ledger (charges owed, receipts received), every amount on
             ONE right-aligned tabular column, a divider-set emphasized closing
             number, and the record-payment popover that appends a receipt.
             No bars, no charts — the numbers are the interface. */}
@@ -751,7 +778,7 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
                     <View style={{ gap: 8 }}>
                       <View style={{ gap: 2 }}>
                         <Text size="sm" weight="semibold">{c.item}</Text>
-                        <Text size="xs" color="muted">{`Charged ${c.chargedOn} · by ${c.by}`}</Text>
+                        <Text size="xs" color="muted">{`Charged ${c.chargedOn} by ${c.by}`}</Text>
                       </View>
                       <DetailRow label="Basis" labelSize="xs" labelWidth={72}><Text size="xs">{c.basis}</Text></DetailRow>
                       <DetailRow label="Amount" labelSize="xs" labelWidth={72}><Text size="xs" tabular>{formatMoney(c.amount)}</Text></DetailRow>
@@ -767,7 +794,7 @@ function HoSoWorkspace({ hs, daThu, onPaid, tasks, onTasksChange, suggestions, o
             </LedgerGroup>
             <LedgerGroup label="Received" total={received > 0 ? -received : undefined}>
               {receipts.map((r) => (
-                <LedgerRow key={r.id} label={r.note} meta={`${r.date} · ${r.method}`} value={-r.amount} tone="success" />
+                <LedgerRow key={r.id} label={r.note} meta={`${r.date}, ${r.method}`} value={-r.amount} tone="success" />
               ))}
             </LedgerGroup>
             <LedgerTotal label="Outstanding" value={outstanding} tone="danger" zeroLabel="Paid in full" />
@@ -1009,7 +1036,7 @@ function LinkedRecordScreen({ ma }: { ma: string }) {
       <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 16 }}>
         <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
           <Badge label={TRANG_THAI[r.trangThai].label} color={TRANG_THAI[r.trangThai].color} />
-          <Text size="sm" color="muted">{`Linked record · ${r.khach}`}</Text>
+          <Text size="sm" color="muted">{`Linked record: ${r.khach}`}</Text>
         </View>
         <DetailTable labelWidth={120}>
           <DetailRow label="Customer"><InlineTextInput value={khach} onSave={persist(setKhach)} accessibilityLabel="Customer" /></DetailRow>
@@ -1073,12 +1100,12 @@ type Proposal = { id: string; khach: string; dienThoai: string; phi: number; ord
 // What the (mock) import drafts, per the wizard's grouping answer. A real app
 // takes these from the import run's structured output.
 const PROPOSED_BY_CUSTOMER: Proposal[] = [
-  { id: "pc1", khach: "Meridian Trading Co.", dienThoai: "(555) 014-2288", phi: 240, orders: "PO-7311 · PO-7314" },
-  { id: "pc2", khach: "Northgate Textiles", dienThoai: "(555) 019-4471", phi: 180, orders: "PO-7312 · PO-7316" },
-  { id: "pc3", khach: "Blue Harbor Foods", dienThoai: "", phi: 210, orders: "PO-7313 · PO-7315" },
+  { id: "pc1", khach: "Meridian Trading Co.", dienThoai: "(555) 014-2288", phi: 240, orders: "PO-7311, PO-7314" },
+  { id: "pc2", khach: "Northgate Textiles", dienThoai: "(555) 019-4471", phi: 180, orders: "PO-7312, PO-7316" },
+  { id: "pc3", khach: "Blue Harbor Foods", dienThoai: "", phi: 210, orders: "PO-7313, PO-7315" },
 ];
 const PROPOSED_BY_ORDER: Proposal[] = PROPOSED_BY_CUSTOMER.flatMap((c) =>
-  c.orders.split(" · ").map((po, i) => ({ id: `${c.id}-${i}`, khach: c.khach, dienThoai: c.dienThoai, phi: Math.round(c.phi / 2), orders: po })),
+  c.orders.split(", ").map((po, i) => ({ id: `${c.id}-${i}`, khach: c.khach, dienThoai: c.dienThoai, phi: Math.round(c.phi / 2), orders: po })),
 );
 
 // The wizard's questions come FROM the analysis (a real app renders them off the
@@ -1223,7 +1250,7 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
               // The wizard's answers are load-bearing: the unknown customer's row
               // states how it landed (created + linked / left unassigned / the
               // user's own instruction).
-              detail: [p.dienThoai, formatMoney(p.phi), p.khach === "Blue Harbor Foods" ? customerPlan : ""].filter(Boolean).join(" · "),
+              detail: [p.dienThoai, formatMoney(p.phi), p.khach === "Blue Harbor Foods" ? customerPlan : ""].filter(Boolean).join(", "),
               ref: p.orders,
               // The mock flags one record's reference (a failed checksum); a
               // real app computes this over the STORED value.
@@ -1445,7 +1472,7 @@ function EnterDataDialog({ open, onOpenChange, seedDocs, onCreate, onCreateMany
                   <Icon name={CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "building-2" : "plus"} size={16} color={colors.zinc[400]} />
                   <Text size="sm" weight="medium" style={{ flex: 1 }} numberOfLines={1}>
                     {khach}
-                    {CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "" : "  ·  new customer"}
+                    {CUSTOMER_OPTIONS.some((o) => o.label === khach) ? "" : " (new customer)"}
                   </Text>
                   <Link size="sm" onPress={() => setKhach("")} accessibilityLabel="Change customer">Change</Link>
                 </View>
@@ -1657,7 +1684,7 @@ export function TplItemList() {
             <Select
               placeholder="Status"
               options={TABS.map((t) => ({
-                label: `${t.label} · ${t.value === "all" ? preTab.length : dem(t.value)}`,
+                label: `${t.label} (${t.value === "all" ? preTab.length : dem(t.value)})`,
                 value: t.value,
               }))}
               value={tab}
@@ -1750,7 +1777,7 @@ export function TplItemList() {
           ) : null}
           <CardFooter>
             <Text size="sm" color="muted" tabular style={{ flex: 1 }}>
-              {`${filtered.length} records · Total fees ${formatMoney(tongPhi)}`}
+              {`${filtered.length} records, ${formatMoney(tongPhi)} in fees`}
             </Text>
             <Pagination
               page={page}

package/examples/tpl_lookup.tsx

@@ -15,7 +15,7 @@ import type { UIMessagePart, UIDataTypes, UITools } from "ai";
 type Part = UIMessagePart<UIDataTypes, UITools>;
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Answer desk — describe the goods on the LEFT, the agent RANKS the
+// Template, Answer desk — describe the goods on the LEFT, the agent RANKS the
 // matching codes (nearest matches, the top one Recommended), you pick one and its
 // structured ANSWER pins on the RIGHT. The flow is input → matches → pick, not a
 // single confident verdict: classification is ambiguous, so the alternatives are
@@ -52,7 +52,7 @@ interface Candidate {
 const CANDIDATES: Candidate[] = [
   {
     id: "c1",
-    label: "Frozen shrimp · retail packs ≤ 1 kg",
+    label: "Frozen shrimp, retail packs ≤ 1 kg",
     recommended: true,
     code: "0306.17.10",
     heading: "Frozen shrimp & prawns of the family Penaeidae — not in airtight containers",
@@ -83,7 +83,7 @@ const CANDIDATES: Candidate[] = [
   },
   {
     id: "c2",
-    label: "Frozen shrimp · other (bulk / catering)",
+    label: "Frozen shrimp, other (bulk / catering)",
     code: "0306.17.90",
     heading: "Frozen shrimp & prawns of the family Penaeidae — other",
     confidence: "medium",
@@ -195,7 +195,7 @@ export function TplLookup() {
 
   return (
     <View style={{ flex: 1, flexDirection: "row", backgroundColor: colors.white }}>
-      {/* ── LEFT · command + session ───────────────────────────────── */}
+      {/* ── LEFT, command + session ───────────────────────────────── */}
       <View style={{ width: 380, backgroundColor: colors.white, borderRightWidth: 1, borderRightColor: colors.zinc[200] }}>
         <View style={{ paddingHorizontal: 20, paddingTop: 18, paddingBottom: 12, gap: 2 }}>
           <Text size="md" weight="semibold">HS classification</Text>
@@ -248,7 +248,7 @@ export function TplLookup() {
         </View>
       </View>
 
-      {/* ── RIGHT · the pinned structured answer ───────────────────── */}
+      {/* ── RIGHT, the pinned structured answer ───────────────────── */}
       <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 28, paddingBottom: 48 }}>
         <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
           <View style={{ gap: 4 }}>

package/examples/tpl_pick.tsx

@@ -15,7 +15,7 @@ import { Stepper, Step, type StepStatus } from "@lotics/ui/stepper";
 import { CompletionState } from "@lotics/ui/completion_state";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Guided queue — a warehouse PICK RUN. The work is a SEQUENCE of
+// Template, Guided queue — a warehouse PICK RUN. The work is a SEQUENCE of
 // physical tasks, not a list to browse: the run hands the operator the next bin,
 // they scan to verify they're at the right shelf, confirm the count, and the
 // next task takes its place. A single focus column — the CURRENT task is the only
@@ -68,7 +68,7 @@ function ShortGate({ line, onShort }: { line: PickLine; onShort: (actual: number
       <PopoverContent style={{ width: 300 }} disableBodyScroll>
         <View style={{ gap: 14 }}>
           <View style={{ gap: 2 }}>
-            <Text size="sm" weight="semibold">{`Short pick · ${line.bin}`}</Text>
+            <Text size="sm" weight="semibold">{`Short pick: ${line.bin}`}</Text>
             <Text size="xs" color="muted">Record what you actually took — the rest is flagged for backfill.</Text>
           </View>
           <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
@@ -142,7 +142,7 @@ function Complete({ lines, onReset }: { lines: PickLine[]; onReset: () => void }
   return (
     <CompletionState
       title="Wave picked"
-      summary={`${lines.length} lines · ${units} units${shorts > 0 ? ` · ${shorts} short` : ""}`}
+      summary={`${lines.length} lines, ${units} units${shorts > 0 ? `, ${shorts} short` : ""}`}
     >
       <Button title="Start next wave" color="muted" onPress={onReset} />
       <Button title="Hand to packing" color="primary" onPress={() => {}} />
@@ -150,7 +150,7 @@ function Complete({ lines, onReset }: { lines: PickLine[]; onReset: () => void }
   );
 }
 
-// The whole run at a glance: done · now · up next. Read-only — the run is
+// The whole run at a glance: done, now, up next. Read-only — the run is
 // sequential, so position is shown, not chosen. Lives in a collapsed disclosure
 // below the task so the current step keeps the focus.
 function RunPath({ lines, currentIndex }: { lines: PickLine[]; currentIndex: number }) {
@@ -200,7 +200,7 @@ export function TplPick() {
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12, flexWrap: "wrap" }}>
           <View style={{ gap: 2, flex: 1 }}>
             <Text size="xxl" weight="semibold">Queue W-0142</Text>
-            <Text size="sm" color="muted">7 lines for 3 outbound orders · Cart C-07</Text>
+            <Text size="sm" color="muted">7 lines for 3 outbound orders on Cart C-07</Text>
           </View>
           <Button title="Pause wave" color="muted" onPress={() => {}} />
         </View>
@@ -208,7 +208,7 @@ export function TplPick() {
         {/* run progress — the one number that says how close to done */}
         <View style={{ gap: 6 }}>
           <View style={{ flexDirection: "row", alignItems: "center" }}>
-            <Text size="sm" color="muted" style={{ flex: 1 }}>{`${done.length} of ${lines.length} lines · ${pickedUnits} of ${totalUnits} units`}</Text>
+            <Text size="sm" color="muted" style={{ flex: 1 }}>{`${done.length} of ${lines.length} lines, ${pickedUnits} of ${totalUnits} units`}</Text>
             {shorts > 0 ? <Text size="sm" color="danger" tabular>{`${shorts} short`}</Text> : null}
           </View>
           <ProgressBar value={done.length} max={lines.length} format="none" color={solid("blue")} />

package/examples/tpl_pivot.tsx

@@ -14,7 +14,7 @@ import { type MatrixCellRef } from "@lotics/ui/matrix_totals";
 import { PressableRow } from "@lotics/ui/pressable_row";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Pivot — one dimension crossed against another, then drill.
+// Template, Pivot — one dimension crossed against another, then drill.
 // The Matrix is the hero: warehouse × category, the number IN each cell and a
 // heat wash behind it so the concentration reads at a glance, row/column/grand
 // totals down the edges. Pressing a cell is a door — the register below filters
@@ -61,7 +61,7 @@ const NAMES = ["Cotton tee", "Wool throw", "USB hub", "Trail flask", "Rain shell
 
 const SKUS: Sku[] = (() => {
   const out: Sku[] = [];
-  // A deliberate concentration in Newark · Electronics so a hot cell has a story.
+  // A deliberate concentration in Newark, Electronics so a hot cell has a story.
   for (let i = 0; i < 64; i++) {
     const wRoll = hash(i, 1) % 100;
     const warehouse: WarehouseKey =
@@ -172,7 +172,7 @@ export function TplPivot() {
             </CardHeaderTitle>
             {cell ? (
               <Chip onDismiss={() => { setCell(null); setOpenIdx(null); }} dismissTooltip="Clear cell">
-                <Text size="xs" weight="medium" color="muted">{`${whOf(cell.row as WarehouseKey).label} · ${catOf(cell.col as CategoryKey).label}`}</Text>
+                <Text size="xs" weight="medium" color="muted">{`${whOf(cell.row as WarehouseKey).label}, ${catOf(cell.col as CategoryKey).label}`}</Text>
               </Chip>
             ) : null}
           </CardHeader>