@lotics/ui 5.7.0 → 5.9.0

package/examples/tpl_extract.tsx

@@ -5,7 +5,7 @@ import { Text } from "@lotics/ui/text";
 import { Button } from "@lotics/ui/button";
 import { Card, CardBody, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
 import { FileDropzone } from "@lotics/ui/file_dropzone";
-import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
+import { AgentRun, type AgentRunStep, type AgentRunItem } from "@lotics/ui/agent_run";
 import { ReviewCard } from "@lotics/ui/review_card";
 import { RecordFields, type RecordField } from "@lotics/ui/record_fields";
 import { Sources } from "@lotics/ui/sources";
@@ -81,7 +81,8 @@ export function TplExtract() {
     return () => clearTimeout(t);
   }, [streaming, revealed]);
 
-  const steps: AgentRunStep[] = EXTRACT.slice(0, revealed).map((s, i) => ({
+  const items: AgentRunItem[] = EXTRACT.slice(0, revealed).map((s, i) => ({
+    type: "step",
     ...s,
     status: streaming && revealed < EXTRACT.length && i === revealed - 1 ? "running" : "done",
   }));
@@ -119,7 +120,7 @@ export function TplExtract() {
             <Text size="xl" weight="semibold">Capture packing list</Text>
             <Text size="sm" color="muted">Drop a photo; the agent extracts each line, you review and edit, then save them all to the table.</Text>
           </View>
-          {phase !== "intake" ? <Button title="Start over" color="muted" shape="rounded" onPress={reset} /> : null}
+          {phase !== "intake" ? <Button title="Start over" color="muted" onPress={reset} /> : null}
         </View>
 
         {phase === "intake" ? (
@@ -133,7 +134,7 @@ export function TplExtract() {
 
         {phase === "extracting" ? (
           <Card>
-            <AgentRun steps={steps} state={streaming ? "streaming" : "done"} />
+            <AgentRun items={items} state={streaming ? "streaming" : "done"} />
           </Card>
         ) : null}
 
@@ -167,12 +168,11 @@ export function TplExtract() {
               ))}
             </View>
             <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Button title="Confirm all" color="muted" shape="rounded" onPress={() => setStatuses(Object.fromEntries(RECORDS.map((r) => [r.id, "confirmed" as Status])))} />
+              <Button title="Confirm all" color="muted" onPress={() => setStatuses(Object.fromEntries(RECORDS.map((r) => [r.id, "confirmed" as Status])))} />
               <View style={{ flex: 1 }} />
               <Button
                 title={`Save ${confirmedCount} ${confirmedCount === 1 ? "line" : "lines"}`}
                 color="primary"
-                shape="rounded"
                 disabled={confirmedCount === 0}
                 onPress={() => setPhase("done")}
               />
@@ -183,7 +183,7 @@ export function TplExtract() {
         {phase === "done" ? (
           <Card>
             <CompletionState title={`${confirmedCount} lines saved`} summary="The confirmed lines were written to the shipment table.">
-              <Button title="Capture another" color="secondary" shape="rounded" onPress={reset} />
+              <Button title="Capture another" color="secondary" onPress={reset} />
             </CompletionState>
           </Card>
         ) : null}

package/examples/tpl_inventory.tsx

@@ -5,7 +5,7 @@ import { colors, solid } from "@lotics/ui/colors";
 import { Badge } from "@lotics/ui/badge";
 import { Button } from "@lotics/ui/button";
 import { ChipGroup } from "@lotics/ui/chip_group";
-import { FilterPill } from "@lotics/ui/filter_pill";
+import { FilterChip } from "@lotics/ui/filter_chip";
 import { RangeSlider, rangeSummary } from "@lotics/ui/range_slider";
 import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
 import { Card } from "@lotics/ui/card";
@@ -259,9 +259,9 @@ export function TplInventory() {
             value={loc}
             onValueChange={setLoc}
           />
-          <FilterPill label="Stock value" summary={amtSummary} onClear={() => setAmt([0, AMT_MAX])} clearLabel="Clear stock value filter">
+          <FilterChip label="Stock value" summary={amtSummary} onClear={() => setAmt([0, AMT_MAX])} clearLabel="Clear stock value filter">
             <RangeSlider min={0} max={AMT_MAX} step={5_000_000} value={amt} onValueChange={setAmt} format={fmtAmt} accessibilityLabel="Stock value" />
-          </FilterPill>
+          </FilterChip>
         </View>
 
         {/* the stock register: eyebrow band → Divider-separated SKU rows */}

package/examples/tpl_lookup.tsx

@@ -6,7 +6,7 @@ import { Divider } from "@lotics/ui/divider";
 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 } from "@lotics/ui/agent_run";
+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";
@@ -184,7 +184,8 @@ export function TplLookup() {
   };
 
   const streaming = phase === "running" && revealed < SCRIPT.length;
-  const steps: AgentRunStep[] = SCRIPT.slice(0, revealed).map((s, i) => ({
+  const items: AgentRunItem[] = SCRIPT.slice(0, revealed).map((s, i) => ({
+    type: "step",
     ...s,
     status: streaming && i === revealed - 1 ? "running" : "done",
   }));
@@ -201,7 +202,7 @@ export function TplLookup() {
 
         <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 16, gap: 16 }}>
           {/* current run */}
-          <AgentRun steps={steps} state={streaming ? "streaming" : "done"} />
+          <AgentRun items={items} state={streaming ? "streaming" : "done"} />
 
           <View style={{ gap: 8 }}>
             <Text size="xs" color="muted" weight="medium">Nearest matches</Text>

package/examples/tpl_match.tsx

@@ -72,7 +72,7 @@ export function TplMatch() {
             <Text size="sm" color="muted">The agent pairs incoming payments to open invoices — you confirm, reassign, or reject</Text>
           </View>
           {tab === "open" && highOpen > 0 ? (
-            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" shape="rounded" onPress={acceptAllHigh} />
+            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" onPress={acceptAllHigh} />
           ) : null}
         </View>
 

package/examples/tpl_order.tsx

@@ -477,7 +477,7 @@ export function TplOrder() {
         </Screen>
       </Dialog>
 
-      <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} captionHint="ESC to close · ←/→ to move" />
+      <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} />
     </ScrollView>
   );
 }

package/examples/tpl_ratedesk.tsx

@@ -13,7 +13,7 @@ import { FileDropzone } from "@lotics/ui/file_dropzone";
 import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
 import { type DisplayFile } from "@lotics/ui/file_thumbnail";
-import { AgentRun, type AgentRunStep } from "@lotics/ui/agent_run";
+import { AgentRun, type AgentRunItem } from "@lotics/ui/agent_run";
 import { Table, TableRow, TableCell, type TableColumn } from "@lotics/ui/table";
 import { InlineNumberInput } from "@lotics/ui/inline_number_input";
 import { CompletionState } from "@lotics/ui/completion_state";
@@ -167,8 +167,8 @@ export function TplRatedesk() {
     setPhase("done");
   }, [lines, decisions]);
 
-  const runSteps: AgentRunStep[] = READ_STEPS.slice(0, Math.min(revealed + 1, READ_STEPS.length)).map((s, i) => ({
-    id: `r${i}`, label: s.label, kind: s.kind, status: i < revealed ? "done" : "running",
+  const runItems: AgentRunItem[] = READ_STEPS.slice(0, Math.min(revealed + 1, READ_STEPS.length)).map((s, i) => ({
+    type: "step", id: `r${i}`, label: s.label, kind: s.kind, status: i < revealed ? "done" : "running",
   }));
   const newCount = lines.filter((l) => l.status === "new").length;
 
@@ -181,7 +181,7 @@ export function TplRatedesk() {
           <Text size="xl" weight="semibold">Rate desk</Text>
           <Text size="sm" color="muted">Look up any route, carrier or container. Prices come from carrier sheets — re-ingest to refresh.</Text>
         </View>
-        <Button title="Import prices" color="primary" shape="rounded" onPress={() => setImportOpen(true)} />
+        <Button title="Import prices" color="primary" onPress={() => setImportOpen(true)} />
       </View>
 
       {/* REGISTER — the live rate card, filter to anything */}
@@ -193,11 +193,11 @@ export function TplRatedesk() {
         <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
           <View style={{ flexDirection: "row", alignItems: "center", gap: 6, flexGrow: 1, flexBasis: 360, minWidth: 280 }}>
             <View style={{ flex: 1, minWidth: 120 }}>
-              <Combobox pill icon="map-pin" options={originOpts} recentOptions={originOpts} recentsLabel="Origin" value={fromV} onValueChange={setFromV} clearable onClear={() => setFromV(null)} placeholder="From" accessibilityLabel="Origin port" />
+              <Combobox icon="map-pin" options={originOpts} recentOptions={originOpts} recentsLabel="Origin" value={fromV} onValueChange={setFromV} clearable onClear={() => setFromV(null)} placeholder="From" accessibilityLabel="Origin port" />
             </View>
             <Icon name="arrow-right" size={14} color={colors.zinc[400]} />
             <View style={{ flex: 1, minWidth: 120 }}>
-              <Combobox pill icon="map-pin" options={destOpts} recentOptions={destOpts} recentsLabel="Destination" value={toV} onValueChange={setToV} clearable onClear={() => setToV(null)} placeholder="To" accessibilityLabel="Destination port" />
+              <Combobox icon="map-pin" options={destOpts} recentOptions={destOpts} recentsLabel="Destination" value={toV} onValueChange={setToV} clearable onClear={() => setToV(null)} placeholder="To" accessibilityLabel="Destination port" />
             </View>
           </View>
           <ColumnFilter column={carrierCol} value={carrierF} onChange={setCarrierF} clearLabel="Clear carrier" />
@@ -238,7 +238,7 @@ export function TplRatedesk() {
           </View>
         ) : null}
 
-        {phase === "reading" ? <AgentRun steps={runSteps} state="streaming" /> : null}
+        {phase === "reading" ? <AgentRun items={runItems} state="streaming" /> : null}
 
         {phase === "review" ? (
           <ChangeReview
@@ -270,8 +270,8 @@ export function TplRatedesk() {
           away inside the list. */}
       {phase === "idle" ? (
         <DialogFooter>
-          {files.length > 0 ? <Button title="Clear" color="muted" shape="rounded" onPress={() => setFiles([])} /> : null}
-          <Button title={files.length ? `Read ${files.length} sheets` : "Read sheets"} color="primary" shape="rounded" disabled={!files.length} onPress={() => { setRevealed(0); setPhase("reading"); }} />
+          {files.length > 0 ? <Button title="Clear" color="muted" onPress={() => setFiles([])} /> : null}
+          <Button title={files.length ? `Read ${files.length} sheets` : "Read sheets"} color="primary" disabled={!files.length} onPress={() => { setRevealed(0); setPhase("reading"); }} />
         </DialogFooter>
       ) : phase === "review" ? (
         <DialogFooter>
@@ -286,13 +286,13 @@ export function TplRatedesk() {
         </DialogFooter>
       ) : phase === "done" ? (
         <DialogFooter>
-          <Button title="Import more" color="secondary" shape="rounded" onPress={reset} />
-          <Button title="Done" color="primary" shape="rounded" onPress={closeImport} />
+          <Button title="Import more" color="secondary" onPress={reset} />
+          <Button title="Done" color="primary" onPress={closeImport} />
         </DialogFooter>
       ) : null}
     </Dialog>
 
-    <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} captionHint="ESC to close · ←/→ to move" />
+    <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} />
     </>
   );
 }

package/examples/tpl_record.tsx

@@ -295,7 +295,7 @@ export function TplRecord() {
         </Card>
       </View>
 
-      <FileGalleryModal files={docs} activeIndex={activeDoc} onIndexChange={setActiveDoc} captionHint="ESC to close · ←/→ to move" />
+      <FileGalleryModal files={docs} activeIndex={activeDoc} onIndexChange={setActiveDoc} />
     </ScrollView>
   );
 }

package/examples/tpl_report.tsx

@@ -15,7 +15,7 @@ import { EmptyState } from "@lotics/ui/empty_state";
 import { KPIStrip } from "@lotics/ui/kpi_strip";
 import { Link } from "@lotics/ui/link";
 import { Pagination } from "@lotics/ui/pagination";
-import { PillButton } from "@lotics/ui/pill_button";
+import { Chip } from "@lotics/ui/chip";
 import { SegmentedControl, type SegmentOption } from "@lotics/ui/segmented_control";
 import { formatMoney } from "@lotics/ui/format_money";
 import { formatDate, parseDate } from "@lotics/ui/format_date";
@@ -311,9 +311,9 @@ export function TplReport() {
             {chips.length > 0 ? (
               <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
                 {chips.map((c) => (
-                  <PillButton key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
+                  <Chip key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
                     <Text size="xs" weight="medium" color="muted">{c.label}</Text>
-                  </PillButton>
+                  </Chip>
                 ))}
               </View>
             ) : null}

package/examples/tpl_stock.tsx

@@ -12,7 +12,7 @@ import { Drawer } from "@lotics/ui/drawer";
 import { EmptyState } from "@lotics/ui/empty_state";
 import { KPIStrip } from "@lotics/ui/kpi_strip";
 import { Pagination } from "@lotics/ui/pagination";
-import { PillButton } from "@lotics/ui/pill_button";
+import { Chip } from "@lotics/ui/chip";
 import { PressableRow } from "@lotics/ui/pressable_row";
 import { SearchInput } from "@lotics/ui/search_input";
 import { formatMoney } from "@lotics/ui/format_money";
@@ -266,9 +266,9 @@ export function TplStock() {
             </CardHeaderTitle>
             <View style={{ flexDirection: "row", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
               {chips.map((c) => (
-                <PillButton key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
+                <Chip key={c.key} onDismiss={c.clear} dismissTooltip="Clear filter">
                   <Text size="xs" weight="medium" color="muted">{c.label}</Text>
-                </PillButton>
+                </Chip>
               ))}
               <View style={{ width: 240 }}>
                 <SearchInput

package/examples/tpl_triage.tsx

@@ -62,7 +62,7 @@ export function TplTriage() {
             <Text size="sm" color="muted">The agent classifies and routes each item — accept the call, override, or dismiss</Text>
           </View>
           {tab === "open" && highOpen > 0 ? (
-            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" shape="rounded" onPress={acceptAllHigh} />
+            <Button title={`Accept ${highOpen} high-confidence`} color="secondary" onPress={acceptAllHigh} />
           ) : null}
         </View>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.7.0",
+  "version": "5.9.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -18,6 +18,8 @@
     "./file_badge": "./src/file_badge.tsx",
     "./file_dropzone": "./src/file_dropzone.tsx",
     "./file_thumbnail": "./src/file_thumbnail.tsx",
+    "./file_row": "./src/file_row.tsx",
+    "./file_rows": "./src/file_rows.tsx",
     "./file_preview": {
       "react-native": "./src/file_preview.tsx",
       "default": "./src/file_preview.web.tsx"
@@ -29,6 +31,8 @@
     "./use_image_rotation": "./src/use_image_rotation.ts",
     "./use_selection_mode": "./src/use_selection_mode.ts",
     "./file_thumbnail_grid": "./src/file_thumbnail_grid.tsx",
+    "./uploading_thumbnail": "./src/uploading_thumbnail.tsx",
+    "./file_grid": "./src/file_grid.tsx",
     "./pagination": "./src/pagination.tsx",
     "./bar_chart": "./src/bar_chart.tsx",
     "./line_chart": "./src/line_chart.tsx",
@@ -133,8 +137,8 @@
     "./radio_picker": "./src/radio_picker.tsx",
     "./form_text_input": "./src/form_text_input.tsx",
     "./form_switch": "./src/form_switch.tsx",
-    "./pill_button": "./src/pill_button.tsx",
-    "./filter_pill": "./src/filter_pill.tsx",
+    "./chip": "./src/chip.tsx",
+    "./filter_chip": "./src/filter_chip.tsx",
     "./range_slider": "./src/range_slider.tsx",
     "./counter": "./src/counter.tsx",
     "./link": "./src/link.tsx",
@@ -192,7 +196,6 @@
     },
     "./use_async_fn": "./src/use_async_fn.ts",
     "./use_form": "./src/use_form.ts",
-    "./hover_action": "./src/hover_action.tsx",
     "./scroll_to_bottom": "./src/scroll_to_bottom.tsx",
     "./animation_fade_in": "./src/animation_fade_in.tsx",
     "./json_panel": "./src/json_panel.tsx",
@@ -233,6 +236,7 @@
     "expo-image": ">=3.0.0",
     "lucide-react": ">=0.460.0",
     "lucide-react-native": ">=0.460.0",
+    "pdfjs-dist": ">=6.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-native": ">=0.85.0",
@@ -246,6 +250,9 @@
     "@lotics/xlsx": {
       "optional": true
     },
+    "pdfjs-dist": {
+      "optional": true
+    },
     "expo-image": {
       "optional": true
     },
@@ -271,6 +278,7 @@
     "@types/react-dom": "~19.2.2",
     "@vitejs/plugin-react": "^4.3.4",
     "lucide-react": "^0.562.0",
+    "pdfjs-dist": "^6.0.227",
     "react-dom": "^19.2.0",
     "react-native-web": "^0.21.0",
     "vite": "^7.2.4"

package/src/agent_progress.tsx

@@ -4,19 +4,20 @@ import { colors } from "./colors";
 import { Text } from "./text";
 import { WaveAvatar } from "./wave_avatar";
 import { PressableHighlight } from "./pressable_highlight";
-import { AgentRun, resolveToolMeta, type AgentRunStep } from "./agent_run";
+import { AgentRun, resolveToolMeta, type AgentRunItem } from "./agent_run";
 
 export interface AgentProgressProps {
-  steps: AgentRunStep[];
+  /** The ordered transcript — same shape `AgentRun` takes. */
+  items: AgentRunItem[];
   state?: "streaming" | "done" | "error";
   /** The collapsed-pill label. Defaults to the running step's label (or
    *  "Working…" / "Done"). */
   label?: string;
-  /** The agent's streamed text — forwarded to the expanded `AgentRun`. */
-  text?: string;
   /** Localize / override a tool step's label by raw tool name — applied to both
    *  the collapsed pill and the expanded feed. */
   labelForTool?: (toolName: string) => string | undefined;
+  /** Localized "{n} steps" suffix, forwarded to the expanded feed. */
+  stepsLabel?: (n: number) => string;
   defaultExpanded?: boolean;
 }
 
@@ -29,15 +30,16 @@ export interface AgentProgressProps {
  * label, so the surface stays calm until you ask to see the steps.
  */
 export function AgentProgress(props: AgentProgressProps) {
-  const { steps, state = "streaming", label, text, labelForTool, defaultExpanded } = props;
+  const { items, state = "streaming", label, labelForTool, stepsLabel, defaultExpanded } = props;
   const [expanded, setExpanded] = useState(defaultExpanded ?? false);
 
-  const running = steps.filter((s) => s.status === "running").at(-1);
-  const runningLabel = running
-    ? running.kind === "tool"
-      ? resolveToolMeta(running.label, labelForTool).label
-      : running.label
-    : undefined;
+  const running = [...items].reverse().find((it) => it.type === "step" && it.status === "running");
+  const runningLabel =
+    running && running.type === "step"
+      ? running.kind === "tool"
+        ? resolveToolMeta(running.label, labelForTool).label
+        : running.label
+      : undefined;
   const compact = label ?? runningLabel ?? (state === "done" ? "Done" : state === "error" ? "Stopped" : "Working…");
   const streaming = state === "streaming";
 
@@ -46,7 +48,7 @@ export function AgentProgress(props: AgentProgressProps) {
       {expanded ? (
         <View style={styles.panel}>
           <ScrollView style={{ maxHeight: 260 }} contentContainerStyle={{ padding: 16 }}>
-            <AgentRun steps={steps} state={state} text={text} labelForTool={labelForTool} />
+            <AgentRun items={items} state={state} labelForTool={labelForTool} stepsLabel={stepsLabel} />
           </ScrollView>
         </View>
       ) : null}