@lotics/ui 7.19.3 → 8.0.0

package/examples/tpl_extract.tsx

@@ -1,193 +0,0 @@
-import { useEffect, useState } from "react";
-import { ScrollView, View } from "react-native";
-import { colors } from "@lotics/ui/colors";
-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, 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";
-import { CompletionState } from "@lotics/ui/completion_state";
-import { type ConfidenceLevel } from "@lotics/ui/confidence";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · AI extract & confirm — read an image, then review each extracted
-// RECORD before it's added to a table. Drop a photo → the agent extracts the
-// lines (AgentRun) → each lands as a `ReviewCard` wrapping a `RecordFields` body
-// whose fields are click-to-edit; Confirm collapses it to a tidy checklist row (Undo to re-open),
-// Remove skips it → Save all writes the confirmed lines at once. A one-shot
-// capture pass: nothing is stored until the human has reviewed it. All mock.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type ScriptStep = Omit<AgentRunStep, "status">;
-type Phase = "intake" | "extracting" | "review" | "done";
-type Status = "pending" | "confirmed" | "removed";
-
-const EXTRACT: ScriptStep[] = [
-  { id: "x1", label: "Reading the packing list", detail: "A photo of a 3-line shipping manifest." },
-  { id: "x2", label: "detect_table", kind: "tool" },
-  { id: "x3", label: "Extracting the line items", detail: "Description, HS code, quantity, weight and value per carton." },
-  { id: "x4", label: "classify_hs_codes", kind: "tool" },
-];
-
-interface RecordData {
-  id: string;
-  title: string;
-  confidence: ConfidenceLevel;
-  fields: RecordField[];
-}
-const RECORDS: RecordData[] = [
-  { id: "r1", title: "Carton 1 — Frozen shrimp", confidence: "high", fields: [
-    { label: "HS code", value: "0306.17.10" },
-    { label: "Quantity", value: "120", unit: "ctn" },
-    { label: "Net weight", value: "1,200", unit: "kg" },
-    { label: "Value (FOB)", value: "86,200,000", unit: "₫" },
-  ] },
-  { id: "r2", title: "Carton 2 — Cotton T-shirts", confidence: "medium", fields: [
-    { label: "HS code", value: "6109.10.00", uncertain: true },
-    { label: "Quantity", value: "500", unit: "pcs" },
-    { label: "Net weight", value: "340", unit: "kg" },
-    { label: "Value (FOB)", value: "41,300,000", unit: "₫" },
-  ] },
-  { id: "r3", title: "Carton 3 — Li-ion batteries", confidence: "low", fields: [
-    { label: "HS code", value: "8507.60.10", uncertain: true },
-    { label: "Quantity", value: "48", unit: "pcs" },
-    { label: "Net weight", value: "96", unit: "kg" },
-    { label: "Value (FOB)", value: "18,700,000", unit: "₫" },
-  ] },
-];
-
-const initialValues = () => Object.fromEntries(RECORDS.map((r) => [r.id, r.fields.map((f) => f.value)]));
-
-export function TplExtract() {
-  const [phase, setPhase] = useState<Phase>("intake");
-  const [statuses, setStatuses] = useState<Record<string, Status>>({});
-  const [values, setValues] = useState<Record<string, string[]>>(initialValues);
-
-  const [revealed, setRevealed] = useState(0);
-  const [streaming, setStreaming] = useState(false);
-  useEffect(() => {
-    if (!streaming) return;
-    if (revealed >= EXTRACT.length) {
-      const t = setTimeout(() => {
-        setStreaming(false);
-        setPhase("review");
-      }, 650);
-      return () => clearTimeout(t);
-    }
-    const t = setTimeout(() => setRevealed((r) => r + 1), revealed === 0 ? 60 : 820);
-    return () => clearTimeout(t);
-  }, [streaming, revealed]);
-
-  const items: AgentRunItem[] = EXTRACT.slice(0, revealed).map((s, i) => ({
-    type: "step",
-    ...s,
-    status: streaming && revealed < EXTRACT.length && i === revealed - 1 ? "running" : "done",
-  }));
-
-  const start = () => {
-    setRevealed(0);
-    setStreaming(true);
-    setPhase("extracting");
-  };
-  const reset = () => {
-    setStreaming(false);
-    setRevealed(0);
-    setStatuses({});
-    setValues(initialValues());
-    setPhase("intake");
-  };
-
-  const setStatus = (id: string, status: Status | undefined) =>
-    setStatuses((s) => {
-      const n = { ...s };
-      if (status) n[id] = status;
-      else delete n[id];
-      return n;
-    });
-  const editField = (id: string, index: number, value: string) =>
-    setValues((v) => ({ ...v, [id]: v[id].map((x, i) => (i === index ? value : x)) }));
-
-  const confirmedCount = RECORDS.filter((r) => statuses[r.id] === "confirmed").length;
-
-  return (
-    <ScrollView style={{ backgroundColor: colors.white }} contentContainerStyle={{ padding: 28, paddingBottom: 120 }}>
-      <View style={{ maxWidth: 720, width: "100%", alignSelf: "center", gap: 16 }}>
-        <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 16 }}>
-          <View style={{ flex: 1, gap: 2 }}>
-            <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" onPress={reset} /> : null}
-        </View>
-
-        {phase === "intake" ? (
-          <Card style={{ padding: 0 }}>
-            <CardHeader><CardHeaderTitle info="Each extracted line is reviewable and editable before anything is saved.">Source photo</CardHeaderTitle></CardHeader>
-            <CardBody>
-              <FileDropzone onFiles={start} accept="image/*,application/pdf" height={200} label="Drop a packing list" hint="or click to choose · JPG, PNG, PDF" dropLabel="Drop to extract" />
-            </CardBody>
-          </Card>
-        ) : null}
-
-        {phase === "extracting" ? (
-          <Card>
-            <AgentRun items={items} state={streaming ? "streaming" : "done"} />
-          </Card>
-        ) : null}
-
-        {phase === "review" ? (
-          <>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-              <Text size="sm" weight="semibold" style={{ flex: 1 }}>Extracted lines</Text>
-              <Text size="xs" color="muted" tabular>{confirmedCount} of {RECORDS.length} confirmed</Text>
-            </View>
-            <Sources label="Extracted from" onOpen={() => {}} sources={[{ id: "doc", label: "packing-list.jpg", kind: "document", detail: "1 photo" }]} />
-            <View style={{ gap: 10 }}>
-              {RECORDS.map((r) => (
-                <ReviewCard
-                  key={r.id}
-                  title={r.title}
-                  confidence={r.confidence}
-                  status={statuses[r.id] === "confirmed" ? "accepted" : statuses[r.id] === "removed" ? "dismissed" : "open"}
-                  acceptedLabel="Confirmed"
-                  dismissedLabel="Removed"
-                  actions={[
-                    { label: "Remove", onPress: () => setStatus(r.id, "removed"), kind: "muted" },
-                    { label: "Confirm", onPress: () => setStatus(r.id, "confirmed"), kind: "secondary" },
-                  ]}
-                  onUndo={() => setStatus(r.id, undefined)}
-                >
-                  <RecordFields
-                    fields={r.fields.map((f, i) => ({ ...f, value: values[r.id][i] }))}
-                    onEditField={(i, value) => editField(r.id, i, value)}
-                  />
-                </ReviewCard>
-              ))}
-            </View>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <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"
-                disabled={confirmedCount === 0}
-                onPress={() => setPhase("done")}
-              />
-            </View>
-          </>
-        ) : null}
-
-        {phase === "done" ? (
-          <Card>
-            <CompletionState title={`${confirmedCount} lines saved`} summary="The confirmed lines were written to the shipment table.">
-              <Button title="Capture another" color="secondary" onPress={reset} />
-            </CompletionState>
-          </Card>
-        ) : null}
-      </View>
-    </ScrollView>
-  );
-}

