@lotics/ui 3.5.0 → 4.0.0

package/examples/tpl_reconcile.tsx

@@ -0,0 +1,275 @@
+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 { Alert } from "@lotics/ui/alert";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Card, CardFooter, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
+import { Divider } from "@lotics/ui/divider";
+import { Drawer, DrawerFooter } from "@lotics/ui/drawer";
+import { EmptyState } from "@lotics/ui/empty_state";
+import { KPIStrip } from "@lotics/ui/kpi_strip";
+import { MenuListItem } from "@lotics/ui/menu_list_item";
+import { PressableRow } from "@lotics/ui/pressable_row";
+import { ChipGroup } from "@lotics/ui/chip_group";
+import { formatMoney } from "@lotics/ui/format_money";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Reconciliation — the unit of work is a PAIR: two lists that
+// must agree (here: bank statement lines vs open invoices; same shape for
+// 3-way match, delivered-vs-ordered, ledger-vs-subledger). The engine
+// proposes matches with a named confidence; the person confirms in one
+// click, demotes wrong guesses, and resolves the unmatched tail in the
+// drawer — pick a candidate, or take an escape hatch (bank fee, manual
+// receipt). Filter pills are the match lifecycle; confirming moves rows live.
+// ─────────────────────────────────────────────────────────────────────────────
+
+interface Invoice {
+  id: string;
+  customer: string;
+  amount: number;
+}
+
+interface BankLine {
+  id: string;
+  date: string;
+  desc: string;
+  amount: number;
+  status: "suggested" | "unmatched" | "confirmed";
+  /** The engine's proposed invoice + why it believes the pair. */
+  match?: { invoice: string; confidence: "Exact reference" | "Amount + date" };
+}
+
+const INVOICES: Invoice[] = [
+  { id: "INV-2026-0312", customer: "ATLAS COMPONENTS", amount: 86_200_000 },
+  { id: "INV-2026-0318", customer: "CRESTLINE FURNITURE", amount: 41_300_000 },
+  { id: "INV-2026-0320", customer: "KING LUN PLASTICS", amount: 23_400_000 },
+  { id: "INV-2026-0321", customer: "VITTORIA ACCESSORIES", amount: 22_500_000 },
+  { id: "INV-2026-0324", customer: "BRIGHTCELL BATTERIES", amount: 18_700_000 },
+  { id: "INV-2026-0326", customer: "MERIDIAN CONSTRUCTION", amount: 25_200_000 },
+  { id: "INV-2026-0327", customer: "KING LUN PLASTICS", amount: 23_900_000 },
+];
+
+const LINES: BankLine[] = [
+  { id: "BL-091", date: "09/06", desc: "ATLAS COMPONENTS — INV-2026-0312", amount: 86_200_000, status: "suggested", match: { invoice: "INV-2026-0312", confidence: "Exact reference" } },
+  { id: "BL-092", date: "09/06", desc: "CRESTLINE TT PAYMENT", amount: 41_300_000, status: "suggested", match: { invoice: "INV-2026-0318", confidence: "Amount + date" } },
+  { id: "BL-094", date: "10/06", desc: "VITTORIA ACC — INV-2026-0321", amount: 22_500_000, status: "suggested", match: { invoice: "INV-2026-0321", confidence: "Exact reference" } },
+  { id: "BL-095", date: "10/06", desc: "BRIGHTCELL JUNE", amount: 18_700_000, status: "suggested", match: { invoice: "INV-2026-0324", confidence: "Amount + date" } },
+  { id: "BL-096", date: "11/06", desc: "KING LUN PLASTICS TRANSFER", amount: 23_400_000, status: "unmatched" },
+  { id: "BL-097", date: "11/06", desc: "INCOMING TT REF 88412", amount: 25_200_000, status: "unmatched" },
+  { id: "BL-098", date: "11/06", desc: "BANK CHARGES JUNE", amount: 264_000, status: "unmatched" },
+  { id: "BL-099", date: "12/06", desc: "MERIDIAN PART PAYMENT", amount: 12_600_000, status: "unmatched" },
+  { id: "BL-088", date: "08/06", desc: "ATLAS COMPONENTS — INV-2026-0301", amount: 64_800_000, status: "confirmed", match: { invoice: "INV-2026-0301", confidence: "Exact reference" } },
+  { id: "BL-089", date: "08/06", desc: "NORTHWIND PKG — INV-2026-0305", amount: 31_400_000, status: "confirmed", match: { invoice: "INV-2026-0305", confidence: "Exact reference" } },
+];
+
+const invoiceOf = (id: string) => INVOICES.find((i) => i.id === id);
+
+/** Candidate invoices for an unmatched line — closest amounts first. */
+const candidatesFor = (line: BankLine, taken: Set<string>) =>
+  INVOICES.filter((i) => !taken.has(i.id))
+    .map((i) => ({ ...i, delta: i.amount - line.amount }))
+    .sort((a, b) => Math.abs(a.delta) - Math.abs(b.delta))
+    .slice(0, 3);
+
+function SideCell({ top, bottom, width }: { top: string; bottom: string; width?: number }) {
+  return (
+    <View style={{ gap: 0, width, flexShrink: 1 }}>
+      <Text size="sm" numberOfLines={1}>{top}</Text>
+      <Text size="xs" color="muted" numberOfLines={1}>{bottom}</Text>
+    </View>
+  );
+}
+
+export function TplReconcile() {
+  const [lines, setLines] = useState<BankLine[]>(LINES);
+  const [tab, setTab] = useState("suggested");
+  const [openId, setOpenId] = useState<string | null>(null);
+
+  const setStatus = (id: string, status: BankLine["status"], match?: BankLine["match"]) => {
+    setLines((prev) => prev.map((l) => (l.id === id ? { ...l, status, match: match ?? (status === "unmatched" ? undefined : l.match) } : l)));
+    setOpenId(null);
+  };
+
+  const byStatus = (s: BankLine["status"]) => lines.filter((l) => l.status === s);
+  const visible = byStatus(tab as BankLine["status"]);
+  const open = lines.find((l) => l.id === openId) ?? null;
+  const seqIndex = open ? visible.findIndex((l) => l.id === open.id) : -1;
+
+  const unexplained = byStatus("unmatched").reduce((s, l) => s + l.amount, 0);
+  const matchedValue = byStatus("confirmed").reduce((s, l) => s + l.amount, 0);
+  const takenInvoices = new Set(lines.filter((l) => l.match && l.status !== "unmatched").map((l) => l.match!.invoice));
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 1040, alignSelf: "center", gap: 16 }}>
+        {/* header band */}
+        <View style={{ gap: 2 }}>
+          <Text size="xl" weight="semibold">Payment reconciliation</Text>
+          <Text size="sm" color="muted">Two lists that must agree — confirm the engine's matches, then chase the unexplained tail</Text>
+        </View>
+
+        <KPIStrip
+          items={[
+            { label: "Statement lines", value: lines.length, format: "number", caption: "this period" },
+            { label: "Open invoices", value: INVOICES.length - takenInvoices.size, format: "number", info: "Invoices with no matching statement line yet — the other half of the reconciliation." },
+            { label: "Matched value", value: matchedValue, format: "currency", compact: true, info: "Statement money tied to an invoice — the explained half of the period." },
+            { label: "Unexplained", value: unexplained, format: "currency", compact: true, tone: unexplained > 0 ? "danger" : "default", info: "Money on the statement not yet tied to an invoice or an escape hatch (bank fee, manual receipt). Reconciliation closes at zero." },
+          ]}
+        />
+
+        <ChipGroup
+          accessibilityLabel="Match lifecycle"
+          options={[
+            { label: `Suggested · ${byStatus("suggested").length}`, value: "suggested" },
+            { label: `Unmatched · ${byStatus("unmatched").length}`, value: "unmatched" },
+            { label: `Confirmed · ${byStatus("confirmed").length}`, value: "confirmed" },
+          ]}
+          value={tab}
+          onValueChange={(t) => { setTab(t); setOpenId(null); }}
+        />
+
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle
+              info={
+                tab === "suggested"
+                  ? "Bank line on the left, proposed invoice on the right, the engine's reason in between. Confirm is one click; ⋯ demotes a wrong guess."
+                  : tab === "unmatched"
+                    ? "Statement money with no invoice yet. Press a row to pick from candidates or take an escape hatch."
+                    : "Settled pairs. ⋯ unlinks a mistake — the line returns to Unmatched."
+              }
+            >
+              {tab === "suggested" ? "Proposed matches" : tab === "unmatched" ? "Needs a home" : "Settled"}
+            </CardHeaderTitle>
+          </CardHeader>
+
+          {visible.length === 0 ? (
+            <EmptyState message={tab === "unmatched" ? "Nothing unexplained" : "Nothing here"} hint={tab === "suggested" ? "Every proposal is confirmed or demoted" : undefined} />
+          ) : (
+            visible.map((l, i) => {
+              const inv = l.match ? invoiceOf(l.match.invoice) : undefined;
+              return (
+                <View key={l.id}>
+                  {i > 0 ? <Divider /> : null}
+                  <PressableRow onPress={() => setOpenId(l.id)} selected={open?.id === l.id}>
+                    <Pressable
+                      accessibilityRole="button"
+                      accessibilityLabel={`Open statement line ${l.id}`}
+                      onPress={() => setOpenId(l.id)}
+                      style={{ flex: 1, flexDirection: "row", alignItems: "center", gap: 12, minHeight: 56 }}
+                    >
+                      {/* bank side */}
+                      <Text size="sm" color="muted" tabular style={{ width: 44 }}>{l.date}</Text>
+                      <SideCell top={l.desc} bottom={`${l.id} · ${formatMoney(l.amount)}`} />
+                      <View style={{ flex: 1 }} />
+                      {/* the pair bridge */}
+                      {l.match ? (
+                        <>
+                          <Badge variant="dot" label={l.match.confidence} color={l.match.confidence === "Exact reference" ? "emerald" : "amber"} />
+                          <SideCell
+                            top={l.match.invoice}
+                            bottom={inv ? `${inv.customer} · ${formatMoney(inv.amount)}` : "non-invoice entry"}
+                            width={210}
+                          />
+                        </>
+                      ) : (
+                        <Badge variant="dot" label="No invoice" color="red" />
+                      )}
+                    </Pressable>
+                    {l.status === "suggested" ? (
+                      <>
+                        <Button title="Confirm" color="secondary" onPress={() => setStatus(l.id, "confirmed")} />
+                        <ActionMenu
+                          accessibilityLabel={`Actions for ${l.id}`}
+                          items={[{ key: "demote", label: "Not a match", icon: "ban", danger: true, onPress: () => Alert.alert("Demote this match?", "The proposed match moves back to the unexplained list.", [{ text: "Keep", style: "cancel" }, { text: "Not a match", style: "destructive", onPress: () => setStatus(l.id, "unmatched") }]) }]}
+                        />
+                      </>
+                    ) : null}
+                    {l.status === "unmatched" ? (
+                      <Button title="Resolve" color="secondary" onPress={() => setOpenId(l.id)} />
+                    ) : null}
+                    {l.status === "confirmed" ? (
+                      <ActionMenu
+                        accessibilityLabel={`Actions for ${l.id}`}
+                        items={[{ key: "unlink", label: "Unlink match", icon: "ban", danger: true, onPress: () => Alert.alert("Unlink this match?", "The confirmed pair is broken and the line returns to unexplained.", [{ text: "Keep", style: "cancel" }, { text: "Unlink", style: "destructive", onPress: () => setStatus(l.id, "unmatched") }]) }]}
+                      />
+                    ) : null}
+                  </PressableRow>
+                </View>
+              );
+            })
+          )}
+
+          <CardFooter>
+            <Text size="xs" color="muted" tabular style={{ flex: 1 }}>
+              {`${visible.length} lines · ${formatMoney(visible.reduce((s, l) => s + l.amount, 0), { compact: true })} in this view`}
+            </Text>
+          </CardFooter>
+        </Card>
+      </View>
+
+      {open !== null ? (
+        <Drawer
+          open
+          onOpenChange={(o) => !o && setOpenId(null)}
+          title={open.id}
+          width={460}
+          onPrev={seqIndex > 0 ? () => setOpenId(visible[seqIndex - 1].id) : undefined}
+          onNext={seqIndex >= 0 && seqIndex < visible.length - 1 ? () => setOpenId(visible[seqIndex + 1].id) : undefined}
+          position={seqIndex >= 0 ? `${seqIndex + 1}/${visible.length}` : undefined}
+        >
+          <ScrollView key={open.id} style={{ flex: 1 }} contentContainerStyle={{ padding: 24, gap: 14 }}>
+            <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+              <Badge label={open.status === "confirmed" ? "Settled" : open.status === "suggested" ? "Proposed" : "Unmatched"} color={open.status === "confirmed" ? "emerald" : open.status === "suggested" ? "amber" : "red"} />
+              <Text size="sm" color="muted" tabular>{open.date}</Text>
+            </View>
+            <Text size="sm">{open.desc}</Text>
+            <Text size="lg" weight="semibold" tabular>{formatMoney(open.amount)}</Text>
+            <Divider />
+            {open.status === "unmatched" ? (
+              <View style={{ gap: 8 }}>
+                <Text size="sm" weight="semibold">Candidate invoices</Text>
+                <View style={{ gap: 2 }}>
+                  {candidatesFor(open, takenInvoices).map((c) => (
+                    <MenuListItem
+                      key={c.id}
+                      title={`${c.id} · ${c.customer}`}
+                      description={
+                        c.delta === 0
+                          ? `${formatMoney(c.amount)} — exact amount`
+                          : `${formatMoney(c.amount)} — off by ${formatMoney(Math.abs(c.delta))}${c.delta > 0 ? " (partial payment?)" : ""}`
+                      }
+                      onPress={() => setStatus(open.id, "confirmed", { invoice: c.id, confidence: "Amount + date" })}
+                    />
+                  ))}
+                </View>
+                <Text size="xs" color="muted">No candidate fits? Take an escape hatch below — unexplained money never stays unexplained.</Text>
+              </View>
+            ) : open.match ? (
+              <View style={{ gap: 6 }}>
+                <Text size="sm" weight="semibold">Matched invoice</Text>
+                <Text size="sm" weight="medium" tabular>{open.match.invoice}</Text>
+                <Text size="xs" color="muted">{`${invoiceOf(open.match.invoice)?.customer ?? "Non-invoice entry"} · matched on ${open.match.confidence.toLowerCase()}`}</Text>
+              </View>
+            ) : null}
+          </ScrollView>
+          <DrawerFooter>
+            {open.status === "unmatched" ? (
+              <>
+                <Button title="Record as bank fee" color="muted" onPress={() => setStatus(open.id, "confirmed", { invoice: "Bank fees · June", confidence: "Exact reference" })} />
+                <Button title="Create manual receipt" color="secondary" onPress={() => {}} />
+              </>
+            ) : open.status === "suggested" ? (
+              <Button title="Confirm match" color="primary" onPress={() => setStatus(open.id, "confirmed")} />
+            ) : (
+              <Button title="Open receipt record" color="primary" onPress={() => {}} />
+            )}
+          </DrawerFooter>
+        </Drawer>
+      ) : null}
+    </ScrollView>
+  );
+}

