@lotics/ui 7.19.3 → 9.0.0

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/examples/tpl_wizard.tsx

@@ -1,223 +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 { Card, CardBody } from "@lotics/ui/card";
-import { Stepper } from "@lotics/ui/stepper";
-import { FormField } from "@lotics/ui/form_field";
-import { TextInputField } from "@lotics/ui/text_input_field";
-import { Picker } from "@lotics/ui/picker";
-import type { PickerOption } from "@lotics/ui/picker";
-import { NumberInput } from "@lotics/ui/number_input";
-import { Switch } from "@lotics/ui/switch";
-import { DetailRow } from "@lotics/ui/detail_row";
-import { Divider } from "@lotics/ui/divider";
-import { Callout, CalloutText } from "@lotics/ui/callout";
-import { formatMoney } from "@lotics/ui/format_money";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Application wizard — a long form broken into ordered STEPS with a
-// `Stepper` header, one fieldset per step, and a REVIEW step that reads back
-// every value with an Edit jump to its section. Back / Next gate on the current
-// step's required fields; the last step submits. For a form too long to scan as
-// one page (onboarding, applications, KYC). Two-column grid throughout.
-// ─────────────────────────────────────────────────────────────────────────────
-
-const STEPS = ["Company", "Contact", "Terms", "Review"];
-
-const INDUSTRY: PickerOption[] = [
-  { value: "manufacturing", label: "Manufacturing" },
-  { value: "trading", label: "Trading" },
-  { value: "construction", label: "Construction" },
-  { value: "transport", label: "Transportation" },
-  { value: "retail", label: "Retail" },
-];
-
-const SIZE: PickerOption[] = [
-  { value: "1-10", label: "1–10" },
-  { value: "11-50", label: "11–50" },
-  { value: "51-200", label: "51–200" },
-  { value: "200+", label: "200+" },
-];
-
-const TERMS: PickerOption[] = [
-  { value: "receipt", label: "Due on receipt" },
-  { value: "15", label: "Net 15" },
-  { value: "30", label: "Net 30" },
-  { value: "45", label: "Net 45" },
-];
-
-const labelOf = (opts: PickerOption[], v: string) => opts.find((o) => o.value === v)?.label ?? "—";
-
-const half = { flexGrow: 1, flexBasis: 240 } as const;
-const full = { flexGrow: 1, flexBasis: "100%" } as const;
-
-export function TplWizard() {
-  const [step, setStep] = useState(0);
-
-  // Company
-  const [companyName, setCompanyName] = useState("Northwind Packaging Co., Ltd.");
-  const [taxId, setTaxId] = useState("0312456789");
-  const [industry, setIndustry] = useState("manufacturing");
-  const [regCity, setRegCity] = useState("Gothenburg");
-  const [size, setSize] = useState("51-200");
-
-  // Contact
-  const [contactName, setContactName] = useState("Mara Lindqvist");
-  const [role, setRole] = useState("Procurement lead");
-  const [phone, setPhone] = useState("0903 558 214");
-  const [email, setEmail] = useState("mara@northwind.co");
-
-  // Terms
-  const [terms, setTerms] = useState("30");
-  const [creditLimit, setCreditLimit] = useState<number | null>(50000000);
-  const [vatInvoice, setVatInvoice] = useState(true);
-  const [notes, setNotes] = useState("");
-
-  const stepValid = [
-    companyName.trim() !== "" && taxId.trim() !== "",
-    contactName.trim() !== "" && email.trim() !== "",
-    terms !== "",
-    true,
-  ];
-  const isLast = step === STEPS.length - 1;
-
-  const goEdit = (s: number) => setStep(s);
-
-  return (
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ padding: 28 }}>
-      <View style={{ width: "100%", maxWidth: 720, alignSelf: "center", gap: 16 }}>
-        <View style={{ gap: 2 }}>
-          <Text size="xl" weight="semibold">New partner application</Text>
-          <Text size="sm" color="muted">Four short steps — we save as you go; review everything before submitting</Text>
-        </View>
-
-        <Card style={{ padding: 0 }}>
-          <CardBody>
-            <Stepper steps={STEPS} current={step} />
-          </CardBody>
-          <Divider />
-
-          {/* step 0 · Company */}
-          {step === 0 ? (
-            <CardBody>
-              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-                <FormField label="Legal name" style={full}>
-                  <TextInputField value={companyName} onChangeText={setCompanyName} placeholder="Name on the business registration" autoFocus />
-                </FormField>
-                <FormField label="Tax ID" style={half}>
-                  <TextInputField value={taxId} onChangeText={setTaxId} placeholder="10 or 13 digits" inputMode="numeric" />
-                </FormField>
-                <FormField label="Industry" style={half}>
-                  <Picker options={INDUSTRY} value={industry} onValueChange={setIndustry} placeholder="Select industry" accessibilityLabel="Industry" />
-                </FormField>
-                <FormField label="Registered city" style={half}>
-                  <TextInputField value={regCity} onChangeText={setRegCity} placeholder="City" />
-                </FormField>
-                <FormField label="Company size" style={half}>
-                  <Picker options={SIZE} value={size} onValueChange={setSize} placeholder="Headcount" accessibilityLabel="Company size" />
-                </FormField>
-              </View>
-            </CardBody>
-          ) : null}
-
-          {/* step 1 · Contact */}
-          {step === 1 ? (
-            <CardBody>
-              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-                <FormField label="Contact person" style={half}>
-                  <TextInputField value={contactName} onChangeText={setContactName} placeholder="Full name" autoFocus />
-                </FormField>
-                <FormField label="Role" style={half}>
-                  <TextInputField value={role} onChangeText={setRole} placeholder="Job title" />
-                </FormField>
-                <FormField label="Phone" style={half}>
-                  <TextInputField value={phone} onChangeText={setPhone} placeholder="Mobile number" inputMode="tel" />
-                </FormField>
-                <FormField label="Email" style={half}>
-                  <TextInputField value={email} onChangeText={setEmail} placeholder="name@company.com" inputMode="email" autoCapitalize="none" />
-                </FormField>
-              </View>
-            </CardBody>
-          ) : null}
-
-          {/* step 2 · Terms */}
-          {step === 2 ? (
-            <CardBody>
-              <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-                <FormField label="Payment terms" style={half}>
-                  <Picker options={TERMS} value={terms} onValueChange={setTerms} placeholder="Select terms" accessibilityLabel="Payment terms" />
-                </FormField>
-                <FormField label="Requested credit limit" style={half}>
-                  <NumberInput value={creditLimit} onValueChange={setCreditLimit} min={0} accessibilityLabel="Requested credit limit" />
-                </FormField>
-                <FormField label="VAT invoice" style={full}>
-                  <View style={{ flexDirection: "row", alignItems: "center", gap: 10, minHeight: 40 }}>
-                    <Switch accessibilityLabel="VAT invoice" value={vatInvoice} onChange={setVatInvoice} />
-                    <Text size="sm" color="muted">{vatInvoice ? "Issue an invoice for every order" : "No invoices issued"}</Text>
-                  </View>
-                </FormField>
-                <FormField label="Notes" optional optionalLabel="Optional" style={full}>
-                  <TextInputField value={notes} onChangeText={setNotes} placeholder="Anything the credit team should know" numberOfLines={3} />
-                </FormField>
-              </View>
-            </CardBody>
-          ) : null}
-
-          {/* step 3 · Review */}
-          {step === 3 ? (
-            <CardBody>
-              <Callout tone="info"><CalloutText>Check every detail — once submitted, changes need a credit-team request.</CalloutText></Callout>
-              <ReviewGroup title="Company" onEdit={() => goEdit(0)}>
-                <DetailRow label="Legal name" labelWidth={150}><Text size="sm">{companyName}</Text></DetailRow>
-                <DetailRow label="Tax ID" labelWidth={150}><Text size="sm" tabular>{taxId}</Text></DetailRow>
-                <DetailRow label="Industry" labelWidth={150}><Text size="sm">{labelOf(INDUSTRY, industry)}</Text></DetailRow>
-                <DetailRow label="Registered city" labelWidth={150}><Text size="sm">{regCity}</Text></DetailRow>
-                <DetailRow label="Company size" labelWidth={150}><Text size="sm">{labelOf(SIZE, size)}</Text></DetailRow>
-              </ReviewGroup>
-              <Divider />
-              <ReviewGroup title="Contact" onEdit={() => goEdit(1)}>
-                <DetailRow label="Contact person" labelWidth={150}><Text size="sm">{contactName}</Text></DetailRow>
-                <DetailRow label="Role" labelWidth={150}><Text size="sm">{role}</Text></DetailRow>
-                <DetailRow label="Phone" labelWidth={150}><Text size="sm" tabular>{phone}</Text></DetailRow>
-                <DetailRow label="Email" labelWidth={150}><Text size="sm">{email}</Text></DetailRow>
-              </ReviewGroup>
-              <Divider />
-              <ReviewGroup title="Terms" onEdit={() => goEdit(2)}>
-                <DetailRow label="Payment terms" labelWidth={150}><Text size="sm">{labelOf(TERMS, terms)}</Text></DetailRow>
-                <DetailRow label="Credit limit" labelWidth={150}><Text size="sm" tabular>{creditLimit == null ? "—" : formatMoney(creditLimit)}</Text></DetailRow>
-                <DetailRow label="VAT invoice" labelWidth={150}><Text size="sm">{vatInvoice ? "Yes" : "No"}</Text></DetailRow>
-                <DetailRow label="Notes" labelWidth={150}><Text size="sm" color={notes ? "default" : "muted"}>{notes || "—"}</Text></DetailRow>
-              </ReviewGroup>
-            </CardBody>
-          ) : null}
-
-          <Divider />
-          <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, paddingVertical: 16, gap: 8 }}>
-            {step > 0 ? <Button title="Back" color="muted" icon="chevron-left" onPress={() => setStep((s) => s - 1)} /> : null}
-            <View style={{ flex: 1 }} />
-            <Text size="xs" color="muted">{`Step ${step + 1} of ${STEPS.length}`}</Text>
-            {isLast ? (
-              <Button title="Submit application" color="primary" onPress={() => {}} />
-            ) : (
-              <Button title="Next" color="primary" disabled={!stepValid[step]} onPress={() => setStep((s) => s + 1)} />
-            )}
-          </View>
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}
-
-function ReviewGroup({ title, onEdit, children }: { title: string; onEdit: () => void; children: React.ReactNode }) {
-  return (
-    <View style={{ gap: 2 }}>
-      <View style={{ flexDirection: "row", alignItems: "center", paddingBottom: 4 }}>
-        <Text size="xs" color="muted" transform="uppercase" style={{ flex: 1 }}>{title}</Text>
-        <Button title="Edit" color="muted" icon="pencil" onPress={onEdit} />
-      </View>
-      {children}
-    </View>
-  );
-}

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

