@lotics/ui 7.19.3 → 9.0.0

package/examples/tpl_quick.tsx

@@ -1,211 +0,0 @@
-import { useRef, useState } from "react";
-import { ScrollView, View, type TextInput as RNTextInput } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors } from "@lotics/ui/colors";
-import { Button } from "@lotics/ui/button";
-import { Alert } from "@lotics/ui/alert";
-import { Card, CardBody, CardHeader, CardHeaderMeta, CardHeaderTitle } from "@lotics/ui/card";
-import { Divider } from "@lotics/ui/divider";
-import { Icon, type IconName } from "@lotics/ui/icon";
-import { FormField } from "@lotics/ui/form_field";
-import { TextInputField } from "@lotics/ui/text_input_field";
-import { Combobox, ComboboxInput, ComboboxContent } from "@lotics/ui/combobox";
-import type { PickerOption } from "@lotics/ui/picker";
-import { SegmentedControl } from "@lotics/ui/segmented_control";
-import { Counter } from "@lotics/ui/counter";
-import { EmptyState } from "@lotics/ui/empty_state";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Quick capture — the SPEED surface, opposite of the heavy form: one
-// compact row of inputs, Enter to add, the field keeps focus and the contact
-// carries over so the next touchpoint is two keystrokes away. Every entry drops
-// into the log below (newest first, undoable). A `SegmentedControl` mode, a
-// `Combobox`-as-select, a `Counter` for the bounded duration. No screen-wide
-// Save — each entry commits on its own.
-// ─────────────────────────────────────────────────────────────────────────────
-
-type ActType = "call" | "email" | "meeting" | "note";
-
-const ACT: Record<ActType, { label: string; icon: IconName }> = {
-  call: { label: "Call", icon: "phone" },
-  email: { label: "Email", icon: "mail" },
-  meeting: { label: "Meeting", icon: "calendar" },
-  note: { label: "Note", icon: "message-square" },
-};
-
-const TYPE_OPTIONS = (Object.keys(ACT) as ActType[]).map((v) => ({ label: ACT[v].label, value: v }));
-
-interface Contact {
-  id: string;
-  name: string;
-  company: string;
-}
-
-const CONTACTS: Contact[] = [
-  { id: "c1", name: "Mara Lindqvist", company: "Northwind Traders" },
-  { id: "c2", name: "Diego Alvarez", company: "Harbor Freight Lines" },
-  { id: "c3", name: "Priya Nair", company: "Summit Packaging Co." },
-  { id: "c4", name: "Tom Becker", company: "Atlas Distribution" },
-  { id: "c5", name: "Lena Fischer", company: "Bluewater Logistics" },
-  { id: "c6", name: "Sara Cohen", company: "Meridian Retail Group" },
-];
-
-const CONTACT_OPTIONS: PickerOption<string, Contact>[] = CONTACTS.map((c) => ({
-  value: c.id,
-  label: c.name,
-  data: c,
-}));
-
-interface Entry {
-  id: string;
-  type: ActType;
-  contact: Contact;
-  note: string;
-  minutes: number;
-  time: string;
-}
-
-const SEED: Entry[] = [
-  { id: "e1", type: "call", contact: CONTACTS[2], note: "Reviewed Q3 volume, wants a revised quote by Friday", minutes: 15, time: "10:05" },
-  { id: "e2", type: "email", contact: CONTACTS[0], note: "Sent updated pallet spec sheet", minutes: 0, time: "09:40" },
-  { id: "e3", type: "meeting", contact: CONTACTS[4], note: "Warehouse walkthrough — flagged dock height", minutes: 45, time: "09:12" },
-];
-
-const fmtDuration = (m: number) => (m === 0 ? "—" : m >= 60 ? `${Math.floor(m / 60)}h${m % 60 ? ` ${m % 60}m` : ""}` : `${m}m`);
-
-export function TplQuick() {
-  const id = useRef(1);
-  const noteRef = useRef<RNTextInput>(null);
-
-  const [type, setType] = useState<ActType>("call");
-  const [contact, setContact] = useState<PickerOption<string, Contact> | null>(null);
-  const [note, setNote] = useState("");
-  const [minutes, setMinutes] = useState(15);
-  const [entries, setEntries] = useState<Entry[]>(SEED);
-
-  const canAdd = contact !== null && note.trim().length > 0;
-
-  const add = () => {
-    if (!canAdd || !contact?.data) return;
-    const entry: Entry = {
-      id: `e_${(id.current += 1)}`,
-      type,
-      contact: contact.data,
-      note: note.trim(),
-      minutes,
-      time: "Just now",
-    };
-    setEntries((prev) => [entry, ...prev]);
-    // Keep type + contact for the next touchpoint; clear only the note + duration
-    // and re-focus the note so logging again is immediate.
-    setNote("");
-    setMinutes(type === "email" ? 0 : 15);
-    noteRef.current?.focus();
-  };
-
-  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">Log activity</Text>
-          <Text size="sm" color="muted">Capture a touchpoint in seconds — pick the type, the contact, type the note, press Enter</Text>
-        </View>
-
-        {/* the capture row */}
-        <Card style={{ padding: 0 }}>
-          <CardBody>
-            <SegmentedControl accessibilityLabel="Activity type" options={TYPE_OPTIONS} value={type} onValueChange={setType} style={{ marginBottom: 16 }} />
-            <View style={{ flexDirection: "row", flexWrap: "wrap", columnGap: 16 }}>
-              <FormField label="Contact" style={{ flexGrow: 1, flexBasis: 240 }}>
-                <Combobox
-                  options={CONTACT_OPTIONS}
-                  value={contact}
-                  onValueChange={setContact}
-                  getOptionDescription={(o) => o.data?.company}
-                >
-                  <ComboboxInput placeholder="Select a contact" accessibilityLabel="Contact" />
-                  <ComboboxContent />
-                </Combobox>
-              </FormField>
-              <FormField label="Duration" style={{ flexGrow: 0, flexBasis: 180 }}>
-                <View style={{ minHeight: 40, justifyContent: "center" }}>
-                  <Counter value={minutes} onValueChange={setMinutes} min={0} max={240} step={15} accessibilityLabel="Duration" format={fmtDuration} />
-                </View>
-              </FormField>
-            </View>
-            <FormField label="Note">
-              <TextInputField
-                ref={noteRef}
-                value={note}
-                onChangeText={setNote}
-                placeholder="What happened? (press Enter to log)"
-                autoFocus
-                onKeyPress={(e: { nativeEvent: { key: string }; preventDefault: () => void }) => {
-                  if (e.nativeEvent.key === "Enter") {
-                    e.preventDefault();
-                    add();
-                  }
-                }}
-              />
-            </FormField>
-          </CardBody>
-          <Divider />
-          <View style={{ flexDirection: "row", alignItems: "center", paddingHorizontal: 20, paddingVertical: 12, gap: 8 }}>
-            <Text size="xs" color="muted" style={{ flex: 1 }}>
-              {contact?.data ? `${ACT[type].label} · ${contact.data.name}` : "Pick a contact to log against"}
-            </Text>
-            <Button title="Log activity" color="primary" icon="plus" disabled={!canAdd} onPress={add} />
-          </View>
-        </Card>
-
-        {/* the running log */}
-        <Card style={{ padding: 0 }}>
-          <CardHeader>
-            <CardHeaderTitle>Today</CardHeaderTitle>
-            <CardHeaderMeta>{entries.length} logged</CardHeaderMeta>
-          </CardHeader>
-          {entries.length === 0 ? (
-            <EmptyState icon="message-square" message="Nothing logged yet" hint="Your activity for the day appears here" />
-          ) : (
-            entries.map((e, i) => (
-              <View key={e.id}>
-                {i > 0 ? <Divider /> : null}
-                <View style={{ flexDirection: "row", alignItems: "center", gap: 12, paddingHorizontal: 20, paddingVertical: 12 }}>
-                  <View style={{ width: 32, height: 32, borderRadius: 16, backgroundColor: colors.zinc[100], alignItems: "center", justifyContent: "center" }}>
-                    <Icon name={ACT[e.type].icon} size={16} color={colors.zinc[600]} />
-                  </View>
-                  <View style={{ flex: 1, gap: 1 }}>
-                    <View style={{ flexDirection: "row", alignItems: "center", gap: 6 }}>
-                      <Text weight="medium" numberOfLines={1}>{e.contact.name}</Text>
-                      <Text size="xs" color="muted">· {e.contact.company}</Text>
-                    </View>
-                    <Text size="sm" color="muted" numberOfLines={1}>{e.note}</Text>
-                  </View>
-                  <View style={{ alignItems: "flex-end", width: 76 }}>
-                    <Text size="xs" color="muted" tabular>{e.time}</Text>
-                    {e.minutes > 0 ? <Text size="xs" color="muted" tabular>{fmtDuration(e.minutes)}</Text> : null}
-                  </View>
-                  <Button
-                    title="Delete"
-                    color="secondary"
-                    accessibilityLabel={`Delete ${e.contact.name} ${ACT[e.type].label.toLowerCase()}`}
-                    onPress={() =>
-                      Alert.alert(
-                        "Delete activity?",
-                        `Remove the ${ACT[e.type].label.toLowerCase()} logged for ${e.contact.name}. This can't be undone.`,
-                        [
-                          { text: "Cancel", style: "cancel" },
-                          { text: "Delete", style: "destructive", onPress: () => setEntries((prev) => prev.filter((x) => x.id !== e.id)) },
-                        ],
-                      )
-                    }
-                  />
-                </View>
-              </View>
-            ))
-          )}
-        </Card>
-      </View>
-    </ScrollView>
-  );
-}

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