package/examples/tpl_record.tsx

@@ -0,0 +1,301 @@
+import { useState } from "react";
+import { ScrollView, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid, type ColorName } from "@lotics/ui/colors";
+import { Card, CardHeader, CardHeaderTitle } from "@lotics/ui/card";
+import { DetailRow } from "@lotics/ui/detail_row";
+import { Badge } from "@lotics/ui/badge";
+import { Button } from "@lotics/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@lotics/ui/popover";
+import { MenuButton } from "@lotics/ui/menu_button";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { InlineNumberInput } from "@lotics/ui/inline_number_input";
+import { InlineSelect } from "@lotics/ui/inline_select";
+import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
+import { InlineTimePicker } from "@lotics/ui/inline_time_picker";
+import { TagInput, type TagOption } from "@lotics/ui/tag_input";
+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";
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Inline record — a record edited entirely IN PLACE. Every value
+// reads as plain text; hovering tints it, clicking swaps the field in at the
+// same height (no reflow), and it saves on its own. The data-capture
+// alternative to a form: no screen-wide edit mode, no one big Save — each field
+// is its own atomic edit. Banded cards over zinc-50, label-left / value-right.
+// ─────────────────────────────────────────────────────────────────────────────
+
+const PLAN = [
+  { value: "starter", label: "Starter" },
+  { value: "growth", label: "Growth" },
+  { value: "enterprise", label: "Enterprise" },
+];
+
+const HEALTH = [
+  { value: "healthy", label: "Healthy" },
+  { value: "at_risk", label: "At risk" },
+  { value: "churning", label: "Churning" },
+];
+
+const HEALTH_DOT: Record<string, string> = {
+  healthy: colors.emerald[500],
+  at_risk: colors.amber[500],
+  churning: colors.red[500],
+};
+
+// Tags — an inline MULTI-select: chips render in the field, search to add, ✕ to
+// remove, free-entry to coin a new tag (`allowCustom`).
+const TAG_OPTIONS: TagOption[] = [
+  { value: "vip", label: "VIP" },
+  { value: "priority", label: "Priority support" },
+  { value: "renewal_risk", label: "Renewal risk" },
+  { value: "expansion", label: "Expansion" },
+  { value: "reference", label: "Referenceable" },
+];
+
+// Seed the attachment grid with self-contained SVG data-URI "scans" so the
+// thumbnails AND the preview modal work offline; dropped files are real blobs.
+const scan = (id: string, label: string, bg: string): DisplayFile => ({
+  id,
+  filename: `${label.toLowerCase().replaceAll(" ", "-")}.svg`,
+  mimeType: "image/svg+xml",
+  url:
+    "data:image/svg+xml," +
+    encodeURIComponent(
+      `<svg xmlns="http://www.w3.org/2000/svg" width="420" height="560"><rect width="100%" height="100%" fill="${bg}"/><text x="210" y="290" fill="#ffffff" font-family="sans-serif" font-size="30" text-anchor="middle">${label}</text></svg>`,
+    ),
+});
+
+const SEED_DOCS: DisplayFile[] = [
+  scan("doc_1", "Master agreement", "#1e3a8a"),
+  scan("doc_2", "Tax certificate", "#065f46"),
+];
+
+// Simulate an async persist so the saving state is visible.
+function persist<T>(set: (v: T) => void) {
+  return (v: T) =>
+    new Promise<void>((resolve) => {
+      setTimeout(() => {
+        set(v);
+        resolve();
+      }, 350);
+    });
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <DetailRow label={label} labelWidth={130} minHeight={40}>
+      <View style={{ flex: 1 }}>{children}</View>
+    </DetailRow>
+  );
+}
+
+function Group({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <Card style={{ padding: 0 }}>
+      <CardHeader>
+        <CardHeaderTitle>{title}</CardHeaderTitle>
+      </CardHeader>
+      <View style={{ paddingHorizontal: 16, paddingVertical: 8, gap: 2 }}>{children}</View>
+    </Card>
+  );
+}
+
+// ── Lifecycle disposition (NOT a plain select). "Lead" is the OPEN default;
+// "Closed"/"Lost" are terminal OUTCOMES the user decides. The control is
+// asymmetric by phase: while open it surfaces the two outcomes as ACTIONS;
+// once resolved it shows the colored STATE with a quiet, reversible Change
+// (reopen to Lead, or switch to the other outcome — valence lives on the badge,
+// not the buttons). States/colors/labels vary per domain, so it's a composition
+// (Badge + Button + Popover/MenuButton), not a shipped primitive.
+type Stage = "lead" | "closed" | "lost";
+
+const STAGE_META: Record<Stage, { label: string; color: ColorName }> = {
+  lead: { label: "Lead", color: "blue" },
+  closed: { label: "Closed", color: "emerald" },
+  lost: { label: "Lost", color: "red" },
+};
+
+function StageField({ value, onChange }: { value: Stage; onChange: (next: Stage) => void }) {
+  const [open, setOpen] = useState(false);
+  const meta = STAGE_META[value];
+
+  // Pending: the decision is the action.
+  if (value === "lead") {
+    return (
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <Badge variant="dot" label={meta.label} color={meta.color} />
+        <View style={{ flex: 1 }} />
+        <Button title="Mark closed" color="primary" onPress={() => onChange("closed")} />
+        <Button title="Mark lost" color="danger-secondary" onPress={() => onChange("lost")} />
+      </View>
+    );
+  }
+
+  // Resolved: the badge is the state; Change opens a quiet, colored state
+  // switcher (each option a dot + label, current marked) — a status control,
+  // not a generic text menu.
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+      <Badge variant="dot" label={meta.label} color={meta.color} />
+      <View style={{ flex: 1 }} />
+      <Popover open={open} onOpenChange={setOpen} side="bottom" align="end">
+        <PopoverTrigger>
+          <Button title="Change" color="muted" onPress={() => setOpen(true)} />
+        </PopoverTrigger>
+        <PopoverContent>
+          <View style={{ gap: 2, padding: 4, minWidth: 200 }}>
+            {(["lead", "closed", "lost"] as Stage[]).map((s) => (
+              <MenuButton
+                key={s}
+                icon={<View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: solid(STAGE_META[s].color) }} />}
+                title={s === value ? `${STAGE_META[s].label} · current` : STAGE_META[s].label}
+                selected={s === value}
+                disabled={s === value}
+                onPress={() => { onChange(s); setOpen(false); }}
+              />
+            ))}
+          </View>
+        </PopoverContent>
+      </Popover>
+    </View>
+  );
+}
+
+export function TplRecord() {
+  const [name, setName] = useState("Northwind Traders");
+  const [contact, setContact] = useState("Mara Lindqvist");
+  const [email, setEmail] = useState("mara@northwind.co");
+  const [phone, setPhone] = useState("");
+  const [city, setCity] = useState("Gothenburg");
+  const [value, setValue] = useState<number | null>(48000);
+  const [plan, setPlan] = useState("growth");
+  const [health, setHealth] = useState("healthy");
+  const [renews, setRenews] = useState("2026-05-22");
+  const [review, setReview] = useState("2026-04-10T14:30");
+  const [opens, setOpens] = useState("09:00");
+  const [stage, setStage] = useState<Stage>("lead");
+  const [tags, setTags] = useState<TagOption[]>([TAG_OPTIONS[0], TAG_OPTIONS[3]]);
+  const [docs, setDocs] = useState<DisplayFile[]>(SEED_DOCS);
+  const [activeDoc, setActiveDoc] = useState<number | null>(null);
+
+  const money = (v: number | null) => (v == null ? "" : `$${v.toLocaleString("en-US")}`);
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.zinc[50] }} contentContainerStyle={{ padding: 28 }}>
+      <View style={{ width: "100%", maxWidth: 560, alignSelf: "center", gap: 16 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+          <Text size="xl" weight="semibold">
+            {name}
+          </Text>
+          <Badge label="Customer" color="blue" />
+          <View style={{ flex: 1 }} />
+          <Text size="xs" color="muted">
+            Click any value to edit
+          </Text>
+        </View>
+
+        <Group title="Contact">
+          <Field label="Account name">
+            <InlineTextInput value={name} onSave={persist(setName)} accessibilityLabel="Account name" />
+          </Field>
+          <Field label="Primary contact">
+            <InlineTextInput value={contact} onSave={persist(setContact)} accessibilityLabel="Primary contact" />
+          </Field>
+          <Field label="Email">
+            <InlineTextInput value={email} onSave={persist(setEmail)} placeholder="Add email…" accessibilityLabel="Email" />
+          </Field>
+          <Field label="Phone">
+            <InlineTextInput value={phone} onSave={persist(setPhone)} placeholder="Add phone…" accessibilityLabel="Phone" />
+          </Field>
+          <Field label="City">
+            <InlineTextInput value={city} onSave={persist(setCity)} accessibilityLabel="City" />
+          </Field>
+        </Group>
+
+        <Group title="Commercial">
+          <Field label="Stage">
+            <StageField value={stage} onChange={setStage} />
+          </Field>
+          <Field label="Annual value">
+            <InlineNumberInput value={value} onSave={persist(setValue)} format={money} accessibilityLabel="Annual value" />
+          </Field>
+          <Field label="Plan">
+            <InlineSelect value={plan} onSave={persist(setPlan)} options={PLAN} accessibilityLabel="Plan" />
+          </Field>
+          <Field label="Health">
+            <InlineSelect
+              value={health}
+              onSave={persist(setHealth)}
+              options={HEALTH}
+              accessibilityLabel="Health"
+              renderOptionContent={(o) => (
+                <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+                  <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: HEALTH_DOT[o.value] }} />
+                  <Text size="sm">{o.label}</Text>
+                </View>
+              )}
+            />
+          </Field>
+          <Field label="Tags">
+            <TagInput value={tags} options={TAG_OPTIONS} onChange={setTags} allowCreate placeholder="Add tags…" accessibilityLabel="Tags" />
+          </Field>
+        </Group>
+
+        <Group title="Schedule">
+          <Field label="Renews on">
+            <InlineDatePicker value={renews} onSave={persist(setRenews)} locale="en-US" accessibilityLabel="Renews on" />
+          </Field>
+          <Field label="Next review">
+            <InlineDatePicker value={review} onSave={persist(setReview)} format="datetime" locale="en-US" accessibilityLabel="Next review" />
+          </Field>
+          <Field label="Support opens">
+            <InlineTimePicker value={opens} onSave={persist(setOpens)} accessibilityLabel="Support opens" />
+          </Field>
+        </Group>
+
+        {/* Documents — a richer in-place field: drop to add, click a thumbnail to
+            preview in the gallery, ✕ to delete. Not every inline field is a
+            same-height swap; an attachment grid edits in place too. */}
+        <Card style={{ padding: 0 }}>
+          <CardHeader>
+            <CardHeaderTitle>Documents</CardHeaderTitle>
+          </CardHeader>
+          <View style={{ paddingHorizontal: 16, paddingVertical: 12, gap: 12 }}>
+            {docs.length > 0 ? (
+              <FileThumbnailGrid
+                files={docs}
+                itemSize={84}
+                onFilePress={(f) => setActiveDoc(docs.findIndex((x) => x.id === f.id))}
+                onRemove={(id) => setDocs((prev) => prev.filter((x) => x.id !== id))}
+              />
+            ) : null}
+            <FileDropzone
+              height={96}
+              label="Drop contracts or scans"
+              hint="or click to browse · PDF, images"
+              dropLabel="Release to attach"
+              accept="application/pdf,image/*"
+              accessibilityLabel="Attach documents"
+              onFiles={(dropped) =>
+                setDocs((prev) => [
+                  ...prev,
+                  ...dropped.map((f, i) => ({
+                    id: `${f.name}-${prev.length + i}`,
+                    filename: f.name,
+                    mimeType: f.type || "application/octet-stream",
+                    url: URL.createObjectURL(f),
+                  })),
+                ])
+              }
+            />
+          </View>
+        </Card>
+      </View>
+
+      <FileGalleryModal files={docs} activeIndex={activeDoc} onIndexChange={setActiveDoc} captionHint="ESC to close · ←/→ to move" />
+    </ScrollView>
+  );
+}