@lotics/ui 44.12.0 → 44.14.0

package/AGENTS.md

@@ -15,7 +15,7 @@ CURRENT major only — upgrading an app across majors is `MIGRATION.md`.
 | Doc | Read it for |
 |---|---|
 | [docs/catalog.md](./docs/catalog.md) | **The complete inventory** — Reach-by-role (each data role → the ONE canonical component) + every `@lotics/ui/<module>` entry point (incl. `@lotics/ui/vite`'s `loticsOptimizeDeps` + `loticsResolve()` — the pre-bundle list and the whole `resolve` block a custom-code app's `vite.config.ts` imports rather than hand-carries, dev-link included). Read before building any screen; reuse first. |
-| [docs/data_entry.md](./docs/data_entry.md) | **a picker over a select field keeps the field's colours** (`optionPicker` — the hand-rolled `map` to `{value,label}` drops `color`, so a value reads coloured in a register and grey in the editor); a choice that GATES a form is usually one not to ask (two doors to one room is not a chooser; show the dominant path, offer the other beside its submit, and give a recovery link a quieter treatment than an alternative way in); Which editing pattern for which job — inline edit, fieldset forms, choosing a CHOICE control by option count (and why "no selection" is a PLACEHOLDER, never an option valued `""` — the picker reads that as nothing chosen and renders down to its chevron), browser-autofill suppression (search controls only), find-or-create (`Combobox`), line items, handoffs, phased records, billing, tags, dispositions, attachments (`InlineFiles` for a record ROW — list + one CTA, `multiple` decides add-vs-replace; the `FilesEditor` COMPOUND for a whole section — root owns selection/gallery/confirm, you compose the bar, a HOST verb reads `useFilesEditorSelection` — plus the three-way file INTAKE: CTA + `FileDropTarget` + `usePasteFiles`), stage gates, whether a multiline value keeps its fixed reserve or `autoGrow`s (who decides the length — the field, or whoever is typing), the commit-on-blur vs action-press ordering law (the kit gates the press — `pending_commits`). |
+| [docs/data_entry.md](./docs/data_entry.md) | **a picker over a select field keeps the field's colours** (`optionPicker` — the hand-rolled `map` to `{value,label}` drops `color`, so a value reads coloured in a register and grey in the editor); a choice that GATES a form is usually one not to ask (two doors to one room is not a chooser; show the dominant path, offer the other beside its submit, and give a recovery link a quieter treatment than an alternative way in); Which editing pattern for which job — inline edit, fieldset forms, choosing a CHOICE control by option count (and why "no selection" is a PLACEHOLDER, never an option valued `""` — the picker reads that as nothing chosen and renders down to its chevron), browser-autofill suppression (search controls only), find-or-create (`Combobox`), line items, handoffs, phased records, billing, tags, dispositions, attachments (`InlineFiles` for a record ROW — list + one CTA, `multiple` decides add-vs-replace; the `FilesEditor` COMPOUND for a whole section — root owns selection/gallery/confirm, you compose the bar, a HOST verb reads `useFilesEditorSelection` — plus the three-way file INTAKE: CTA + `FileDropTarget` + `usePasteFiles`), stage gates, whether a multiline value keeps its fixed reserve or `autoGrow`s (who decides the length — the field, or whoever is typing); the swap rule for a NEW editor (same string ⇒ one element, different string ⇒ swap) worked through its two live cases — `InlineMarkdown` renders prose at rest and refuses to collapse when opened, while a URL takes `InlineTextInput`'s `link` TREATMENT because marking it changes its ink and not its characters, the commit-on-blur vs action-press ordering law (the kit gates the press — `pending_commits`). |
 | [docs/ai_patterns.md](./docs/ai_patterns.md) | AI acts, the human stays in charge — composer, live run feed (`AgentRun`), the one law's split — it turns on WHO supplied the values (machine → a gate: a diff when something is being replaced, a full editable preview when records are being created from a document; human-typed → save-direct + the `ResultHeader` receipt), findings, provenance, confidence; **after the run** — a stored record that fills up from several writers (a person, a chat agent, an extraction, an automation) and remembers none of them: an unwritten value must not render like a written one, a machine's prose and a person's must not share a treatment, model markdown goes in `variant="embedded"`, and the read path must project every field the write paths set; the UI half of the SDK's [ai doc](../app-sdk/docs/ai.md), the whole run in a dialog (`AgentRunScope`/`AgentRunPane`/`AgentRunActions` — a parked question REPLACES the feed, actions in the footer, **Stop** while streaming), **stopping** (`cancel` stops the run, `abort` only stops listening — so closing a dialog must `cancel` or it keeps billing); **review surfaces compose from atoms** — `DiffValue` (a changed value, droppable in any cell/row/total), `DiffMark` (what happened to the row — ONE circular disc, every surface, its kind derived from before/after rather than a boolean "did this change" — an empty `before` is `added`, never `changed`), `useChangeSet` (accept/reject/undo bookkeeping, no layout) — see [MIGRATION.md](./MIGRATION.md) for the `ChangeReview` family they replace |
 | [docs/composition.md](./docs/composition.md) | The design-language contract — **the form comes before the treatment** (name what the subject IS — register, rail, board, timeline, deviation queue — before reaching for parts; a subject flattened into rows is well-typed and says nothing, and reuse-first is about not duplicating primitives, not about a screen's shape; **a hierarchy in the DATA does not oblige one in the UI** — who MAINTAINS the structure decides, and a set the reader scans is a register whatever shape the data has), canvas + content column, heading altitude (incl. eyebrow vs group lead — a label is one or the other, and a section heading's own row never wraps so a control label that repeats the title can squeeze the title+description into a narrow ribbon at phone width), banded cards, register vs inset rows (incl. the register laws a row centres its cells by: every cell a FIXED height, a pressable cell on the shared hover token, a column sized by what it carries), the button ladder and **what underlined text may mean** (it GOES somewhere or REVEALS something — never mutates; blue leaves the surface, muted stays on it, and the one in-prose disclosure exception is scoped there), master-detail `Drawer` on a LIST screen vs a child collection's row EXPANDING inside a record, view controls, RECORD EXTENT (one page, sections scrolled to and never routed to), **the register's rhythm** (no hairline between rows — their own height and the hover wash separate them; the register's one line is the band capping the columns, because that is the break whitespace cannot state. Density is `TableRow`'s `minHeight`, never a mode), **a register that TRIAGES** (`TableGroup` — titled bands ordered by what needs the reader now, grouped by what implies a different ACTION rather than by a category already in a column, and what the screen can CLASSIFY kept as a separate list from what it RENDERS, so a value omitted on purpose does not resurface under *Unclassified* and one added later does not vanish), **the register's own craft** (a column header treated as CHROME a step lighter than row metadata, sentence case in the table header too, and a supporting line one RUNG BELOW the line it supports rather than a fixed size — plus the half that rule was missing: every SUBJECT on one row starts at the same rung, the subject leads by WEIGHT and its identity mark rather than by size, and whether the supporting line drops a rung is decided by what else separates the pair; plus the two ways a `columns` array and a rendered row disagree — a partial `priority` annotation, and a conditional column whose cell was not hidden with it), **identity marks** (a mark that looks the same on every row carries nothing — `Avatar` derives its hue from the name and takes circle/square for person vs organization; the palette is ordered by contrast, not spectrum, and never paints a person red or amber; a column of faces must not draw an UNBOUNDED audience as faces, and an overlapping stack separates with translucent INK rather than the surface colour, which a row's wash keeps changing out from under), **where the accent goes** ("which of these" — a selected row, an active filter; never DATA and never the focus ring, while a page-scale position marker like an active TAB takes `primary`, the ink the kit already spends on "this is on"; and selection must not share a wash with hover), **theming is an app-level ESCAPE HATCH, not a product surface** (`applyLoticsTheme({ … })` once at boot, before `mount`, writing the `--lotics-*` roles on the document root; nothing in the platform writes a theme, and `apps.theme.color` is the launcher icon only — the five `var()` roles plus the three font rungs ARE the whole mechanism, and wrapping a component cannot replace them because RN-Web writes `fontFamily` per element and background/border do not inherit), color discipline, **typography** (the ramp is DATA in `type_ramp`, one table both platforms derive from; leading and tracking are baked per rung and a hand-set `letterSpacing` is always a second copy of the curve), whitespace, **where a commit sits** (with its fields, never an overlay's footer — but a full-page editor is not a dialog, so a scrolling document keeps its commit pinned), and how to TEST an overlay component (a `Popover`-backed surface never mounts under jsdom). |
 | [docs/reviewing.md](./docs/reviewing.md) | **Reviewing a screen you built** — the other docs say what good looks like; this one says how to find out whether you achieved it, because "it looks fine" is the same claim as "it should work" made with the same evidence. Measure, never eyeball: render it, extract computed values, let the table show the defect. Two GATES that outrank every treatment question (**SUBTRACT** — what question does this element answer, and count FACTS not elements; **RIGHT CONTROL** — name the species before treating it), then 11 probes each naming what to COLLECT and the SIGNATURE in the numbers: type inventory (range, singletons, the label/value shrink war), ground+border+radius across siblings, what each RULE separates, gap RATIOS, the state diff (paint may change, geometry may not), alignment drift (incl. a centred child that moves while its container measures identical), the surface walk (open it, press it, read the settled string), the DATA probe (what is really in the table — incl. grepping rendered text for internal ids), FIRST PAINT (an entry screen showing zero inputs is gated by something, usually a mode chooser), the ABSENCE pass that catches "bland", and microcopy. Plus the extraction snippets, what measurement cannot see, and how to act on a finding (fix the CLASS, and never resolve one with "the docs say X"). |

package/docs/catalog.md

@@ -154,9 +154,17 @@ then inserts a newline and the value commits on blur. Both halves matter: a fiel
 goes multiline once focused hides the text from the reader who never clicks, and one that
 reserves less than it opens to shoves the rest of the form down the page on every click.
 **`autoGrow`** makes that budget a MINIMUM and fits the value instead — see
-[data_entry.md §Open prose grows](./data_entry.md)),
+[data_entry.md §Open prose grows](./data_entry.md). **`link`** marks a URL value with
+the navigation ink as a TREATMENT on the same single element — never a swapped-in
+`TextLink`, which would reintroduce the sub-pixel jump this field stays one
+`<input>` to avoid; pressing still edits, so pair it with an `Open` `InlineButton`
+in `actions`),
 `InlineNumberInput`, `InlineSelect` (single or
-`multi`), `InlineMemberSelect`, `InlineDatePicker`, `InlineTimePicker`; a
+`multi`), `InlineMemberSelect`, `InlineDatePicker`, `InlineTimePicker`,
+**`InlineMarkdown`** (markdown RENDERED at rest, raw source while editing — the
+member that swaps because its two states show different strings; its editor never
+opens shorter than the view it replaced, so pressing a long note cannot collapse
+the box, and **`minLines`** sets the floor for a short one); a
 READ-ONLY field in that same column uses `InlineStatic` (matches the editor box exactly, no
 input chrome, so it aligns pixel-for-pixel). A stack of labelled field rows lives in
 `DetailTable` + `DetailRow`; the record's identity band is `RecordSummary`; its money
