@lotics/ui 7.19.3 → 9.0.0

package/examples/tpl_lookup.tsx

@@ -7,7 +7,6 @@ import { Callout, CalloutText, CalloutTitle } from "@lotics/ui/callout";
 import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { Composer } from "@lotics/ui/composer";
 import { AgentRun, type AgentRunStep, type AgentRunItem } from "@lotics/ui/agent_run";
-import { SpecList, type SpecRow } from "@lotics/ui/spec_list";
 import { Confidence, type ConfidenceLevel } from "@lotics/ui/confidence";
 import { Badge } from "@lotics/ui/badge";
 import { Sources, type SourceRef } from "@lotics/ui/sources";
@@ -19,7 +18,7 @@ import { Sources, type SourceRef } from "@lotics/ui/sources";
 // single confident verdict: classification is ambiguous, so the alternatives are
 // first-class (the prep/pack push the goods to a different code with a different
 // duty). The answer is a panel of scannable components — the code, the exact duty
-// breakdown (SpecList), the policies, the sources. Refine the description ("what
+// breakdown (hand-composed spec rows), the policies, the sources. Refine the description ("what
 // if it's pre-cooked?") and the ranking updates. Same shape for any
 // look-up-and-explain: tariff/HS, fee lookup, policy Q&A, a spec/compliance desk.
 // ─────────────────────────────────────────────────────────────────────────────
@@ -46,7 +45,6 @@ interface Candidate {
 // One query, several plausible HS codes — the agent RANKS them; the declarant
 // picks. The prep and the pack push the goods to a different code with a
 // different duty, which is exactly why a single confident verdict is wrong.
-const QUERY = "Black tiger shrimp, headless shell-on, IQF frozen, 1 kg retail packs";
 
 const CANDIDATES: Candidate[] = [
   {
@@ -204,9 +202,11 @@ export function TplLookup() {
           {/* current run */}
           <AgentRun items={items} state={streaming ? "streaming" : "done"} />
 
+          {/* Matches surface only once the run settles — the agent's output,
+              never a pre-filled list; they sit at the bottom, under the run. */}
+          {phase === "ready" ? (
           <View style={{ gap: 8 }}>
             <Text size="xs" color="muted" weight="medium">Nearest matches</Text>
-            <Text size="xs" color="muted" numberOfLines={2}>{QUERY}</Text>
             {CANDIDATES.map((c) => (
               <PressableHighlight
                 key={c.id}
@@ -231,6 +231,7 @@ export function TplLookup() {
               </PressableHighlight>
             ))}
           </View>
+          ) : null}
         </ScrollView>
 
         <View style={{ padding: 12, borderTopWidth: 1, borderTopColor: colors.zinc[200] }}>
@@ -247,9 +248,9 @@ export function TplLookup() {
       {/* ── 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={{ borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 16, backgroundColor: colors.white, overflow: "hidden" }}>
-            {/* verdict header */}
-            <View style={{ padding: 22, gap: 10, backgroundColor: colors.white, borderBottomWidth: 1, borderBottomColor: colors.zinc[200] }}>
+          <View style={{ gap: 4 }}>
+            {/* verdict header — open, no card box: the panel IS the answer */}
+            <View style={{ paddingVertical: 6, gap: 10 }}>
               <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} />
@@ -258,21 +259,22 @@ export function TplLookup() {
               <Text size="sm" color="muted">{active.heading}</Text>
             </View>
 
-            <View style={{ padding: 22, gap: 18 }}>
+            <Divider />
+            <View style={{ paddingVertical: 16, gap: 18 }}>
               <View style={{ borderLeftWidth: 2, borderLeftColor: colors.zinc[300], paddingLeft: 12 }}>
                 <Text size="sm" color="muted">{active.basis}</Text>
               </View>
 
               <View style={{ gap: 8 }}>
                 <Text size="sm" weight="semibold">Duty & tax</Text>
-                <SpecList rows={active.duty} total={active.dutyTotal} />
+                <SpecRows rows={active.duty} total={active.dutyTotal} />
               </View>
 
               <Divider />
 
               <View style={{ gap: 8 }}>
                 <Text size="sm" weight="semibold">Classification basis</Text>
-                <SpecList rows={active.specs} dense />
+                <SpecRows rows={active.specs} dense />
               </View>
 
               {active.policies.length > 0 ? (
@@ -300,3 +302,28 @@ export function TplLookup() {
     </View>
   );
 }
+
+// The structured label → value breakdown behind the answer — the duty table,
+// the classification basis. Hand-composed two-column rows: hierarchy from
+// weight and tabular figures; the total pins under a divider.
+interface SpecRow { label: string; value: string }
+
+function SpecRows({ rows, total, dense }: { rows: SpecRow[]; total?: SpecRow; dense?: boolean }) {
+  const line = (row: SpecRow, isTotal?: boolean) => (
+    <View key={row.label} style={{ flexDirection: "row", alignItems: "baseline", justifyContent: "space-between", gap: 16, minHeight: dense ? 26 : 32 }}>
+      <Text size={dense ? "xs" : "sm"} color={isTotal ? "default" : "muted"} weight={isTotal ? "semibold" : "regular"} numberOfLines={1} style={{ flexShrink: 1 }}>{row.label}</Text>
+      <Text size={dense && !isTotal ? "sm" : "md"} weight={isTotal ? "semibold" : "medium"} tabular>{row.value}</Text>
+    </View>
+  );
+  return (
+    <View>
+      {rows.map((r) => line(r))}
+      {total ? (
+        <>
+          <Divider paddingVertical={dense ? 5 : 7} />
+          {line(total, true)}
+        </>
+      ) : null}
+    </View>
+  );
+}

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 execution — 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
@@ -100,7 +100,7 @@ function CurrentTask({ line, index, total, onConfirm, onShort }: {
         </View>
         {/* the bin is the biggest thing on screen — it's where you walk */}
         <View style={{ gap: 2 }}>
-          <Text size="xs" color="muted" transform="uppercase">Go to bin</Text>
+          <Text size="xs" color="muted" weight="medium">Go to bin</Text>
           <Text size="xxl" weight="semibold" tabular>{line.bin}</Text>
         </View>
         <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 16, flexWrap: "wrap" }}>
@@ -199,7 +199,7 @@ export function TplPick() {
         {/* 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 }}>
-            <Text size="xl" weight="semibold">Pick wave W-0142</Text>
+            <Text size="xl" weight="semibold">Queue W-0142</Text>
             <Text size="sm" color="muted">7 lines for 3 outbound orders · Cart C-07</Text>
           </View>
           <Button title="Pause wave" color="muted" onPress={() => {}} />

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 desk — 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