@lotics/ui 5.10.1 → 6.1.0

package/AGENTS.md

@@ -12,9 +12,17 @@ typeahead, async search, virtualization, and a11y the primitive already ships.
   `PortalHost` at the app root.
 - RN-Web only: `View`/`ScrollView` from `react-native`, the `Text` primitive (no raw
   `div`/`span`, no raw `fontSize`/`fontWeight`); styles are RN objects.
-- i18n: most components are string-free; the few that emit their own user-facing strings take
-  a `labels` prop (`DateRangeFilterField`, `Pagination`, `SortHeader`/`Table.sortLabels`,
-  `RemainderMeter`) — localize there.
+- i18n: most components are string-free. For the rest, set the language ONCE at the root with
+  **`LoticsLocaleProvider`** (`@lotics/ui/locale`, the sibling of `LoticsThemeProvider`) — wrap
+  `<LoticsLocaleProvider locale={vi}>` and every wired component picks up the pack, no per-instance
+  props. Shipped packs: `en` (default) and `vi` (one canonical Vietnamese translation, so apps don't
+  redefine — or drift on — strings). Resolution is **prop → provider locale → English default**, so a
+  per-instance `labels`/`clearLabel`/`selectAllLabel` still overrides for one-offs, and an un-wrapped
+  app stays English. Wired so far: `Pagination`, `SortHeader`/`Table.sortLabels`, `OptionList`
+  (+ `Select`/`Combobox` built on it), `FilterChip`, `Drawer`. Adding a string to a wired component's
+  `*Labels` forces both packs in `locale.tsx` to fill it (compile error) — that's how the kit avoids a
+  silent English leak. Not yet on the provider (pass `labels` for now): `DateRangeFilterField`,
+  `RemainderMeter`, `ChangeReview`, calendar/gantt.
 
 ---
 
@@ -26,10 +34,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 +691,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
@@ -731,7 +745,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "5.10.1",
+  "version": "6.1.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -56,6 +56,7 @@
     "./status_grid": "./src/status_grid.tsx",
     "./heatmap": "./src/heatmap.tsx",
     "./trend_footer": "./src/trend_footer.tsx",
+    "./locale": "./src/locale.tsx",
     "./spacing": "./src/spacing.ts",
     "./theme": "./src/theme.tsx",
     "./progress_bar": "./src/progress_bar.tsx",
@@ -148,7 +149,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/column_filter.tsx

@@ -92,7 +92,8 @@ export interface ColumnFilterProps {
   column: FilterableColumn;
   value: ColumnFilterValue | undefined;
   onChange: (value: ColumnFilterValue | undefined) => void;
-  /** Accessible name for the clear (X) control. Pass a translated string. Default "Clear". */
+  /** Accessible name for the clear (X) control. Omit to use the locale's
+   *  `filterChip.clear` (English "Clear" by default). */
   clearLabel?: string;
 }
 