@@ -959,6 +967,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   It opens SCROLLED to its seat (the selected row in `search.mode:"none"`, else the first real
   option), which only shows on a list longer than its own box and is the difference between a
   96-row list opening on your value and opening at the top.
+  `indeterminateValues` (multi) draws a MIXED tick on values only SOME of the things being
+  edited carry — the shape for labelling a selection, where an empty box would say "none of
+  these" and be wrong. Presentational and one-directional: a mixed row is not in `value`, so
+  pressing it selects (the caller applies to all), and it announces itself in the row label
+  because `role="option"` has no ARIA state for a third value.
 - **`combobox`** — COMPOUND single-select editable search: `Combobox` root +
   `ComboboxInput` + `ComboboxContent`, optional `ComboboxEmpty`/`ComboboxFooter`,
   `useCombobox()`; over the shared option-list engine; browses on focus; no `multi` —
@@ -1485,7 +1498,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`table` › `TableGroup`** — a titled BAND of rows inside a `Table` (`label`, `count?`, `color?` for a single valence dot). Turns a register that presents records into one that triages them: group by what implies a different ACTION, order the bands by what needs the reader now, and let air rather than a rule separate them. → [composition.md](./composition.md) §"A register that TRIAGES".
 - **`sort_header`** — `SortHeader` + `SortState`/`SortDir` + `cycleSort` + `sortBy` +
   `SortHeaderLabels`: the sortable column header and the sort-state helpers `Table`/
