@lotics/ui 7.19.3 → 9.0.0

package/examples/tpl_directory.tsx

@@ -1,260 +0,0 @@
-import { useState } from "react";
-import { Pressable, ScrollView, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { ActionMenu } from "@lotics/ui/action_menu";
-import { Avatar } from "@lotics/ui/avatar";
-import { Badge } from "@lotics/ui/badge";
-import { Button } from "@lotics/ui/button";
-import { ChipGroup } from "@lotics/ui/chip_group";
-import { FilterChip } from "@lotics/ui/filter_chip";
-import { Counter } from "@lotics/ui/counter";
-import { Card } from "@lotics/ui/card";
-import { Divider } from "@lotics/ui/divider";
-import { Drawer } from "@lotics/ui/drawer";
-import { EmptyState } from "@lotics/ui/empty_state";
-import { formatMoney } from "@lotics/ui/format_money";
-import { StatusBadge } from "@lotics/ui/status_badge";
-import { PressableRow } from "@lotics/ui/pressable_row";
-import { SearchInput } from "@lotics/ui/search_input";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Directory — the partner directory every trading/logistics desk
-// needs: one searchable, filterable register of customers and suppliers with
-// the relationship status and volume at a glance.
-//
-// Grammar: zinc-50 canvas · one header band (count + ONE primary action) ·
-// toolbar (live search + type tabs) · ONE banded card of rows separated by
-// hairlines: Avatar → name + MST → type badge → tabular volume → StatusBadge.
-// Doors: a partner row is the PRIMARY entity here — press opens the partner
-// workspace Drawer (◀ ▶ / ←→ sequenced over the visible filtered ordering);
-// ⋯ holds the row's quick operations (destructive last).
-// ─────────────────────────────────────────────────────────────────────────────
-
-type PartnerKind = "khach" | "ncc";
-
-interface Partner {
-  id: string;
-  ten: string;
-  mst: string;
-  kind: PartnerKind;
-  donHang: number;
-  doanhSo: number;
-  active: boolean;
-}
-
-const PARTNERS: Partner[] = [
-  { id: "p1", ten: "Apex Plastics", mst: "0301452786", kind: "khach", donHang: 24, doanhSo: 860_000_000, active: true },
-  { id: "p2", ten: "Eastland Packaging", mst: "0312908455", kind: "ncc", donHang: 18, doanhSo: 412_000_000, active: true },
-  { id: "p3", ten: "Vista Paper Mills", mst: "0309977120", kind: "ncc", donHang: 31, doanhSo: 1_240_000_000, active: true },
-  { id: "p4", ten: "Crestline Foods", mst: "0107643298", kind: "khach", donHang: 12, doanhSo: 340_000_000, active: true },
-  { id: "p5", ten: "Harbor Engineering", mst: "0203318874", kind: "khach", donHang: 7, doanhSo: 156_000_000, active: false },
-  { id: "p6", ten: "Summit Freight", mst: "0314226901", kind: "ncc", donHang: 42, doanhSo: 980_000_000, active: true },
-  { id: "p7", ten: "Northway Appliances", mst: "0108812346", kind: "khach", donHang: 19, doanhSo: 624_000_000, active: true },
-  { id: "p8", ten: "Brightline Inks", mst: "0305570213", kind: "ncc", donHang: 9, doanhSo: 87_000_000, active: false },
-  { id: "p9", ten: "Phoenix Textiles", mst: "0300523847", kind: "khach", donHang: 28, doanhSo: 1_030_000_000, active: true },
-  { id: "p10", ten: "Delta Chemicals", mst: "0204461185", kind: "ncc", donHang: 15, doanhSo: 295_000_000, active: true },
-];
-
-const KIND_TABS = [
-  { value: "all", label: "All" },
-  { value: "khach", label: "Customers" },
-  { value: "ncc", label: "Suppliers" },
-] as const;
-
-type KindTab = (typeof KIND_TABS)[number]["value"];
-
-const kindLabel = (kind: PartnerKind) => (kind === "khach" ? "Customer" : "Supplier");
-
-function PartnerRow({ p, selected, onPress }: { p: Partner; selected: boolean; onPress: () => void }) {
-  return (
-    <PressableRow onPress={onPress} selected={selected} style={{ minHeight: 64 }}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel={`Open partner ${p.ten}`}
-        onPress={onPress}
-        style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12 }}
-      >
-        <Avatar size={36} name={p.ten} />
-        <View style={{ flex: 1, gap: 2 }}>
-          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-            <Text size="sm" weight="medium" numberOfLines={1}>{p.ten}</Text>
-            <Badge label={kindLabel(p.kind)} color={p.kind === "khach" ? "blue" : undefined} />
-          </View>
-          <Text size="xs" color="muted" tabular>MST {p.mst}</Text>
-        </View>
-        <Text size="sm" color="muted" tabular>
-          {p.donHang} orders · {formatMoney(p.doanhSo)}
-        </Text>
-        <StatusBadge enabled={p.active} label={p.active ? "Active" : "Paused"} />
-      </Pressable>
-      <ActionMenu
-        accessibilityLabel={`Actions for ${p.ten}`}
-        items={[
-          { key: "don", label: "Create order", icon: "file-text", onPress: () => {} },
-          { key: "sua", label: "Edit details", icon: "pencil", onPress: () => {} },
-          p.active
-            ? { key: "dung", label: "Pause partnership", icon: "pause", danger: true, onPress: () => {} }
-            : { key: "molai", label: "Resume partnership", icon: "history", onPress: () => {} },
-        ]}
-      />
-    </PressableRow>
-  );
-}
-
-function KVRow({ label, children }: { label: string; children: React.ReactNode }) {
-  return (
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 12, minHeight: 24 }}>
-      <Text size="sm" color="muted" style={{ width: 110 }}>{label}</Text>
-      {typeof children === "string" ? <Text size="sm">{children}</Text> : children}
-    </View>
-  );
-}
-
-// The drawer body — compact partner workspace: identity, the key facts already
-// on the row, and the two real next steps. Keyed by partner id by the caller
-// so nothing leaks across ◀ ▶ steps.
-function PartnerWorkspace({ p }: { p: Partner }) {
-  return (
-    <>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 20 }}>
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
-          <Avatar size={44} name={p.ten} />
-          <View style={{ gap: 4, flex: 1 }}>
-            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-              <Badge label={kindLabel(p.kind)} color={p.kind === "khach" ? "blue" : undefined} />
-              <StatusBadge enabled={p.active} label={p.active ? "Active" : "Paused"} />
-            </View>
-            <Text size="xs" color="muted" tabular userSelect="auto">MST {p.mst}</Text>
-          </View>
-        </View>
-
-        <Divider />
-
-        <View style={{ gap: 6 }}>
-          <KVRow label="Partner type">{kindLabel(p.kind)}</KVRow>
-          <KVRow label="Tax ID"><Text size="sm" tabular userSelect="auto">{p.mst}</Text></KVRow>
-          <KVRow label="Orders"><Text size="sm" tabular>{`${p.donHang} orders`}</Text></KVRow>
-          <KVRow label="Revenue"><Text size="sm" tabular>{formatMoney(p.doanhSo)}</Text></KVRow>
-        </View>
-      </ScrollView>
-
-      {/* pinned footer — the workspace's escalation, commit action at the right edge */}
-      <View style={{ borderTopWidth: 1, borderTopColor: colors.border, paddingHorizontal: 20, paddingVertical: 14, flexDirection: "row", alignItems: "center", gap: 12 }}>
-        <Text size="xs" color="muted" style={{ flex: 1 }}>New orders attach to this partner — track them in the Orders module.</Text>
-        <Button title="Edit details" color="secondary" onPress={() => {}} />
-        <Button title="Create order" color="primary" onPress={() => {}} />
-      </View>
-    </>
-  );
-}
-
-export function TplDirectory() {
-  const [search, setSearch] = useState("");
-  const [tab, setTab] = useState<KindTab>("all");
-  const [openId, setOpenId] = useState<string | null>(null);
-  const [minOrders, setMinOrders] = useState(0);
-
-  const q = search.trim().toLowerCase();
-  const matches = PARTNERS.filter(
-    (p) =>
-      (tab === "all" || p.kind === tab) &&
-      p.donHang >= minOrders &&
-      (q === "" || p.ten.toLowerCase().includes(q) || p.mst.includes(q)),
-  );
-
-  // The drawer sequences over the visible filtered ordering. When the open
-  // partner falls out of it (search/tab changed), the chevrons disappear but
-  // the drawer stays on the record.
-  const openPartner = PARTNERS.find((p) => p.id === openId) ?? null;
-  const seqIndex = openPartner ? matches.findIndex((p) => p.id === openPartner.id) : -1;
-
-  return (
-    <View style={{ flex: 1, backgroundColor: colors.white }}>
-      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 28 }}>
-        <View style={{ width: "100%", maxWidth: 880, alignSelf: "center", gap: 16 }}>
-          {/* header band */}
-          <View style={{ flexDirection: "row", alignItems: "flex-end", gap: 12 }}>
-            <View style={{ gap: 2, flex: 1 }}>
-              <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
-                <Text size="xl" weight="semibold">Directory</Text>
-              </View>
-              <Text size="sm" color="muted">Customers and suppliers — look anyone up by name or tax ID</Text>
-            </View>
-            <Button title="Add partner" color="primary" onPress={() => {}} />
-          </View>
-
-          {/* toolbar: live search + a partner-type lens. Wraps when narrow;
-              every control is 40px so a wrapped band reads as clean rows. */}
-          <View style={{ flexDirection: "row", alignItems: "center", flexWrap: "wrap", gap: 8 }}>
-            <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
-              <SearchInput
-                placeholder="Search by name or tax ID…"
-                accessibilityLabel="Search partners"
-                value={search}
-                onChangeText={setSearch}
-              />
-            </View>
-            <ChipGroup
-              accessibilityLabel="Partner type"
-              options={KIND_TABS.map((t) => ({
-                label: `${t.label} · ${PARTNERS.filter((p) => t.value === "all" || p.kind === t.value).length}`,
-                value: t.value,
-              }))}
-              value={tab}
-              onValueChange={setTab}
-            />
-            <FilterChip
-              label="Min orders"
-              summary={minOrders > 0 ? `≥ ${minOrders}` : undefined}
-              onClear={() => setMinOrders(0)}
-              clearLabel="Clear min-orders filter"
-            >
-              <View style={{ gap: 10 }}>
-                <Text size="sm" color="muted">Show partners with at least</Text>
-                <Counter
-                  value={minOrders}
-                  min={0}
-                  max={50}
-                  step={5}
-                  onValueChange={setMinOrders}
-                  accessibilityLabel="minimum orders"
-                  format={(n) => `${n} orders`}
-                />
-              </View>
-            </FilterChip>
-          </View>
-
-          {/* the register: one card, gap-separated rounded `register` rows (no per-row Divider) */}
-          <Card style={{ padding: 0 }}>
-            {matches.length === 0 ? (
-              <EmptyState
-                message="No partners match"
-                hint="Try another keyword or switch the type filter"
-              />
-            ) : (
-              <View style={{ paddingVertical: 6, gap: 2 }}>
-                {matches.map((p) => (
-                  <PartnerRow key={p.id} p={p} selected={p.id === openId} onPress={() => setOpenId(p.id)} />
-                ))}
-              </View>
-            )}
-          </Card>
-        </View>
-      </ScrollView>
-
-      {/* the partner workspace — body keyed by partner id so per-record state
-          resets when ◀ ▶ (or ←/→) steps through the visible list */}
-      {openPartner ? (
-        <Drawer
-          open onOpenChange={(o) => !o && setOpenId(null)} title={openPartner.ten} width={480}
-          onPrev={seqIndex > 0 ? () => setOpenId(matches[seqIndex - 1].id) : undefined}
-          onNext={seqIndex >= 0 && seqIndex < matches.length - 1 ? () => setOpenId(matches[seqIndex + 1].id) : undefined}
-          position={seqIndex >= 0 ? `${seqIndex + 1}/${matches.length}` : undefined}
-        >
-          <PartnerWorkspace key={openPartner.id} p={openPartner} />
-        </Drawer>
-      ) : null}
-    </View>
-  );
-}

