@lotics/ui 7.19.2 → 8.0.0

package/examples/tpl_ratedesk.tsx

@@ -1,386 +0,0 @@
-import { useMemo, useState, useEffect, useCallback } from "react";
-import { View, ScrollView } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { Card } from "@lotics/ui/card";
-import { Button } from "@lotics/ui/button";
-import { Badge } from "@lotics/ui/badge";
-import { Icon } from "@lotics/ui/icon";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
-import { type PickerOption } from "@lotics/ui/picker";
-import { ColumnFilter, type FilterableColumn, type ColumnFilterValue } from "@lotics/ui/column_filter";
-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 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";
-import { ChangeReview, ChangeReviewActions, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
-import { Dialog, DialogHeader, DialogHeaderTitle, DialogScrollArea, DialogFooter } from "@lotics/ui/dialog";
-import { formatDate } from "@lotics/ui/format_date";
-import { colors, solid, type ColorName } from "@lotics/ui/colors";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Rate desk — the "AI bulk-ingest + filterable register" shape. The
-// page IS the queryable register (visit → search/filter → find any row); the
-// register is the hero, lookups are the frequent job. Updating prices is the
-// OCCASIONAL job, so it lives behind ONE header CTA that opens a Dialog wizard:
-// drop several source documents at once → an agent reads them all (`AgentRun`) →
-// it proposes a batch of NEW / UPDATED rows grouped by source, each editable →
-// review → commit → the dialog closes back to the register. The honest answer to
-// "live data": you don't fetch it, you re-ingest the source sheets in seconds.
-// Net-new rows get a "New" badge, updates show the old→new delta. Pairs
-// `tpl_extract`'s ingest (as a modal wizard) with `tpl_directory`'s filterable
-// register. All mock.
-// ─────────────────────────────────────────────────────────────────────────────
-
-const usd = (n: number | null) => (n == null ? "—" : n.toLocaleString("en-US"));
-const DAY = 86400000;
-
-// The live register — the rate card you filter. A couple of rows are near/past
-// validity so the staleness colour (amber ≤14 days · red expired) is visible.
-interface Rate { id: string; lane: string; carrier: string; unit: string; buy: number; sell: number; thc: number; lss: number; validUntil: Date }
-const d = (s: string) => new Date(s);
-const RATES: Rate[] = [
-  { id: "r1", lane: "HCM → Busan", carrier: "ONE", unit: "40'", buy: 480, sell: 680, thc: 100, lss: 45, validUntil: d("2026-12-31") },
-  { id: "r2", lane: "HCM → Hamburg", carrier: "Evergreen", unit: "40'HC", buy: 2600, sell: 2900, thc: 130, lss: 90, validUntil: d("2026-06-22") },
-  { id: "r3", lane: "HCM → Hamburg", carrier: "Evergreen", unit: "40'", buy: 2500, sell: 2800, thc: 130, lss: 90, validUntil: d("2026-06-22") },
-  { id: "r4", lane: "HCM → Hamburg", carrier: "Evergreen", unit: "20'", buy: 1500, sell: 1750, thc: 110, lss: 70, validUntil: d("2026-06-22") },
-  { id: "r5", lane: "HCM → Hamburg", carrier: "MSC", unit: "40'HC", buy: 2700, sell: 3000, thc: 135, lss: 95, validUntil: d("2026-06-08") },
-  { id: "r6", lane: "HCM → Los Angeles", carrier: "Maersk", unit: "40'HC", buy: 1950, sell: 2250, thc: 130, lss: 85, validUntil: d("2026-08-31") },
-  { id: "r7", lane: "HCM → Los Angeles", carrier: "ONE", unit: "20'", buy: 1050, sell: 1300, thc: 110, lss: 70, validUntil: d("2026-08-31") },
-  { id: "r8", lane: "HCM → Los Angeles", carrier: "ONE", unit: "40'HC", buy: 1850, sell: 2150, thc: 125, lss: 80, validUntil: d("2026-08-31") },
-  { id: "r9", lane: "Hai Phong → Singapore", carrier: "COSCO", unit: "20'", buy: 320, sell: 480, thc: 95, lss: 40, validUntil: d("2026-12-31") },
-  { id: "r10", lane: "Hai Phong → Singapore", carrier: "Evergreen", unit: "40'", buy: 520, sell: 720, thc: 100, lss: 45, validUntil: d("2026-12-31") },
-];
-
-type Status = "new" | "update";
-interface Line { id: string; carrier: string; lane: string; unit: string; buy: number; sell: number; thc: number; lss: number; validUntil: string; status: Status; prevBuy?: number; uncertain?: boolean }
-// New and Updated are two states of ONE dimension (the proposal vs the live
-// register), so they render through ONE Badge driven by this map — never a badge
-// for one and bare text for the other. New stands out (blue); Updated is the
-// quiet neutral default (a tonal Badge with no color).
-const STATUS_BADGE: Record<Status, { label: string; color?: ColorName }> = {
-  new: { label: "New", color: "blue" },
-  update: { label: "Updated" },
-};
-const EXTRACTED: Line[] = [
-  { id: "e1", carrier: "Evergreen", lane: "HCM → Hamburg", unit: "40'HC", buy: 2750, sell: 3050, thc: 135, lss: 95, validUntil: "31 Jul 2026", status: "update", prevBuy: 2600 },
-  { id: "e2", carrier: "Evergreen", lane: "HCM → Hamburg", unit: "40'", buy: 2650, sell: 2950, thc: 135, lss: 95, validUntil: "31 Jul 2026", status: "update", prevBuy: 2500 },
-  { id: "e3", carrier: "Evergreen", lane: "HCM → Rotterdam", unit: "40'HC", buy: 2800, sell: 3100, thc: 135, lss: 95, validUntil: "31 Jul 2026", status: "new", uncertain: true },
-  { id: "m1", carrier: "MSC", lane: "HCM → Hamburg", unit: "40'HC", buy: 2820, sell: 3120, thc: 138, lss: 98, validUntil: "30 Jun 2026", status: "update", prevBuy: 2700 },
-  { id: "m2", carrier: "MSC", lane: "HCM → Antwerp", unit: "40'HC", buy: 2880, sell: 3180, thc: 140, lss: 100, validUntil: "30 Jun 2026", status: "new" },
-  { id: "o1", carrier: "ONE", lane: "HCM → Los Angeles", unit: "40'HC", buy: 1900, sell: 2200, thc: 120, lss: 80, validUntil: "09 Jul 2026", status: "update", prevBuy: 1850 },
-  { id: "o2", carrier: "ONE", lane: "HCM → Oakland", unit: "40'HC", buy: 2000, sell: 2300, thc: 120, lss: 80, validUntil: "09 Jul 2026", status: "new" },
-  { id: "o3", carrier: "ONE", lane: "HCM → Busan", unit: "40'", buy: 500, sell: 700, thc: 120, lss: 80, validUntil: "09 Jul 2026", status: "update", prevBuy: 480 },
-];
-const READ_STEPS: { label: string; kind?: "step" | "tool" }[] = [
-  { label: "Read EVERGREEN sheet (FAK spot)", kind: "tool" },
-  { label: "Read MSC sheet (export tariff)", kind: "tool" },
-  { label: "Read ONE sheet (spot confirmation)", kind: "tool" },
-  { label: "Extract rate lines & match against the live card" },
-  { label: "Classify New / Updated by lane + carrier" },
-];
-
-type Phase = "idle" | "reading" | "review" | "done";
-
-export function TplRatedesk() {
-  // The register is LIVE state (seeded from RATES) so accepted proposals land in
-  // it on Apply; the filters + their options all derive from it.
-  const [rates, setRates] = useState<Rate[]>(RATES);
-
-  // ── filter the register: a From → To route picker (flight-search style — two
-  // comboboxes), then ColumnFilter pills for the secondary dimensions ──────────
-  const orig = (lane: string) => lane.split(" → ")[0] ?? lane;
-  const dest = (lane: string) => lane.split(" → ")[1] ?? lane;
-  const [fromV, setFromV] = useState<PickerOption | null>(null);
-  const [toV, setToV] = useState<PickerOption | null>(null);
-  const [carrierF, setCarrierF] = useState<ColumnFilterValue | undefined>();
-  const [unitF, setUnitF] = useState<ColumnFilterValue | undefined>();
-  const originOpts: PickerOption[] = [...new Set(rates.map((r) => orig(r.lane)))].sort().map((x) => ({ value: x, label: x }));
-  const destOpts: PickerOption[] = [...new Set(rates.map((r) => dest(r.lane)))].sort().map((x) => ({ value: x, label: x }));
-  const carrierCol: FilterableColumn = { key: "carrier", label: "Carrier", type: "select", options: [...new Set(rates.map((r) => r.carrier))].sort().map((x) => ({ value: x, label: x })) };
-  const unitCol: FilterableColumn = { key: "unit", label: "Container", type: "select", options: [...new Set(rates.map((r) => r.unit))].map((x) => ({ value: x, label: x })) };
-  const picked = (v: ColumnFilterValue | undefined) => (v?.kind === "select" ? v.selected : []);
-  const filtered = useMemo(() => rates.filter((r) => {
-    if (fromV && orig(r.lane) !== fromV.value) return false;
-    if (toV && dest(r.lane) !== toV.value) return false;
-    const cs = picked(carrierF), us = picked(unitF);
-    if (cs.length && !cs.includes(r.carrier)) return false;
-    if (us.length && !us.includes(r.unit)) return false;
-    return true;
-  }), [rates, fromV, toV, carrierF, unitF]);
-
-  // ── ingest flow — lives in a dialog opened from the header CTA ──────────────
-  const [importOpen, setImportOpen] = useState(false);
-  const [phase, setPhase] = useState<Phase>("idle");
-  const [files, setFiles] = useState<DisplayFile[]>([]);
-  const [activeFile, setActiveFile] = useState<number | null>(null);
-  const [lines, setLines] = useState<Line[]>([]);
-  const [decisions, setDecisions] = useState<Record<string, ChangeReviewItemStatus>>({});
-  const [savedCount, setSavedCount] = useState(0);
-
-  const onFiles = useCallback((fs: File[]) => setFiles((prev) => [
-    ...prev,
-    ...fs.map((f, i) => ({ id: `${f.name}-${prev.length + i}`, filename: f.name, mimeType: f.type || "application/octet-stream", url: URL.createObjectURL(f) })),
-  ]), []);
-  const removeFile = useCallback((id: string) => setFiles((prev) => prev.filter((f) => f.id !== id)), []);
-
-  const [revealed, setRevealed] = useState(0);
-  useEffect(() => {
-    if (phase !== "reading") return;
-    if (revealed >= READ_STEPS.length) {
-      const t = setTimeout(() => { setLines(EXTRACTED); setPhase("review"); }, 600);
-      return () => clearTimeout(t);
-    }
-    const t = setTimeout(() => setRevealed((r) => r + 1), revealed === 0 ? 120 : 640);
-    return () => clearTimeout(t);
-  }, [phase, revealed]);
-
-  const reset = useCallback(() => { setFiles([]); setLines([]); setDecisions({}); setRevealed(0); setPhase("idle"); }, []);
-  const closeImport = useCallback(() => { setImportOpen(false); reset(); }, [reset]);
-  const editLine = useCallback((id: string, k: "buy" | "sell", v: number | null) => {
-    if (v == null) return;
-    setLines((ls) => ls.map((l) => (l.id === id ? { ...l, [k]: v } : l)));
-  }, []);
-  const decide = useCallback((id: string, status: ChangeReviewItemStatus | null) => {
-    setDecisions((d) => { const n = { ...d }; if (status) n[id] = status; else delete n[id]; return n; });
-  }, []);
-
-  // Apply the KEPT proposals into the live register: an existing lane+carrier+unit
-  // is updated in place, a net-new one is appended. Nothing wrote until now.
-  const applyAccepted = useCallback(() => {
-    const accepted = lines.filter((l) => decisions[l.id] === "accepted");
-    setRates((prev) => {
-      const next = [...prev];
-      for (const l of accepted) {
-        const rate: Rate = { id: l.id, lane: l.lane, carrier: l.carrier, unit: l.unit, buy: l.buy, sell: l.sell, thc: l.thc, lss: l.lss, validUntil: new Date(l.validUntil) };
-        const idx = next.findIndex((r) => r.lane === l.lane && r.carrier === l.carrier && r.unit === l.unit);
-        if (idx >= 0) next[idx] = { ...rate, id: next[idx].id };
-        else next.push(rate);
-      }
-      return next;
-    });
-    setSavedCount(accepted.length);
-    setPhase("done");
-  }, [lines, decisions]);
-
-  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;
-
-  return (
-    <>
-    <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 }}>
-          <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" onPress={() => setImportOpen(true)} />
-      </View>
-
-      {/* REGISTER — the live rate card, filter to anything */}
-      <View style={{ gap: 12 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-          <Text size="sm" weight="semibold" style={{ flex: 1 }}>Rate card</Text>
-          <Text size="xs" color="muted" tabular>{filtered.length === rates.length ? `${rates.length} rates` : `${filtered.length}/${rates.length} rates`}</Text>
-        </View>
-        <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 options={originOpts} recentOptions={originOpts} value={fromV} onValueChange={setFromV}>
-                <ComboboxInput icon="map-pin" clearable onClear={() => setFromV(null)} placeholder="From" accessibilityLabel="Origin port" />
-                <ComboboxContent recentsLabel="Origin" />
-              </Combobox>
-            </View>
-            <Icon name="arrow-right" size={14} color={colors.zinc[400]} />
-            <View style={{ flex: 1, minWidth: 120 }}>
-              <Combobox options={destOpts} recentOptions={destOpts} value={toV} onValueChange={setToV}>
-                <ComboboxInput icon="map-pin" clearable onClear={() => setToV(null)} placeholder="To" accessibilityLabel="Destination port" />
-                <ComboboxContent recentsLabel="Destination" />
-              </Combobox>
-            </View>
-          </View>
-          <ColumnFilter column={carrierCol} value={carrierF} onChange={setCarrierF} clearLabel="Clear carrier" />
-          <ColumnFilter column={unitCol} value={unitF} onChange={setUnitF} clearLabel="Clear container" />
-        </View>
-        <Card style={{ padding: 0 }}>
-          {filtered.length === 0 ? (
-            <EmptyState icon="tag" message="No rates match" hint="Try another route or clear a filter." />
-          ) : (
-            <Table columns={CARD_COLS}>
-              {filtered.map((r) => (
-                <TableRow key={r.id} minHeight={44}>
-                  <TableCell><Text size="sm" weight="medium" numberOfLines={1}>{r.lane}</Text></TableCell>
-                  <TableCell><Text size="sm" numberOfLines={1}>{r.carrier}</Text></TableCell>
-                  <TableCell><Text size="sm" color="muted">{r.unit}</Text></TableCell>
-                  <TableCell><Text size="sm" tabular>{usd(r.buy)}</Text></TableCell>
-                  <TableCell><Text size="sm" weight="medium" tabular>{usd(r.sell)}</Text></TableCell>
-                  <TableCell><Text size="sm" color="muted" tabular>{r.thc}</Text></TableCell>
-                  <TableCell><Text size="sm" color="muted" tabular>{r.lss}</Text></TableCell>
-                  <TableCell><ValidityCell d={r.validUntil} /></TableCell>
-                </TableRow>
-              ))}
-            </Table>
-          )}
-        </Card>
-      </View>
-    </ScrollView>
-
-    {/* IMPORT WIZARD — the AI bulk-ingest flow, drop → read → review → commit */}
-    <Dialog open={importOpen} onOpenChange={(o) => { if (!o) closeImport(); }} maxWidth={940}>
-      <DialogHeader><DialogHeaderTitle>Import prices</DialogHeaderTitle></DialogHeader>
-      <DialogScrollArea>
-        {phase === "idle" ? (
-          <View style={{ gap: 12 }}>
-            {files.length > 0 ? <FileThumbnailGrid files={files} itemSize={96} onRemove={removeFile} onFilePress={(f) => setActiveFile(files.findIndex((x) => x.id === f.id))} /> : null}
-            <FileDropzone onFiles={onFiles} accept="image/*,application/pdf" multiple height={files.length > 0 ? 96 : 168} label={files.length > 0 ? "Add more sheets" : "Drop carrier rate sheets here"} hint="several at once · one sheet per carrier · JPG, PNG, PDF" />
-            {files.length > 0 ? <Text size="sm" color="muted" tabular>{files.length} sheets · click to view, ✕ to drop</Text> : null}
-          </View>
-        ) : null}
-
-        {phase === "reading" ? <AgentRun items={runItems} state="streaming" /> : null}
-
-        {phase === "review" ? (
-          <ChangeReview
-            title="Suggested rates"
-            summary={`${newCount} new · ${lines.length - newCount} updated — keep or drop each, edit any price, then apply. A ⚠ line is worth double-checking.`}
-            items={lines}
-            getKey={(l) => l.id}
-            statusOf={(l) => decisions[l.id] ?? "pending"}
-            renderItem={(l) => <RateProposal line={l} onEdit={editLine} />}
-            renderSummary={(l, kept) => (
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                <Text size="sm" weight="medium" numberOfLines={1}>{l.lane}</Text>
-                <Text size="xs" color="muted" numberOfLines={1} tabular style={[{ flex: 1 }, kept ? undefined : { textDecorationLine: "line-through" }]}>{l.carrier} · {l.unit} · sell {usd(l.sell)}</Text>
-              </View>
-            )}
-            onAcceptItem={(i) => decide(lines[i].id, "accepted")}
-            onRejectItem={(i) => decide(lines[i].id, "rejected")}
-            onUndoItem={(i) => decide(lines[i].id, null)}
-          />
-        ) : null}
-
-        {phase === "done" ? (
-          <CompletionState title={`${savedCount} rates updated`} summary="The rate card is ready for quoting — new lanes and price changes are in." />
-        ) : null}
-      </DialogScrollArea>
-
-      {/* idle / review / done carry footer actions; reading just streams. The
-          review commit bar pins HERE via ChangeReviewActions — it never scrolls
-          away inside the list. */}
-      {phase === "idle" ? (
-        <DialogFooter>
-          {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>
-          <ChangeReviewActions
-            items={lines}
-            statusOf={(l) => decisions[l.id] ?? "pending"}
-            onAcceptItem={(i) => decide(lines[i].id, "accepted")}
-            onApply={applyAccepted}
-            onDiscard={reset}
-            applyLabel={`Apply ${lines.filter((l) => decisions[l.id] === "accepted").length} kept`}
-          />
-        </DialogFooter>
-      ) : phase === "done" ? (
-        <DialogFooter>
-          <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} />
-    </>
-  );
-}
-
-function ValidityCell({ d }: { d: Date | null }) {
-  if (!d) return <Text size="sm" color="muted">—</Text>;
-  const days = Math.floor((d.getTime() - Date.now()) / DAY);
-  if (days < 0) return <Text size="sm" weight="medium" tabular style={{ color: solid("red") }}>Expired</Text>;
-  if (days <= 14) return <Text size="sm" weight="medium" tabular style={{ color: solid("amber") }}>{formatDate(d)}</Text>;
-  return <Text size="sm" color="muted" tabular>{formatDate(d)}</Text>;
-}
-
-// The compositional body for a proposed rate inside ChangeReview. The ROUTE is
-// the identity (origin → dest, the arrow a quiet connector); the price BAND is
-// the decision — Buy and Sell editable, Margin (sell − buy) derived as the number
-// a forwarder actually decides on. An update shows what the buy WAS underneath.
-const PRICE_H = 40; // matches InlineNumberInput's resting height, so the band aligns
-
-function RateProposal({ line, onEdit }: { line: Line; onEdit: (id: string, k: "buy" | "sell", v: number | null) => void }) {
-  const [o, d] = line.lane.split(" → ");
-  return (
-    <View style={{ gap: 16 }}>
-      {/* identity — the route + who/what, status to the right */}
-      <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 10 }}>
-        <View style={{ flex: 1, gap: 3 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 7 }}>
-            {line.uncertain ? <View style={{ width: 6, height: 6, borderRadius: 999, backgroundColor: solid("amber") }} /> : null}
-            <Text size="sm" weight="semibold" numberOfLines={1}>{o}</Text>
-            <Icon name="arrow-right" size={13} color={colors.zinc[400]} />
-            <Text size="sm" weight="semibold" numberOfLines={1}>{d ?? line.lane}</Text>
-          </View>
-          <Text size="xs" color="muted">{line.carrier} · {line.unit}</Text>
-        </View>
-        <Badge color={STATUS_BADGE[line.status].color} label={STATUS_BADGE[line.status].label} />
-      </View>
-
-      {/* the decision band — Buy / Sell / Margin, tabular, editable */}
-      <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
-        <PriceField label="Buy" prev={line.prevBuy} value={line.buy} laneLabel={line.lane} onSave={(v) => onEdit(line.id, "buy", v)} />
-        <PriceField label="Sell" value={line.sell} laneLabel={line.lane} onSave={(v) => onEdit(line.id, "sell", v)} />
-        <Metric label="Margin" value={`+${usd(line.sell - line.buy)}`} />
-      </View>
-
-      <Text size="xs" color="muted" tabular>Valid to {line.validUntil} · THC {line.thc} · LSS {line.lss}</Text>
-    </View>
-  );
-}
-
-function PriceField({ label, prev, value, laneLabel, onSave }: { label: string; prev?: number; value: number; laneLabel: string; onSave: (v: number | null) => void }) {
-  const up = prev != null && value > prev;
-  return (
-    <View style={{ flex: 1, gap: 2 }}>
-      <Text size="xs" color="muted" weight="medium" style={{ paddingHorizontal: 8 }}>{label}</Text>
-      <InlineNumberInput value={value} accessibilityLabel={`${label} ${laneLabel}`} format={usd} onSave={onSave} />
-      {prev != null && prev !== value ? (
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 3, paddingHorizontal: 8 }}>
-          <Icon name={up ? "arrow-up" : "arrow-down"} size={11} color={up ? solid("amber") : solid("emerald")} />
-          <Text size="xs" tabular style={{ color: up ? solid("amber") : solid("emerald") }}>was {usd(prev)}</Text>
-        </View>
-      ) : null}
-    </View>
-  );
-}
-
-function Metric({ label, value }: { label: string; value: string }) {
-  return (
-    <View style={{ flex: 1, gap: 2 }}>
-      <Text size="xs" color="muted" weight="medium" style={{ paddingHorizontal: 8 }}>{label}</Text>
-      <View style={{ height: PRICE_H, justifyContent: "center", paddingHorizontal: 8 }}>
-        <Text size="sm" weight="medium" tabular>{value}</Text>
-      </View>
-    </View>
-  );
-}
-
-const CARD_COLS: TableColumn[] = [
-  { key: "lane", label: "Lane", flex: 1.5 },
-  { key: "carrier", label: "Carrier", flex: 1.2 },
-  { key: "unit", label: "Container", width: 96 },
-  { key: "buy", label: "Buy", width: 80, align: "right" },
-  { key: "sell", label: "Sell", width: 80, align: "right" },
-  { key: "thc", label: "THC", width: 60, align: "right" },
-  { key: "lss", label: "LSS", width: 60, align: "right" },
-  { key: "valid", label: "Valid to", width: 108, align: "right" },
-];