-  `DataGrid` consumers drive.
+  `DataGrid` consumers drive. `sortBy` copies rather than mutates, and compares strings with
+  `localeCompare` (case- and accent-folded, `numeric`) rather than `<`/`>` — code-point order
+  exiles every accented letter past the whole unaccented alphabet, so a Vietnamese register
+  reads correctly until its first Đ and looks fine to a reviewer forever. `getValue` returns a
+  NUMBER for anything ordered numerically (a timestamp, a count).
 - **`data_grid`** — `DataGrid` + `gridRowStyle`: the inline-managed grouped table (see
   [Tabular data](#tabular-data--pick-by-scale--intent)); `labels` localizes the sort-header
   a11y via `SortHeaderLabels`.
@@ -1501,7 +1518,9 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   on the pill is the clear, and the editor inside brings whatever actions it has, so a
   multi-select's "select all / deselect all" is the only rule in the panel. `footer` is for an
   editor that must COMMIT (Cancel / Save); reach for it only then, since it adds a second band
-  under an editor that already has one.
+  under an editor that already has one. `testID` names the pill: a register's bulk verbs and
+  its facets routinely share a word ("Tags" is a filter AND a selection action), so a driver
+  reaching by visible name gets whichever one it finds.
 - **`summary_line`** — `SummaryLine`: the light inline summary of a register/list's FILTERED
   view, sits below the toolbar; NOT the boxed dashboard `kpi_strip` band. Every item is an
   AGGREGATE over the rows in view (a count, a sum, a fill), and the strip goes with the set it

package/docs/data_entry.md

@@ -131,6 +131,17 @@ FORMATTED and the editor shows something else (`1,250 kg` → `1250`, `31/07/202
 field), the string changes anyway, so those editors do swap and should. **The rule for a new
 editor: same string in both states ⇒ one element; different string ⇒ swap.**
 
+Two worked cases sit on either side of it, and they look alike until you apply the rule.
+**`InlineMarkdown` swaps**: `**bold**` and **bold** are different strings, so the quarter pixel is
+invisible and rendering prose at rest is worth having. A swap editor is supposed to leave the box
+where it was, which markdown cannot do exactly — so it does the half that matters and refuses to
+COLLAPSE: the resting height becomes the editor's floor, because growing is tolerable where
+shrinking pulls the text out from under the reader and jumps everything below it.
+**A LINK does not swap**: marking a URL changes its ink, not its characters, so `InlineTextInput`
+takes a **`link`** treatment on its single `<input>` rather than swapping in a `TextLink`. Pressing
+the field still edits — an `Open` `InlineButton` in `actions` is how you reach the destination,
+which is where a verb about the value belongs.
+
 **Commit-on-blur would race the press that caused it — the kit closes that race for you.**
 Pressing an action while an inline field is focused starts TWO things in ONE gesture: the
 field's write (the blur, on mousedown) and the button's handler (on mouseup). A handler that
@@ -220,9 +231,10 @@ One per type:
   field.
 
 They split across two shared shells. The same-height **typed** editors (`InlineTextInput`,
-`InlineNumberInput`) render **`InlineEditFrame`** driven by the
-**`useInlineEdit`** hook (the draft buffer, async save, and — for the two that swap — the view⇄edit
-toggle) — pass a custom input to that pair to join the family. On the frame, **`editing` means an
+`InlineNumberInput`, `InlineMarkdown`) render **`InlineEditFrame`** driven by the
+**`useInlineEdit`** hook (the draft buffer, async save, and — for the ones that swap — the view⇄edit
+toggle) — pass a custom input to that pair to join the family. The frame's `display` takes a NODE as
+well as a string, which is what lets a swapping editor rest as something other than text. On the frame, **`editing` means an
 input is MOUNTED** (which element renders, and whether the surface drops its resting padding to
 host one); an always-mounted editor passes it constant and passes the real state as **`editOpen`**,
 which the ✓/✕ verbs read — they assert "there is an edit to accept or reject", so on a resting

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "44.12.0",
+  "version": "44.14.0",
   "type": "module",
   "exports": {
     "./vite": {
@@ -169,6 +169,7 @@
     "./inline_slot": "./src/inline_slot.tsx",
     "./inline_static": "./src/inline_static.tsx",
     "./inline_files": "./src/inline_files.tsx",
+    "./inline_markdown": "./src/inline_markdown.tsx",
     "./inline_text_input": "./src/inline_text_input.tsx",
     "./inline_number_input": "./src/inline_number_input.tsx",
     "./inline_select": "./src/inline_select.tsx",

package/src/filter_chip.tsx

@@ -42,6 +42,10 @@ export interface FilterChipProps {
    *  editor that already carries bottom actions of its own gets a second
    *  bordered band from this. */
   footer?: ReactNode;
+  /** Names the TRIGGER, so a driver reaches this facet rather than whichever
+   *  other control on the band happens to share its word — a register's bulk
+   *  verbs and its filters routinely do ("Tags" is both). */
+  testID?: string;
 }
 
 /**
@@ -76,7 +80,7 @@ export function selectSummary(
  * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
  */
 export function FilterChip(props: FilterChipProps) {
-  const { label, summary, onClear, children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
+  const { label, summary, onClear, children, side = "bottom", align = "start", open, onOpenChange, footer, testID } = props;
   const clearLabel = props.clearLabel ?? useLoticsLocale().filterChip.clear;
   const active = summary != null && (typeof summary !== "string" || summary.length > 0);
   // THE × IS THE CLEAR, and it is the only one. A valued, non-clearable pill
@@ -110,7 +114,7 @@ export function FilterChip(props: FilterChipProps) {
   return (
     <Popover side={side} align={align} open={isOpen} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <Chip onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
+        <Chip testID={testID} onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
           {active && typeof summary !== "string" ? (
             <View style={styles.summaryRow}>
               {/* This branch only renders when ACTIVE, so it takes the accent

package/src/icon.tsx

@@ -132,8 +132,12 @@ import Maximize2 from "lucide-react-native/dist/esm/icons/maximize-2";
 import Megaphone from "lucide-react-native/dist/esm/icons/megaphone";
 import Mic from "lucide-react-native/dist/esm/icons/mic";
 import Menu from "lucide-react-native/dist/esm/icons/menu";
+import Facebook from "lucide-react-native/dist/esm/icons/facebook";
+import Instagram from "lucide-react-native/dist/esm/icons/instagram";
+import Linkedin from "lucide-react-native/dist/esm/icons/linkedin";
 import MessageCircle from "lucide-react-native/dist/esm/icons/message-circle";
 import MessageCircleQuestionMark from "lucide-react-native/dist/esm/icons/message-circle-question-mark";
+import Twitter from "lucide-react-native/dist/esm/icons/twitter";
 import MessageSquare from "lucide-react-native/dist/esm/icons/message-square";
 import MessagesSquare from "lucide-react-native/dist/esm/icons/messages-square";
 import Minimize2 from "lucide-react-native/dist/esm/icons/minimize-2";
@@ -328,8 +332,12 @@ const iconComponents = {
   "maximize-2": Maximize2,
   megaphone: Megaphone,
   menu: Menu,
+  facebook: Facebook,
+  instagram: Instagram,
+  linkedin: Linkedin,
   "message-circle": MessageCircle,
   "message-circle-question-mark": MessageCircleQuestionMark,
+  twitter: Twitter,
   "message-square": MessageSquare,
   "messages-square": MessagesSquare,
   mic: Mic,

package/src/inline_edit.tsx

@@ -167,8 +167,15 @@ interface InlineEditFrameProps {
    * which is the truth for every editor whose input arrives with the edit.
    */
   editOpen?: boolean;
-  /** The formatted current value, shown in view mode. Empty → placeholder. */
-  display: string;
+  /** The current value as the view shows it. Empty string → placeholder.
+   *
+   *  A NODE renders as-is, which is what a SWAPPING editor needs when its
+   *  resting form is not text — rendered markdown against its own source. That
+   *  is admissible for the same reason number/date swap: the string genuinely
+   *  CHANGES between the two states, so the sub-pixel drift an always-input
+   *  exists to avoid is not perceptible. `InlineEditView` already renders both;
+   *  this only stops the frame from narrowing what it forwards. */
+  display: string | ReactNode;
   placeholder?: string;
   /** Enter edit mode (the view is pressed). */
   onBegin: () => void;
@@ -760,7 +767,11 @@ const styles = StyleSheet.create({
   },
   placeholder: { color: colors.zinc[400] },
   struck: { textDecorationLine: "line-through", color: colors.zinc[500] },
-  viewNode: { flex: 1, minWidth: 0 },
+  // `textAlign` is not cosmetic here: the resting box is a button-role Pressable,
+  // so the UA stylesheet centres every string inside it. A STRING display never
+  // showed it — `Text` sets its own alignment — so the centring only surfaced
+  // once `display` accepted a node and rendered prose that inherited it.
+  viewNode: { flex: 1, minWidth: 0, textAlign: "left" },
   editRow: { flexDirection: "row", alignItems: "flex-start", gap: 6 },
   editControl: { flex: 1, position: "relative" },
   // The input brings its own 40px height, so the surface must not add its resting

package/src/inline_markdown.tsx

@@ -0,0 +1,118 @@
+import { useCallback, useRef, useState, type ReactNode } from "react";
+import { View, type LayoutChangeEvent, type NativeSyntheticEvent, type TextInputKeyPressEventData } from "react-native";
+import { InlineEditFrame, useInlineEdit, type InlineEditVariant } from "./inline_edit";
+import { Markdown } from "./markdown";
+import { TextInputField } from "./text_input_field";
+
+export interface InlineMarkdownProps {
+  /** The markdown SOURCE. Rendered at rest, edited raw. */
+  value: string;
+  /** Persist the new source. May be async — the field shows a saving state and
+   *  surfaces a thrown error inline, staying in edit mode so nothing is lost. */
+  onSave: (next: string) => void | Promise<void>;
+  placeholder?: string;
+  disabled?: boolean;
+  /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
+  variant?: InlineEditVariant;
+  /** The editor's floor, in lines, before the resting height is taken into
+   *  account. Keeps a short or empty value from opening a one-line slot. */
+  minLines?: number;
+  accessibilityLabel?: string;
+}
+
+/** A short prose reserve, so an empty field is still obviously somewhere to write. */
+const DEFAULT_MIN_LINES = 3;
+const APPROX_LINE_HEIGHT = 22;
+
+/**
+ * An inline-editable MARKDOWN value: rendered at rest, raw source while editing.
+ *
+ * This one SWAPS, and it is allowed to for the same reason the number and date
+ * editors do: its resting display and its editor show genuinely different
+ * strings (`**bold**` against **bold**), so the sub-pixel drift that forced
+ * `InlineTextInput` to stay a single element is not perceptible here. That rule
+ * — same string ⇒ one element, different string ⇒ swap — is what decides which
+ * shape a new editor takes, and markdown is the clearest case of the second.
+ *
+ * **The editor never opens SHORTER than the view it replaced.** A swap editor
+ * is supposed to leave the box where it was; for markdown it cannot exactly,
+ * because rendered prose and its source are different lengths by nature. What it
+ * CAN do is refuse to collapse: the resting height is measured and becomes the
+ * input's floor, so pressing a long note opens a long editor. Growing is the
+ * tolerable direction — shrinking pulls the text the reader was just looking at
+ * out from under them, and everything below it jumps up.
+ *
+ * Reach for it wherever a field holds markdown a PERSON wrote. A model's output
+ * is read-only (you re-run it, you do not hand-edit it) and belongs in a plain
+ * `Markdown`.
+ */
+export function InlineMarkdown(props: InlineMarkdownProps) {
+  const { value, onSave, placeholder, disabled, variant, minLines, accessibilityLabel } = props;
+  const edit = useInlineEdit<string>({ value, onSave });
+  const [restingHeight, setRestingHeight] = useState(0);
+  // Not state: it must be current for the render that mounts the input, and a
+  // set during layout would arrive one frame late — as a visible jump.
+  const measured = useRef(0);
+
+  const onViewLayout = useCallback((e: LayoutChangeEvent) => {
+    measured.current = e.nativeEvent.layout.height;
+  }, []);
+
+  const begin = useCallback(() => {
+    setRestingHeight(measured.current);
+    edit.begin();
+  }, [edit]);
+
+  const onKeyPress = useCallback(
+    (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+      // Enter is a PARAGRAPH BREAK here — this is prose, and `numberOfLines > 1`
+      // is what declares that everywhere else in the family. Blur commits.
+      if (e.nativeEvent.key === "Escape") edit.cancel();
+    },
+    [edit],
+  );
+
+  const floor = Math.max((minLines ?? DEFAULT_MIN_LINES) * APPROX_LINE_HEIGHT, restingHeight);
+
+  const display: ReactNode = value === "" ? "" : (
+    <View onLayout={onViewLayout}>
+      <Markdown>{value}</Markdown>
+    </View>
+  );
+
+  return (
+    <InlineEditFrame
+      // Unlike `InlineTextInput`, `editing` here IS the mount: the input exists
+      // only during an edit, which is what makes the rendered view possible.
+      editing={edit.editing}
+      display={display}
+      placeholder={placeholder}
+      onBegin={begin}
+      controls="blur"
+      onCommit={() => void edit.commit()}
+      onCancel={edit.cancel}
+      saving={edit.saving}
+      error={edit.error}
+      disabled={disabled}
+      variant={variant}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <TextInputField
+        value={edit.draft}
+        onChangeText={edit.setDraft}
+        onBlur={() => void edit.commit()}
+        onKeyPress={onKeyPress}
+        multiline
+        // The input ARRIVES with the edit, so it takes the caret on mount. This
+        // is the case `InlineTextInput` cannot serve — it is permanently mounted
+        // and deliberately has no `autoFocus`, so a revealed field there would
+        // cost the reader a second click.
+        autoFocus
+        placeholder={placeholder}
+        accessibilityLabel={accessibilityLabel}
+        disabled={disabled}
+        style={{ minHeight: floor }}
+      />
+    </InlineEditFrame>
+  );
+}

package/src/inline_text_input.tsx

@@ -18,6 +18,23 @@ export interface InlineTextInputProps {
    *  struck while being edited — the field is one element, so a treatment that
    *  dropped on focus would be exactly the jump this control exists to avoid. */
   struck?: boolean;
+  /**
+   * The value is a URL — wear the navigation ink (`TextLink`'s underline +
+   * medium weight + blue).
+   *
+   * A TREATMENT, never a swapped-in `TextLink`, and that is the whole point:
+   * this field is one `<input>` in both states because a resting `Text` and an
+   * `<input>` cannot draw the same string identically (see the note on
+   * `editing` below). A link value's string does NOT change between reading and
+   * typing it — only its ink does — so swapping would reintroduce exactly the
+   * quarter-pixel jump that comment records, for no gain.
+   *
+   * Blue because a URL genuinely navigates, which is the same test `TextLink`
+   * applies to its own `href`. Pressing the field still EDITS: to open the
+   * destination, pass an `Open` `InlineButton` through `actions`, where a verb
+   * about the value belongs.
+   */
+  link?: boolean;
   /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
   /**
@@ -76,7 +93,7 @@ export interface InlineTextInputProps {
  * implementation detail.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant, actions, numberOfLines, autoGrow } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, link, accessibilityLabel , variant, actions, numberOfLines, autoGrow } = props;
   // Growing implies wrapping: a field that grows on one line has nowhere to go.
   const multiline = (numberOfLines ?? 1) > 1 || autoGrow === true;
   // WHAT ENTER MEANS IS DECLARED BY `numberOfLines`, NOT BY WRAPPING. They were
@@ -195,7 +212,15 @@ export function InlineTextInput(props: InlineTextInputProps) {
         // its title upright. Anything else the view used to render has to move the
         // same way, or it goes the same way — quietly.
         variant={variant}
-        style={struck ? { textDecorationLine: "line-through" as const, color: colors.zinc[500] } : null}
+        style={
+          struck
+            ? { textDecorationLine: "line-through" as const, color: colors.zinc[500] }
+            : link && value !== ""
+              // `value`, not the draft: an emptied field is not a link, and the
+              // ink would otherwise sit on the placeholder.
+              ? { textDecorationLine: "underline" as const, color: colors.blue[600], fontWeight: "500" as const }
+              : null
+        }
         // With verbs on the field, the FRAME owns the surface and the ring.
         seamless={actions != null}
       />

package/src/locale.tsx

@@ -47,7 +47,7 @@ export interface LoticsLocale {
   /** `OptionList` (and everything built on it — `Select`, `Combobox`, the
    *  in-cell editors): the select-all/deselect-all links, the empty state, the
    *  internal search-field placeholder, and the `Combobox` recents header. */
-  optionList: { selectAll: string; deselectAll: string; clear: string; noResults: string; recent: string; searchPlaceholder: string };
+  optionList: { selectAll: string; deselectAll: string; clear: string; noResults: string; recent: string; searchPlaceholder: string; someSelected: string };
   /** `Picker`'s empty option, when the caller declares empty a CHOICE
    *  (`includeEmptyOption`). A value, not an action — hence "None" rather than
    *  the option list's "Clear": in a native `<select>` the reader picks it the
@@ -298,7 +298,7 @@ export const en: LoticsLocale = {
     descending: ", descending",
   },
   referenceField: { open: "Open", change: "Change", clear: "Clear", edit: "Edit", save: "Save", saving: "Saving…", cancel: "Cancel" },
-  optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
+  optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…", someSelected: "some selected" },
   picker: { emptyOption: "None" },
   datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", chooseTime: "Choose a time", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
@@ -485,7 +485,7 @@ export const vi: LoticsLocale = {
     descending: " (giảm dần)",
   },
   referenceField: { open: "Mở", change: "Đổi", clear: "Bỏ chọn", edit: "Sửa", save: "Lưu", saving: "Đang lưu…", cancel: "Huỷ" },
-  optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
+  optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…", someSelected: "một số đã chọn" },
   picker: { emptyOption: "Không có" },
   datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", chooseTime: "Chọn giờ", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },

package/src/option_list.tsx

@@ -23,6 +23,17 @@ export interface OptionListProps<T extends string = string, MULTI extends boolea
   getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
   loading?: boolean;
   emptyText?: string;
+  /**
+   * Multi only: values that SOME of the things being edited carry, drawn as a
+   * mixed tick rather than an empty one.
+   *
+   * What it is for is editing a SET at once — five documents, three of which
+   * carry a label. An empty box there says "none of them", which is false, and
+   * the reader who ticks it to fix that cannot tell afterwards what they
+   * changed. Purely presentational: a mixed row is not in `value`, so pressing
+   * it selects (adds to all) and the caller decides what that means.
+   */
+  indeterminateValues?: readonly T[];
   accessibilityLabel?: string;
   selectAllLabel?: string;
   deselectAllLabel?: string;
@@ -45,7 +56,7 @@ 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, accessibilityLabel, search, onClear } = props;
+  const { testID, renderOptionContent, getOptionDescription, loading = false, accessibilityLabel, search, onClear, indeterminateValues } = props;
   const loc = useLoticsLocale().optionList;
   const emptyText = props.emptyText ?? loc.noResults;
   const selectAllLabel = props.selectAllLabel ?? loc.selectAll;
@@ -122,6 +133,11 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
           list.rows.map((row) => {
             const isCustom = row.kind === "custom";
             const opt = row.option;
+            // A mixed row is PAINTED mixed, and `role="option"` has no ARIA state
+            // for it — `aria-checked="mixed"` belongs to checkbox roles, and this
+            // row carries `aria-selected`. So the third state is said in the
+            // label, or it exists for sighted readers only.
+            const mixed = props.multi && !row.selected && indeterminateValues?.includes(opt.value) === true;
             const desc = row.kind === "option" ? getOptionDescription?.(opt) : undefined;
             const label = opt.label ?? opt.value;
             const content = row.kind === "option" ? renderOptionContent?.(opt) : undefined;
@@ -129,11 +145,17 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
               nativeID: row.nativeID,
               testID: isCustom ? "option-list-custom" : opt.testID || `picker-option-${opt.value}`,
               role: "option" as const,
-              accessibilityLabel: isCustom ? label : (opt.label ?? String(opt.value)),
+              accessibilityLabel: isCustom
+                ? label
+                : mixed
+                  ? `${opt.label ?? String(opt.value)}, ${loc.someSelected}`
+                  : (opt.label ?? String(opt.value)),
               icon: isCustom ? (
                 <Icon name="plus" size={16} color={colors.zinc["600"]} />
               ) : props.multi && row.kind === "option" ? (
-                <Checkbox checked={row.selected} />
+                // A row already in `value` is fully selected — "some carry it"
+                // cannot also be "all carry it", so selection wins.
+                <Checkbox checked={row.selected} indeterminate={mixed} />
               ) : undefined,
               right:
                 !props.multi && row.selected ? (

package/src/select.tsx

@@ -1,6 +1,7 @@
 import { StyleSheet, View, type GestureResponderEvent, type StyleProp, type ViewStyle } from "react-native";
 import { useState, useCallback, useMemo, type ReactNode, type Ref } from "react";
 import { colors } from "./colors";
+import { Icon } from "./icon";
 import { FOCUS_RING, CONTROL_RADIUS, CONTROL_HEIGHT, CONTROL_PADDING_V, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { Text } from "./text";
@@ -267,6 +268,7 @@ function SelectTrigger<T extends string, D = unknown>({
       onPress={!disabled ? onPress : undefined}
       disabled={disabled}
     >
+      <View style={styles.triggerContent}>
       {hasSelection ? (
         renderSelected ? (
           <View style={styles.selectionRow}>
@@ -297,11 +299,26 @@ function SelectTrigger<T extends string, D = unknown>({
           {placeholder}
         </Text>
       )}
+      </View>
+      {/* The resting chevron says "this opens a list" — the promise `InlineSelect`
+          already makes, and it has to be the SAME on every surface or the two
+          controls are one field wearing two contracts. Without it this trigger is a
+          bordered box holding text, which beside a `SearchInput` in a filter band
+          reads as a second input rather than something that opens. */}
+      <Icon name="chevron-down" size={18} color={colors.zinc[400]} />
     </FocusRingPressable>
   );
 }
 
 const styles = StyleSheet.create({
+  triggerContent: {
+    // Grows so the chevron stays pinned to the right edge whatever the
+    // selection is — a chip box, a comma summary or a placeholder.
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    minWidth: 0,
+  },
   pressable: {
     flexDirection: "row",
     alignItems: "center",

package/src/sort_header.tsx

@@ -23,8 +23,13 @@ export function cycleSort(current: SortState | null, key: string): SortState | n
 
 /**
  * Order a COPY of `items` by the active column. `getValue` maps (item, key) to a
- * comparable (lowercase strings for case-insensitive order). Returns `items`
- * unchanged when nothing is sorted.
+ * comparable. Returns `items` unchanged when nothing is sorted.
+ *
+ * Strings are compared with `localeCompare`, NOT `<`/`>`. Those operators order
+ * by code point, which puts every accented letter after the whole unaccented
+ * alphabet — so a Vietnamese register sorted by name reads correctly until the
+ * first Đ, and then does not. Numbers keep numeric order; a mixed pair falls
+ * back to the operators, which is the only defined thing left to do.
  */
 export function sortBy<T>(
   items: T[],
@@ -36,6 +41,13 @@ export function sortBy<T>(
   return [...items].sort((a, b) => {
     const va = getValue(a, sort.key);
     const vb = getValue(b, sort.key);
+    if (typeof va === "string" && typeof vb === "string") {
+      // Undefined locale = the reader's own, which is the right collation for a
+      // register they are reading. `sensitivity: "base"` folds case and accent
+      // for ORDERING only, so "Đơn" and "don" land beside each other instead of
+      // in different halves of the list.
+      return va.localeCompare(vb, undefined, { sensitivity: "base", numeric: true }) * dir;
+    }
     return va < vb ? -dir : va > vb ? dir : 0;
   });
 }