@lotics/ui 5.10.0 → 6.0.0

package/AGENTS.md

@@ -26,10 +26,12 @@ Pick by capability, not by name. (→ the source file for the API.)
   `IconButton` (icon-ONLY — the circular affordance; an icon-only Button is a type error, so reach
   here. `size` `lg` 40px / `md` 28px / `sm` 24px, the SAME `color` palette as Button, plus `loading`
   and `elevated` (white fill + border + shadow, for a button sitting ON imagery — a tile's remove ✕,
-  an overlay's retry); needs `accessibilityLabel`/`tooltip`), `LinkButton` (quiet ghost
-  action — Clear / Select all), `Chip` (dismissible facet chip). A button is never a raw
-  `Pressable`. For a link OUT (a URL / record / document) use `Link` — underline+blue, the
-  destination signal; the opposite of `LinkButton` (a quiet in-app action, never underlined).
+  an overlay's retry); needs `accessibilityLabel`/`tooltip`), `TextLink` (underlined text that's
+  OPTIONALLY an action (`onPress`) or a link (`href`) — or, with neither, plain underlined text you
+  drop in your own pressable like a table cell; colour via `color`; the go-to for Clear / Select all /
+  inline links), `Chip` (dismissible facet chip). A button is never a raw `Pressable`. For a link OUT
+  (a URL / record / document) use `Link` — fixed underline+blue + `role="link"`, the destination
+  signal; `TextLink` is the neutral, colour-configurable underlined link/action.
 - **Pick from a list** — `Picker` (native `<select>`, plain label-only single, native typeahead)
   or `Select` (the rich one — custom-rendered options, single/multi, select-all). Search-as-you-type
   / async / create-new → `Combobox`. A selectable card row → `CardSelectItem`. For a SELECT-FIELD
@@ -681,8 +683,12 @@ recipe for a screen JOB; copy and adapt). Pick by the job:
   filter chips, and a primary Draft-from-notes CTA `Composer → AgentRun → ChangeReview`) ·
   `tpl_task_board` (the COLUMNS shape: a search · group-by · filter toolbar over a grouped, sortable
   grid of inline-editable cells — assignee/due/status/tags set directly, a files cell (thumbnail glance →
-  popover grid → gallery), per-group add rows that pre-set the group's field, and the same Draft-from-notes
-  CTA) · `tpl_pipeline` (the SAME inline-managed grouped-table shape, a second domain — deals grouped by
+  popover grid → gallery), a **dynamic action column** (a per-row underlined action LINK driven by each
+  task's `action` descriptor — attach/approve/open, each wired in a real app to its OWN workflow: one
+  board, a different action per row; the link's pressable fills the cell to match the inline editors),
+  a trailing **`ActionMenu`** (the ⋯ overflow — a `danger` Remove + confirm
+  today, more row actions later), per-group add rows that pre-set the group's field, and the same
+  Draft-from-notes CTA) · `tpl_pipeline` (the SAME inline-managed grouped-table shape, a second domain — deals grouped by
   stage with a money-value cell + owner + close-date edited inline, its own Draft-from-notes CTA drafting
   deals; proof the shape generalizes beyond tasks). All three: filters/search left, primary CTA right, one
   row; group-by holds only real dimensions, ✕ clears to ungrouped (no "Nothing" option). **`tpl_task_board` + `tpl_pipeline` are the inline-managed
@@ -690,7 +696,11 @@ recipe for a screen JOB; copy and adapt). Pick by the job:
   rows). For thousands+ you BROWSE, that's `tpl_dossier`'s paginated register, not this.** Both build
   on the `DataGrid` primitive (the grid shape, extracted once these two uses confirmed it); each owns
   only its data, toolbar, columns and per-group add. There is NO Task component — a task ROW varies
