@lotics/ui 12.1.2 → 13.7.1

package/src/radio_picker.tsx

@@ -23,15 +23,10 @@ export interface RadioPickerProps<T extends string | number | symbol> {
   options: RadioPickerOption<T>[];
   value: T;
   onValueChange: (value: T) => void;
-  /** "column" (default) stacks full-width rows — right when options carry
-   *  descriptions. "row" wraps compact options inline — right for short,
-   *  description-less choices (a quick-entry form), where a six-option
-   *  column would push the rest of the form below the fold. */
-  direction?: "column" | "row";
 }
 
 export function RadioPicker<T extends string | number | symbol>(props: RadioPickerProps<T>) {
-  const { accessibilityLabel, options, value, onValueChange, direction = "column" } = props;
+  const { accessibilityLabel, options, value, onValueChange } = props;
   const itemRefs = useRef<Array<View | null>>([]);
 
   // Roving tabindex: arrow keys move focus between options and select, matching
@@ -71,11 +66,7 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
   const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
 
   return (
-    <View
-      accessibilityRole="radiogroup"
-      accessibilityLabel={accessibilityLabel}
-      style={direction === "row" ? { flexDirection: "row", flexWrap: "wrap", gap: 4 } : undefined}
-    >
+    <View accessibilityRole="radiogroup" accessibilityLabel={accessibilityLabel}>
       {options.map((option, index) => (
         <RadioOption
           ref={(node: View | null) => {
@@ -86,7 +77,6 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
           value={option.value}
           description={option.description}
           testID={option.testID}
-          compact={direction === "row"}
           selected={value === option.value}
           isTabStop={index === tabStopIndex}
           onSelect={() => onValueChange(option.value)}
@@ -100,14 +90,13 @@ export function RadioPicker<T extends string | number | symbol>(props: RadioPick
 function RadioOption<T extends string | number | symbol>(
   props: RadioPickerOption<T> & {
     ref: (node: View | null) => void;
-    compact: boolean;
     selected: boolean;
     isTabStop: boolean;
     onSelect: () => void;
     onKeyDown: (event: { key: string; preventDefault?: () => void }) => void;
   },
 ) {
-  const { ref, label, description, compact, selected, isTabStop, onSelect, value, testID, onKeyDown } = props;
+  const { ref, label, description, selected, isTabStop, onSelect, value, testID, onKeyDown } = props;
 
   const handlePress = useCallback(() => {
     onSelect();
@@ -116,13 +105,14 @@ function RadioOption<T extends string | number | symbol>(
   return (
     <PressableHighlight
       focusRing
-      ref={ref}      testID={testID}
+      ref={ref}
+      testID={testID}
       style={{
         flexDirection: "row",
         alignItems: "center",
-        padding: compact ? 8 : 12,
+        padding: 12,
         borderRadius: CONTROL_RADIUS,
-        gap: compact ? 8 : 16,
+        gap: 16,
       }}
       onPress={handlePress}
       accessibilityRole="radio"
@@ -136,8 +126,8 @@ function RadioOption<T extends string | number | symbol>(
     >
       <View
         style={{
-          width: compact ? 20 : 28,
-          height: compact ? 20 : 28,
+          width: 28,
+          height: 28,
           borderRadius: 999,
           borderWidth: 1,
           borderColor: colors.border,
@@ -146,15 +136,16 @@ function RadioOption<T extends string | number | symbol>(
           alignItems: "center",
         }}
       >
-        {selected && <Icon name="check" size={compact ? 14 : 24} color={getTextColor("inverted")} />}
+        {selected && <Icon name="check" size={24} color={getTextColor("inverted")} />}
       </View>
-      {/* The text column is width-CONSTRAINED so a long description WRAPS
-          inside the pressable (unconstrained, its intrinsic width overflows
-          the hover/press surface). Column rows take the full width; compact
-          row chips keep hugging their content. */}
-      <View style={compact ? styles.textCompact : styles.text}>
-        <Text size={compact ? "sm" : undefined}>{label}</Text>
-        {!!description && <Text color="muted">{description}</Text>}
+      {/* The text column is width-CONSTRAINED (flex:1, minWidth:0) so a long
+          description WRAPS inside the pressable — unconstrained, its intrinsic
+          width would overflow the hover/press surface. */}
+      <View style={styles.text}>
+        <Text>{label}</Text>
+        {/* the annotation standard (FormField metrics): a step smaller and
+            lighter than the label, so the choice reads first */}
+        {!!description && <Text size="sm" color="zinc-500">{description}</Text>}
       </View>
     </PressableHighlight>
   );
@@ -162,5 +153,4 @@ function RadioOption<T extends string | number | symbol>(
 
 const styles = StyleSheet.create({
   text: { flex: 1, minWidth: 0 },
-  textCompact: { flexShrink: 1, minWidth: 0 },
 });

package/src/text_input_field.tsx

@@ -80,9 +80,9 @@ export function TextInputField(props: TextInputFieldProps) {
   // Tracked on the wrapping View (RN-Web forwards mouse events there reliably).
   const { hovered, hoverProps } = useHover();
 
-  // Describedby chains description and error so both are read. We join them
-  // explicitly here because React Native Web does not flatten array attrs.
-  const describedBy = [binding?.descriptionId, binding?.errorId].filter(Boolean).join(" ") || undefined;
+  // Describedby chains description, warning, and error so all are read. We join
+  // them explicitly here because React Native Web does not flatten array attrs.
+  const describedBy = [binding?.descriptionId, binding?.warningId, binding?.errorId].filter(Boolean).join(" ") || undefined;
 
   const minHeight =
     numberOfLines && numberOfLines > 1

package/examples/tpl_tasks.tsx

@@ -1,456 +0,0 @@
-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 { CaptureRow } from "@lotics/ui/capture_row";
-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 { Change, ChangeReview, ChangeReviewActions, ChangeReviewHeader, ChangeSummary, type ChangeStatus } 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 · Task 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, ChangeStatus>>({});
-  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: ChangeStatus | 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="xxl" 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}>
-          <CaptureRow value={draft} onChangeText={setDraft} onSubmit={add} placeholder="Add a task…" accessibilityLabel="Add a task" />
-        </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}>
-                    {/* A row is NOT a single button: the ring, the title, and the expand
-                        affordance are SIBLING controls in a plain View. Wrapping the row in a
-                        Pressable accessibilityRole="button" while nesting CheckCircle +
-                        InlineTextInput (each renders a <button> on web) would put <button>s
-                        inside a <button> — invalid DOM + the inner controls drop out of the
-                        keyboard tab order. So the expand affordance is its own Pressable. */}
-                    <View style={styles.row}>
-                      <CheckCircle checked={done} onChange={(on) => patch(t.id, { status: on ? "done" : "todo" })} accessibilityLabel={t.title} />
-                      <View style={{ flex: 1 }}>
-                        <InlineTextInput background="transparent" value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={done} accessibilityLabel="Title" />
-                      </View>
-                      <Pressable
-                        onPress={() => toggleExpand(t.id, !open)}
-                        accessibilityRole="button"
-                        accessibilityLabel={open ? `Collapse ${t.title}` : `Expand ${t.title}`}
-                        style={({ hovered }: { hovered?: boolean }) => [styles.expand, hovered ? styles.rowHover : null]}
-                      >
-                        <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>
-                    </View>
-                    {open ? (
-                      <View style={styles.detail}>
-                        <Field label="Due">
-                          <InlineDatePicker background="transparent" value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="Set a due date" accessibilityLabel="Due date" />
-                        </Field>
-                        <Field label="Status">
-                          <InlineSelect background="transparent" 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 background="transparent" 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. The review
-        provider wraps the WHOLE dialog so the `Change`s (scroll area) and the
-        commit bar (`DialogFooter`) share one review context. */}
-    <ChangeReview>
-    <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" ? (
-          <View style={{ gap: 8 }}>
-            <ChangeReviewHeader title="Drafted tasks" />
-            <Text size="sm" color="muted">{`${proposals.length} from your notes — keep, edit, or drop each. A “Low” mark is worth a glance.`}</Text>
-            {proposals.map((p) => {
-              const status = decisions[p.id] ?? "pending";
-              const kept = status === "accepted";
-              return (
-                <Change
-                  key={p.id}
-                  id={p.id}
-                  status={status}
-                  onAccept={() => decide(p.id, "accepted")}
-                  onReject={() => decide(p.id, "rejected")}
-                  onUndo={() => decide(p.id, null)}
-                >
-                  <TaskProposal proposal={p} onEdit={editProposal} />
-                  <ChangeSummary>
-                    <Text size="sm" numberOfLines={1} color={kept ? "default" : "muted"} style={kept ? undefined : { textDecorationLine: "line-through" }}>{p.title}</Text>
-                  </ChangeSummary>
-                </Change>
-              );
-            })}
-          </View>
-        ) : 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 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>
-    </ChangeReview>
-    </>
-  );
-}
-
-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 background="transparent" 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 background="transparent" 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.white },
-  // The expand affordance — its own button (meta + chevron), sibling to the ring
-  // and title so no interactive control nests inside another.
-  // FIXED width so every title cell ends at the same x — the meta content
-  // (clip count · tag dots · date) varies per row and right-aligns inside;
-  // without it the title editors read ragged/misaligned across rows.
-  expand: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 10, minHeight: 36, paddingHorizontal: 8, borderRadius: 8, width: 148 },
-  capture: {
-    borderBottomWidth: 1,
-    borderBottomColor: colors.zinc[100],
-    paddingBottom: 6,
-  },
-
-  sectionHead: { flexDirection: "row", alignItems: "center", gap: 8, paddingBottom: 6 },
-  sectionLabel: { letterSpacing: 0.3, textTransform: "uppercase" },
-  meta: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", gap: 10, flex: 1 },
-  clip: { flexDirection: "row", alignItems: "center", gap: 2 },
-  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 },
-});