package/examples/tpl_triage.tsx

@@ -1,112 +0,0 @@
-import { useState } from "react";
-import { ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
-import { KPIStrip } from "@lotics/ui/kpi_strip";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { TriageRow } from "@lotics/ui/triage_row";
-import type { ConfidenceLevel } from "@lotics/ui/confidence";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Triage — an inbox the agent has CLASSIFIED and routed. Each item
-// carries the agent's category and a suggested action with a confidence; the
-// human accepts the call, overrides it, or dismisses the item. High-confidence
-// items batch-accept so attention goes to the ambiguous ones. Leads, support
-// tickets, inbound documents, emails. The agent does the sorting; the human
-// keeps the decision.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface T {
-  id: string;
-  title: string;
-  preview: string;
-  meta: string;
-  category: { label: string };
-  suggestedAction: string;
-  confidence: ConfidenceLevel;
-  status: "open" | "accepted" | "dismissed";
-}
-
-const SEED: T[] = [
-  { id: "t1", title: "RFQ — 2×40HC Cát Lái → Hamburg, reefer", preview: "Hi, we need a quote for two reefer containers of frozen shrimp departing next week…", meta: "08:12", category: { label: "Sales" }, suggestedAction: "Assign to Nguyen", confidence: "high", status: "open" },
-  { id: "t2", title: "Where is my shipment HBL-4471?", preview: "Customer asking for an ETA update on the Hamburg booking, getting anxious about demurrage…", meta: "08:39", category: { label: "Support" }, suggestedAction: "Send ETA, open ticket", confidence: "high", status: "open" },
-  { id: "t3", title: "Invoice INV-2026-0318 — payment confirmation", preview: "Attached the TT receipt for 41,300,000 ₫, please confirm and release the documents…", meta: "09:02", category: { label: "Billing" }, suggestedAction: "Apply the payment", confidence: "high", status: "open" },
-  { id: "t4", title: "Re: partnership opportunity (sponsored)", preview: "Boost your logistics with our revolutionary platform, limited-time offer just for you…", meta: "09:15", category: { label: "Spam" }, suggestedAction: "Move to spam", confidence: "high", status: "open" },
-  { id: "t5", title: "Complaint — damaged cartons on delivery", preview: "Three cartons arrived crushed, we need a claim opened and a replacement schedule…", meta: "09:41", category: { label: "Support" }, suggestedAction: "Open a damage claim", confidence: "medium", status: "open" },
-  { id: "t6", title: "Quote request — air freight, urgent samples", preview: "Need 12 kg of samples to Rotterdam by Friday, what's the fastest option and cost…", meta: "10:03", category: { label: "Sales" }, suggestedAction: "Assign to the air desk", confidence: "medium", status: "open" },
-  { id: "t7", title: "Updated bank details for remittance", preview: "Please update our account for future payments to the following beneficiary…", meta: "10:20", category: { label: "Billing" }, suggestedAction: "Hold — verify sender first", confidence: "low", status: "open" },
-  { id: "t8", title: "Newsletter: port congestion outlook Q3", preview: "Our latest market report on Asia–Europe capacity and rate trends is now available…", meta: "Yesterday", category: { label: "Spam" }, suggestedAction: "Move to spam", confidence: "medium", status: "accepted" },
-];
-
-export function TplTriage() {
-  const [rows, setRows] = useState<T[]>(SEED);
-  const [tab, setTab] = useState<"open" | "resolved">("open");
-
-  const set = (id: string, status: T["status"]) => setRows((prev) => prev.map((r) => (r.id === id ? { ...r, status } : r)));
-  const acceptAllHigh = () => setRows((prev) => prev.map((r) => (r.status === "open" && r.confidence === "high" ? { ...r, status: "accepted" } : r)));
-
-  const open = rows.filter((r) => r.status === "open");
-  const resolved = rows.filter((r) => r.status !== "open");
-  const visible = tab === "open" ? open : resolved;
-  const highOpen = open.filter((r) => r.confidence === "high").length;
-  const review = open.filter((r) => r.confidence !== "high").length;
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 820, alignSelf: "center", gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
-          <View style={{ flex: 1, gap: 2 }}>
-            <Text size="xl" weight="semibold">Inbox triage</Text>
-            <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" onPress={acceptAllHigh} />
-          ) : null}
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "New", value: open.length, format: "number", caption: "awaiting triage" },
-            { label: "Ready to auto-route", value: highOpen, format: "number", info: "High-confidence items the agent is sure about — safe to accept in bulk." },
-            { label: "Needs review", value: review, format: "number", tone: review > 0 ? "warning" : "default", info: "Medium / low confidence — the agent flagged these for a human to confirm the routing." },
-            { label: "Handled", value: rows.filter((r) => r.status === "accepted").length, format: "number" },
-          ]}
-        />
-
-        <SegmentedControl
-          accessibilityLabel="Queue"
-          options={[
-            { label: `New · ${open.length}`, value: "open" },
-            { label: `Handled · ${resolved.length}`, value: "resolved" },
-          ]}
-          value={tab}
-          onValueChange={setTab}
-        />
-
-        {visible.length === 0 ? (
-          <EmptyState icon="circle-check" message={tab === "open" ? "Inbox zero" : "Nothing handled yet"} hint={tab === "open" ? "Every item has been routed or dismissed" : undefined} />
-        ) : (
-          <View style={{ gap: 10 }}>
-            {visible.map((r) => (
-              <TriageRow
-                key={r.id}
-                title={r.title}
-                preview={r.preview}
-                meta={r.meta}
-                category={r.category}
-                suggestedAction={r.suggestedAction}
-                confidence={r.confidence}
-                status={r.status}
-                onAccept={() => set(r.id, "accepted")}
-                onOverride={() => {}}
-                onDismiss={() => set(r.id, "dismissed")}
-              />
-            ))}
-          </View>
-        )}
-      </View>
-    </ScrollView>
-  );
-}

