@lotics/ui 7.7.0 → 7.9.0

package/examples/tpl_pipeline.tsx

@@ -1,400 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import { Text } from "@lotics/ui/text";
-import { colors, solid, asColorName } from "@lotics/ui/colors";
-import { OptionBadge, type OptionValue } from "@lotics/ui/option_badge";
-import { MemberChip } from "@lotics/ui/member_chip";
-import { Avatar } from "@lotics/ui/avatar";
-import { SearchInput } from "@lotics/ui/search_input";
-import { FilterChip } from "@lotics/ui/filter_chip";
-import { OptionList } from "@lotics/ui/option_list";
-import { Button } from "@lotics/ui/button";
-import { InlineTextInput } from "@lotics/ui/inline_text_input";
-import { InlineNumberInput } from "@lotics/ui/inline_number_input";
-import { InlineMemberSelect } from "@lotics/ui/inline_member_select";
-import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
-import { InlineSelect } from "@lotics/ui/inline_select";
-import { TextInputField } from "@lotics/ui/text_input_field";
-import { DataGrid, gridRowStyle, type DataGridColumn, type DataGridGroup } from "@lotics/ui/data_grid";
-import { cycleSort, sortBy, type SortState } from "@lotics/ui/sort_header";
-import { Composer } from "@lotics/ui/composer";
-import { AgentRun, type AgentRunItem } from "@lotics/ui/agent_run";
-import { ChangeReview, ChangeReviewActions, type ChangeReviewItemStatus } from "@lotics/ui/change_review";
-import { Dialog, DialogHeader, DialogHeaderTitle, DialogScrollArea, DialogFooter } from "@lotics/ui/dialog";
-import { CompletionState } from "@lotics/ui/completion_state";
-import { Confidence, type ConfidenceLevel } from "@lotics/ui/confidence";
-import { formatMoney } from "@lotics/ui/format_money";
-import { toISODate } from "@lotics/ui/format_date";
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Template · Deal pipeline — the SECOND consumer of the `DataGrid` primitive (the
-// inline-managed grouped table), sibling of tpl_task_board. Same grammar — toolbar
-// (search · group-by · filters) over a grouped, sortable, inline-editable grid,
-// per-group add — but a DIFFERENT domain and DIFFERENT FIELDS: a money value
-// (`InlineNumberInput`), and NO leading slot (a deal has no "done"; its stage is
-// its state, so the first column is just the name). Moderate data only (active
-// deals are dozens-to-hundreds); a 10k+ record set belongs in the paginated
-// register (tpl_dossier), not here.
-// ─────────────────────────────────────────────────────────────────────────────
-
-const MEMBERS = [
-  { id: "m1", name: "Mai Anh" },
-  { id: "m2", name: "Trọng" },
-  { id: "m3", name: "Linh" },
-  { id: "m4", name: "Sơn" },
-];
-const MEMBER_OPTS = MEMBERS.map((m) => ({ value: m.id, label: m.name }));
-const memberName = (id: string | null) => MEMBERS.find((m) => m.id === id)?.name ?? "—";
-
-type Stage = "lead" | "qualified" | "proposal" | "won" | "lost";
-const STAGE: Record<Stage, OptionValue> = {
-  lead: { key: "lead", label: "Lead", color: null },
-  qualified: { key: "qualified", label: "Qualified", color: "blue" },
-  proposal: { key: "proposal", label: "Proposal", color: "amber" },
-  won: { key: "won", label: "Won", color: "emerald" },
-  lost: { key: "lost", label: "Lost", color: "rose" },
-};
-const STAGE_ORDER = Object.keys(STAGE) as Stage[];
-const STAGE_OPTIONS = STAGE_ORDER.map((s) => ({ value: s, label: STAGE[s].label }));
-const renderStageBadge = (o: { value: string }) => <OptionBadge value={STAGE[o.value as Stage]} variant="dot" />;
-
-const money = (n: number | null) => (n == null ? "" : formatMoney(n));
-
-interface Deal {
-  id: string;
-  name: string;
-  value: number | null;
-  ownerId: string | null;
-  close: string | null;
-  stage: Stage;
-}
-
-const day = (n: number): string => {
-  const d = new Date();
-  d.setDate(d.getDate() + n);
-  return toISODate(d);
-};
-
-const SEED: Deal[] = [
-  { id: "d1", name: "VITTORIA — gift-box program", value: 42000, ownerId: "m1", close: day(6), stage: "proposal" },
-  { id: "d2", name: "Northwind — carton refresh", value: 18500, ownerId: "m3", close: day(-2), stage: "qualified" },
-  { id: "d3", name: "Crestline — Tet seasonal run", value: 64000, ownerId: "m1", close: day(20), stage: "lead" },
-  { id: "d4", name: "Atlas — protective inserts", value: 9800, ownerId: "m2", close: day(2), stage: "qualified" },
-  { id: "d5", name: "Summit — pallet labels", value: 5200, ownerId: "m4", close: null, stage: "lead" },
-  { id: "d6", name: "Beacon — retail display units", value: 31000, ownerId: "m3", close: day(-9), stage: "won" },
-  { id: "d7", name: "Harbor — export crates", value: 27500, ownerId: "m2", close: day(40), stage: "proposal" },
-  { id: "d8", name: "Grace Co — sample kit", value: 3400, ownerId: null, close: null, stage: "lost" },
-];
-
-type GroupBy = "stage" | "owner" | "close";
-const GROUP_OPTIONS: { value: GroupBy; label: string }[] = [
-  { value: "stage", label: "Stage" },
-  { value: "owner", label: "Owner" },
-  { value: "close", label: "Close date" },
-];
-
-function closeBucketKey(due: string | null): string {
-  if (!due) return "none";
-  const d = due.slice(0, 10);
-  const today = day(0);
-  if (d < today) return "overdue";
-  if (d <= day(7)) return "week";
-  if (d <= day(30)) return "month";
-  return "later";
-}
-const CLOSE_LABELS: Record<string, string> = { overdue: "Overdue", week: "This week", month: "This month", later: "Later", none: "No date" };
-const CLOSE_ORDER = ["overdue", "week", "month", "later", "none"];
-const CLOSE_PRESET: Record<string, string | null> = { overdue: day(-1), week: day(3), month: day(20), later: day(60), none: null };
-
-function presetFor(groupBy: GroupBy | null, key: string): Partial<Deal> {
-  if (groupBy === "stage") return { stage: key as Stage };
-  if (groupBy === "owner") return { ownerId: key === "none" ? null : key };
-  if (groupBy === "close") return { close: CLOSE_PRESET[key] ?? null };
-  return {};
-}
-
-function sortValue(d: Deal, key: string): string | number {
-  switch (key) {
-    case "name": return d.name.toLowerCase();
-    case "value": return d.value ?? -1;
-    case "owner": return d.ownerId ? memberName(d.ownerId).toLowerCase() : "￿";
-    case "close": return d.close ?? "￿";
-    case "stage": return STAGE_ORDER.indexOf(d.stage);
-    default: return "";
-  }
-}
-
-// ── AI · draft deals from an inquiry — agent proposes, you keep/edit/drop ──────
-type Phase = "idle" | "reading" | "review" | "done";
-interface Proposal { id: string; name: string; value: number | null; stage: Stage; confidence: ConfidenceLevel; source: string }
-const DRAFT_STEPS: { label: string; detail: string }[] = [
-  { label: "Split the inquiry into candidate deals", detail: "5 lines" },
-  { label: "Drop context that isn't an opportunity", detail: "kept 3" },
-  { label: "Estimate a value and stage for each", detail: "3 scored" },
-];
-const DRAFTED: Proposal[] = [
-  { id: "p1", name: "Meridian — Q3 carton program", value: 38000, stage: "qualified", confidence: "high", source: "“…Meridian wants pricing on ~40k cartons for Q3.”" },
-  { id: "p2", name: "Oakline — sample run", value: 4200, stage: "lead", confidence: "medium", source: "“…Oakline asked for a small sample run first.”" },
-  { id: "p3", name: "Pinecrest — retail display units", value: 21000, stage: "proposal", confidence: "low", source: "“…Pinecrest might need displays, budget unclear.”" },
-];
-
-export function TplPipeline() {
-  const [deals, setDeals] = useState<Deal[]>(SEED);
-  const [query, setQuery] = useState("");
-  const [groupBy, setGroupBy] = useState<GroupBy | null>("stage"); // null = ungrouped (cleared)
-  const [ownerFilter, setOwnerFilter] = useState<string[]>([]);
-  const [stageFilter, setStageFilter] = useState<string[]>([]);
-  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
-  const toggleCollapse = (key: string) =>
-    setCollapsed((c) => { const n = new Set(c); if (n.has(key)) n.delete(key); else n.add(key); return n; });
-  const [sort, setSort] = useState<SortState | null>(null);
-  const onSort = (key: string) => setSort((s) => cycleSort(s, key));
-
-  const patch = (id: string, next: Partial<Deal>) =>
-    setDeals((ds) => ds.map((d) => (d.id === id ? { ...d, ...next } : d)));
-  const addDeal = (d: Omit<Deal, "id">) =>
-    setDeals((ds) => [...ds, { id: `n${ds.length}-${d.name.length}`, ...d }]);
-
-  // Draft-from-notes AI flow — agent proposes deals, you keep/edit/drop, commit adds them.
-  const [draftOpen, setDraftOpen] = useState(false);
-  const [phase, setPhase] = useState<Phase>("idle");
-  const [revealed, setRevealed] = useState(0);
-  const [proposals, setProposals] = useState<Proposal[]>([]);
-  const [decisions, setDecisions] = useState<Record<string, ChangeReviewItemStatus>>({});
-  const [addedCount, setAddedCount] = useState(0);
-
-  const startDraft = useCallback(() => { setRevealed(0); setPhase("reading"); }, []);
-  const resetDraft = useCallback(() => { setProposals([]); setDecisions({}); setRevealed(0); setPhase("idle"); }, []);
-  const closeDraft = useCallback(() => { setDraftOpen(false); resetDraft(); }, [resetDraft]);
-  const editProposal = useCallback((id: string, p: Partial<Proposal>) =>
-    setProposals((ps) => ps.map((x) => (x.id === id ? { ...x, ...p } : x))), []);
-  const decide = useCallback((id: string, status: ChangeReviewItemStatus | null) =>
-    setDecisions((dec) => { const n = { ...dec }; if (status) n[id] = status; else delete n[id]; return n; }), []);
-  const acceptedCount = proposals.filter((p) => decisions[p.id] === "accepted").length;
-  const addAccepted = useCallback(() => {
-    const accepted = proposals.filter((p) => decisions[p.id] === "accepted");
-    setDeals((ds) => [...ds, ...accepted.map((p, i) => ({ id: `d-${p.id}-${i}`, name: p.name, value: p.value, ownerId: null, close: null, stage: p.stage }))]);
-    setAddedCount(accepted.length);
-    setPhase("done");
-  }, [proposals, decisions]);
-
-  useEffect(() => {
-    if (phase !== "reading") return;
-    if (revealed >= DRAFT_STEPS.length) {
-      const t = setTimeout(() => { setProposals(DRAFTED); setPhase("review"); }, 850);
-      return () => clearTimeout(t);
-    }
-    const t = setTimeout(() => setRevealed((r) => r + 1), revealed === 0 ? 280 : 680);
-    return () => clearTimeout(t);
-  }, [phase, revealed]);
-
-  const runItems: AgentRunItem[] = [
-    { type: "text", id: "intro", text: "I read the inquiry and pulled out the opportunities." },
-    ...DRAFT_STEPS.slice(0, Math.min(revealed + 1, DRAFT_STEPS.length)).map((s, i): AgentRunItem => ({
-      type: "step", id: `s${i}`, label: s.label, detail: i < revealed ? s.detail : undefined, status: i < revealed ? "done" : "running",
-    })),
-  ];
-  if (revealed >= DRAFT_STEPS.length) {
-    runItems.push({ type: "text", id: "outro", text: `Drafted ${DRAFTED.length} deals — keep the ones worth pursuing, edit any before adding.` });
-  }
-
-  const propertyCols: DataGridColumn<Deal>[] = [
-    { key: "value", label: "Value", width: 132, sortable: true, cell: (d) => <InlineNumberInput value={d.value} onSave={(v) => patch(d.id, { value: v })} format={money} placeholder="—" accessibilityLabel="Value" /> },
-    { key: "owner", label: "Owner", width: 168, sortable: true, cell: (d) => <InlineMemberSelect members={MEMBERS} value={d.ownerId} onSave={(id) => patch(d.id, { ownerId: id })} placeholder="Unassigned" accessibilityLabel="Owner" /> },
-    { key: "close", label: "Close", width: 150, sortable: true, cell: (d) => <InlineDatePicker value={d.close} onSave={(v) => patch(d.id, { close: v })} placeholder="No date" accessibilityLabel="Close date" /> },
-    { key: "stage", label: "Stage", width: 140, sortable: true, cell: (d) => <InlineSelect value={d.stage} options={STAGE_OPTIONS} onSave={(s) => patch(d.id, { stage: s })} renderSelected={renderStageBadge} renderOptionContent={renderStageBadge} accessibilityLabel="Stage" /> },
-  ];
-  const visibleProps = propertyCols.filter((c) => c.key !== groupBy);
-  const columns: DataGridColumn<Deal>[] = [
-    { key: "name", label: "Deal", sortable: true, cell: (d) => <InlineTextInput value={d.name} onSave={(v) => patch(d.id, { name: v })} accessibilityLabel="Deal name" /> },
-    ...visibleProps,
-  ];
-
-  const groups = useMemo<DataGridGroup<Deal>[]>(() => {
-    const q = query.trim().toLowerCase();
-    const pool = deals.filter((d) => {
-      if (q && !d.name.toLowerCase().includes(q)) return false;
-      if (ownerFilter.length > 0 && !(d.ownerId && ownerFilter.includes(d.ownerId))) return false;
-      if (stageFilter.length > 0 && !stageFilter.includes(d.stage)) return false;
-      return true;
-    });
-    let out: DataGridGroup<Deal>[];
-    if (!groupBy) {
-      out = [{ key: "all", items: pool }];
-    } else if (groupBy === "stage") {
-      out = STAGE_ORDER.map((s) => ({ key: s, header: <OptionBadge value={STAGE[s]} variant="dot" />, items: pool.filter((d) => d.stage === s) }));
-    } else if (groupBy === "owner") {
-      out = [
-        ...MEMBERS.map((m) => ({ key: m.id, header: <MemberChip name={m.name} size={22} />, items: pool.filter((d) => d.ownerId === m.id) })),
-        { key: "none", header: <Text size="sm" color="muted">Unassigned</Text>, items: pool.filter((d) => !d.ownerId) },
-      ];
-    } else {
-      out = CLOSE_ORDER.map((k) => ({ key: k, header: <Text size="xs" weight="semibold" color="muted" style={styles.bucketHead}>{CLOSE_LABELS[k]}</Text>, items: pool.filter((d) => closeBucketKey(d.close) === k) }));
-    }
-    const sorted = out.map((s) => ({ ...s, items: sortBy(s.items, sort, sortValue) }));
-    return groupBy === "stage" ? sorted : sorted.filter((s) => s.items.length > 0);
-  }, [deals, query, groupBy, ownerFilter, stageFilter, sort]);
-
-  return (
-    <>
-    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ paddingVertical: 28, paddingHorizontal: 24, paddingBottom: 96 }}>
-      <View style={{ maxWidth: 1000, width: "100%", alignSelf: "center", gap: 16 }}>
-        <Text size="xl" weight="semibold">Pipeline</Text>
-
-        <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
-          <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8, flex: 1 }}>
-            <View style={{ flexGrow: 1, flexBasis: 240, minWidth: 200, maxWidth: 360 }}>
-              <SearchInput value={query} onChangeText={setQuery} placeholder="Search deals…" accessibilityLabel="Search deals" />
-            </View>
-          <FilterChip label="Group by" summary={groupBy ? GROUP_OPTIONS.find((g) => g.value === groupBy)?.label : undefined} onClear={() => setGroupBy(null)} clearLabel="Clear grouping">
-            {({ close }) => <OptionList search={{ mode: "none" }} options={GROUP_OPTIONS} value={groupBy ?? undefined} onValueChange={(v) => v && setGroupBy(v)} onRequestClose={close} />}
-          </FilterChip>
-          <FilterChip
-            label="Owner"
-            summary={ownerFilter.length > 0 ? <View style={styles.summary}>{ownerFilter.slice(0, 4).map((id) => <Avatar key={id} name={memberName(id)} size={20} />)}</View> : undefined}
-            onClear={() => setOwnerFilter([])}
-            clearLabel="Clear owner filter"
-          >
-            <OptionList search={{ mode: "none" }} multi options={MEMBER_OPTS} value={ownerFilter} onValueChange={setOwnerFilter} renderOptionContent={(o) => <MemberChip name={o.label ?? memberName(o.value)} size={22} />} />
-          </FilterChip>
-          <FilterChip
-            label="Stage"
-            summary={stageFilter.length > 0 ? <View style={styles.summary}>{stageFilter.map((v) => <View key={v} style={[styles.summaryDot, { backgroundColor: solid(asColorName(STAGE[v as Stage]?.color)) }]} />)}</View> : undefined}
-            onClear={() => setStageFilter([])}
-            clearLabel="Clear stage filter"
-          >
-            <OptionList search={{ mode: "none" }} multi options={STAGE_OPTIONS} value={stageFilter} onValueChange={setStageFilter} renderOptionContent={renderStageBadge} />
-          </FilterChip>
-          </View>
-          <Button title="Draft from notes" color="primary" onPress={() => setDraftOpen(true)} />
-        </View>
-
-        <DataGrid
-          columns={columns}
-          groups={groups}
-          getRowKey={(d) => d.id}
-          sort={sort}
-          onSort={onSort}
-          collapsed={collapsed}
-          onToggleCollapse={toggleCollapse}
-          renderGroupFooter={(g) => <DealAddRow preset={presetFor(groupBy, g.key)} columns={visibleProps} onAdd={addDeal} />}
-        />
-      </View>
-    </ScrollView>
-
-    {/* Draft from notes — Composer → AgentRun → ChangeReview → commit (adds deals). */}
-    <Dialog open={draftOpen} onOpenChange={(o) => { if (!o) closeDraft(); }} maxWidth={620}>
-      <DialogHeader><DialogHeaderTitle>Draft from notes</DialogHeaderTitle></DialogHeader>
-      <DialogScrollArea>
-        {phase === "idle" ? (
-          <View style={{ gap: 12 }}>
-            <Text size="sm" color="muted">Paste an inquiry, an email, or call notes. Lotics drafts deals from it — nothing is added until you review and keep them.</Text>
-            <Composer onSend={startDraft} placeholder="Paste the inquiry…" autoFocus sendLabel="Draft deals" />
-          </View>
-        ) : null}
-        {phase === "reading" ? <AgentRun items={runItems} state={revealed >= DRAFT_STEPS.length ? "done" : "streaming"} /> : null}
-        {phase === "review" ? (
-          <ChangeReview
-            title="Drafted deals"
-            summary={`${proposals.length} from the inquiry — keep, edit, or drop each. A “Low” mark is worth a glance.`}
-            items={proposals}
-            getKey={(p) => p.id}
-            statusOf={(p) => decisions[p.id] ?? "pending"}
-            renderItem={(p) => <DealProposal proposal={p} onEdit={editProposal} />}
-            renderSummary={(p, kept) => (
-              <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={kept ? undefined : { textDecorationLine: "line-through" }}>{p.name}</Text>
-            )}
-            onAcceptItem={(i) => decide(proposals[i].id, "accepted")}
-            onRejectItem={(i) => decide(proposals[i].id, "rejected")}
-            onUndoItem={(i) => decide(proposals[i].id, null)}
-          />
-        ) : null}
-        {phase === "done" ? (
-          <CompletionState title={`${addedCount} ${addedCount === 1 ? "deal" : "deals"} added`} summary="They're in your pipeline now." />
-        ) : null}
-      </DialogScrollArea>
-      {phase === "review" ? (
-        <DialogFooter>
-          <ChangeReviewActions items={proposals} statusOf={(p) => decisions[p.id] ?? "pending"} onAcceptItem={(i) => decide(proposals[i].id, "accepted")} onApply={addAccepted} onDiscard={resetDraft} applyLabel={`Add ${acceptedCount} ${acceptedCount === 1 ? "deal" : "deals"}`} />
-        </DialogFooter>
-      ) : phase === "done" ? (
-        <DialogFooter>
-          <Button title="Draft more" color="secondary" onPress={resetDraft} />
-          <Button title="Done" color="primary" onPress={closeDraft} />
-        </DialogFooter>
-      ) : null}
-    </Dialog>
-    </>
-  );
-}
-
-function DealProposal({ proposal, onEdit }: { proposal: Proposal; onEdit: (id: string, p: Partial<Proposal>) => void }) {
-  return (
-    <View style={{ gap: 10 }}>
-      <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 12 }}>
-        <View style={{ flex: 1 }}>
-          <InlineTextInput value={proposal.name} onSave={(v) => onEdit(proposal.id, { name: v })} accessibilityLabel="Deal name" />
-        </View>
-        <View style={{ paddingTop: 10 }}><Confidence level={proposal.confidence} /></View>
-      </View>
-      <View style={{ flexDirection: "row", gap: 12 }}>
-        <View style={{ width: 132 }}>
-          <InlineNumberInput value={proposal.value} onSave={(v) => onEdit(proposal.id, { value: v })} format={money} placeholder="—" accessibilityLabel="Value" />
-        </View>
-        <View style={{ width: 140 }}>
-          <InlineSelect value={proposal.stage} options={STAGE_OPTIONS} onSave={(s) => onEdit(proposal.id, { stage: s })} renderSelected={renderStageBadge} renderOptionContent={renderStageBadge} accessibilityLabel="Stage" />
-        </View>
-      </View>
-      <View style={styles.source}><Text size="xs" color="muted">{proposal.source}</Text></View>
-    </View>
-  );
-}
-
-function DealAddRow({ preset, columns, onAdd }: { preset: Partial<Deal>; columns: DataGridColumn<Deal>[]; onAdd: (d: Omit<Deal, "id">) => void }) {
-  const [name, setName] = useState("");
-  const [value, setValue] = useState<number | null>(null);
-  const [ownerId, setOwnerId] = useState<string | null>(null);
-  const [close, setClose] = useState<string | null>(null);
-  const [stage, setStage] = useState<Stage>("lead");
-
-  const submit = () => {
-    const n = name.trim();
-    if (!n) return;
-    onAdd({ name: n, value, ownerId, close, stage, ...preset });
-    setName("");
-    setValue(null);
-    setOwnerId(null);
-    setClose(null);
-    setStage("lead");
-  };
-
-  const editor = (key: string) =>
-    key === "value" ? <InlineNumberInput value={value} onSave={setValue} format={money} placeholder="—" accessibilityLabel="Value" />
-    : key === "owner" ? <InlineMemberSelect members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Unassigned" accessibilityLabel="Owner" />
-    : key === "close" ? <InlineDatePicker value={close} onSave={setClose} placeholder="No date" accessibilityLabel="Close date" />
-    : <InlineSelect value={stage} options={STAGE_OPTIONS} onSave={setStage} renderSelected={renderStageBadge} renderOptionContent={renderStageBadge} accessibilityLabel="Stage" />;
-
-  return (
-    <View style={[gridRowStyle, styles.add]}>
-      <View style={styles.addField}>
-        <View style={{ flex: 1 }}>
-          <TextInputField value={name} onChangeText={setName} onSubmitEditing={submit} placeholder="Add a deal…" style={styles.input} accessibilityLabel="Add a deal" />
-        </View>
-        {name.trim() ? <Button title="Save" color="primary" onPress={submit} /> : null}
-      </View>
-      {columns.map((c) => (
-        <View key={c.key} style={{ width: c.width }}>{editor(c.key)}</View>
-      ))}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  bucketHead: { letterSpacing: 0.3, textTransform: "uppercase" },
-  add: { opacity: 0.9 },
-  input: { borderWidth: 0, backgroundColor: "transparent" },
-  addField: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8, paddingRight: 4 },
-  summary: { flexDirection: "row", alignItems: "center", gap: 4 },
-  summaryDot: { width: 8, height: 8, borderRadius: 999 },
-  source: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
-});