@lotics/ui 7.8.0 → 7.10.0

package/examples/{tpl_dossier.tsx → tpl_item_list.tsx}

@@ -6,36 +6,42 @@ import { ActionMenu, type ActionMenuItem } from "@lotics/ui/action_menu";
 import { Alert } from "@lotics/ui/alert";
 import { Badge } from "@lotics/ui/badge";
 import { Button } from "@lotics/ui/button";
-import { Card, CardFooter } from "@lotics/ui/card";
+import { CardFooter } from "@lotics/ui/card";
+import { CheckboxInput } from "@lotics/ui/checkbox_input";
 import { DetailRow } from "@lotics/ui/detail_row";
 import { Divider } from "@lotics/ui/divider";
 import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
 import { EmptyState } from "@lotics/ui/empty_state";
+import { FloatingActionBar } from "@lotics/ui/floating_action_bar";
 import { FormField } from "@lotics/ui/form_field";
 import { type IconName } from "@lotics/ui/icon";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { SummaryLine } from "@lotics/ui/summary_line";
 import { NumberInput } from "@lotics/ui/number_input";
 import { Pagination } from "@lotics/ui/pagination";
 import { Popover, PopoverContent, PopoverFooter, PopoverTrigger } from "@lotics/ui/popover";
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { SearchInput } from "@lotics/ui/search_input";
-import { ChipGroup } from "@lotics/ui/chip_group";
+import { Select } from "@lotics/ui/select";
 import { FilterChip, selectSummary } from "@lotics/ui/filter_chip";
 import { OptionList } from "@lotics/ui/option_list";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
 import type { PickerOption } from "@lotics/ui/picker";
 import { formatMoney } from "@lotics/ui/format_money";
+import { useSelection } from "@lotics/ui/use_selection";
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Template · Cases & documents — the case register. Two jobs on one screen:
-// track each case through its statuses, AND generate/print the paper the
-// current stage needs (payment slip while the fee is unpaid, then the stage's
-// own document). Grammar: header band (+ New case popover form) · KPI strip
-// (counts drill into the status pills) · ChipGroup filters the register · ONE banded
-// card: search toolbar → eyebrow band → pressable list rows (press = the
-// sequenced workspace Drawer, ⋯ = the row's real actions) → footer with the
-// filtered totals + Pagination over the filtered set (pageSize 8).
+// Template · Item List — 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
+// 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
+// example is a case-document 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.
 // ─────────────────────────────────────────────────────────────────────────────
 
 // The customer book the new-case form searches — find-or-create (pick an existing
@@ -120,26 +126,32 @@ function docFor(r: HoSo): { title: string; icon: IconName } {
   return r.daThu ? TRANG_THAI[r.trangThai].doc : { title: "Print payment slip", icon: "receipt" };
 }
 
-// The ⋯ menu carries the row's REAL actions: the stage document first, then
-// payment (disabled once collected), edit, and the destructive cancel last.
+// The per-row Print button (the trailing action column) prints the stage's
+// document; the ⋯ menu carries the secondary actions — payment (disabled once
+// collected), edit, and the destructive cancel last.
 function menuFor(r: HoSo): ActionMenuItem[] {
-  const doc = docFor(r);
   return [
-    { key: "chung_tu", label: doc.title, icon: doc.icon, onPress: () => {} },
     { key: "thanh_toan", label: "Record payment", icon: "credit-card", disabled: r.daThu, onPress: () => {} },
     { key: "sua", label: "Edit case", icon: "pencil", onPress: () => {} },
     { key: "huy", label: "Cancel case", icon: "trash", danger: true, onPress: () => Alert.alert("Cancel this case?", "The case is closed and removed from the active register — it can't be undone.", [{ text: "Keep case", style: "cancel" }, { text: "Cancel case", style: "destructive", onPress: () => {} }]) },
   ];
 }
 
