@lotics/ui 5.9.0 → 5.10.0

package/examples/tpl_tasks.tsx

@@ -0,0 +1,440 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import { Text } from "@lotics/ui/text";
+import { colors, solid, asColorName } from "@lotics/ui/colors";
+import { Icon } from "@lotics/ui/icon";
+import { CheckCircle } from "@lotics/ui/check_circle";
+import { OptionBadge, type OptionValue } from "@lotics/ui/option_badge";
+import { SearchInput } from "@lotics/ui/search_input";
+import { FilterChip } from "@lotics/ui/filter_chip";
+import { OptionList } from "@lotics/ui/option_list";
+import { InlineTextInput } from "@lotics/ui/inline_text_input";
+import { InlineDatePicker } from "@lotics/ui/inline_date_picker";
+import { InlineSelect } from "@lotics/ui/inline_select";
+import { Select } from "@lotics/ui/select";
+import { TextInputField } from "@lotics/ui/text_input_field";
+import { Button } from "@lotics/ui/button";
+import { FilesEditor } from "@lotics/ui/files_editor";
+import type { DisplayFile } from "@lotics/ui/file_thumbnail";
+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 { formatDate, toISODate } from "@lotics/ui/format_date";
+
+type TagOption = { value: string; label: string };
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Template · Tasks (quick list) — the Apple-Reminders shape for PERSONAL lists.
+// There's no Task component: a row is composed directly from primitives
+// (CheckCircle + an inline-editable title + a quiet meta line), which is the most
+// flexible way to build a task surface. Quiet, scannable rows you tick to finish
+// and tap to expand in place; the note sits below the title in a light tone. No
+// assignee (the list is yours). The sibling tpl_task_board is the Linear columns
+// shape for a manager. Tick the ring → done; tap the row → expand; click the title
+// → rename in place.
+// ─────────────────────────────────────────────────────────────────────────────
+
+type Status = "todo" | "doing" | "done";
+const STATUS: Record<Status, OptionValue> = {
+  todo: { key: "todo", label: "To do", color: null },
+  doing: { key: "doing", label: "Doing", color: "amber" },
+  done: { key: "done", label: "Done", color: "emerald" },
+};
+const STATUS_OPTIONS = (Object.keys(STATUS) as Status[]).map((s) => ({ value: s, label: STATUS[s].label }));
+
+const TAGS: Record<string, OptionValue> = {
+  client: { key: "client", label: "Client", color: "blue" },
+  design: { key: "design", label: "Design", color: "cyan" },
+  print: { key: "print", label: "Print", color: "amber" },
+  urgent: { key: "urgent", label: "Urgent", color: "rose" },
+};
+const TAG_OPTIONS: TagOption[] = Object.values(TAGS).map((t) => ({ value: String(t.key), label: t.label }));
+const tagOf = (k: string): TagOption => ({ value: k, label: TAGS[k]?.label ?? k });
+const tagBadge = (t: TagOption): OptionValue => TAGS[t.value] ?? { key: t.value, label: t.label, color: null };
+const tagColor = (t: TagOption): string => solid(asColorName(TAGS[t.value]?.color));
+const renderTagBadge = (o: { value: string; label?: string }) => <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />;
+
+interface Task {
+  id: string;
+  title: string;
+  due: string | null;
+  status: Status;
+  tags: TagOption[];
+  note: string;
+  files: DisplayFile[];
+}
+
+const day = (n: number): string => {
+  const d = new Date();
+  d.setDate(d.getDate() + n);
+  return toISODate(d);
+};
+
+// A self-contained SVG data-URI image so seeds preview offline in the gallery.
+const sampleImage = (label: string, fill: string): DisplayFile => ({
+  id: `seed-${label}`,
+  filename: `${label}.png`,
+  mimeType: "image/png",
+  url: "data:image/svg+xml," + encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" width="320" height="240"><rect width="320" height="240" fill="${fill}"/><text x="160" y="128" font-family="sans-serif" font-size="22" fill="white" text-anchor="middle">${label}</text></svg>`),
+});
+
+// New attachments map a picked browser File → a DisplayFile (local object URL).
+// A host wires its own upload here; the template just previews in place.
+let fileSeq = 0;
+const toDisplayFiles = (files: File[]): DisplayFile[] =>
+  files.map((f) => ({ id: `f${++fileSeq}`, filename: f.name, mimeType: f.type || "application/octet-stream", url: URL.createObjectURL(f) }));
+
+const SEED: Task[] = [
+  { id: "t1", title: "Send VITTORIA their quote", due: day(-2), status: "doing", tags: [tagOf("client"), tagOf("urgent")], note: "Waiting on production to confirm quantities.", files: [sampleImage("quote-draft", "#3b82f6")] },
+  { id: "t2", title: "Finalize the gift-box packaging design", due: day(0), status: "doing", tags: [tagOf("design")], note: "", files: [] },
+  { id: "t3", title: "Sign off the die-cut sample", due: `${day(0)}T15:00`, status: "todo", tags: [tagOf("design"), tagOf("print")], note: "Workshop visit booked for 3pm.", files: [sampleImage("die-cut", "#10b981"), sampleImage("sample-2", "#f59e0b")] },
+  { id: "t4", title: "Order 300g ivory board stock", due: day(3), status: "todo", tags: [tagOf("print")], note: "", files: [] },
+  { id: "t5", title: "Schedule the first delivery batch", due: day(9), status: "todo", tags: [], note: "", files: [] },
+  { id: "t6", title: "Draft the 2026 print contract", due: null, status: "todo", tags: [tagOf("client")], note: "", files: [] },
+  { id: "t7", title: "Update the Q3 price list", due: day(-5), status: "done", tags: [], note: "Sent to the sales team.", files: [] },
+];
+
+type Group = "due" | "status";
+const GROUP_OPTIONS: { value: Group; label: string }[] = [
+  { value: "due", label: "Due date" },
+  { value: "status", label: "Status" },
+];
+type SectionKey = "overdue" | "today" | "week" | "later" | "none" | "done" | Status;
+const DUE_SECTIONS: { key: SectionKey; label: string }[] = [
+  { key: "overdue", label: "Overdue" },
+  { key: "today", label: "Today" },
+  { key: "week", label: "This week" },
+  { key: "later", label: "Later" },
+  { key: "none", label: "No date" },
+  { key: "done", label: "Done" },
+];
+const STATUS_SECTIONS: { key: SectionKey; label: string }[] = [
+  { key: "todo", label: "To do" },
+  { key: "doing", label: "Doing" },
+  { key: "done", label: "Done" },
+];
+
+function dueBucket(due: string | null): SectionKey {
+  if (!due) return "none";
+  const d = due.slice(0, 10);
+  const today = day(0);
+  if (d < today) return "overdue";
+  if (d === today) return "today";
+  if (d <= day(7)) return "week";
+  return "later";
+}
+function dueInfo(due: string | null): { label: string; overdue: boolean } | null {
+  if (!due) return null;
+  return { label: formatDate(due, { format: "dayMonth" }), overdue: due.slice(0, 10) < day(0) };
+}
+
+// ── AI · draft tasks from notes — agent proposes, you keep/edit/drop ──────────
+type Phase = "idle" | "reading" | "review" | "done";
+interface Proposal { id: string; title: string; due: string | null; confidence: ConfidenceLevel; source: string }
+const DRAFT_STEPS: { label: string; detail: string }[] = [
+  { label: "Split the notes into candidate items", detail: "6 lines" },
+  { label: "Drop greetings and lines that aren't actions", detail: "kept 4" },
+  { label: "Infer a due date from each phrase", detail: "2 dated · 2 left open" },
+];
+const DRAFTED: Proposal[] = [
+  { id: "d1", title: "Send VITTORIA the revised quote", due: day(1), confidence: "high", source: "“…told VITTORIA they'd have the updated quote by tomorrow.”" },
+  { id: "d2", title: "Re-check the die-cut sample size with the workshop", due: day(3), confidence: "medium", source: "“…workshop to measure the sample again, maybe Thursday.”" },
+  { id: "d3", title: "Order 300g ivory board for the gift-box run", due: null, confidence: "high", source: "“…order the ivory stock this week.”" },
+  { id: "d4", title: "Sit in on the Tet carton press check", due: null, confidence: "low", source: "“…someone should be there for the Tet print run.”" },
+];
+
+export function TplTasks() {
+  const [tasks, setTasks] = useState<Task[]>(SEED);
+  const [group, setGroup] = useState<Group | null>("due"); // null = ungrouped (cleared)
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(() => new Set());
+  const toggleExpand = (id: string, open: boolean) =>
+    setExpandedIds((s) => { const n = new Set(s); if (open) n.add(id); else n.delete(id); return n; });
+  const [query, setQuery] = useState("");
+  const [tagFilter, setTagFilter] = useState<string[]>([]);
+  const [draft, setDraft] = useState("");
+
+  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 patch = (id: string, next: Partial<Task>) =>
+    setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, ...next } : t)));
+  const add = () => {
+    const title = draft.trim();
+    if (!title) return;
+    setTasks((ts) => [...ts, { id: `n${ts.length}-${title.length}`, title, due: null, status: "todo", tags: [], note: "", files: [] }]);
+    setDraft("");
+  };
+  const addFiles = (id: string, picked: File[]) =>
+    setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, files: [...t.files, ...toDisplayFiles(picked)] } : t)));
+  const removeFile = (id: string, fileId: string) =>
+    setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, files: t.files.filter((f) => f.id !== fileId) } : t)));
+
+
+  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");
+    setTasks((ts) => [...ts, ...accepted.map((p) => ({ id: `d-${p.id}`, title: p.title, due: p.due, status: "todo" as Status, tags: [], note: "", files: [] }))]);
+    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 your notes and pulled out the work." },
+    ...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} tasks — keep the ones that look right, edit any before adding.` });
+  }
+
+  const sections = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const pool = tasks.filter((t) => {
+      if (q && !(t.title.toLowerCase().includes(q) || t.tags.some((tag) => tag.label.toLowerCase().includes(q)))) return false;
+      if (tagFilter.length > 0 && !t.tags.some((tag) => tagFilter.includes(tag.value))) return false;
+      return true;
+    });
+    const byDue = (a: Task, b: Task) => (a.due ?? "9999").localeCompare(b.due ?? "9999");
+    if (!group) {
+      return [{ key: "all" as SectionKey, label: "", items: [...pool].sort(byDue) }];
+    }
+    const defs = group === "due" ? DUE_SECTIONS : STATUS_SECTIONS;
+    const inBucket = (t: Task, key: SectionKey) =>
+      group === "due" ? (t.status === "done" ? key === "done" : dueBucket(t.due) === key) : t.status === key;
+    return defs
+      .map((s) => ({ ...s, items: pool.filter((t) => inBucket(t, s.key)).sort(byDue) }))
+      .filter((s) => s.items.length > 0);
+  }, [tasks, group, query, tagFilter]);
+
+  return (
+    <>
+    <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ paddingVertical: 28, paddingHorizontal: 20, paddingBottom: 96 }}>
+      <View style={{ maxWidth: 680, width: "100%", alignSelf: "center", gap: 14 }}>
+        <Text size="xl" weight="semibold">Tasks</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 tasks" accessibilityLabel="Search tasks" />
+            </View>
+          <FilterChip label="Group by" summary={group ? GROUP_OPTIONS.find((g) => g.value === group)?.label : undefined} onClear={() => setGroup(null)} clearLabel="Clear grouping">
+            {({ close }) => <OptionList search={{ mode: "none" }} options={GROUP_OPTIONS} value={group ?? undefined} onValueChange={(v) => v && setGroup(v)} onRequestClose={close} />}
+          </FilterChip>
+          <FilterChip
+            label="Tag"
+            summary={tagFilter.length > 0 ? <View style={styles.dots}>{tagFilter.map((v) => <View key={v} style={[styles.dot, { backgroundColor: tagColor(tagOf(v)) }]} />)}</View> : undefined}
+            onClear={() => setTagFilter([])}
+            clearLabel="Clear tag filter"
+          >
+            <OptionList search={{ mode: "none" }} multi options={TAG_OPTIONS} value={tagFilter} onValueChange={setTagFilter} renderOptionContent={(o) => <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />} />
+          </FilterChip>
+          </View>
+          <Button title="Draft from notes" color="primary" onPress={() => setDraftOpen(true)} />
+        </View>
+
+        {/* Capture — type to add; the submit button lives inside the field on the right. */}
+        <View style={styles.capture}>
+          <View style={[styles.row, { gap: 12 }]}>
+            <View style={styles.emptyRing} />
+            <View style={styles.captureField}>
+              <View style={{ flex: 1 }}>
+                <TextInputField value={draft} onChangeText={setDraft} onSubmitEditing={add} placeholder="Add a task…" style={styles.titleInput} accessibilityLabel="Add a task" />
+              </View>
+              {draft.trim() ? <Button title="Save" color="primary" onPress={add} /> : null}
+            </View>
+          </View>
+        </View>
+
+        <View>
+          {sections.map((s) => (
+            <View key={s.key} style={{ marginBottom: 16 }}>
+              {s.label ? (
+                <View style={styles.sectionHead}>
+                  <Text size="xs" weight="semibold" color={s.key === "overdue" ? "danger" : "muted"} style={styles.sectionLabel}>{s.label}</Text>
+                  <Text size="xs" color="muted" tabular>{s.items.length}</Text>
+                </View>
+              ) : null}
+              {s.items.map((t) => {
+                const open = expandedIds.has(t.id);
+                const done = t.status === "done";
+                const d = dueInfo(t.due);
+                return (
+                  <View key={t.id}>
+                    <Pressable onPress={() => toggleExpand(t.id, !open)} accessibilityRole="button" accessibilityLabel={t.title} style={({ hovered }: { hovered?: boolean }) => [styles.row, hovered ? styles.rowHover : null]}>
+                      <CheckCircle checked={done} onChange={(on) => patch(t.id, { status: on ? "done" : "todo" })} accessibilityLabel={t.title} />
+                      <View style={{ flex: 1 }}>
+                        <InlineTextInput value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={done} accessibilityLabel="Title" />
+                      </View>
+                      <View style={styles.meta}>
+                        {t.files.length > 0 ? (
+                          <View style={styles.clip}>
+                            <Icon name="paperclip" size={13} color={colors.zinc[400]} />
+                            <Text size="xs" color="muted" tabular>{t.files.length}</Text>
+                          </View>
+                        ) : null}
+                        {t.tags.length > 0 ? (
+                          <View style={styles.dots}>{t.tags.map((tag) => <View key={tag.value} style={[styles.dot, { backgroundColor: tagColor(tag) }]} />)}</View>
+                        ) : null}
+                        {d ? <Text size="xs" weight="medium" color={d.overdue && !done ? "danger" : "muted"}>{d.label}</Text> : null}
+                      </View>
+                      <Icon name={open ? "chevron-up" : "chevron-down"} size={16} color={colors.zinc[300]} />
+                    </Pressable>
+                    {open ? (
+                      <View style={styles.detail}>
+                        <Field label="Due">
+                          <InlineDatePicker value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="Set a due date" accessibilityLabel="Due date" />
+                        </Field>
+                        <Field label="Status">
+                          <InlineSelect value={t.status} options={STATUS_OPTIONS} onSave={(st) => patch(t.id, { status: st })} renderSelected={(o) => <OptionBadge value={STATUS[o.value as Status]} variant="dot" />} renderOptionContent={(o) => <OptionBadge value={STATUS[o.value as Status]} variant="dot" />} accessibilityLabel="Status" />
+                        </Field>
+                        <Field label="Tags">
+                          <Select multi searchable allowCustom value={t.tags.map((tag) => tag.value)} onValueChange={(next) => patch(t.id, { tags: next.map(tagOf) })} options={TAG_OPTIONS} renderSelected={renderTagBadge} renderOptionContent={renderTagBadge} style={{ borderColor: "transparent" }} placeholder="Add tags" accessibilityLabel="Tags" />
+                        </Field>
+                        <Field label="Note">
+                          <InlineTextInput value={t.note} onSave={(v) => patch(t.id, { note: v })} placeholder="Add a note…" accessibilityLabel="Note" />
+                        </Field>
+                        <Field label="Files" top>
+                          <FilesEditor files={t.files} itemSize={72} onAdd={(picked) => addFiles(t.id, picked)} onRemove={(id) => removeFile(t.id, id)} />
+                        </Field>
+                      </View>
+                    ) : null}
+                  </View>
+                );
+              })}
+            </View>
+          ))}
+        </View>
+      </View>
+    </ScrollView>
+
+    {/* Draft from notes — Composer → AgentRun → ChangeReview → commit. */}
+    <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 meeting notes, a brief, or an email. Lotics drafts tasks from it — nothing is added until you review and keep them.</Text>
+            <Composer onSend={startDraft} placeholder="Paste your notes…" autoFocus sendLabel="Draft tasks" />
+          </View>
+        ) : null}
+        {phase === "reading" ? <AgentRun items={runItems} state={revealed >= DRAFT_STEPS.length ? "done" : "streaming"} /> : null}
+        {phase === "review" ? (
+          <ChangeReview
+            title="Drafted tasks"
+            summary={`${proposals.length} from your notes — 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) => <TaskProposal proposal={p} onEdit={editProposal} />}
+            renderSummary={(p, kept) => (
+              <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={kept ? undefined : { textDecorationLine: "line-through" }}>{p.title}</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 ? "task" : "tasks"} added`} summary="They're in your list, grouped by due date." />
+        ) : 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 ? "task" : "tasks"}`} />
+        </DialogFooter>
+      ) : phase === "done" ? (
+        <DialogFooter>
+          <Button title="Draft more" color="secondary" onPress={resetDraft} />
+          <Button title="Done" color="primary" onPress={closeDraft} />
+        </DialogFooter>
+      ) : null}
+    </Dialog>
+    </>
+  );
+}
+
+function TaskProposal({ 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.title} onSave={(v) => onEdit(proposal.id, { title: v })} accessibilityLabel="Task title" />
+        </View>
+        <View style={{ paddingTop: 10 }}><Confidence level={proposal.confidence} /></View>
+      </View>
+      <View style={{ width: 200 }}>
+        <InlineDatePicker value={proposal.due} onSave={(v) => onEdit(proposal.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" />
+      </View>
+      <View style={styles.source}><Text size="xs" color="muted">{proposal.source}</Text></View>
+    </View>
+  );
+}
+
+function Field(props: { label: string; children: React.ReactNode; top?: boolean }) {
+  return (
+    <View style={{ flexDirection: "row", alignItems: props.top ? "flex-start" : "center", minHeight: 36 }}>
+      <Text size="sm" color="muted" style={{ width: 116, paddingTop: props.top ? 8 : 0 }}>{props.label}</Text>
+      <View style={{ flex: 1 }}>{props.children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    minHeight: 44,
+    paddingHorizontal: 8,
+    borderRadius: 10,
+  },
+  rowHover: { backgroundColor: colors.zinc[50] },
+  capture: {
+    borderBottomWidth: 1,
+    borderBottomColor: colors.zinc[100],
+    paddingBottom: 6,
+  },
+  // Borderless title input that matches an InlineTextInput's resting inset (8),
+  // so the capture title lines up with the task titles below it.
+  titleInput: {
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    paddingVertical: 0,
+  },
+  captureField: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8, paddingRight: 4 },
+  sectionHead: { flexDirection: "row", alignItems: "center", gap: 8, paddingBottom: 6 },
+  sectionLabel: { letterSpacing: 0.3, textTransform: "uppercase" },
+  meta: { flexDirection: "row", alignItems: "center", gap: 10 },
+  clip: { flexDirection: "row", alignItems: "center", gap: 2 },
+  emptyRing: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed" },
+  dots: { flexDirection: "row", alignItems: "center", gap: 4 },
+  dot: { width: 8, height: 8, borderRadius: 999 },
+  // ring (20) + gap (12) + the title's 8 inset → labels line up with the title text
+  detail: { paddingLeft: 48, paddingRight: 8, paddingTop: 2, paddingBottom: 14, gap: 8 },
+  source: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.9.0",
+  "version": "5.10.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -33,6 +33,7 @@
     "./file_thumbnail_grid": "./src/file_thumbnail_grid.tsx",
     "./uploading_thumbnail": "./src/uploading_thumbnail.tsx",
     "./file_grid": "./src/file_grid.tsx",
+    "./files_editor": "./src/files_editor.tsx",
     "./pagination": "./src/pagination.tsx",
     "./bar_chart": "./src/bar_chart.tsx",
     "./line_chart": "./src/line_chart.tsx",
@@ -62,7 +63,8 @@
     "./form_time_picker": "./src/form_time_picker.tsx",
     "./form_picker": "./src/form_picker.tsx",
     "./picker": "./src/picker.tsx",
-    "./picker_menu": "./src/picker_menu.tsx",
+    "./select": "./src/select.tsx",
+    "./option_list": "./src/option_list.tsx",
     "./text": "./src/text.tsx",
     "./activity_indicator": "./src/activity_indicator.tsx",
     "./agent_run": "./src/agent_run.tsx",
@@ -95,7 +97,6 @@
     "./button": "./src/button.tsx",
     "./checkbox": "./src/checkbox.tsx",
     "./combobox": "./src/combobox.tsx",
-    "./tag_input": "./src/tag_input.tsx",
     "./composer": "./src/composer.tsx",
     "./portal": "./src/portal.tsx",
     "./popover_nav": "./src/popover_nav.tsx",
@@ -127,6 +128,10 @@
     "./keyboard": "./src/keyboard.ts",
     "./use_screen_size": "./src/use_screen_size.ts",
     "./use_auto_grow_height": "./src/use_auto_grow_height.ts",
+    "./use_focus_ring": "./src/use_focus_ring.ts",
+    "./use_hover": "./src/use_hover.ts",
+    "./focus_ring_pressable": "./src/focus_ring_pressable.tsx",
+    "./control_surface": "./src/control_surface.ts",
     "./shortcut_badge": "./src/shortcut_badge.tsx",
     "./text_input_field": "./src/text_input_field.tsx",
     "./number_input": "./src/number_input.tsx",
@@ -134,6 +139,7 @@
     "./switch": "./src/switch.tsx",
     "./form_field": "./src/form_field.tsx",
     "./checkbox_input": "./src/checkbox_input.tsx",
+    "./check_circle": "./src/check_circle.tsx",
     "./radio_picker": "./src/radio_picker.tsx",
     "./form_text_input": "./src/form_text_input.tsx",
     "./form_switch": "./src/form_switch.tsx",
@@ -146,6 +152,7 @@
     "./sort_header": "./src/sort_header.tsx",
     "./skeleton": "./src/skeleton.tsx",
     "./table": "./src/table.tsx",
+    "./data_grid": "./src/data_grid.tsx",
     "./detail_row": "./src/detail_row.tsx",
     "./scan_field": "./src/scan_field.tsx",
     "./completion_state": "./src/completion_state.tsx",
@@ -179,7 +186,6 @@
     "./date_filter": "./src/date_filter.tsx",
     "./date_range_filter_field": "./src/date_range_filter_field.tsx",
     "./time_picker": "./src/time_picker.tsx",
-    "./time_field": "./src/time_field.tsx",
     "./date_calendar": "./src/date_calendar.tsx",
     "./dialog": "./src/dialog.tsx",
     "./drawer": "./src/drawer.tsx",
@@ -202,7 +208,6 @@
     "./timeline": "./src/timeline.tsx",
     "./loading": "./src/loading.tsx",
     "./popover_header": "./src/popover_header.tsx",
-    "./command_menu": "./src/command_menu.tsx",
     "./switch_button": "./src/switch_button.tsx",
     "./alert": "./src/alert.tsx",
     "./landmark": "./src/landmark.tsx",

package/src/accordion.tsx

@@ -99,7 +99,7 @@ export function AccordionHeader(props: AccordionHeaderProps) {
 
   return (
     <PressableHighlight
-      onPress={toggle}
+      focusRing      onPress={toggle}
       accessibilityRole="button"
       accessibilityState={{ expanded }}
       accessibilityLabel={accessibilityLabel}

package/src/agent_progress.tsx

@@ -54,7 +54,7 @@ export function AgentProgress(props: AgentProgressProps) {
       ) : null}
 
       <PressableHighlight
-        onPress={() => setExpanded((e) => !e)}
+        focusRing        onPress={() => setExpanded((e) => !e)}
         style={styles.pill}
         accessibilityLabel={expanded ? "Hide the agent's steps" : "Show the agent's steps"}
       >

package/src/agent_run.tsx

@@ -197,7 +197,7 @@ function ActivityRow(props: {
   );
   if (onPress) {
     return (
-      <PressableHighlight onPress={onPress} accessibilityRole="button" accessibilityLabel={accessibilityLabel} style={styles.row}>
+      <PressableHighlight focusRing onPress={onPress} accessibilityRole="button" accessibilityLabel={accessibilityLabel} style={styles.row}>
         {inner}
       </PressableHighlight>
     );

package/src/breakdown.tsx

@@ -95,7 +95,7 @@ export function Breakdown(props: BreakdownProps) {
           );
           return onSelect ? (
             <PressableHighlight
-              key={item.key}
+              focusRing              key={item.key}
               accessibilityRole="button"
               accessibilityState={{ selected }}
               accessibilityLabel={`${item.label}: ${formatValue(item.value)}`}
@@ -112,7 +112,7 @@ export function Breakdown(props: BreakdownProps) {
         })}
         {collapsible ? (
           <PressableHighlight
-            accessibilityRole="button"
+              focusRing            accessibilityRole="button"
             accessibilityState={{ expanded }}
             accessibilityLabel={expanded ? labels.less : labels.more(hidden)}
             onPress={() => setExpanded((e) => !e)}

package/src/button.tsx

@@ -2,6 +2,7 @@ import {
   ActivityIndicator,
   NativeSyntheticEvent,
   Pressable,
+  PressableStateCallbackType,
   StyleProp,
   StyleSheet,
   View,
@@ -9,11 +10,12 @@ import {
 } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
-import { CONTROL_RADIUS } from "./control_surface";
+import { CONTROL_RADIUS, FOCUS_RING } from "./control_surface";
 import { Icon, IconName } from "./icon";
 import { Ref, useCallback } from "react";
 import { TextColor } from "./text_utils";
 import { useTooltip, UseTooltipOptions } from "./tooltip";
+import { useFocusRing, composeHandler } from "./use_focus_ring";
 import { getButtonIconColor } from "./button_colors";
 export type ButtonColor = "primary" | "secondary" | "danger" | "muted" | "danger-secondary";
 export type ButtonIconPosition = "left" | "right";
@@ -60,6 +62,7 @@ export function Button(props: ButtonProps) {
 
   const disabledOrLoading = disabled || loading;
   const tooltipProps = useTooltip(tooltip);
+  const { focusVisible, focusProps } = useFocusRing();
 
   const handlePress = useCallback(
     (event: NativeSyntheticEvent<any>) => {
@@ -106,8 +109,7 @@ export function Button(props: ButtonProps) {
       }
       aria-disabled={disabledOrLoading || undefined} aria-busy={loading || undefined}
       disabled={disabledOrLoading}
-      // @ts-ignore hovered is a react-native-web extension not in base RN types
-      style={({ pressed, hovered }) => {
+      style={({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => {
         const isPrimary = color === "primary" && !disabled;
         const restPrimary = isPrimary && !pressed && !hovered;
         return [
@@ -130,10 +132,17 @@ export function Button(props: ButtonProps) {
           styles.button,
           style,
           alignSelf && { alignSelf },
+          // Keyboard focus: paint the ring last so it wins over the primary's depth
+          // shadow (one boxShadow key — separate entries can't stack). The ring sits
+          // 2px OUTSIDE the box on the page, so it stays visible even on the dark
+          // primary.
+          focusVisible && { boxShadow: FOCUS_RING },
         ] as StyleProp<ViewStyle>;
       }}
       onPress={handlePress}
       {...tooltipProps}
+      onFocus={composeHandler(tooltipProps.onFocus, focusProps.onFocus)}
+      onBlur={composeHandler(tooltipProps.onBlur, focusProps.onBlur)}
     >
       {children}
     </Pressable>