package/src/discrepancy.tsx

@@ -1,114 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { colors, solid } from "./colors";
-import { Text } from "./text";
-import { Icon } from "./icon";
-import { Badge } from "./badge";
-import { Button } from "./button";
-import { CardSelectItem } from "./card_select_item";
-
-export interface DiscrepancyValue {
-  /** Where this value came from — the document / record / system of record. */
-  source: string;
-  value: string;
-  /** The agent's recommended truth among the conflicting values. */
-  recommended?: boolean;
-}
-
-export interface DiscrepancyProps {
-  /** The field that disagrees across sources. */
-  field: string;
-  /** The agent's explanation of the conflict — shown above the options so the
-   *  human reads WHY before picking. */
-  note?: string;
-  values: DiscrepancyValue[];
-  /** Resolve the conflict by picking a value (index into `values`) — pressing a
-   *  card commits it; there is no separate confirm button. */
-  onResolve?: (index: number) => void;
-  /** Send for manual handling instead of picking. */
-  onFlag?: () => void;
-  /** Resolved → the chosen index settles the card. */
-  resolvedIndex?: number;
-  flagged?: boolean;
-}
-
-/**
- * A field whose value DISAGREES across sources — the unit of an AI cross-check
- * / audit. The agent's explanation sits up top; below it the conflicting values
- * are identical selectable cards (the global press/hover ring), the one the
- * agent believes carrying a neutral "Agent's pick" tag — NOT a pre-selected
- * highlight. Pressing a card resolves the conflict to it — no confirm step.
- * Symmetric, unlike `ChangeReview`'s before→after.
- */
-export function Discrepancy(props: DiscrepancyProps) {
-  const { field, values, note, onResolve, onFlag, resolvedIndex, flagged } = props;
-  const resolved = resolvedIndex != null || flagged === true;
-
-  return (
-    <View style={[styles.card, resolved ? styles.resolved : null]}>
-      <Text size="sm" weight="semibold" numberOfLines={1}>
-        {field}
-      </Text>
-
-      {resolved ? (
-        <View style={styles.outcome}>
-          <Icon name={flagged ? "triangle-alert" : "circle-check"} size={15} color={flagged ? solid("amber") : solid("emerald")} />
-          <Text size="sm" color="muted">
-            {flagged
-              ? "Flagged for manual review"
-              : `Resolved to ${values[resolvedIndex as number].source} — ${values[resolvedIndex as number].value}`}
-          </Text>
-        </View>
-      ) : (
-        <>
-          {note ? (
-            <Text size="sm" color="muted">
-              {note}
-            </Text>
-          ) : null}
-
-          <View style={styles.values}>
-            {values.map((v, i) => (
-              <CardSelectItem
-                key={`${v.source}-${i}`}
-                accessibilityLabel={`Resolve ${field} to ${v.source}: ${v.value}`}
-                onPress={() => onResolve?.(i)}
-                style={styles.valueBox}
-              >
-                <Text size="sm" color="muted" numberOfLines={1} style={{ flexShrink: 1 }}>
-                  {v.source}
-                </Text>
-                <View style={{ flex: 1 }} />
-                {v.recommended ? <Badge label="Agent's pick" /> : null}
-                <Text size="md" weight="semibold" tabular>
-                  {v.value}
-                </Text>
-              </CardSelectItem>
-            ))}
-          </View>
-
-          {onFlag ? (
-            <View style={styles.footer}>
-              <Button title="Flag for review" color="muted" onPress={onFlag} />
-            </View>
-          ) : null}
-        </>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  card: {
-    borderWidth: 1,
-    borderColor: colors.border,
-    backgroundColor: colors.white,
-    borderRadius: 12,
-    padding: 16,
-    gap: 12,
-  },
-  resolved: { backgroundColor: colors.zinc[50] },
-  outcome: { flexDirection: "row", alignItems: "center", gap: 8 },
-  values: { gap: 8 },
-  valueBox: { flexDirection: "row", alignItems: "center", gap: 12, paddingVertical: 12, paddingHorizontal: 14 },
-  footer: { flexDirection: "row", justifyContent: "flex-end" },
-});