@lotics/ui 5.8.0 → 5.10.0

package/examples/tpl_pipeline.tsx

@@ -0,0 +1,400 @@
+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 },
+});

package/examples/tpl_ratedesk.tsx

@@ -292,7 +292,7 @@ export function TplRatedesk() {
       ) : null}
     </Dialog>
 
-    <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} captionHint="ESC to close · ←/→ to move" />
+    <FileGalleryModal files={files} activeIndex={activeFile} onIndexChange={setActiveFile} />
     </>
   );
 }

package/examples/tpl_record.tsx

@@ -13,7 +13,8 @@ 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 { Select } from "@lotics/ui/select";
+import { Chip } from "@lotics/ui/chip";
 import { FileDropzone } from "@lotics/ui/file_dropzone";
 import { FileThumbnailGrid } from "@lotics/ui/file_thumbnail_grid";
 import { FileGalleryModal } from "@lotics/ui/file_gallery_modal";
@@ -47,7 +48,7 @@ const HEALTH_DOT: Record<string, string> = {
 
 // 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[] = [
+const TAG_OPTIONS = [
   { value: "vip", label: "VIP" },
   { value: "priority", label: "Priority support" },
   { value: "renewal_risk", label: "Renewal risk" },
@@ -177,7 +178,7 @@ export function TplRecord() {
   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 [tags, setTags] = useState<string[]>([TAG_OPTIONS[0].value, TAG_OPTIONS[3].value]);
   const [docs, setDocs] = useState<DisplayFile[]>(SEED_DOCS);
   const [activeDoc, setActiveDoc] = useState<number | null>(null);
 
@@ -240,7 +241,7 @@ export function TplRecord() {
             />
           </Field>
           <Field label="Tags">
-            <TagInput value={tags} options={TAG_OPTIONS} onChange={setTags} allowCreate placeholder="Add tags…" accessibilityLabel="Tags" />
+            <Select multi searchable allowCustom value={tags} onValueChange={setTags} options={TAG_OPTIONS} renderSelected={(item, { remove }) => <Chip onDismiss={remove}><Text size="sm">{item.label}</Text></Chip>} placeholder="Add tags…" accessibilityLabel="Tags" />
           </Field>
         </Group>
 
@@ -295,7 +296,7 @@ export function TplRecord() {
         </Card>
       </View>
 
-      <FileGalleryModal files={docs} activeIndex={activeDoc} onIndexChange={setActiveDoc} captionHint="ESC to close · ←/→ to move" />
+      <FileGalleryModal files={docs} activeIndex={activeDoc} onIndexChange={setActiveDoc} />
     </ScrollView>
   );
 }

package/examples/tpl_shifts.tsx

@@ -14,6 +14,7 @@ import { EmptyState } from "@lotics/ui/empty_state";
 import { KPIStrip } from "@lotics/ui/kpi_strip";
 import { MenuListItem } from "@lotics/ui/menu_list_item";
 import { Popover, PopoverContent, PopoverTrigger } from "@lotics/ui/popover";
+import { PressableHighlight } from "@lotics/ui/pressable_highlight";
 import { PressableRow } from "@lotics/ui/pressable_row";
 import { ProgressBar } from "@lotics/ui/progress_bar";
 import { Screen } from "@lotics/ui/screen_router";
@@ -227,12 +228,13 @@ export function TplShifts() {
                   const color = coverageColor(filled, req);
                   const isOpen = openSlot === id;
                   return (
-                    <Pressable
+                    <PressableHighlight
                       key={d.key}
+                      focusRing
                       accessibilityRole="button"
                       accessibilityLabel={`${slotLabel(d.key, s.key)}: ${filled} of ${req} filled`}
                       onPress={() => setOpenSlot(id)}
-                      style={{
+                      style={(state) => ({
                         flex: 1,
                         minHeight: 44,
                         borderRadius: 8,
@@ -240,11 +242,11 @@ export function TplShifts() {
                         justifyContent: "center",
                         backgroundColor: withAlpha(color, filled >= req ? 0.12 : 0.16),
                         borderWidth: 2,
-                        borderColor: isOpen ? colors.zinc[900] : "transparent",
-                      }}
+                        borderColor: isOpen ? colors.zinc[900] : state.hovered ? colors.zinc[400] : "transparent",
+                      })}
                     >
                       <Text size="sm" weight="medium" tabular>{`${filled}/${req}`}</Text>
-                    </Pressable>
+                    </PressableHighlight>
                   );
                 })}
               </View>