@@ -105,7 +106,7 @@ export interface ColumnFilterProps {
  * `columnFilterToConditions`. Pure UI; no data layer.
  */
 export function ColumnFilter(props: ColumnFilterProps) {
-  const { column, value, onChange, clearLabel = "Clear" } = props;
+  const { column, value, onChange, clearLabel } = props;
   const active = isColumnFilterActive(value);
 
   return (

package/src/combobox.tsx

@@ -9,6 +9,7 @@ import {
 import { useCallback, useRef, useState, type ReactNode } from "react";
 import { colors } from "./colors";
 import { FOCUS_RING } from "./control_surface";
+import { useLoticsLocale } from "./locale";
 import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { TextInputField } from "./text_input_field";
@@ -110,8 +111,6 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     searchDebounceMs = 200,
     icon,
     placeholder,
-    recentsLabel = "Recent",
-    emptyText = "No results",
     accessibilityLabel = "Results",
     disabled = false,
     clearable = false,
@@ -121,6 +120,9 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     testID,
     style,
   } = props;
+  const loc = useLoticsLocale().optionList;
+  const emptyText = props.emptyText ?? loc.noResults;
+  const recentsLabel = props.recentsLabel ?? loc.recent;
 
   const single = value ?? null;
   const reflectedText = single ? (single.label ?? single.value) : "";

package/src/drawer.tsx

@@ -6,6 +6,7 @@ import { colors } from "@lotics/ui/colors";
 import { IconButton } from "@lotics/ui/icon_button";
 import { Text } from "@lotics/ui/text";
 import { useOverlayScope } from "@lotics/ui/overlay_scope";
+import { useLoticsLocale } from "@lotics/ui/locale";
 
 export interface DrawerProps {
   open: boolean;
@@ -44,6 +45,7 @@ export interface DrawerProps {
  */
 export function Drawer(props: DrawerProps) {
   const { open, onOpenChange, title, width = 420, onPrev, onNext, position, children, testID } = props;
+  const loc = useLoticsLocale().drawer;
   const screenSize = useScreenSize();
   useOverlayScope(open);
   const handleClose = () => onOpenChange(false);
@@ -79,7 +81,7 @@ export function Drawer(props: DrawerProps) {
     <Modal visible={open} onRequestClose={handleClose} transparent>
       <View style={styles.base}>
         {/* Scrim is a sibling of the panel, so tapping the panel never closes. */}
-        <Pressable style={styles.scrim} onPress={handleClose} accessibilityLabel="Close" tabIndex={-1} />
+        <Pressable style={styles.scrim} onPress={handleClose} accessibilityLabel={loc.close} tabIndex={-1} />
         <View style={[styles.panel, { width: screenSize.small ? "100%" : width }]}>
           <PortalHost>
             <View style={styles.header}>
@@ -94,7 +96,7 @@ export function Drawer(props: DrawerProps) {
                 <View style={styles.nav}>
                   <IconButton
                     icon="chevron-left"
-                    accessibilityLabel="Previous record"
+                    accessibilityLabel={loc.previous}
                     onPress={onPrev ?? (() => {})}
                     disabled={!onPrev}
                   />
@@ -105,13 +107,13 @@ export function Drawer(props: DrawerProps) {
                   ) : null}
                   <IconButton
                     icon="chevron-right"
-                    accessibilityLabel="Next record"
+                    accessibilityLabel={loc.next}
                     onPress={onNext ?? (() => {})}
                     disabled={!onNext}
                   />
                 </View>
               ) : null}
-              <IconButton icon="x" size="lg" accessibilityLabel="Close" onPress={handleClose} />
+              <IconButton icon="x" size="lg" accessibilityLabel={loc.close} onPress={handleClose} />
             </View>
             <View testID={testID} style={styles.body}>
               {children}

package/src/filter_chip.tsx

@@ -3,10 +3,11 @@ 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";
+import { useLoticsLocale } from "./locale";
 
 export interface FilterChipProps {
   /** The dimension name — shown alone when inactive ("Owner"), prefixed when
@@ -69,7 +70,8 @@ export function selectSummary(
  * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
  */
 export function FilterChip(props: FilterChipProps) {
-  const { label, summary, onClear, clearLabel = "Clear", children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
+  const { label, summary, onClear, children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
+  const clearLabel = props.clearLabel ?? useLoticsLocale().filterChip.clear;
   const active = summary != null && (typeof summary !== "string" || summary.length > 0);
   // The clear × / Clear footer only when there's a clearable selection AND no
   // custom footer — a valued, non-clearable pill ("Target: 20") keeps its chevron.
@@ -108,7 +110,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/locale.tsx

@@ -0,0 +1,107 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { type PaginationLabels } from "./pagination";
+import { type SortHeaderLabels } from "./sort_header";
+
+/**
+ * The kit's localizable strings, one slice per string-bearing component. A
+ * `LoticsLocale` is plain DATA (like a date-fns locale) — it carries no i18n
+ * LOGIC, so the kit stays translation-agnostic while an app supplies the pack
+ * once at its root. Each slice REUSES the component's own `*Labels` type, so
+ * adding a localizable string to a component (a new key on its `Labels`) forces
+ * BOTH packs below to fill it — a missing translation is a compile error here,
+ * never a silent English leak at a call site.
+ *
+ * Resolution order in every wired component: an explicit per-instance prop wins,
+ * else this locale (from `LoticsLocaleProvider`, default `en`), else nothing —
+ * the locale is always complete, so there is no third fallback to forget.
+ */
+export interface LoticsLocale {
+  /** `Pagination` range + page summaries and the prev/next tooltips. */
+  pagination: Required<PaginationLabels>;
+  /** `SortHeader` a11y prefix + asc/desc suffixes. */
+  sortHeader: Required<SortHeaderLabels>;
+  /** `OptionList` (and everything built on it — `Select`, `Combobox`, the
+   *  in-cell editors): the select-all/deselect-all links, the empty state, and
+   *  the `Combobox` recents header. */
+  optionList: { selectAll: string; deselectAll: string; noResults: string; recent: string };
+  /** `FilterChip` (and `ColumnFilter`): the generic clear affordance, used when
+   *  a call site doesn't pass a dimension-specific `clearLabel`. */
+  filterChip: { clear: string };
+  /** `Drawer`: the record prev/next + close controls (screen-reader names). */
+  drawer: { previous: string; next: string; close: string };
+}
+
+/** The platform default — English. Every component's hardcoded default lives
+ *  HERE now, so the strings are documented in one place and overridable. */
+export const en: LoticsLocale = {
+  pagination: {
+    rangeWithTotal: (start, end, total) => `${start}–${end} of ${total.toLocaleString()}`,
+    range: (start, end) => `${start}–${end}`,
+    pageWithTotal: (page, pageCount) => `Page ${page} of ${pageCount}`,
+    page: (page) => `Page ${page}`,
+    previous: "Previous",
+    next: "Next",
+  },
+  sortHeader: {
+    sortBy: (label) => `Sort by ${label}`,
+    ascending: ", ascending",
+    descending: ", descending",
+  },
+  optionList: { selectAll: "Select all", deselectAll: "Deselect all", noResults: "No results", recent: "Recent" },
+  filterChip: { clear: "Clear" },
+  drawer: { previous: "Previous record", next: "Next record", close: "Close" },
+};
+
+/** Vietnamese. Maintained once here so every app (and the frontend) shares one
+ *  canonical translation — no per-app drift ("Chọn tất cả" vs "Chọn hết"). */
+export const vi: LoticsLocale = {
+  pagination: {
+    rangeWithTotal: (start, end, total) => `${start}–${end} trên ${total.toLocaleString("vi-VN")}`,
+    range: (start, end) => `${start}–${end}`,
+    pageWithTotal: (page, pageCount) => `Trang ${page} / ${pageCount}`,
+    page: (page) => `Trang ${page}`,
+    previous: "Trang trước",
+    next: "Trang sau",
+  },
+  sortHeader: {
+    sortBy: (label) => `Sắp xếp theo ${label}`,
+    ascending: " (tăng dần)",
+    descending: " (giảm dần)",
+  },
+  optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", noResults: "Không có kết quả", recent: "Gần đây" },
+  filterChip: { clear: "Xóa" },
+  drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
+};
+
+const LoticsLocaleContext = createContext<LoticsLocale>(en);
+
+interface LoticsLocaleProviderProps {
+  /** The locale pack supplying every kit string. Import a shipped pack
+   *  (`import { vi } from "@lotics/ui/locale"`) or pass your own `LoticsLocale`. */
+  locale: LoticsLocale;
+  children: ReactNode;
+}
+
+/**
+ * App-root provider that supplies localized strings to @lotics/ui primitives —
+ * the sibling of `LoticsThemeProvider`. Wrap your top-level element once and
+ * every wired component picks up the pack; no per-instance label props:
+ *
+ *     // src/main.tsx
+ *     import { vi } from "@lotics/ui/locale";
+ *     <LoticsLocaleProvider locale={vi}>
+ *       <App />
+ *     </LoticsLocaleProvider>
+ *
+ * Components read the locale via `useLoticsLocale()`. A per-instance label prop
+ * still overrides for one-offs; without a provider the English default applies,
+ * so an un-wrapped app behaves exactly as before.
+ */
+export function LoticsLocaleProvider(props: LoticsLocaleProviderProps) {
+  return <LoticsLocaleContext.Provider value={props.locale}>{props.children}</LoticsLocaleContext.Provider>;
+}
+
+/** Read the current locale. Wired primitives call this; apps use the provider. */
+export function useLoticsLocale(): LoticsLocale {
+  return useContext(LoticsLocaleContext);
+}

package/src/option_list.tsx

@@ -5,11 +5,12 @@ 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";
 import { useOptionList, type UseOptionListParams } from "./use_option_list";
+import { useLoticsLocale } from "./locale";
 import type { PickerOption } from "./picker";
 
 export interface OptionListProps<T extends string = string, MULTI extends boolean = false, D = unknown>
@@ -38,17 +39,11 @@ export interface OptionListProps<T extends string = string, MULTI extends boolea
 export function OptionList<T extends string, MULTI extends boolean = false, D = unknown>(
   props: OptionListProps<T, MULTI, D>,
 ) {
-  const {
-    testID,
-    renderOptionContent,
-    getOptionDescription,
-    loading = false,
-    emptyText = "No results",
-    accessibilityLabel,
-    selectAllLabel = "Select all",
-    deselectAllLabel = "Deselect all",
-    search,
-  } = props;
+  const { testID, renderOptionContent, getOptionDescription, loading = false, accessibilityLabel, search } = props;
+  const loc = useLoticsLocale().optionList;
+  const emptyText = props.emptyText ?? loc.noResults;
+  const selectAllLabel = props.selectAllLabel ?? loc.selectAll;
+  const deselectAllLabel = props.deselectAllLabel ?? loc.deselectAll;
   const list = useOptionList(props);
   const { small } = useScreenSize();
 
@@ -164,9 +159,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 +183,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/pagination.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { View, StyleSheet } from "react-native";
 import { IconButton } from "./icon_button";
 import { Text } from "./text";
+import { useLoticsLocale } from "./locale";
 
 /**
  * Localizable strings for `Pagination`. Every field is optional; an omitted
@@ -25,12 +26,6 @@ export interface PaginationLabels {
   next?: string;
 }
 
-const defaultRangeWithTotal = (start: number, end: number, total: number): string =>
-  `${start}–${end} of ${total.toLocaleString()}`;
-const defaultRange = (start: number, end: number): string => `${start}–${end}`;
-const defaultPageWithTotal = (page: number, pageCount: number): string => `Page ${page} of ${pageCount}`;
-const defaultPage = (page: number): string => `Page ${page}`;
-
 export interface PaginationProps {
   /** 0-indexed. */
   page: number;
@@ -59,20 +54,21 @@ export interface PaginationProps {
  */
 export function Pagination(props: PaginationProps): React.ReactNode {
   const { page, pageSize, rowCount, hasMore, total, loading, onPageChange, labels } = props;
+  const loc = useLoticsLocale().pagination;
   const start = page * pageSize + 1;
   const end = page * pageSize + rowCount;
   const showRange = !loading && rowCount > 0;
 
   const summary = showRange
     ? total !== undefined
-      ? (labels?.rangeWithTotal ?? defaultRangeWithTotal)(start, end, total)
-      : (labels?.range ?? defaultRange)(start, end)
+      ? (labels?.rangeWithTotal ?? loc.rangeWithTotal)(start, end, total)
+      : (labels?.range ?? loc.range)(start, end)
     : "";
 
   const pageLabel =
     total !== undefined
-      ? (labels?.pageWithTotal ?? defaultPageWithTotal)(page + 1, Math.max(1, Math.ceil(total / pageSize)))
-      : (labels?.page ?? defaultPage)(page + 1);
+      ? (labels?.pageWithTotal ?? loc.pageWithTotal)(page + 1, Math.max(1, Math.ceil(total / pageSize)))
+      : (labels?.page ?? loc.page)(page + 1);
 
   return (
     <View style={styles.container}>
@@ -90,14 +86,14 @@ export function Pagination(props: PaginationProps): React.ReactNode {
           color="secondary"
           onPress={() => onPageChange(Math.max(0, page - 1))}
           disabled={page === 0 || !!loading}
-          tooltip={labels?.previous ?? "Previous"}
+          tooltip={labels?.previous ?? loc.previous}
         />
         <IconButton
           icon="chevron-right"
           color="secondary"
           onPress={() => onPageChange(page + 1)}
           disabled={!hasMore || !!loading}
-          tooltip={labels?.next ?? "Next"}
+          tooltip={labels?.next ?? loc.next}
         />
       </View>
     </View>

package/src/sort_header.tsx

@@ -3,6 +3,7 @@ import { Text } from "./text";
 import { Icon } from "./icon";
 import { colors } from "./colors";
 import { PressableHighlight } from "./pressable_highlight";
+import { useLoticsLocale } from "./locale";
 
 export type SortDir = "asc" | "desc";
 export interface SortState {
@@ -74,14 +75,11 @@ export interface SortHeaderProps {
  */
 export function SortHeader(props: SortHeaderProps) {
   const { label, sortKey, sort, onSort, align = "left", style, labels } = props;
+  const loc = useLoticsLocale().sortHeader;
   const active = sort?.key === sortKey;
   const arrow = active ? (sort.dir === "asc" ? "chevron-up" : "chevron-down") : undefined;
-  const dirText = active
-    ? sort.dir === "asc"
-      ? (labels?.ascending ?? ", ascending")
-      : (labels?.descending ?? ", descending")
-    : "";
-  const sortByLabel = (labels?.sortBy ?? ((l: string) => `Sort by ${l}`))(label);
+  const dirText = active ? (sort.dir === "asc" ? (labels?.ascending ?? loc.ascending) : (labels?.descending ?? loc.descending)) : "";
+  const sortByLabel = (labels?.sortBy ?? loc.sortBy)(label);
 
   return (
     <PressableHighlight
@@ -106,8 +104,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",
-  },
-});