@lotics/ui 22.2.0 → 23.0.0

package/src/chip_group.tsx

@@ -1,4 +1,4 @@
-import { View } from "react-native";
+import { StyleSheet, View, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { PressableHighlight } from "./pressable_highlight";
 import { chipSurfaceStyle } from "./control_surface";
@@ -62,7 +62,13 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
             // The shared pill-surface contract (height/border/radius/white +
             // hover/press wash + the selected box-shadow ring); the chip only
             // adds its horizontal padding.
-            style={(state) => [chipSurfaceStyle(state, { selected: active }), { paddingHorizontal: 14 }]}
+            // The ARROW cursor, like every other control that SETS A VALUE. The
+            // pointer is reserved for acts that go somewhere or do something —
+            // a row that opens a record, a button. A pill here is the field's
+            // value, so it reads like the editors beside it, not like a button.
+            // (`PressableHighlight` defaults to a pointer; a caller's style lands
+            // after its own, so this is the override, not a fight.)
+            style={(state) => [chipSurfaceStyle(state, { selected: active }), styles.chip]}
           >
             <Text size="sm" weight={active ? "semibold" : "medium"} color={active ? "default" : "muted"}>
               {option.label}
@@ -73,3 +79,7 @@ export function ChipGroup<T extends string = string>(props: ChipGroupProps<T>) {
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  chip: { paddingHorizontal: 14, ...({ cursor: "auto" } as ViewStyle) },
+});

package/src/choice_list.tsx

@@ -74,8 +74,8 @@ function ChoiceRow({ option, selected, onSelect }: { option: ChoiceOption; selec
   );
 }
 