package/examples/tpl_match.tsx

@@ -1,134 +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 { ReviewCard, type ReviewAction } from "@lotics/ui/review_card";
-import { MatchSides, MatchSideText } from "@lotics/ui/match_sides";
-import type { ConfidenceLevel } from "@lotics/ui/confidence";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Match & reconcile — the agent proposes PAIRINGS and shows its
-// reasoning; the human confirms, reassigns, or rejects. Each row is two-sided
-// (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. Strip the agent's reasoning and it's just a deterministic match register.
-// ─────────────────────────────────────────────────────────────────────────────
-
-interface M {
-  id: string;
-  amount: number;
-  source: { title: string; detail: string };
-  match?: { title: string; detail: string };
-  /** An alternate candidate the agent considered — drives Reassign. */
-  alt?: { title: string; detail: string };
-  rationale: string;
-  confidence: ConfidenceLevel;
-  status: "open" | "accepted" | "dismissed";
-}
-
-const SEED: M[] = [
-  { id: "m1", amount: 86_200_000, source: { title: "INCOMING TT — ATLAS COMPONENTS", detail: "09 Jun · 86,200,000 ₫" }, match: { title: "INV-2026-0312", detail: "Atlas Components · 86,200,000 ₫" }, rationale: "Exact amount and the invoice number appears in the transfer memo.", confidence: "high", status: "open" },
-  { id: "m2", amount: 41_300_000, source: { title: "CRESTLINE TT PAYMENT", detail: "09 Jun · 41,300,000 ₫" }, match: { title: "INV-2026-0318", detail: "Crestline Furniture · 41,300,000 ₫" }, rationale: "Amount matches to the đồng and the payer name maps to the customer on file.", confidence: "high", status: "open" },
-  { id: "m3", amount: 22_500_000, source: { title: "VITTORIA ACC — REF 0321", detail: "10 Jun · 22,500,000 ₫" }, match: { title: "INV-2026-0321", detail: "Vittoria Accessories · 22,500,000 ₫" }, rationale: "Reference 0321 cited; amount exact.", confidence: "high", status: "open" },
-  { id: "m4", amount: 18_700_000, source: { title: "BRIGHTCELL JUNE", detail: "10 Jun · 18,700,000 ₫" }, match: { title: "INV-2026-0324", detail: "Brightcell Batteries · 18,700,000 ₫" }, alt: { title: "INV-2026-0319", detail: "Brightcell Batteries · 18,700,000 ₫" }, rationale: "Amount + customer match, but two open invoices share this total — confirm the period.", confidence: "medium", status: "open" },
-  { id: "m5", amount: 12_600_000, source: { title: "MERIDIAN PART PAYMENT", detail: "12 Jun · 12,600,000 ₫" }, match: { title: "INV-2026-0326", detail: "Meridian Construction · 25,200,000 ₫" }, rationale: "Half the invoice total from the same payer — likely a partial payment.", confidence: "medium", status: "open" },
-  { id: "m6", amount: 25_200_000, source: { title: "INCOMING TT REF 88412", detail: "11 Jun · 25,200,000 ₫" }, alt: { title: "INV-2026-0326", detail: "Meridian Construction · 25,200,000 ₫" }, rationale: "No name or reference on the line; the amount matches one open invoice but the agent isn't confident.", confidence: "low", status: "open" },
-  { id: "m7", amount: 264_000, source: { title: "BANK CHARGES JUNE", detail: "11 Jun · 264,000 ₫" }, rationale: "No invoice fits; the description reads as a bank fee, not a receipt.", confidence: "low", status: "open" },
-  { id: "m8", amount: 64_800_000, source: { title: "ATLAS COMPONENTS — INV-0301", detail: "08 Jun · 64,800,000 ₫" }, match: { title: "INV-2026-0301", detail: "Atlas Components · 64,800,000 ₫" }, rationale: "Exact reference and amount.", confidence: "high", status: "accepted" },
-];
-
-export function TplMatch() {
-  const [rows, setRows] = useState<M[]>(SEED);
-  const [tab, setTab] = useState<"open" | "resolved">("open");
-
-  const set = (id: string, status: M["status"]) => setRows((prev) => prev.map((r) => (r.id === id ? { ...r, status } : r)));
-  const reassign = (id: string) =>
-    setRows((prev) =>
-      prev.map((r) =>
-        r.id === id && r.alt ? { ...r, match: r.alt, alt: r.match, confidence: "medium", rationale: "Reassigned to the alternate candidate the agent considered." } : r,
-      ),
-    );
-  const acceptAllHigh = () => setRows((prev) => prev.map((r) => (r.status === "open" && r.confidence === "high" && r.match ? { ...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 accepted = rows.filter((r) => r.status === "accepted");
-  const matchedValue = accepted.reduce((s, r) => s + r.amount, 0);
-  const unmatched = open.filter((r) => !r.match).length;
-  const highOpen = open.filter((r) => r.confidence === "high" && r.match).length;
-
-  return (
-    <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 }}>
-            <Text size="xl" weight="semibold">Payment matching</Text>
-            <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" onPress={acceptAllHigh} />
-          ) : null}
-        </View>
-
-        <KPIStrip
-          items={[
-            { label: "Proposed", value: open.length, format: "number", caption: "awaiting a decision" },
-            { label: "Accepted", value: accepted.length, format: "number" },
-            { label: "Unmatched", value: unmatched, format: "number", tone: unmatched > 0 ? "warning" : "default", info: "Lines the agent couldn't pair confidently — they need a human to find the counterpart or take an escape hatch." },
-            { label: "Matched value", value: matchedValue, format: "currency", compact: true, info: "Money tied to an invoice through an accepted pairing." },
-          ]}
-        />
-
-        <SegmentedControl
-          accessibilityLabel="Queue"
-          options={[
-            { label: `Proposed · ${open.length}`, value: "open" },
-            { label: `Resolved · ${resolved.length}`, value: "resolved" },
-          ]}
-          value={tab}
-          onValueChange={setTab}
-        />
-
-        {visible.length === 0 ? (
-          <EmptyState
-            icon="circle-check"
-            message={tab === "open" ? "Queue cleared" : "Nothing resolved yet"}
-            hint={tab === "open" ? "Every proposal has been accepted or rejected" : undefined}
-          />
-        ) : (
-          <View style={{ gap: 10 }}>
-            {visible.map((r) => {
-              const actions: ReviewAction[] = [
-                { label: "Not a match", onPress: () => set(r.id, "dismissed"), kind: "muted" },
-                ...(r.alt ? [{ label: r.match ? "Reassign" : "Find match", onPress: () => reassign(r.id), kind: "secondary" as const }] : []),
-                ...(r.match ? [{ label: "Accept", onPress: () => set(r.id, "accepted"), kind: "primary" as const }] : []),
-              ];
-              return (
-                <ReviewCard
-                  key={r.id}
-                  summary={r.source.title}
-                  confidence={r.confidence}
-                  rationale={r.rationale}
-                  status={r.status}
-                  acceptedLabel={r.match ? `Matched · ${r.match.title}` : "Matched"}
-                  actions={actions}
-                >
-                  <MatchSides
-                    source={<MatchSideText title={r.source.title} detail={r.source.detail} />}
-                    match={r.match ? <MatchSideText title={r.match.title} detail={r.match.detail} align="right" /> : undefined}
-                  />
-                </ReviewCard>
-              );
-            })}
-          </View>
-        )}
-      </View>
-    </ScrollView>
-  );
-}