-  too much to bake into one, so rows compose `CheckCircle` + `InlineTextInput` + inline-editor cells.
+  too much to bake into one, so rows compose `CheckCircle` + `InlineTextInput` + inline-editor cells
+  as **sibling** controls in a plain `View`. NEVER wrap the whole row in a `Pressable accessibilityRole="button"`
+  (for tap-to-expand) with those controls nested inside: RNW renders the row AND each control as a `<button>`,
+  so you get `<button>`s inside a `<button>` — invalid DOM + the inner controls drop out of the keyboard tab
+  order. Give "expand" its own affordance (a trailing `Pressable` over the meta/chevron), as `tpl_tasks` does.
 - **Data capture** — `tpl_intake` (multi-fieldset form + attachments) · `tpl_order` (the
   transactional form: find-or-create + line items + attachment CRUD + 2-col grid) · `tpl_billing`
   (charges→invoice→collect: the invoice DOCUMENT is the unit — editable charge lines + method,
@@ -727,7 +737,7 @@ section_heading (SectionHeading · SectionHeadingTitle — compound, owns no mar
 option_badge (OptionBadge — a select value as its configured colored badge) ·
 member_chip (MemberChip — avatar + name; the universal person render) ·
 member_select (MemberSelect — a Picker of MemberChip options; the member picker) ·
-status_badge · button · icon_button · link · link_button · chip · tabs · segmented_control ·
+status_badge · button · icon_button · link · text_link (TextLink — underlined text that's optionally an `onPress` action or an `href` link, or plain underlined text to wrap in your own pressable; the neutral counterpart to the fixed-blue `Link`) · chip · tabs · segmented_control ·
 picker (native `<select>`, plain label-only single) · select (Select — rich/custom-rendered, single/multi, select-all, chips via `renderSelected` + `searchable` + `allowCustom` — the tag field is just a multi Select; opens `OptionList`) · option_list (OptionList — the ONE shared searchable listbox body every selector opens: single/multi, optional internal search, create row, keyboard + native-`<select>` typeahead; host it directly in a `Popover`/`Dialog` for a command palette) · combobox (single-select editable search input; browses on focus; no `multi` — multi-value chips → `Select multi`) ·
 text_input_field · number_input · search_input · form_field · checkbox · checkbox_input · switch ·
 radio_picker · counter · range_slider · date_picker · date_range_filter_field · time_picker ·

package/examples/tpl_task_board.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Pressable, ScrollView, StyleSheet, View } from "react-native";
 import { Text } from "@lotics/ui/text";
+import { TextLink } from "@lotics/ui/text_link";
 import { colors, solid, asColorName } from "@lotics/ui/colors";
 import { Icon } from "@lotics/ui/icon";
 import { CheckCircle } from "@lotics/ui/check_circle";
@@ -17,6 +18,9 @@ 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 { ActionMenu } from "@lotics/ui/action_menu";
+import { Alert } from "@lotics/ui/alert";
+import { pickFiles } from "@lotics/ui/file_picker";
 import { Popover, PopoverTrigger, PopoverContent } from "@lotics/ui/popover";
 import { FilesEditor } from "@lotics/ui/files_editor";
 import { FileThumbnail, type DisplayFile } from "@lotics/ui/file_thumbnail";
@@ -70,6 +74,20 @@ 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 renderTagBadge = (o: { value: string; label?: string }) => <OptionBadge value={tagBadge({ value: o.value, label: o.label ?? o.value })} variant="dot" />;
 
+// A per-row CONTEXTUAL action. Different tasks expose different actions, each
+// wired (in a real app) to its OWN app-workflow — so ONE board drives many
+// task-specific operations from a single column:
+//   • attach  → pick a file; a workflow uploads it and attaches it to the row's
+//               linked record (e.g. the task's hồ sơ / case / order)
+//   • approve → a one-tap state-change workflow (sign-off, mark verified)
+//   • open    → jump to the linked record / an external resource
+// The cell renders an underlined action link for the row's `action`; `null` → none.
+// Add a `kind` here + a branch in `RowActionCell` to introduce a new action.
+type RowAction =
+  | { kind: "attach"; label: string }
+  | { kind: "approve"; label: string }
+  | { kind: "open"; label: string };
+
 interface Task {
   id: string;
   title: string;
@@ -78,6 +96,7 @@ interface Task {
   status: Status;
   tags: TagOption[];
   files: DisplayFile[];
+  action: RowAction | null;
 }
 
 const day = (n: number): string => {
@@ -101,13 +120,13 @@ 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", ownerId: "m1", due: day(-2), status: "doing", tags: [tagOf("client"), tagOf("urgent")], files: [sampleImage("quote-draft", "#3b82f6")] },
-  { id: "t2", title: "Finalize the gift-box packaging design", ownerId: "m3", due: day(0), status: "doing", tags: [tagOf("design")], files: [] },
-  { id: "t3", title: "Sign off the die-cut sample", ownerId: "m1", due: day(0), status: "todo", tags: [tagOf("design"), tagOf("print")], files: [sampleImage("die-cut", "#10b981"), sampleImage("sample-2", "#f59e0b")] },
-  { id: "t4", title: "Order 300g ivory board stock", ownerId: "m2", due: day(3), status: "todo", tags: [tagOf("print")], files: [] },
-  { id: "t5", title: "Schedule the first delivery batch", ownerId: "m4", due: day(9), status: "todo", tags: [], files: [] },
-  { id: "t6", title: "Draft the 2026 print contract", ownerId: null, due: null, status: "todo", tags: [tagOf("client")], files: [] },
-  { id: "t7", title: "Update the Q3 price list", ownerId: "m3", due: day(-5), status: "done", tags: [], files: [] },
+  { id: "t1", title: "Send VITTORIA their quote", ownerId: "m1", due: day(-2), status: "doing", tags: [tagOf("client"), tagOf("urgent")], files: [sampleImage("quote-draft", "#3b82f6")], action: { kind: "attach", label: "Attach quote" } },
+  { id: "t2", title: "Finalize the gift-box packaging design", ownerId: "m3", due: day(0), status: "doing", tags: [tagOf("design")], files: [], action: { kind: "approve", label: "Sign off" } },
+  { id: "t3", title: "Sign off the die-cut sample", ownerId: "m1", due: day(0), status: "todo", tags: [tagOf("design"), tagOf("print")], files: [sampleImage("die-cut", "#10b981"), sampleImage("sample-2", "#f59e0b")], action: { kind: "attach", label: "Attach sample" } },
+  { id: "t4", title: "Order 300g ivory board stock", ownerId: "m2", due: day(3), status: "todo", tags: [tagOf("print")], files: [], action: { kind: "open", label: "Open spec" } },
+  { id: "t5", title: "Schedule the first delivery batch", ownerId: "m4", due: day(9), status: "todo", tags: [], files: [], action: null },
+  { id: "t6", title: "Draft the 2026 print contract", ownerId: null, due: null, status: "todo", tags: [tagOf("client")], files: [], action: { kind: "approve", label: "Approve draft" } },
+  { id: "t7", title: "Update the Q3 price list", ownerId: "m3", due: day(-5), status: "done", tags: [], files: [], action: null },
 ];
 
 type GroupBy = "status" | "assignee" | "due";
@@ -174,6 +193,9 @@ export function TplTaskBoard() {
     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));
+  // Tangible feedback for a run action (the picked file's name / "Approved") — the
+  // place a real app would reflect the workflow's outcome.
+  const [actionResult, setActionResult] = useState<Record<string, string>>({});
 
   const patch = (id: string, next: Partial<Task>) =>
     setTasks((ts) => ts.map((t) => (t.id === id ? { ...t, ...next } : t)));
@@ -183,6 +205,20 @@ export function TplTaskBoard() {
     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 removeTask = (id: string) => setTasks((ts) => ts.filter((t) => t.id !== id));
+  // Destructive → always confirm before executing (the ActionMenu danger item).
+  const confirmRemove = (t: Task) =>
+    Alert.alert("Remove task?", `“${t.title}” will be removed from the board.`, [
+      { text: "Cancel", style: "cancel" },
+      { text: "Remove", style: "destructive", onPress: () => removeTask(t.id) },
+    ]);
+  // The dynamic actions. In a real app each dispatches its OWN app-workflow; here
+  // they record a result so the cell shows the action completed.
+  const runAttach = async (id: string) => {
+    const picked = await pickFiles();
+    if (picked.length > 0) setActionResult((r) => ({ ...r, [id]: picked[0].name }));
+  };
+  const runApprove = (id: string) => setActionResult((r) => ({ ...r, [id]: "Approved" }));
 
   // Draft-from-notes AI flow — agent proposes, manager keeps/edits/drops, commit adds tasks.
   const [draftOpen, setDraftOpen] = useState(false);
@@ -202,7 +238,7 @@ export function TplTaskBoard() {
   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, i) => ({ id: `d-${p.id}-${i}`, title: p.title, ownerId: null, due: p.due, status: "todo" as Status, tags: [], files: [] }))]);