-/** The custom-answer row — the SAME box as a `ChoiceRow` (padding · radius · hover
- *  wash · focus ring), but holding an always-editable, auto-growing multiline input
+/** The custom-answer row — the SAME box as a `ChoiceRow` (padding, radius, hover
+ *  wash, focus ring), but holding an always-editable, auto-growing multiline input
  *  instead of a pressable label. Typing it IS the selection; focusing it re-selects a
  *  parked draft (`onFocus`). */
 function CustomAnswerRow({ value, selected, onChangeText, onFocus, placeholder }: { value: string; selected: boolean; onChangeText: (text: string) => void; onFocus: () => void; placeholder: string }) {

package/src/confidence.tsx

@@ -14,7 +14,7 @@ export interface ConfidenceLabels {
   low: string;
 }
 
-/** A 0–1 score folded onto the three levels: >=0.8 high · >=0.5 medium · else low. */
+/** A 0–1 score folded onto the three levels: >=0.8 high, >=0.5 medium, else low. */
 export function levelFromScore(score: number): ConfidenceLevel {
   if (score >= 0.8) return "high";
   if (score >= 0.5) return "medium";
@@ -25,7 +25,7 @@ const FILLED: Record<ConfidenceLevel, number> = { high: 3, medium: 2, low: 1 };
 const COLOR: Record<ConfidenceLevel, ColorName> = { high: "green", medium: "amber", low: "red" };
 
 export interface ConfidenceProps {
-  /** Pass a level directly, or a 0–1 `score` (>=0.8 high · >=0.5 medium · else low). */
+  /** Pass a level directly, or a 0–1 `score` (>=0.8 high, >=0.5 medium, else low). */
   level?: ConfidenceLevel;
   score?: number;
   labels?: Partial<ConfidenceLabels>;

package/src/data_grid.tsx

@@ -59,7 +59,7 @@ export interface DataGridProps<T> {
  * high-volume paginated register (`Table` + `Pagination` + `Drawer`). It owns the
  * sortable header, the collapsible grouped sections, and the column-aligned rows;
  * the consumer owns the DATA, the sort/group/filter/collapse STATE, the toolbar
- * (search · group-by · filters), the per-group add (`renderGroupFooter`), and every
+ * (search, group-by, filters), the per-group add (`renderGroupFooter`), and every
  * CELL (`columns[].cell` renders ANY field). It renders ALL rows — no pagination /
  * virtualization — so it's for hundreds, low-thousands; at 10k+ use the register.
  * Worked example: `tpl_task_board`.

package/src/detail_row.tsx

@@ -1,6 +1,7 @@
 import { createContext, ReactNode, useContext, useState } from "react";
 import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
 import { MIN_CONTROL_WIDTH } from "./control_surface";
+import { SPACE } from "./spacing";
 import { FieldAnnotationProps, FieldAnnotations, hasFieldAnnotation } from "./field_annotations";
 import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
 import { getInputLineHeight } from "./text_utils";
@@ -8,7 +9,6 @@ import { Text } from "./text";
 
 interface DetailTableColumns {
   labelWidth: number;
-  trailingWidth?: number;
   minHeight: number;
   /** Container too narrow for the side-by-side columns — rows render STACKED
    *  (label above a full-width value row). */
@@ -28,11 +28,6 @@ export const DETAIL_LABEL_WIDTH = 130;
 export interface DetailTableProps {
   /** Label column width (px). Default 130. */
   labelWidth?: number;
-  /** Reserved width (px) for the trailing column. Set it when ANY row carries a
-   *  trailing action/unit/badge: EVERY row then reserves the column, so all
-   *  value cells share ONE width and the trailing items align at one x — the
-   *  table look. Omit when no row has a trailing (values fill to the edge). */
-  trailingWidth?: number;
   /** Min row height. Default 40 (`INLINE_CONTROL_HEIGHT`) so editor, static,
    *  and custom rows all sit on the inline-control baseline grid. */
   minHeight?: number;
@@ -47,35 +42,37 @@ export interface DetailTableProps {
 }
 
 /**
- * The column grid for a stack of `DetailRow`s — label · value · trailing laid
- * out like a TABLE: one label width, one value width, one trailing width, set
- * ONCE on the parent instead of repeated (and drifting) per row. Rows without a
- * trailing still reserve the trailing column, so a `Copy` action on one row
- * never makes its editor narrower than its neighbours'.
+ * The column grid for a stack of `DetailRow`s — label, value laid out like a
+ * TABLE: one label width, one value width, set ONCE on the parent instead of
+ * repeated (and drifting) per row. The value column FILLS whatever the label
+ * leaves; there is no third column, and nothing a row does can make its
+ * neighbours' editors narrower.
  *
- *   <DetailTable labelWidth={130} trailingWidth={96}>
- *     <DetailRow label="Reference" trailing={<Button title="Copy" … />}>
- *       <InlineTextInput … />
+ *   <DetailTable labelWidth={130}>
+ *     <DetailRow label="Reference">
+ *       <InlineTextInput … actions={<InlineButton title="Copy" … />} />
  *     </DetailRow>
  *     <DetailRow label="Priority"><InlineSelect … /></DetailRow>
  *   </DetailTable>
  *
- * It owns the 6px row gap (zinc-50 editor chips need visible separation) and
- * the 40px row height of the inline-control grid.
+ * A verb about a VALUE rides the FIELD (`InlineButton` in an editor's
+ * `actions`), never a column beside it: the act names the value, so it travels
+ * with what it acts on, and a reserved column is paid by every row for the
+ * benefit of one.
+ *
+ * It owns the row gap and the 40px row height of the inline-control grid.
  *
  * RESPONSIVE: the table measures its own container (not the viewport — a table
  * inside a narrow Drawer on a wide screen must adapt too). When the columns
  * would crush the value cell below a usable width, every row STACKS: label
- * above a full-width value row (trailing stays beside the value). No prop —
- * the switch is automatic.
+ * above a full-width value. No prop — the switch is automatic.
  */
 export function DetailTable(props: DetailTableProps) {
-  const { labelWidth = DETAIL_LABEL_WIDTH, trailingWidth, minHeight = INLINE_CONTROL_HEIGHT, minValueWidth = MIN_CONTROL_WIDTH, children, style } = props;
+  const { labelWidth = DETAIL_LABEL_WIDTH, minHeight = INLINE_CONTROL_HEIGHT, minValueWidth = MIN_CONTROL_WIDTH, children, style } = props;
   const [width, setWidth] = useState<number | null>(null);
-  const stacked =
-    width != null && width < labelWidth + (trailingWidth ?? 0) + minValueWidth + 24;
+  const stacked = width != null && width < labelWidth + minValueWidth + 24;
   return (
-    <DetailTableContext.Provider value={{ labelWidth, trailingWidth, minHeight, stacked }}>
+    <DetailTableContext.Provider value={{ labelWidth, minHeight, stacked }}>
       <View
         onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
         // Measure-then-REVEAL: the unmeasured first frame renders invisible
@@ -94,13 +91,6 @@ export interface DetailRowProps extends FieldAnnotationProps {
   label: ReactNode;
   /** The value — any node (a `Text`, a `Badge`, a stack). */
   children: ReactNode;
-  /** An optional right-side slot, rendered as the LAST child of the row (after
-   *  `children`) — a small action `Button`, a status `Badge`, an `IconButton`.
-   *  NOT for units: "kg" / "₫" belong IN the value (`InlineNumberInput format`).
-   *  In form mode (`labelWidth` set) the value column already fills
-   *  the row, so the trailing pins to the right edge automatically. Inside a
-   *  `DetailTable` with `trailingWidth` it sits in the reserved trailing column. */
-  trailing?: ReactNode;
   /** Fixed label-column width (px) to align labels in a left column — for a peek
    *  or form-like stack. Omit for a spread row: the label takes the slack and the
    *  value sits at the right edge (the default drawer-detail look). Inside a
@@ -125,17 +115,21 @@ export interface DetailRowProps extends FieldAnnotationProps {
  * to the right edge); pass `labelWidth` to align labels in a fixed left column —
  * the value column then FILLS the rest of the row, so a stack of inline editors
  * all span the same width (none jumps wider on edit). For a stack of rows, wrap
- * them in a `DetailTable`: the label/trailing column widths live ONCE on the
- * parent and every row aligns.
+ * them in a `DetailTable`: the label column width lives ONCE on the parent and
+ * every row aligns.
+ *
+ * There is no trailing slot. A verb about the VALUE goes on the field
+ * (`InlineButton` in an editor's `actions`); anything else — a status `Badge`, a
+ * unit — belongs IN the value, composed beside the control.
  */
 export function DetailRow(props: DetailRowProps) {
   const table = useContext(DetailTableContext);
-  const { label, children, trailing, labelSize = "sm", description, warning, error, flat } = props;
+  const { label, children, labelSize = "sm", description, warning, error, flat } = props;
   const labelWidth = props.labelWidth ?? table?.labelWidth;
   const minHeight = props.minHeight ?? table?.minHeight ?? 28;
   const form = labelWidth != null;
   // Annotations (description / warning / error) live UNDER THE VALUE — the row
-  // grows, so the label + trailing center against the CONTROL LINE, not the block.
+  // grows, so the label centers against the CONTROL LINE, not the block.
   const annotated = hasFieldAnnotation(props);
   // A FLAT value (no painted chip) centers its text in the control band,
   // leaving invisible slack below it — tuck the annotations up by that slack
@@ -169,12 +163,11 @@ export function DetailRow(props: DetailRowProps) {
         {/* Wraps, like the horizontal label — a stacked row has the FULL width
             to spend, so clipping here would be gratuitous. */}
         <Text weight="medium">{label}</Text>
-        {/* stacked wears the FORM grammar exactly: label · description ·
-            control · warning · error (the `FormField` order) */}
+        {/* stacked wears the FORM grammar exactly: label, description,
+            control, warning, error (the `FormField` order) */}
         {description != null ? <Text color="muted">{description}</Text> : null}
         <View style={[styles.stackedValueRow, { minHeight }]}>
           <View style={styles.value}>{children}</View>
-          {trailing != null ? trailing : null}
         </View>
         {warning != null ? (
           <Text size="xs" color="warning" accessibilityRole="alert" aria-live="polite">
@@ -189,10 +182,10 @@ export function DetailRow(props: DetailRowProps) {
       </View>
     );
   }
-  // ONE alignment law for every row: the row TOP-ALIGNS and each cell (label ·
-  // control · trailing) centers within the first CONTROL LINE (`minHeight`) —
-  // a tall value block (a multi-control stack, annotations) never drags the
-  // label or trailing toward the block's center.
+  // ONE alignment law for every row: the row TOP-ALIGNS and each cell (label,
+  // control) centers within the first CONTROL LINE (`minHeight`) — a tall value
+  // block (a multi-control stack, annotations) never drags the label toward the
+  // block's center.
   return (
     <View style={[styles.row, { minHeight }]}>
       {labelCell(form ? { width: labelWidth } : styles.flexLabel)}
@@ -207,20 +200,24 @@ export function DetailRow(props: DetailRowProps) {
           {flatTuck !== 0 ? <View style={{ marginTop: flatTuck }}>{annotations}</View> : annotations}
         </View>
       )}
-      {table?.trailingWidth != null ? (
-        <View style={[styles.trailingCell, { width: table.trailingWidth, minHeight }]}>{trailing}</View>
-      ) : trailing != null ? (
-        <View style={[styles.trailingCell, { minHeight }]}>{trailing}</View>
-      ) : null}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
-  // 8px between rows — the zinc-50 editor chips need visible separation.
-  table: { gap: 8 },
-  // Stacked (narrow) mode: label-over-value blocks need more air between rows.
-  tableStacked: { gap: 14 },
+  // `SPACE.md` between rows. It was 8 while a resting field was a tint: two soft
+  // chips that close together still read as separate. A field now carries a
+  // BORDER, so at 8 the page shows a stack of hard edges 8px apart and the rows
+  // fuse into one block — the same gap, twice as loud. 16 is the next rung of the
+  // 8-grid (12 would read as developer-tuned), and it also settles a second
+  // question: an annotated row's `description` sits 2px under ITS value, so the
+  // gap to the NEXT row has to be unmistakably larger or the annotation looks
+  // like it belongs to whatever follows.
+  table: { gap: SPACE.md },
+  // Stacked (narrow) mode: a row is a label-over-value BLOCK, so the gap between
+  // rows must beat the gap inside one — `SPACE.lg`, the next rung up, on the same
+  // grid (it was 14, off-scale).
+  tableStacked: { gap: SPACE.lg },
   unmeasured: { opacity: 0 },
   stackedRow: { gap: 4 },
   stackedValueRow: {
@@ -242,7 +239,7 @@ const styles = StyleSheet.create({
   // `flex-start` — that drops every single-line label to the band's top edge.
   labelCell: { justifyContent: "center" },
   // The first line of the value cell — the control centers in it exactly like
-  // the label and trailing cells do.
+  // the label cell does.
   controlLine: { justifyContent: "center" },
   // The 2px between the control line and the annotation block beneath it — the
   // same rhythm `FieldAnnotations` puts between its own lines.
@@ -250,13 +247,8 @@ const styles = StyleSheet.create({
   // Form mode (labelWidth set): the value column FILLS the row so every inline
   // editor spans the SAME width — and none jumps wider when it swaps to the
   // (flex:1) edit control. A stretch column, so an InlineEditView / InlineStatic
-  // child fills it edge-to-edge. A status Badge or action is NOT a value — pass
-  // it as `trailing` (pins right); one placed here would stretch full-width.
+  // child fills it edge-to-edge. Something that is NOT the value but belongs
+  // beside it — a status Badge — composes into a row INSIDE this cell, so it
+  // costs only the row that wants it.
   value: { flex: 1 },
-  // The reserved trailing column: every row renders it (empty or not) so value
-  // cells share one width and trailing items align at one x, like a table.
-  trailingCell: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
 });

package/src/file_dropzone.tsx

@@ -22,7 +22,7 @@ export interface FileDropzoneProps {
   label?: string;
   /** Secondary line. Defaults to the locale's `fileDropzone.hint` ("or click to
    *  browse" / "hoặc bấm để chọn"); override with an accepted-types line
-   *  ("… · PDF, ảnh"). */
+   *  ("…, PDF, ảnh"). */
   hint?: string;
   /** Main line while a drag hovers the zone ("Thả để tải lên"). */
   dropLabel?: string;

package/src/file_gallery_modal.tsx

@@ -1,5 +1,5 @@
-// FileGalleryModal — full-screen file preview with a toolbar (filename · counter
-// · actions · close), prev/next nav, and ESC close. Pure primitive: takes
+// FileGalleryModal — full-screen file preview with a toolbar (filename, counter,
+// actions, close), prev/next nav, and ESC close. Pure primitive: takes
 // DisplayFile[] only, no Lotics domain coupling. Renders every previewable type
 // (image/PDF/video/audio/Word/Excel/CSV) via FilePreview, whose document engines
 // (pdfjs-dist, @lotics/docx, @lotics/xlsx) are optional peer deps loaded lazily —
@@ -232,7 +232,7 @@ export function FileGalleryModal(props: FileGalleryModalProps) {
               // Phone: actions collapse to a ⋯ menu.
               <ActionMenu items={actionItems} accessibilityLabel={l.actions} />
             ) : (
-              // Wider screens: every action inline (download · open · remove).
+              // Wider screens: every action inline (download, open, remove).
               // Rotate lives on the image overlay, not the toolbar.
               <>
                 <Button

package/src/file_rows.tsx

@@ -1,6 +1,6 @@
 // FileRows — the common "show a list of files" surface, batteries included: each
 // file is a FileRow whose whole-row press opens the built-in full-screen
-// FileGalleryModal, with a ⋯ menu (Download · Open in new tab · Remove) on the
+// FileGalleryModal, with a ⋯ menu (Download, Open in new tab, Remove) on the
 // trailing edge. Pure kit composition (FileRow + ActionMenu + FileGalleryModal) —
 // reach for the pieces directly only when you need a different shape.
 

package/src/finding.tsx

@@ -44,8 +44,8 @@ export interface FindingProps {
 
 /**
  * One ranked insight from an AI check — a cross-check discrepancy, an audit
- * observation, a briefing item. Good defaults (severity word · title · detail
- * · the PROMINENT metric · `Sources` chips) with a `children` slot for any
+ * observation, a briefing item. Good defaults (severity word, title, detail,
+ * the PROMINENT metric, `Sources` chips) with a `children` slot for any
  * extra composition. Display-only: a finding informs the verdict the host
  * records; it decides nothing itself. Stack several most-severe first —
  * inside a `ChangeReview` wrap each in a display-only `Change` (the family's
@@ -86,7 +86,7 @@ export function Finding(props: FindingProps) {
 
 export interface FindingComparisonProps {
   /** The disagreeing sides — each value with where it came from
-   *  ("invoice.pdf" · "480 pcs"). Two or more. */
+   *  ("invoice.pdf", "480 pcs"). Two or more. */
   values: { label: string; value: string }[];
   /** The computed difference, EMPHASIZED ("−40 pcs"). */
   delta?: string;
@@ -96,7 +96,7 @@ export interface FindingComparisonProps {
 
 /**
  * The expected-vs-actual body of a `Finding` — each side a labeled row
- * (source · value), a hairline, then the DELTA emphasized. Compose it as the
+ * (source, value), a hairline, then the DELTA emphasized. Compose it as the
  * finding's children; it replaces ad-hoc metric text for any
  * one-value-disagrees insight (quantities, totals, dates).
  */

package/src/form_field.tsx

@@ -101,7 +101,7 @@ export function FormField(props: FormFieldProps & { children: React.ReactNode })
             <Spacer size={8} />
             {/*
               Below the control, above the error — the three tones read
-              description · warning · error, ascending severity. `role="alert"`
+              description, warning, error, ascending severity. `role="alert"`
               + `aria-live="polite"` announce it politely on appearance.
             */}
             <Text nativeID={warningId} color="warning" accessibilityRole="alert" aria-live="polite">

package/src/format_date.ts

@@ -103,8 +103,8 @@ export function toISODate(value: Date | string | null | undefined): string {
 /**
  * THE date-value formatter — the date sibling of `formatMoney`. Accepts a `Date` OR an ISO string
  * and returns a localized display string; defaults to the home market. `format` picks the date
- * style: `date` → `22/05/2026` · `medium` → `22 thg 5, 2026` · `long` → `22 tháng 5, 2026` ·
- * `dayMonth` → `22 thg 5` · `monthYear` → `Tháng 5 2026`. **`time: true` prepends the 24h time to
+ * style: `date` → `22/05/2026`; `medium` → `22 thg 5, 2026`; `long` → `22 tháng 5, 2026`;
+ * `dayMonth` → `22 thg 5`, `monthYear` → `Tháng 5 2026`. **`time: true` prepends the 24h time to
  * ANY style** — `14:30 22/05/2026`, `14:30 22 tháng 5, 2026` (time-first). `compact` drops the
  * year on the numeric `date` style. Never hand-roll a date with `padStart` / `getMonth` / a raw
  * `Intl.DateTimeFormat` for VALUE display — call this. (Component-internal chrome is exempt — see

package/src/heatmap.tsx

@@ -57,7 +57,7 @@ export function Heatmap(props: HeatmapProps) {
             return (
               <Cell
                 key={col.key}
-                label={`${row.label} · ${col.label}: ${formatValue(value)}`}
+                label={`${row.label}, ${col.label}: ${formatValue(value)}`}
                 background={value === 0 ? colors.zinc[100] : withAlpha(color, 0.15 + 0.85 * (value / max))}
                 selected={isSelected}
                 onPress={

package/src/inline_button.tsx

@@ -0,0 +1,84 @@
+import { type GestureResponderEvent } from "react-native";
+import { Text } from "./text";
+import { colors } from "./colors";
+import { PressableHighlight } from "./pressable_highlight";
+import { CONTROL_TRANSITION } from "./control_surface";
+
+/** The height that fits INSIDE the 40px inline control band with 6px of air
+ *  above and below — the same air a `DetailRow`'s label gets against its value. */
+const INLINE_BUTTON_HEIGHT = 28;
+
+interface InlineButtonProps {
+  /** The verb, as a word. An inline button is never icon-only — it sits on a
+   *  crowded value where a bare glyph reads as decoration on the field. */
+  title: string;
+  onPress: () => void;
+  /** Announced name, when the surrounding value makes `title` ambiguous
+   *  ("Open" → "Open customer"). Defaults to `title`. */
+  accessibilityLabel?: string;
+  tooltip?: string;
+  disabled?: boolean;
+}
+
+/**
+ * A verb that lives INSIDE an inline field's surface — the Open on a reference,
+ * the Copy on a value worth copying — rather than in the row's trailing column.
+ *
+ * Inside is where it belongs when the act is ABOUT THE VALUE: it travels with
+ * what it acts on, so a reader never has to pair a control on the right edge of
+ * the page with the field it belongs to, and the trailing column stays free for
+ * row-level verbs.
+ *
+ * It is FILLED, on a field surface that is white. The contrast is the whole
+ * affordance, and it is a RELATIONSHIP rather than a colour: the verb must read
+ * as sitting ON the value, so it takes the tint the field does not. (Invert it
+ * again if the resting field surface ever changes, or the verb dissolves into
+ * the value it acts on.) It borrows `Button secondary`'s own fill, so the two
+ * read as one act at two scales; the kit's `Button` still cannot serve here,
+ * being the full 40px control height that this sits inside.
+ *
+ * NO BORDER and NO SHADOW: the fill alone separates it — a border would draw a
+ * box inside a box, now that the field has one — and depth belongs to the
+ * primary action alone (a drop shadow on a 28px control reads as a smudge, not
+ * lift).
+ *
+ * **It stops propagation.** That is the contract, not the styling: an inline
+ * button sits on a surface that is itself pressable (the field opens its editor,
+ * a reference opens its peek), so without this every press would fire both — the
+ * bug is silent, and it is the reason this is a primitive rather than a local
+ * composition.
+ */
+export function InlineButton(props: InlineButtonProps) {
+  const { title, onPress, accessibilityLabel, tooltip, disabled } = props;
+  return (
+    <PressableHighlight
+      focusRing
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? title}
+      tooltip={tooltip}
+      disabled={disabled}
+      onPress={(e: GestureResponderEvent) => {
+        e?.stopPropagation?.();
+        onPress();
+      }}
+      style={(state) => [
+        {
+          height: INLINE_BUTTON_HEIGHT,
+          paddingHorizontal: 10,
+          justifyContent: "center",
+          // Softer than the 10 of the field it sits in: a control nested inside
+          // another reads as a distinct object when its corners are rounder than
+          // its host's, and at 28px tall a 10 would look square by comparison.
+          borderRadius: 8,
+          backgroundColor: state.hovered && !disabled ? colors.zinc[200] : colors.zinc[100],
+          opacity: disabled ? 0.5 : 1,
+        },
+        CONTROL_TRANSITION,
+      ]}
+    >
+      <Text size="xs" weight="medium" color={disabled ? "muted" : "default"}>
+        {title}
+      </Text>
+    </PressableHighlight>
+  );
+}

package/src/inline_date_picker.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import { View } from "react-native";
 import { Text } from "./text";
 import { Icon } from "./icon";
@@ -35,9 +35,14 @@ export interface InlineDatePickerProps {
    *  order. Defaults to the active `LoticsLocaleProvider` locale. */
   locale?: string;
   disabled?: boolean;
-  accessibilityLabel?: string;
-  /** Form field (default) or grid cell — see `InlineEditVariant`. */
+  /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
+  /** Verbs on the field's surface — an `InlineButton` Copy, Open… See
+   *  `InlineEditView.actions`: they sit INSIDE the field, in the same place in
+   *  every mode, and must be passed UNCONDITIONALLY (`disabled` the verb when it
+   *  has nothing to act on) or the field resizes as the value fills. */
+  actions?: ReactNode;
+  accessibilityLabel?: string;
   /** Colour the resting date by urgency — overdue red, soon-due amber (the caller owns
    *  the rule; e.g. a task's `dueTone`). Applies to a set value only. */
   tone?: TextColor;
@@ -59,7 +64,7 @@ export interface InlineDatePickerProps {
  * The row never changes height in either mode.
  */
 export function InlineDatePicker(props: InlineDatePickerProps) {
-  const { value, onSave, onClear, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel , variant, tone } = props;
+  const { value, onSave, onClear, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel , tone, variant, actions } = props;
   const locales = useLoticsLocale();
   const inlineLabels = locales.inline;
   const dateLabels = locales.datePicker;
@@ -236,11 +241,9 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
   ) : (
     <Icon name={format === "datetime" ? "calendar-clock" : "calendar"} size={18} color={colors.zinc[400]} />
   );
-  // The resting calendar glyph is a FORM affordance (marks an empty field as a date
-  // control). A `cell` lives in a grid where the column header already says "Due" and
-  // every cell edits — the repeated glyph is noise, so it reads value-first (the saving
-  // spinner still shows). The typed-edit field keeps its glyph — that's the open-picker button.
-  const restTrailing = variant === "cell" && !saving ? undefined : trailing;
+  // The resting calendar glyph marks an empty field as a DATE control — the same
+  // promise on every surface, now that a field looks the same everywhere.
+  const restTrailing = trailing;
 
   return (
     <View>
@@ -268,7 +271,11 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
           <PopoverTrigger>
             <InlineEditView
               variant={variant}
-              tone={tone}
+              actions={actions}
+              // The calendar anchors to the FIELD, not to the value region: with
+              // verbs on the surface the region inside is narrower than the box.
+              anchorRef={anchorRef}
+                      tone={tone}
               display={display}
               placeholder={placeholder}
               disabled={disabled}