-function HoSoRow({ hs, selected, onPress }: { hs: HoSo; selected: boolean; onPress: () => void }) {
+function HoSoRow({ hs, selected, marked, selectable, onToggle, onPress }: { hs: HoSo; selected: boolean; marked: boolean; selectable: boolean; onToggle: (on: boolean) => void; onPress: () => void }) {
   return (
     <TableRow
       onPress={onPress}
       selected={selected}
+      marked={marked}
       minHeight={56}
       accessibilityLabel={`Open case ${hs.ma} — ${hs.khach}`}
-      trailing={<ActionMenu items={menuFor(hs)} accessibilityLabel={`Actions for ${hs.ma}`} />}
+      leading={<CheckboxInput accessibilityLabel={selectable ? `Select ${hs.ma}` : `${hs.ma} — awaiting docs, not ready to export`} checked={marked} disabled={!selectable} onChange={onToggle} />}
+      trailing={
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <Button title="Print" icon={docFor(hs).icon} color="secondary" onPress={() => {}} />
+          <ActionMenu items={menuFor(hs)} accessibilityLabel={`Actions for ${hs.ma}`} />
+        </View>
+      }
     >
       <TableCell>
         <Text size="sm" weight="semibold" tabular>{hs.ma}</Text>
@@ -244,7 +256,7 @@ function TaoHoSoForm() {
   );
 }
 
-export function TplDossier() {
+export function TplItemList() {
   const [tab, setTab] = useState<Tab>("all");
   const [search, setSearch] = useState("");
   const [page, setPage] = useState(0);
@@ -252,6 +264,7 @@ export function TplDossier() {
   const [sort, setSort] = useState<SortState | null>(null);
   const [assignee, setAssignee] = useState<string[]>([]);
   const [feeStatus, setFeeStatus] = useState<"paid" | "unpaid" | null>(null);
+  const sel = useSelection();
 
   // Filter / sort changes reset paging — page 3 of the old ordering is
   // meaningless under the new one.
@@ -271,7 +284,6 @@ export function TplDossier() {
 
   const dem = (t: TrangThai) => HO_SO.filter((r) => r.trangThai === t).length;
   const phiDaThu = HO_SO.filter((r) => r.daThu).reduce((s, r) => s + r.phi, 0);
-  const chuaThu = HO_SO.filter((r) => !r.daThu);
 
   // Search + status tab filter FIRST, then paging over the filtered ordering.
   const q = search.trim().toLowerCase();
@@ -296,99 +308,118 @@ export function TplDossier() {
   const pageRows = sorted.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
   const hasMore = (page + 1) * PAGE_SIZE < sorted.length;
 
+  // Bulk selection (the shared `useSelection` hook) — tick rows for the floating
+  // action bar; select-all spans the visible page and ticks persist across pages,
+  // so the bar's count is the running total. Selectability GATING stays here (the
+  // hook is agnostic): an "Awaiting docs" case is still gathering paperwork, so it
+  // can't be exported — only the selectable ids drive select-all, the rest get a
+  // DISABLED checkbox (the same shape as a blocked run line).
+  const isSelectable = (r: HoSo) => r.trangThai !== "chobosung";
+  const selectableIds = pageRows.filter(isSelectable).map((r) => r.ma);
+
   // The drawer sequences over the CURRENTLY-VISIBLE page slice. If the open
   // case falls out of view, the chevrons disappear but the drawer stays.
   const openRow = openMa === null ? null : HO_SO.find((r) => r.ma === openMa) ?? null;
   const seqIndex = openRow ? pageRows.findIndex((r) => r.ma === openRow.ma) : -1;
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <View style={{ flex: 1 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
-        {/* header band — one primary action: the New case popover form */}
-        <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
-          <View style={{ gap: 2, flex: 1 }}>
-            <Text size="xl" weight="semibold">Cases & documents</Text>
-            <Text size="sm" color="muted">Track each case's status and print the right document for its stage</Text>
-          </View>
-          <TaoHoSoForm />
+        {/* header — title only; the New case action lives on the toolbar row */}
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">Cases & documents</Text>
+          <Text size="sm" color="muted">Track each case's status and print the right document for its stage</Text>
         </View>
 
-        {/* each count drills into the matching tab below; Fees collected carries
-            the chase ("n still unpaid") as its caption */}
-        <KPIStrip
-          items={[
-            { label: "Processing", value: dem("dangxuly") },
-            { label: "Awaiting docs", value: dem("chobosung"), tone: "warning", info: "Cases waiting on customer paperwork — chase these first; the tab below filters to them." },
-            { label: "Complete", value: dem("hoantat") },
-            {
-              label: "Fees collected",
-              value: phiDaThu,
-              format: "currency",
-              compact: true,
-              caption: `${chuaThu.length} cases unpaid · ${formatMoney(chuaThu.reduce((s, r) => s + r.phi, 0), { compact: true })}`,
-            },
-          ]}
-        />
-
-        {/* status chips (the hot dimension, inline) + a secondary Assignee
-            multi-select FilterChip — the same faceted band as Approvals */}
-        <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, alignItems: "center" }}>
-          <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
-            <SearchInput
-              placeholder="Search by ID, name, or phone…"
-              value={search}
-              onChangeText={doiTimKiem}
-              accessibilityLabel="Search cases"
-            />
-          </View>
-          <ChipGroup
-            accessibilityLabel="Filter by status"
-            options={TABS.map((t) => ({
-              label: `${t.label} · ${t.value === "all" ? HO_SO.length : dem(t.value)}`,
-              value: t.value,
-            }))}
-            value={tab}
-            onValueChange={chonTab}
-          />
-          <FilterChip
-            label="Assignee"
-            summary={assigneeSummary}
-            onClear={() => { setAssignee([]); setPage(0); }}
-            clearLabel="Clear assignee filter"
-          >
-            <OptionList
-              search={{ mode: "none" }}
-              multi
-              options={ASSIGNEES}
-              value={assignee}
-              onValueChange={(v) => { setAssignee(v); setPage(0); }}
+        {/* toolbar — search + consolidated filters LEFT, New case RIGHT, one row.
+            A search is present, so status is a dropdown (Select), not pills. */}
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+          <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 8, alignItems: "center", flex: 1 }}>
+            <View style={{ flexGrow: 1, flexBasis: 220, minWidth: 200, maxWidth: 340 }}>
+              <SearchInput
+                placeholder="Search by ID, name, or phone…"
+                value={search}
+                onChangeText={doiTimKiem}
+                accessibilityLabel="Search cases"
+              />
+            </View>
+            <Select
+              placeholder="Status"
+              options={TABS.map((t) => ({
+                label: `${t.label} · ${t.value === "all" ? HO_SO.length : dem(t.value)}`,
+                value: t.value,
+              }))}
+              value={tab}
+              onValueChange={chonTab}
+              accessibilityLabel="Filter by status"
             />
-          </FilterChip>
-          {/* Single-select sibling — the render-prop `close` shuts the popover on
-              pick (the multi above stays open to collect several values). */}
-          <FilterChip
-            label="Fee"
-            summary={feeStatus === "paid" ? "Paid" : feeStatus === "unpaid" ? "Unpaid" : undefined}
-            onClear={() => { setFeeStatus(null); setPage(0); }}
-            clearLabel="Clear fee filter"
-          >
-            {({ close }) => (
+            <FilterChip
+              label="Assignee"
+              summary={assigneeSummary}
+              onClear={() => { setAssignee([]); setPage(0); }}
+              clearLabel="Clear assignee filter"
+            >
               <OptionList
                 search={{ mode: "none" }}
-                options={[{ value: "paid", label: "Paid" }, { value: "unpaid", label: "Unpaid" }]}
-                value={feeStatus}
-                onValueChange={(v) => { setFeeStatus(v); setPage(0); }}
-                onRequestClose={close}
+                multi
+                options={ASSIGNEES}
+                value={assignee}
+                onValueChange={(v) => { setAssignee(v); setPage(0); }}
               />
-            )}
-          </FilterChip>
+            </FilterChip>
+            {/* Single-select sibling — the render-prop `close` shuts the popover on
+                pick (the multi above stays open to collect several values). */}
+            <FilterChip
+              label="Fee"
+              summary={feeStatus === "paid" ? "Paid" : feeStatus === "unpaid" ? "Unpaid" : undefined}
+              onClear={() => { setFeeStatus(null); setPage(0); }}
+              clearLabel="Clear fee filter"
+            >
+              {({ close }) => (
+                <OptionList
+                  search={{ mode: "none" }}
+                  options={[{ value: "paid", label: "Paid" }, { value: "unpaid", label: "Unpaid" }]}
+                  value={feeStatus}
+                  onValueChange={(v) => { setFeeStatus(v); setPage(0); }}
+                  onRequestClose={close}
+                />
+              )}
+            </FilterChip>
+          </View>
+          <TaoHoSoForm />
         </View>
 
+        {/* light summary of the filtered register — each count drills into the matching tab above */}
+        <SummaryLine
+          items={[
+            { label: "processing", value: dem("dangxuly") },
+            { label: "awaiting docs", value: dem("chobosung"), tone: "warning", info: "Cases waiting on customer paperwork — their record isn't complete, so they can't be ticked for export until the docs arrive." },
+            { label: "complete", value: dem("hoantat") },
+            { label: "fees collected", value: phiDaThu, format: "currency", compact: true },
+          ]}
+        />
+
         {/* the register — eyebrow band (Table header) → list rows → totals + paging */}
-        <Card style={{ padding: 0 }}>
-          <Table columns={COLUMNS} trailing={40} sort={sort} onSort={onSort}>
+        <View>
+          <Table
+            columns={COLUMNS}
+            leading={24}
+            trailing={132}
+            sort={sort}
+            onSort={onSort}
+            selectAll={
+              <CheckboxInput
+                accessibilityLabel="Select all cases on this page"
+                checked={sel.allSelected(selectableIds)}
+                indeterminate={sel.indeterminate(selectableIds)}
+                disabled={selectableIds.length === 0}
+                onChange={(on) => sel.setAll(selectableIds, on)}
+              />
+            }
+          >
             {pageRows.map((r) => (
-              <HoSoRow key={r.ma} hs={r} selected={r.ma === openMa} onPress={() => setOpenMa(r.ma)} />
+              <HoSoRow key={r.ma} hs={r} selected={r.ma === openMa} marked={sel.has(r.ma)} selectable={isSelectable(r)} onToggle={(on) => sel.toggle(r.ma, on)} onPress={() => setOpenMa(r.ma)} />
             ))}
           </Table>
           {pageRows.length === 0 ? (
@@ -410,8 +441,18 @@ export function TplDossier() {
               onPageChange={setPage}
             />
           </CardFooter>
-        </Card>
+        </View>
       </View>
+    </ScrollView>
+
+      {/* bulk action over the ticked cases — the shared floating bar */}
+      <FloatingActionBar
+        count={sel.count}
+        label={sel.count === 1 ? "case selected" : "cases selected"}
+        onClear={sel.clear}
+      >
+        <Button title="Export" color="primary" onPress={() => {}} />
+      </FloatingActionBar>
 
       {/* the case workspace — sequenced over the visible page ordering */}
       {openRow ? (
@@ -427,6 +468,6 @@ export function TplDossier() {
           <HoSoWorkspace key={openRow.ma} hs={openRow} />
         </Drawer>
       ) : null}
-    </ScrollView>
+    </View>
   );
 }

package/examples/tpl_lookup.tsx

@@ -191,7 +191,7 @@ export function TplLookup() {
   }));
 
   return (
-    <View style={{ flex: 1, flexDirection: "row", backgroundColor: colors.zinc[50] }}>
+    <View style={{ flex: 1, flexDirection: "row", backgroundColor: colors.white }}>
       {/* ── 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 }}>
@@ -249,7 +249,7 @@ export function TplLookup() {
         <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
           <View style={{ borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 16, backgroundColor: colors.white, overflow: "hidden" }}>
             {/* verdict header */}
-            <View style={{ padding: 22, gap: 10, backgroundColor: colors.zinc[50], borderBottomWidth: 1, borderBottomColor: colors.zinc[200] }}>
+            <View style={{ padding: 22, gap: 10, backgroundColor: colors.white, borderBottomWidth: 1, borderBottomColor: colors.zinc[200] }}>
               <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
                 <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Suggested HS code</Text>
                 <Confidence level={active.confidence} />

package/examples/tpl_match.tsx

@@ -16,7 +16,7 @@ import type { ConfidenceLevel } from "@lotics/ui/confidence";
 // (a known item ↔ the agent's proposed counterpart) with a confidence on the
 // bridge. High-confidence pairs batch-accept; the rest are worked one by one.
 // Same shape for bank-line ↔ invoice, invoice ↔ PO, dedup A ↔ B, entity
-// resolution. The deterministic cousin (tpl_reconcile) has no agent reasoning.
+// resolution. Strip the agent's reasoning and it's just a deterministic match register.
 // ─────────────────────────────────────────────────────────────────────────────
 
 interface M {
@@ -64,7 +64,7 @@ export function TplMatch() {
   const highOpen = open.filter((r) => r.confidence === "high" && r.match).length;
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
         <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
           <View style={{ flex: 1, gap: 2 }}>

package/examples/tpl_order.tsx

@@ -213,7 +213,7 @@ export function TplOrder() {
   const ready = customer !== null && lines.length > 0 && lines.every((l) => l.product !== "" && !l.editing);
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
         {/* header band */}
         <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>

package/examples/tpl_pick.tsx

@@ -2,9 +2,9 @@ import { useState } from "react";
 import { ScrollView, View } from "react-native";
 import { Text } from "@lotics/ui/text";
 import { colors, solid } from "@lotics/ui/colors";
+import { Accordion, AccordionContent, AccordionHeader, AccordionMeta, AccordionTitle } from "@lotics/ui/accordion";
 import { Badge } from "@lotics/ui/badge";
 import { Button } from "@lotics/ui/button";
-import { Card } from "@lotics/ui/card";
 import { ChipGroup } from "@lotics/ui/chip_group";
 import { Counter } from "@lotics/ui/counter";
 import { Divider } from "@lotics/ui/divider";
@@ -18,11 +18,11 @@ import { CompletionState } from "@lotics/ui/completion_state";
 // Template · Guided execution — 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. Two panes use the screen the way the work wants —
-// the CURRENT task large on the left (where to walk, what to take, how many), the
-// whole PICK PATH on the right (done · now · up next) so position is always in
-// view. Scan-to-verify, can't-skip ordering, and a short-pick exception that
-// flags-and-advances without stalling the run.
+// next task takes its place. A single focus column — the CURRENT task is the only
+// thing in view (where to walk, what to take, how many); the whole PICK PATH is a
+// COLLAPSIBLE section below, collapsed by default, so position is one tap away and
+// never competes with the task for the screen. Scan-to-verify, can't-skip
+// ordering, and a short-pick exception that flags-and-advances without stalling.
 // ─────────────────────────────────────────────────────────────────────────────
 
 interface PickLine {
@@ -92,7 +92,7 @@ function CurrentTask({ line, index, total, onConfirm, onShort }: {
   const [scan, setScan] = useState("");
   const matched = scan.trim().toUpperCase() === line.bin.toUpperCase();
   return (
-    <Card style={{ padding: 0 }}>
+    <View>
       <View style={{ padding: 24, gap: 18 }}>
         <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
           <Badge label={line.zone} color="blue" />
@@ -132,7 +132,7 @@ function CurrentTask({ line, index, total, onConfirm, onShort }: {
         <View style={{ flex: 1 }} />
         <Button title={`Confirm ${line.qty}`} color="primary" onPress={onConfirm} />
       </View>
-    </Card>
+    </View>
   );
 }
 
@@ -140,51 +140,42 @@ function Complete({ lines, onReset }: { lines: PickLine[]; onReset: () => void }
   const shorts = lines.filter((l) => l.status === "short").length;
   const units = lines.reduce((s, l) => s + (l.status === "short" ? l.picked ?? 0 : l.qty), 0);
   return (
-    <Card style={{ padding: 0 }}>
-      <CompletionState
-        title="Wave picked"
-        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={() => {}} />
-      </CompletionState>
-    </Card>
+    <CompletionState
+      title="Wave picked"
+      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={() => {}} />
+    </CompletionState>
   );
 }
 
-// The right rail — the whole run at a glance: done · now · up next. Read-only;
-// the run is sequential, so position is shown, not chosen.
+// 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 }) {
   return (
-    <Card style={{ padding: 0 }}>
-      <View style={{ paddingHorizontal: 16, paddingVertical: 12 }}>
-        <Text size="xs" color="muted" transform="uppercase">{`Pick path · ${lines.length} lines`}</Text>
-      </View>
-      <Divider />
-      <View style={{ paddingHorizontal: 16, paddingVertical: 14 }}>
-        <Stepper orientation="vertical" accessibilityLabel="Pick path">
-          {lines.map((l, i) => {
-            const status: StepStatus =
-              l.status === "short" ? "warning" : l.status === "picked" ? "done" : i === currentIndex ? "current" : "upcoming";
-            return (
-              <Step key={l.id} status={status}>
-                <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12, flex: 1 }}>
-                  <View style={{ flex: 1, gap: 1 }}>
-                    <Text size="sm">{l.bin}</Text>
-                    <Text size="xs" color="muted" numberOfLines={1}>{l.item}</Text>
-                  </View>
-                  {l.status === "short" ? (
-                    <Badge variant="dot" label={`${l.picked ?? 0} of ${l.qty}`} color="amber" />
-                  ) : (
-                    <Text size="sm" color="muted" tabular>{`×${l.qty}`}</Text>
-                  )}
-                </View>
-              </Step>
-            );
-          })}
-        </Stepper>
-      </View>
-    </Card>
+    <Stepper orientation="vertical" accessibilityLabel="Pick path">
+      {lines.map((l, i) => {
+        const status: StepStatus =
+          l.status === "short" ? "warning" : l.status === "picked" ? "done" : i === currentIndex ? "current" : "upcoming";
+        return (
+          <Step key={l.id} status={status}>
+            <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12, flex: 1 }}>
+              <View style={{ flex: 1, gap: 1 }}>
+                <Text size="sm">{l.bin}</Text>
+                <Text size="xs" color="muted" numberOfLines={1}>{l.item}</Text>
+              </View>
+              {l.status === "short" ? (
+                <Badge variant="dot" label={`${l.picked ?? 0} of ${l.qty}`} color="amber" />
+              ) : (
+                <Text size="sm" color="muted" tabular>{`×${l.qty}`}</Text>
+              )}
+            </View>
+          </Step>
+        );
+      })}
+    </Stepper>
   );
 }
 
@@ -203,8 +194,8 @@ export function TplPick() {
     setLines((prev) => prev.map((l) => (l.id === id ? { ...l, status, picked } : l)));
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 1000, alignSelf: "center", gap: 16 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 560, alignSelf: "center", gap: 16 }}>
         {/* header — the wave + the cart it's filling */}
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12, flexWrap: "wrap" }}>
           <View style={{ gap: 2, flex: 1 }}>
@@ -223,25 +214,30 @@ export function TplPick() {
           <ProgressBar value={done.length} max={lines.length} format="none" color={solid("blue")} />
         </View>
 
-        {/* two panes — the current task large, the whole path alongside it */}
-        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16, flexWrap: "wrap" }}>
-          <View style={{ flexGrow: 1.6, flexBasis: 440 }}>
-            {current ? (
-              <CurrentTask
-                line={current}
-                index={idx}
-                total={lines.length}
-                onConfirm={() => setStatus(current.id, "picked", current.qty)}
-                onShort={(actual) => setStatus(current.id, actual >= current.qty ? "picked" : "short", actual)}
-              />
-            ) : (
-              <Complete lines={lines} onReset={() => setLines(WAVE)} />
-            )}
-          </View>
-          <View style={{ flexGrow: 1, flexBasis: 320 }}>
+        {/* single focus — the current task is the only thing in view */}
+        {current ? (
+          <CurrentTask
+            line={current}
+            index={idx}
+            total={lines.length}
+            onConfirm={() => setStatus(current.id, "picked", current.qty)}
+            onShort={(actual) => setStatus(current.id, actual >= current.qty ? "picked" : "short", actual)}
+          />
+        ) : (
+          <Complete lines={lines} onReset={() => setLines(WAVE)} />
+        )}
+
+        {/* the whole route, secondary — a collapsed disclosure under the task,
+            never a persistent side panel */}
+        <Accordion defaultExpanded={false}>
+          <AccordionHeader accessibilityLabel="Pick path">
+            <AccordionTitle>Pick path</AccordionTitle>
+            <AccordionMeta>{`${done.length} of ${lines.length} done`}</AccordionMeta>
+          </AccordionHeader>
+          <AccordionContent>
             <RunPath lines={lines} currentIndex={idx} />
-          </View>
-        </View>
+          </AccordionContent>
+        </Accordion>
       </View>
     </ScrollView>
   );

package/examples/tpl_pivot.tsx

@@ -125,7 +125,7 @@ export function TplPivot() {
   const lowOrOut = SKUS.filter((s) => s.status !== "in_stock").length;
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 960, alignSelf: "center", gap: 16 }}>
         <View style={{ gap: 2 }}>
           <Text size="xl" weight="semibold">Stock distribution</Text>

package/examples/tpl_quick.tsx

@@ -104,7 +104,7 @@ export function TplQuick() {
   };
 
   return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
       <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
         <View style={{ gap: 2 }}>
           <Text size="xl" weight="semibold">Log activity</Text>

package/examples/tpl_ratedesk.tsx

@@ -174,7 +174,7 @@ export function TplRatedesk() {
 
   return (
     <>
-    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ paddingHorizontal: 24, paddingTop: 20, paddingBottom: 72, gap: 18 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ paddingHorizontal: 24, paddingTop: 20, paddingBottom: 72, gap: 18 }}>
       {/* HEADER BAND — the register is the page; updating prices is one CTA */}
       <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
         <View style={{ gap: 2, flex: 1 }}>