package/src/match_sides.tsx

@@ -1,79 +0,0 @@
-import { type ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
-import { colors } from "./colors";
-import { Text } from "./text";
-import { Icon } from "./icon";
-
-export interface MatchSideTextProps {
-  /** Primary line — the record name / id. */
-  title: string;
-  /** Secondary line — amount, date, customer. */
-  detail?: string;
-  /** Right-align for the proposed (right) side of a pairing. */
-  align?: "left" | "right";
-}
-
-/**
- * The DEFAULT side content — a title + a muted detail line. Pass it into a
- * `MatchSides` slot for the common case; drop a different node in when a side
- * needs more (a `Peek` to preview the record, an interactive card, a thumbnail).
- */
-export function MatchSideText({ title, detail, align }: MatchSideTextProps) {
-  const right = align === "right";
-  return (
-    <>
-      <Text size="sm" weight="semibold" numberOfLines={1} align={right ? "right" : undefined}>
-        {title}
-      </Text>
-      {detail ? (
-        <Text size="xs" color="muted" numberOfLines={1} align={right ? "right" : undefined}>
-          {detail}
-        </Text>
-      ) : null}
-    </>
-  );
-}
-
-export interface MatchSidesProps {
-  /** Left content — ANY node. `MatchSideText` for the default, or a `Peek` /
-   *  interactive card / thumbnail when a side needs to do more. */
-  source: ReactNode;
-  /** Right content. Omit → the "no confident match" placeholder. */
-  match?: ReactNode;
-  /** The connector between the sides. Default: a right arrow. Override to carry
-   *  a swap control, a label, or a different glyph. */
-  connector?: ReactNode;
-}
-
-/**
- * The two-sided PAIRING — a left slot, a connector, a right slot. A pure LAYOUT
- * primitive: it owns the two-column arrangement and the connector, the CONTENT
- * of each side is yours (`MatchSideText`, a `Peek`, anything). The hero of a
- * reconciliation; the confidence, reason, and decision come from the `ReviewCard`.
- */
-export function MatchSides(props: MatchSidesProps) {
-  return (
-    <View style={styles.pair}>
-      <View style={styles.side}>{props.source}</View>
-      {props.connector ?? <Icon name="arrow-right" size={16} color={colors.zinc[400]} />}
-      <View style={[styles.side, styles.sideRight]}>
-        {props.match ?? (
-          <>
-            <Text size="sm" weight="medium" color="muted" align="right" numberOfLines={1}>
-              No confident match
-            </Text>
-            <Text size="xs" color="muted" align="right" numberOfLines={1}>
-              Pick a counterpart
-            </Text>
-          </>
-        )}
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  pair: { flexDirection: "row", alignItems: "center", gap: 14 },
-  side: { flex: 1, gap: 3, minWidth: 0 },
-  sideRight: { alignItems: "flex-end" },
-});

package/src/record_fields.tsx

@@ -1,68 +0,0 @@
-import { StyleSheet, View } from "react-native";
-import { solid } from "./colors";
-import { Text } from "./text";
-import { InlineTextInput } from "./inline_text_input";
-
-export interface RecordField {
-  label: string;
-  value: string;
-  /** Unit suffix shown after the value (₫, kg, pcs). */
-  unit?: string;
-  /** Mark a low-confidence field worth double-checking — a subtle amber dot. */
-  uncertain?: boolean;
-}
-
-export interface RecordFieldsProps {
-  fields: RecordField[];
-  /** Edit a field — fired on save of the inline editor (blur / Enter). When set,
-   *  each value is click-to-edit; omit for a read-only record. */
-  onEditField?: (index: number, value: string) => void;
-}
-
-/**
- * The BODY of an extracted record — a label/value list, each value click-to-edit
- * (`InlineTextInput`) or read-only. A pure body atom: drop it into a `ReviewCard`
- * to review-before-save (a confidence + Confirm / Remove, stacked under a Save-all
- * → `tpl_extract`), or use it standalone as a live-edit field card (a params
- * panel). The review MECHANICS belong to the host / `ReviewCard`, not here.
- */
-export function RecordFields(props: RecordFieldsProps) {
-  return (
-    <View style={styles.fields}>
-      {props.fields.map((f, i) => (
-        <View key={`${f.label}-${i}`} style={styles.fieldRow}>
-          <View style={styles.labelCol}>
-            {f.uncertain ? <View style={styles.uncertainDot} /> : null}
-            <Text size="sm" color="muted" numberOfLines={1}>
-              {f.label}
-            </Text>
-          </View>
-          <View style={styles.valueCol}>
-            <View style={{ flex: 1 }}>
-              {props.onEditField ? (
-                <InlineTextInput value={f.value} accessibilityLabel={`Edit ${f.label}`} onSave={(next) => props.onEditField?.(i, next)} />
-              ) : (
-                <Text size="sm" weight="medium" tabular>
-                  {f.value}
-                </Text>
-              )}
-            </View>
-            {f.unit ? (
-              <Text size="sm" color="muted">
-                {f.unit}
-              </Text>
-            ) : null}
-          </View>
-        </View>
-      ))}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  fields: { gap: 2 },
-  fieldRow: { flexDirection: "row", alignItems: "center", gap: 16, minHeight: 34 },
-  labelCol: { flexDirection: "row", alignItems: "center", gap: 6, width: 132 },
-  uncertainDot: { width: 6, height: 6, borderRadius: 999, backgroundColor: solid("amber") },
-  valueCol: { flex: 1, flexDirection: "row", alignItems: "center", gap: 6 },
-});