package/examples/tpl_draft.tsx

@@ -1,163 +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, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { TextInputField } from "@lotics/ui/text_input_field";
-import { DotsIndicator } from "@lotics/ui/dots_indicator";
-import { CompletionState } from "@lotics/ui/completion_state";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · AI draft generation — a FOURTH AI workflow shape: the agent writes
-// a first DRAFT from context, and the human refines it. The feedback differs
-// from the others — the OUTPUT itself streams (the reply text fills in live),
-// then becomes an editable surface the person edits before sending. Tone +
-// length steer the generation; Regenerate re-drafts. AI drafts, the human owns
-// the final words. All mock — the recipe, not a model.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type Tone = "friendly" | "formal";
-type Length = "short" | "detailed";
-
-const INBOUND =
-  "Hi — we're launching a new product line and need about 5,000 corrugated mailers " +
-  "(FEFCO 0427) per month. Could you share pricing and a lead time?";
-
-const OPENING: Record<Tone, string> = {
-  friendly: "Hi Maya,\n\nThanks for reaching out — exciting to hear about the new line!",
-  formal: "Dear Ms. Tran,\n\nThank you for your enquiry regarding corrugated mailers.",
-};
-const OFFER: Record<Length, string> = {
-  short:
-    "For 5,000 FEFCO 0427 mailers a month we can offer 8,200₫/unit at that volume, with a 7–10 day lead time after artwork sign-off.",
-  detailed:
-    "For 5,000 FEFCO 0427 mailers a month, our volume price is 8,200₫/unit (B-flute, 1-colour print). Lead time is 7–10 working days after artwork sign-off, and the first run includes the cutting die at no charge. We can hold this pricing for 30 days, and step it down again past 10,000 units a month.",
-};
-const CLOSE: Record<Tone, string> = {
-  friendly: "Happy to send samples whenever you're ready — just say the word.\n\nBest,\nLan",
-  formal: "We would be glad to provide samples upon request.\n\nKind regards,\nLan Nguyen\nSunrise Packaging",
-};
-const draftFor = (tone: Tone, length: Length) =>
-  `${OPENING[tone]}\n\n${OFFER[length]}\n\n${CLOSE[tone]}`;
-
-export function TplDraft() {
-  const [phase, setPhase] = useState<"idle" | "drafting" | "ready" | "sent">("idle");
-  const [tone, setTone] = useState<Tone>("friendly");
-  const [length, setLength] = useState<Length>("short");
-  const [draft, setDraft] = useState("");
-  const [target, setTarget] = useState("");
-  const [revealed, setRevealed] = useState(0);
-
-  // Stream the draft text in, word by word, then hand it to the editor.
-  useEffect(() => {
-    if (phase !== "drafting") return;
-    const words = target.split(" ");
-    if (revealed >= words.length) {
-      setDraft(target);
-      setPhase("ready");
-      return;
-    }
-    const t = setTimeout(() => setRevealed((r) => r + 2), revealed === 0 ? 200 : 45);
-    return () => clearTimeout(t);
-  }, [phase, revealed, target]);
-
-  const startDraft = () => {
-    setTarget(draftFor(tone, length));
-    setRevealed(0);
-    setDraft("");
-    setPhase("drafting");
-  };
-
-  const streamed = phase === "drafting" ? target.split(" ").slice(0, revealed).join(" ") : "";
-
-  return (
-    <ScrollView style={{ backgroundColor: colors.white }} contentContainerStyle={{ padding: 28, paddingBottom: 80 }}>
-      <View style={{ maxWidth: 720, width: "100%", alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">Reply to inquiry</Text>
-          <Text size="sm" color="muted">The agent drafts a reply from the message; you set the tone, then edit before sending.</Text>
-        </View>
-
-        <Card style={{ padding: 0 }}>
-          <CardHeader><CardHeaderTitle>Inbound</CardHeaderTitle></CardHeader>
-          <CardBody>
-            <View style={{ flexDirection: "row", gap: 10 }}>
-              <View style={{ width: 28, height: 28, borderRadius: 14, backgroundColor: colors.zinc[200], alignItems: "center", justifyContent: "center" }}>
-                <Text size="xs" weight="semibold" color="muted">MT</Text>
-              </View>
-              <Text size="sm" style={{ flex: 1 }}>{INBOUND}</Text>
-            </View>
-          </CardBody>
-        </Card>
-
-        {phase === "sent" ? (
-          <Card>
-            <CompletionState title="Reply sent" summary="Your edited draft was sent to Maya Tran.">
-              <Button title="Draft another" color="secondary" onPress={() => { setPhase("idle"); setDraft(""); }} />
-            </CompletionState>
-          </Card>
-        ) : (
-          <Card style={{ padding: 0 }}>
-            <CardHeader>
-              <CardHeaderTitle info="Tone and length steer the draft; you edit the result before it goes out.">Your reply</CardHeaderTitle>
-            </CardHeader>
-            <CardBody>
-              <View style={{ flexDirection: "row", flexWrap: "wrap", gap: 16 }}>
-                <View style={{ gap: 6 }}>
-                  <Text size="xs" color="muted" weight="medium">Tone</Text>
-                  <SegmentedControl
-                    accessibilityLabel="Tone"
-                    options={[{ label: "Friendly", value: "friendly" }, { label: "Formal", value: "formal" }]}
-                    value={tone}
-                    onValueChange={setTone}
-                    disabled={phase === "drafting"}
-                  />
-                </View>
-                <View style={{ gap: 6 }}>
-                  <Text size="xs" color="muted" weight="medium">Length</Text>
-                  <SegmentedControl
-                    accessibilityLabel="Length"
-                    options={[{ label: "Short", value: "short" }, { label: "Detailed", value: "detailed" }]}
-                    value={length}
-                    onValueChange={setLength}
-                    disabled={phase === "drafting"}
-                  />
-                </View>
-              </View>
-
-              {phase === "idle" ? (
-                <View style={{ alignItems: "flex-start", paddingTop: 4 }}>
-                  <Button title="Draft a reply" color="primary" onPress={startDraft} />
-                </View>
-              ) : null}
-
-              {phase === "drafting" ? (
-                <View style={{ borderWidth: 1, borderColor: colors.zinc[200], borderRadius: 10, padding: 14, gap: 10, backgroundColor: colors.white }}>
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-                    <Text size="xs" color="muted" weight="medium" style={{ flex: 1 }}>Drafting</Text>
-                    <DotsIndicator size={5} color={colors.zinc[900]} />
-                  </View>
-                  <Text size="sm">{streamed}</Text>
-                </View>
-              ) : null}
-
-              {phase === "ready" ? (
-                <TextInputField value={draft} onChangeText={setDraft} multiline numberOfLines={12} autoGrow />
-              ) : null}
-            </CardBody>
-
-            {phase === "ready" ? (
-              <CardFooter>
-                <View style={{ flex: 1 }} />
-                <Button title="Regenerate" color="secondary" icon="rotate-ccw" onPress={startDraft} />
-                <Button title="Send reply" color="primary" onPress={() => setPhase("sent")} />
-              </CardFooter>
-            ) : null}
-          </Card>
-        )}
-      </View>
-    </ScrollView>
-  );
-}

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>
-  );
-}