+    setTasks((ts) => [...ts, ...accepted.map((p, i) => ({ id: `d-${p.id}-${i}`, title: p.title, ownerId: null, due: p.due, status: "todo" as Status, tags: [], files: [], action: null }))]);
     setAddedCount(accepted.length);
     setPhase("done");
   }, [proposals, decisions]);
@@ -228,17 +264,35 @@ export function TplTaskBoard() {
   }
 
   const propertyCols: DataGridColumn<Task>[] = [
-    { key: "assignee", label: "Assignee", width: 168, sortable: true, cell: (t) => <InlineMemberSelect members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
-    { key: "due", label: "Due", width: 150, sortable: true, cell: (t) => <InlineDatePicker value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" /> },
-    { key: "status", label: "Status", width: 132, sortable: true, cell: (t) => <InlineSelect value={t.status} options={STATUS_OPTIONS} onSave={(s) => patch(t.id, { status: s })} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" /> },
-    { key: "tags", label: "Tags", width: 210, cell: (t) => <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" /> },
+    { key: "assignee", label: "Assignee", width: 160, sortable: true, cell: (t) => <InlineMemberSelect members={MEMBERS} value={t.ownerId} onSave={(id) => patch(t.id, { ownerId: id })} placeholder="Unassigned" accessibilityLabel="Assignee" /> },
+    { key: "due", label: "Due", width: 140, sortable: true, cell: (t) => <InlineDatePicker value={t.due} optionalTime onSave={(v) => patch(t.id, { due: v })} placeholder="No date" accessibilityLabel="Due date" /> },
+    { key: "status", label: "Status", width: 130, sortable: true, cell: (t) => <InlineSelect value={t.status} options={STATUS_OPTIONS} onSave={(s) => patch(t.id, { status: s })} renderSelected={renderStatusBadge} renderOptionContent={renderStatusBadge} accessibilityLabel="Status" /> },
+    { key: "tags", label: "Tags", width: 168, cell: (t) => <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" /> },
   ];
   const filesCol: DataGridColumn<Task> = {
-    key: "files", label: "Files", width: 116, sortable: false,
+    key: "files", label: "Files", width: 100, sortable: false,
     cell: (t) => <FilesCell files={t.files} onAdd={(fs) => addFiles(t.id, fs)} onRemove={(id) => removeFile(t.id, id)} />,
   };
+  // The DYNAMIC action column — each row shows the button its `action` describes.
+  const actionCol: DataGridColumn<Task> = {
+    key: "action", label: "Action", width: 156, sortable: false,
+    cell: (t) => <RowActionCell task={t} result={actionResult[t.id]} onAttach={runAttach} onApprove={runApprove} />,
+  };
+  // The ⋯ overflow menu — the row's secondary actions (Remove today; more later).
+  const menuCol: DataGridColumn<Task> = {
+    key: "__menu", label: "", width: 40, sortable: false,
+    cell: (t) => (
+      <ActionMenu
+        accessibilityLabel={`Actions for ${t.title}`}
+        items={[
+          // Add more row actions here (Duplicate, Assign to me, Snooze…).
+          { key: "remove", label: "Remove task", icon: "trash", danger: true, onPress: () => confirmRemove(t) },
+        ]}
+      />
+    ),
+  };
   const visibleProps = propertyCols.filter((c) => c.key !== groupBy);
-  const addCols = [...visibleProps, filesCol];
+  const addCols = [...visibleProps, filesCol, actionCol, menuCol];
   const columns: DataGridColumn<Task>[] = [
     { key: "title", label: "Task", sortable: true, cell: (t) => <InlineTextInput value={t.title} onSave={(v) => patch(t.id, { title: v })} struck={t.status === "done"} accessibilityLabel="Title" /> },
     ...addCols,
@@ -272,7 +326,7 @@ export function TplTaskBoard() {
   return (
     <>
     <ScrollView style={{ flex: 1, backgroundColor: colors.white }} contentContainerStyle={{ paddingVertical: 28, paddingHorizontal: 24, paddingBottom: 96 }}>
-      <View style={{ maxWidth: 1040, width: "100%", alignSelf: "center", gap: 16 }}>
+      <View style={{ maxWidth: 1240, width: "100%", alignSelf: "center", gap: 16 }}>
         <Text size="xl" weight="semibold">Task board</Text>
 
         <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
@@ -413,6 +467,32 @@ function FilesCell({ files, onAdd, onRemove }: { files: DisplayFile[]; onAdd: (p
   );
 }
 
+// The dynamic action cell — an underlined LINK whose label is the row's `action`
+// (a DIFFERENT action per task); pressing it dispatches that task's own workflow.
+// The pressable fills the cell, so its hit area matches the inline-editor cells
+// beside it. Once run, the cell shows the result (the attached file's name /
+// "Approved") — where a real app reflects the dispatched workflow's outcome.
+function RowActionCell({ task, result, onAttach, onApprove }: { task: Task; result: string | undefined; onAttach: (id: string) => void; onApprove: (id: string) => void }) {
+  const a = task.action;
+  if (!a) return null;
+  if (result) {
+    return (
+      <View style={styles.result}>
+        <Icon name="check" size={14} color={colors.emerald[600]} />
+        <Text size="sm" color="muted" numberOfLines={1}>{result}</Text>
+      </View>
+    );
+  }
+  // The action is its OWN pressable container (cell-sized hit area); the label is a
+  // plain `TextLink` (underlined text, no onPress of its own — the wrapper handles it).
+  const onPress = a.kind === "attach" ? () => onAttach(task.id) : a.kind === "approve" ? () => onApprove(task.id) : () => {};
+  return (
+    <Pressable onPress={onPress} accessibilityRole="button" accessibilityLabel={a.label} style={({ hovered }: { hovered?: boolean }) => [styles.action, hovered ? styles.actionHover : null]}>
+      <TextLink size="sm" numberOfLines={1}>{a.label}</TextLink>
+    </Pressable>
+  );
+}
+
 function TaskAddRow({ preset, columns, onAdd }: { preset: Partial<Task>; columns: DataGridColumn<Task>[]; onAdd: (t: Omit<Task, "id">) => void }) {
   const [title, setTitle] = useState("");
   const [ownerId, setOwnerId] = useState<string | null>(null);
@@ -423,7 +503,7 @@ function TaskAddRow({ preset, columns, onAdd }: { preset: Partial<Task>; columns
   const submit = () => {
     const t = title.trim();
     if (!t) return;
-    onAdd({ title: t, ownerId, due, status, tags, files: [], ...preset });
+    onAdd({ title: t, ownerId, due, status, tags, files: [], action: null, ...preset });
     setTitle("");
     setOwnerId(null);
     setDue(null);
@@ -431,8 +511,8 @@ function TaskAddRow({ preset, columns, onAdd }: { preset: Partial<Task>; columns
     setTags([]);
   };
 
-  // Files are added once a task exists (per-row paperclip), so the add row leaves
-  // that column empty — the width is still reserved so the columns stay aligned.
+  // Files / action / ⋯ act on a task that already exists, so the add row leaves
+  // those columns empty — the widths are still reserved so the columns stay aligned.
   const editor = (key: string) =>
     key === "assignee" ? <InlineMemberSelect members={MEMBERS} value={ownerId} onSave={setOwnerId} placeholder="Assignee" accessibilityLabel="Assignee" />
     : key === "due" ? <InlineDatePicker value={due} optionalTime onSave={setDue} placeholder="No date" accessibilityLabel="Due date" />
@@ -469,5 +549,9 @@ const styles = StyleSheet.create({
   clipPreview: { flexDirection: "row", alignItems: "center", gap: 6 },
   summary: { flexDirection: "row", alignItems: "center", gap: 4 },
   summaryDot: { width: 8, height: 8, borderRadius: 999 },
+  result: { flexDirection: "row", alignItems: "center", gap: 6, minHeight: 40 },
+  // Fills the cell (height + width) so the link's hit area matches the inline cells.
+  action: { justifyContent: "center", minHeight: 40, paddingHorizontal: 8, borderRadius: 8, cursor: "pointer" },
+  actionHover: { backgroundColor: colors.zinc[50] },
   source: { borderLeftWidth: 2, borderLeftColor: colors.zinc[200], paddingLeft: 10 },
 });

package/examples/tpl_tasks.tsx

@@ -285,25 +285,38 @@ export function TplTasks() {
                 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]}>
+                    {/* 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 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>
+                      <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">
@@ -414,6 +427,9 @@ const styles = StyleSheet.create({
     borderRadius: 10,
   },
   rowHover: { backgroundColor: colors.zinc[50] },
+  // The expand affordance — its own button (meta + chevron), sibling to the ring
+  // and title so no interactive control nests inside another.
+  expand: { flexDirection: "row", alignItems: "center", gap: 10, minHeight: 36, paddingHorizontal: 8, borderRadius: 8 },
   capture: {
     borderBottomWidth: 1,
     borderBottomColor: colors.zinc[100],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.10.0",
+  "version": "6.0.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -148,7 +148,7 @@
     "./range_slider": "./src/range_slider.tsx",
     "./counter": "./src/counter.tsx",
     "./link": "./src/link.tsx",
-    "./link_button": "./src/link_button.tsx",
+    "./text_link": "./src/text_link.tsx",
     "./sort_header": "./src/sort_header.tsx",
     "./skeleton": "./src/skeleton.tsx",
     "./table": "./src/table.tsx",

package/src/filter_chip.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
-import { LinkButton } from "./link_button";
+import { TextLink } from "./text_link";
 import { Chip } from "./chip";
 import { Popover, PopoverTrigger, PopoverContent, PopoverFooter } from "./popover";
 import type { PopoverSide, PopoverAlign } from "./popover";
@@ -108,7 +108,7 @@ export function FilterChip(props: FilterChipProps) {
           <PopoverFooter>{footer}</PopoverFooter>
         ) : showClear ? (
           <PopoverFooter align="start">
-            <LinkButton title={clearLabel} onPress={onClear} />
+            <TextLink onPress={onClear}>{clearLabel}</TextLink>
           </PopoverFooter>
         ) : null}
       </PopoverContent>

package/src/link.tsx

@@ -16,12 +16,12 @@ export interface LinkProps {
 }
 
 /**
- * An EXTERNAL hyperlink — underline + blue, the universal "this opens somewhere
- * else" signal (a document URL, a record, an invoice). The deliberate counterpart
- * to `LinkButton`: `LinkButton` is a QUIET IN-APP ACTION (a ghost button — "Clear",
- * "Show more") and intentionally NOT underlined; `Link` is a link OUT and IS
- * underlined-blue so it reads as a destination, not an action. The consumer wires
- * `onPress` to its opener.
+ * An EXTERNAL hyperlink — underline + blue + `role="link"`, the universal "this
+ * opens somewhere else" signal (a document URL, a record, an invoice), the colour
+ * fixed so it always reads as a destination. The deliberate counterpart to
+ * `TextLink` — the neutral, colour-configurable underlined link that is OPTIONALLY
+ * an `onPress` action (or plain underlined text). Reach for `Link` when the thing
+ * is specifically a destination; the consumer wires `onPress` to its opener.
  */
 export function Link({ children, onPress, size = "sm", accessibilityLabel, testID }: LinkProps) {
   const { focusVisible, focusProps } = useFocusRing();

package/src/option_list.tsx

@@ -5,7 +5,7 @@ import { Text } from "./text";
 import { Icon } from "./icon";
 import { Checkbox } from "./checkbox";
 import { MenuButton } from "./menu_button";
-import { LinkButton } from "./link_button";
+import { TextLink } from "./text_link";
 import { ActivityIndicator } from "./activity_indicator";
 import { TextInputField } from "./text_input_field";
 import { useScreenSize } from "./use_screen_size";
@@ -164,9 +164,9 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
 
       {list.showSelectAll || list.showDeselectAll ? (
         <View style={styles.selectAllContainer}>
-          {list.showSelectAll ? <LinkButton title={selectAllLabel} onPress={list.selectAll} /> : null}
+          {list.showSelectAll ? <TextLink onPress={list.selectAll}>{selectAllLabel}</TextLink> : null}
           {list.showDeselectAll ? (
-            <LinkButton title={deselectAllLabel} onPress={list.deselectAll} />
+            <TextLink onPress={list.deselectAll}>{deselectAllLabel}</TextLink>
           ) : null}
         </View>
       ) : null}
@@ -188,8 +188,8 @@ const styles = StyleSheet.create({
     alignItems: "center",
     gap: 16,
     paddingVertical: 4,
-    // Matches a MenuButton option's 8px text inset so the bleeding-wash
-    // LinkButtons line up under the option labels above.
+    // Matches a MenuButton option's 8px text inset so the select-all / deselect-all
+    // links line up under the option labels above.
     paddingHorizontal: 8,
     borderTopWidth: 1,
     borderTopColor: colors.border,

package/src/sort_header.tsx

@@ -106,8 +106,8 @@ export function SortHeader(props: SortHeaderProps) {
 }
 
 const styles = StyleSheet.create({
-  // Negative margin so the wash bleeds while the label stays flush with the
-  // column content below (same idea as LinkButton).
+  // Negative margin so the hover wash bleeds while the label stays flush with the
+  // column content below.
   header: {
     flexDirection: "row",
     alignItems: "center",

package/src/text.tsx

@@ -28,6 +28,9 @@ export interface TextProps {
   tabular?: boolean;
   style?: RNTextProps["style"];
   onPress?: () => void;
+  /** A URL — renders the text as a real anchor (`<a href>` on web; middle-click /
+   *  open-in-new-tab work). For an in-app action use `onPress`. */
+  href?: string;
   /** ID used to target this element from `accessibilityLabelledBy` / `aria-describedby`. */
   nativeID?: string;
   accessibilityRole?: RNTextProps["accessibilityRole"];
@@ -71,6 +74,7 @@ export function Text(props: TextProps) {
     tabular,
     transform,
     onPress,
+    href,
     style,
     nativeID,
     accessibilityRole,
@@ -112,6 +116,7 @@ export function Text(props: TextProps) {
       ]}
       numberOfLines={numberOfLines}
       onPress={onPress}
+      {...(href != null ? { href } : null)}
     >
       {children}
     </RNText>

package/src/text_link.tsx

@@ -0,0 +1,45 @@
+import { Text, type TextProps } from "./text";
+import { Icon, type IconName } from "./icon";
+import { getTextColor } from "./text_utils";
+
+export interface TextLinkProps extends TextProps {
+  /** Optional leading icon. */
+  icon?: IconName;
+  /** A URL — renders a real anchor (`<a href>` on web; middle-click / open-in-new-tab
+   *  work). For in-app routing, wrap `TextLink` or use `onPress`. */
+  href?: string;
+  /** An in-app action. With NEITHER `href` nor `onPress`, `TextLink` is just
+   *  underlined text you wrap in your own pressable (e.g. a table cell). */
+  onPress?: () => void;
+}
+
+/**
+ * Underlined text that is OPTIONALLY a link (`href` → a web anchor) or an action
+ * (`onPress` → pressable); with neither it's plain underlined text you drop inside
+ * your own pressable (a table cell, a custom row). Colour comes from `color` (it
+ * inherits every `Text` prop) — the neutral, configurable counterpart to `Link`,
+ * which is fixed blue + `role="link"` for the "this opens somewhere else" signal.
+ */
+export function TextLink(props: TextLinkProps) {
+  const { icon, href, onPress, children, color, style, ...textProps } = props;
+  const interactive = href != null || onPress != null;
+  return (
+    <Text
+      decoration="underline"
+      weight="medium"
+      color={color}
+      href={href}
+      onPress={onPress}
+      accessibilityRole={href != null ? "link" : onPress != null ? "button" : undefined}
+      style={[
+        icon ? { display: "flex", flexDirection: "row", alignItems: "center", gap: 4 } : null,
+        interactive ? { cursor: "pointer" } : null,
+        style,
+      ]}
+      {...textProps}
+    >
+      {icon ? <Icon name={icon} size={16} color={getTextColor(color)} /> : null}
+      {children}
+    </Text>
+  );
+}

package/src/link_button.tsx

@@ -1,51 +0,0 @@
-import { StyleSheet } from "react-native";
-import { Text } from "./text";
-import { PressableHighlight } from "./pressable_highlight";
-import { CONTROL_RADIUS } from "./control_surface";
-
-export interface LinkButtonProps {
-  title: string;
-  onPress: () => void;
-  /** Defaults to `title`. */
-  accessibilityLabel?: string;
-  testID?: string;
-}
-
-/**
- * A quiet inline action — "Clear", "Select all", "Show more" — styled as a GHOST
- * button: dark medium text with no chrome at rest and a soft rounded hover wash,
- * compact (not the 40px `Button`). The low-emphasis sibling of `Button` for
- * utility actions in a popover footer or a list's select-all row; it never
- * competes with a real/commit button, and reads more premium than an underlined
- * link or a filled/muted Button.
- */
-export function LinkButton(props: LinkButtonProps) {
-  const { title, onPress, accessibilityLabel, testID } = props;
-  return (
-    <PressableHighlight
-      focusRing      testID={testID}
-      onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={accessibilityLabel ?? title}
-      userSelect="none"
-      style={styles.btn}
-    >
-      <Text size="sm" weight="medium">
-        {title}
-      </Text>
-    </PressableHighlight>
-  );
-}
-
-const styles = StyleSheet.create({
-  // The hover wash needs horizontal padding, but the negative margin cancels it
-  // for POSITIONING — so the text sits flush with the surrounding content's left
-  // edge (the option rows above, the editor body) while the wash bleeds outward.
-  btn: {
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    marginHorizontal: -8,
-    borderRadius: CONTROL_RADIUS,
-    alignSelf: "flex-start",
-  },
-});