@lotics/ui 44.13.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

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.13.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/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/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",