@lotics/ui 8.0.0 → 9.0.0

package/src/capture_row.tsx

@@ -0,0 +1,59 @@
+import { StyleSheet, View } from "react-native";
+import { Button } from "./button";
+import { colors } from "./colors";
+import { useLoticsLocale } from "./locale";
+import { TextInputField } from "./text_input_field";
+
+export interface CaptureRowProps {
+  /** The draft text — controlled by the host list. */
+  value: string;
+  onChangeText: (next: string) => void;
+  /** Commit the draft (Enter, or the Save button that appears on type). The
+   *  host trims/validates and clears `value`. */
+  onSubmit: () => void;
+  /** The invitation ("Add a task…"). */
+  placeholder?: string;
+  /** Save button title. Defaults to the locale's inline Save. */
+  saveLabel?: string;
+  accessibilityLabel: string;
+}
+
+/**
+ * The add-an-item row that closes an editable list: a dashed empty ring where
+ * the item's leading control will be, a borderless input on the same inset as
+ * the item titles above it, and a primary Save that appears once there's text.
+ * Enter commits too. One shape wherever a list grows in place — task
+ * checklists, simple item lists — so the affordance reads the same everywhere.
+ */
+export function CaptureRow(props: CaptureRowProps) {
+  const { value, onChangeText, onSubmit, placeholder, saveLabel, accessibilityLabel } = props;
+  const labels = useLoticsLocale().inline;
+  return (
+    <View style={styles.row}>
+      <View style={styles.emptyRing} />
+      <View style={styles.field}>
+        <View style={styles.grow}>
+          <TextInputField
+            value={value}
+            onChangeText={onChangeText}
+            onSubmitEditing={onSubmit}
+            placeholder={placeholder}
+            style={styles.input}
+            accessibilityLabel={accessibilityLabel}
+          />
+        </View>
+        {value.trim() !== "" ? <Button title={saveLabel ?? labels.save} color="primary" onPress={onSubmit} /> : null}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 32 },
+  emptyRing: { width: 20, height: 20, borderRadius: 10, borderWidth: 1.5, borderColor: colors.zinc[300], borderStyle: "dashed" },
+  field: { flex: 1, flexDirection: "row", alignItems: "center", gap: 8 },
+  grow: { flex: 1 },
+  // Borderless, matching an inline title's resting inset so the invitation
+  // lines up with the item titles above.
+  input: { borderWidth: 0, backgroundColor: "transparent", paddingVertical: 0 },
+});

package/src/checklist.tsx

@@ -0,0 +1,104 @@
+import { createContext, useContext, type ReactNode } from "react";
+import { StyleSheet, View } from "react-native";
+import { ActionMenu, type ActionMenuItem } from "./action_menu";
+
+// The record-scoped CHECKLIST — the compound that owns the list's GEOMETRY
+// (row height, ring/title alignment, one trailing column width) while the
+// CONTENT stays composed: a `CheckCircle` (live or read-only) in `control`,
+// a struck `InlineTextInput` or plain `Text` as the title, an
+// `InlineMemberSelect` or nothing in `trailing`, and `menu` for the row's
+// ⋯ options (Delete lives BEHIND the menu — indirection that prevents
+// accidental destructive taps). Suggested tasks are NOT rows: offer the record
+// type's commons as `SuggestionChip`s under the list (tap = materialize,
+// ✕ = dismiss) — a pill can't be mistaken for a task. `CaptureRow` closes the
+// list as its add affordance. There is deliberately NO monolithic Task
+// component — richer task-management rows (expand affordances, tag/clip meta,
+// board cards) compose their own anatomy directly.
+//
+//   <Checklist trailingWidth={140}>
+//     <ChecklistRow control={<CheckCircle …/>} trailing={<InlineMemberSelect …/>}
+//                   menu={{ items: [{ key: "delete", label: "Delete task", danger: true, … }],
+//                           accessibilityLabel: "Task options: …" }}>
+//       <InlineTextInput background="transparent" struck={done} … />
+//     </ChecklistRow>
+//     <SuggestionChip label="Verify the tax ID" onAdd={materialize} onDismiss={dismiss} />
+//     <CaptureRow … />
+//   </Checklist>
+
+interface ChecklistContextValue {
+  trailingWidth?: number;
+}
+
+const ChecklistContext = createContext<ChecklistContextValue>({});
+
+export interface ChecklistProps {
+  /** Fixed width of every row's trailing cell (an assignee select) — set it
+   *  once so the column lines up; omit when rows carry no trailing. */
+  trailingWidth?: number;
+  children: ReactNode;
+}
+
+export function Checklist(props: ChecklistProps) {
+  const { trailingWidth, children } = props;
+  return (
+    <ChecklistContext.Provider value={{ trailingWidth }}>
+      <View style={styles.list}>{children}</View>
+    </ChecklistContext.Provider>
+  );
+}
+
+interface ChecklistRowBaseProps {
+  /** The leading toggle — a `CheckCircle` (omit `onChange` for a read-only ring). */
+  control: ReactNode;
+  /** The title — a struck transparent `InlineTextInput`, or plain `Text`. */
+  children: ReactNode;
+  /** The row's ⋯ options menu (destructive items last, `danger: true`) —
+   *  Delete lives HERE, never as a bare ✕ on the row, so a stray tap can't
+   *  destroy a task. Name the task in the label ("Task options: Book the
+   *  carrier"). The ⋯ column aligns only when every row in the list carries
+   *  a menu — keep its presence uniform per list. */
+  menu?: { items: ActionMenuItem[]; accessibilityLabel: string };
+}
+
+/** `trailing` (wide surfaces) and `meta` (narrow) are exclusive by type. */
+export type ChecklistRowProps = ChecklistRowBaseProps &
+  (
+    | {
+        /** The trailing cell (an `InlineMemberSelect`); sized by the list's `trailingWidth`. */
+        trailing?: ReactNode;
+        meta?: never;
+      }
+    | {
+        /** SECOND line under the title (indented past the ring) for a NARROW
+         *  surface — a drawer or popover checklist: put the assignee/due
+         *  editors here so the title keeps the full width and stays readable. */
+        meta?: ReactNode;
+        trailing?: never;
+      }
+  );
+
+/** One task line: control · title (flex) · the aligned trailing cell · ⋯,
+ *  with an optional indented `meta` line below for narrow surfaces. */
+export function ChecklistRow(props: ChecklistRowProps) {
+  const { control, children, trailing, menu, meta } = props;
+  const { trailingWidth } = useContext(ChecklistContext);
+  return (
+    <View>
+      <View style={styles.row}>
+        {control}
+        <View style={styles.title}>{children}</View>
+        {trailing != null ? <View style={trailingWidth != null ? { width: trailingWidth } : null}>{trailing}</View> : null}
+        {menu != null ? <ActionMenu items={menu.items} accessibilityLabel={menu.accessibilityLabel} /> : null}
+      </View>
+      {meta != null ? <View style={styles.meta}>{meta}</View> : null}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  list: { gap: 4 },
+  row: { flexDirection: "row", alignItems: "center", gap: 12, minHeight: 32 },
+  title: { flex: 1 },
+  // Indent past the ring (20) + the row gap (12) so meta aligns with the title.
+  meta: { paddingLeft: 32, paddingBottom: 4, flexDirection: "row", alignItems: "center", flexWrap: "wrap", columnGap: 8, rowGap: 2 },
+});

package/src/chip.tsx

@@ -1,5 +1,6 @@
 import { Ref } from "react";
 import { IconButton } from "./icon_button";
+import { useLoticsLocale } from "./locale";
 import { PressableHighlight } from "./pressable_highlight";
 import { chipSurfaceStyle } from "./control_surface";
 import { StyleSheet, View } from "react-native";
@@ -8,19 +9,27 @@ interface ChipProps {
   testID?: string;
   children: React.ReactNode;
   onPress?: () => void;
+  /** Accessible name of the press target. The pressable pill announces as a
+   *  button either way — its name derives from the children when they are
+   *  self-describing text; pass this when they aren't (icon-led content). */
+  accessibilityLabel?: string;
   onDismiss?: () => void;
   dismissTooltip?: string;
   ref?: Ref<View>;
 }
 
 export function Chip(props: ChipProps) {
-  const { testID, children, onPress, onDismiss, dismissTooltip, ref } = props;
+  const { testID, children, onPress, accessibilityLabel, onDismiss, dismissTooltip, ref } = props;
+  const labels = useLoticsLocale().chip;
 
   return (
     <View ref={ref}>
       {onPress ? (
         <PressableHighlight
-          focusRing          testID={testID}
+          focusRing
+          testID={testID}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
           onPress={onPress}
           style={(state) => [chipSurfaceStyle(state), styles.pillLayout, onDismiss && styles.pillWithDismiss]}
         >
@@ -34,7 +43,7 @@ export function Chip(props: ChipProps) {
           <IconButton
             icon="x"
             tooltip={dismissTooltip}
-            accessibilityLabel={dismissTooltip ?? "Remove"}
+            accessibilityLabel={dismissTooltip ?? labels.remove}
             onPress={onDismiss}
             testID={testID ? `${testID}-remove` : undefined}
           />

package/src/detail_row.tsx

@@ -1,24 +1,107 @@
-import { ReactNode } from "react";
-import { StyleSheet, View } from "react-native";
+import { createContext, ReactNode, useContext, useState } from "react";
+import { StyleProp, StyleSheet, View, ViewStyle } from "react-native";
+import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
 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). */
+  stacked: boolean;
+}
+
+const DetailTableContext = createContext<DetailTableColumns | null>(null);
+
+/** The value cell must keep at least this width before the table gives up its
+ *  side-by-side columns and stacks — below it, editors get crushed. */
+const MIN_VALUE_WIDTH = 160;
+
+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;
+  /** The usable width the value cell must keep before the table STACKS
+   *  (default 160). Raise it when a cell holds MORE than one editor (an
+   *  amount + method pair) — side-by-side columns that technically fit can
+   *  still crush a multi-editor cell. */
+  minValueWidth?: number;
+  /** `DetailRow`s (each inherits the table's columns; row props override). */
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * 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'.
+ *
+ *   <DetailTable labelWidth={130} trailingWidth={96}>
+ *     <DetailRow label="Reference" trailing={<Button title="Copy" … />}>
+ *       <InlineTextInput … />
+ *     </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.
+ *
+ * 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.
+ */
+export function DetailTable(props: DetailTableProps) {
+  const { labelWidth = 130, trailingWidth, minHeight = INLINE_CONTROL_HEIGHT, minValueWidth = MIN_VALUE_WIDTH, children, style } = props;
+  const [width, setWidth] = useState<number | null>(null);
+  const stacked =
+    width != null && width < labelWidth + (trailingWidth ?? 0) + minValueWidth + 24;
+  return (
+    <DetailTableContext.Provider value={{ labelWidth, trailingWidth, minHeight, stacked }}>
+      <View
+        onLayout={(e) => setWidth(e.nativeEvent.layout.width)}
+        // Measure-then-REVEAL: the unmeasured first frame renders invisible
+        // (opacity 0), so the first PAINT the user sees is already in the
+        // right mode — no table→stacked reshuffle as a drawer opens.
+        style={[stacked ? styles.tableStacked : styles.table, width == null ? styles.unmeasured : null, style]}
+      >
+        {children}
+      </View>
+    </DetailTableContext.Provider>
+  );
+}
+
 export interface DetailRowProps {
   /** The field label — rendered `sm muted`. */
   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`, a unit label, an
-   *  `IconButton`. In form mode (`labelWidth` set) the value column already fills
-   *  the row, so the trailing pins to the right edge automatically. */
+   *  `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). */
+   *  value sits at the right edge (the default drawer-detail look). Inside a
+   *  `DetailTable` the table's `labelWidth` applies; this overrides per row. */
   labelWidth?: number;
   /** Label text size — `xs` for a compact peek, `sm` (default) for a drawer. */
   labelSize?: "xs" | "sm";
-  /** Min row height. Default 28. */
+  /** Min row height. Default 28 (or the `DetailTable`'s `minHeight`). */
   minHeight?: number;
 }
 
@@ -27,23 +110,61 @@ export interface DetailRowProps {
  * `PressableRow` / `TableRow`). Spread by default (muted label left, value pushed
  * 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).
+ * 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.
  */
 export function DetailRow(props: DetailRowProps) {
-  const { label, children, trailing, labelWidth, labelSize = "sm", minHeight = 28 } = props;
+  const table = useContext(DetailTableContext);
+  const { label, children, trailing, labelSize = "sm" } = props;
+  const labelWidth = props.labelWidth ?? table?.labelWidth;
+  const minHeight = props.minHeight ?? table?.minHeight ?? 28;
   const form = labelWidth != null;
+  if (table?.stacked) {
+    // Stacked mode wears the FORM grammar: the label renders exactly like a
+    // `FormField` label (medium, default ink), so a narrow record surface
+    // reads as one vocabulary with forms. The COMPONENTS stay separate — a
+    // FormField wraps a draft control validated and committed together, an
+    // inline editor self-persists — only the look converges.
+    return (
+      <View style={styles.stackedRow}>
+        <Text weight="medium" numberOfLines={1}>
+          {label}
+        </Text>
+        <View style={[styles.stackedValueRow, { minHeight }]}>
+          <View style={styles.value}>{children}</View>
+          {trailing != null ? trailing : null}
+        </View>
+      </View>
+    );
+  }
   return (
     <View style={[styles.row, { minHeight }]}>
       <Text size={labelSize} color="muted" style={form ? { width: labelWidth } : styles.flexLabel}>
         {label}
       </Text>
       {form ? <View style={styles.value}>{children}</View> : children}
-      {trailing != null ? trailing : null}
+      {table?.trailingWidth != null ? (
+        <View style={[styles.trailingCell, { width: table.trailingWidth }]}>{trailing}</View>
+      ) : trailing != null ? (
+        trailing
+      ) : null}
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  // 6px between rows — the zinc-50 editor chips need visible separation.
+  table: { gap: 6 },
+  // Stacked (narrow) mode: label-over-value blocks need more air between rows.
+  tableStacked: { gap: 14 },
+  unmeasured: { opacity: 0 },
+  stackedRow: { gap: 4 },
+  stackedValueRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
   row: {
     flexDirection: "row",
     alignItems: "center",
@@ -56,4 +177,10 @@ const styles = StyleSheet.create({
   // 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.
   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/inline_date_picker.tsx

@@ -7,7 +7,8 @@ import { DatePickerPanel } from "./date_picker";
 import { isoHasTime } from "./date_picker_value";
 import { formatDate } from "./format_date";
 import { ActivityIndicator } from "./activity_indicator";
-import { InlineEditView } from "./inline_edit";
+import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { useLoticsLocale } from "./locale";
 
 export interface InlineDatePickerProps {
   /** ISO date (`2026-05-22`) or datetime (`2026-05-22T14:30`). */
@@ -23,6 +24,8 @@ export interface InlineDatePickerProps {
   locale?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
 }
 
 /**
@@ -33,7 +36,8 @@ export interface InlineDatePickerProps {
  * dismissing without a change reverts.
  */
 export function InlineDatePicker(props: InlineDatePickerProps) {
-  const { value, onSave, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel } = props;
+  const { value, onSave, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel , background } = props;
+  const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState<string | null>(value);
   const [saving, setSaving] = useState(false);
@@ -50,7 +54,7 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
     try {
       await onSave(next);
     } catch (e) {
-      setError(e instanceof Error && e.message ? e.message : "Couldn't save. Try again.");
+      setError(e instanceof Error && e.message ? e.message : labels.saveError);
     } finally {
       setSaving(false);
     }
@@ -81,6 +85,7 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
       <Popover open={open && !disabled} onOpenChange={onOpenChange} side="bottom" align="start">
         <PopoverTrigger>
           <InlineEditView
+            background={background}
             display={display}
             placeholder={placeholder}
             disabled={disabled}

package/src/inline_edit.tsx

@@ -2,6 +2,7 @@ import { useCallback, useRef, useState, type ReactNode, type Ref } from "react";
 import { View, StyleSheet, type GestureResponderEvent, type TextStyle } from "react-native";
 import { Text } from "./text";
 import { IconButton } from "./icon_button";
+import { useLoticsLocale } from "./locale";
 import { ActivityIndicator } from "./activity_indicator";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { colors } from "./colors";
@@ -28,6 +29,7 @@ export function useInlineEdit<T>(opts: {
   equals?: (a: T, b: T) => boolean;
 }) {
   const { value, onSave, equals } = opts;
+  const labels = useLoticsLocale().inline;
   const [editing, setEditing] = useState(false);
   const [draft, setDraft] = useState<T>(value);
   const [saving, setSaving] = useState(false);
@@ -69,7 +71,7 @@ export function useInlineEdit<T>(opts: {
         setEditing(false);
       } catch (e) {
         // Stay in edit mode so the entry isn't lost — show the error, re-arm.
-        setError(e instanceof Error && e.message ? e.message : "Couldn't save. Try again.");
+        setError(e instanceof Error && e.message ? e.message : labels.saveError);
         active.current = true;
       } finally {
         setSaving(false);
@@ -81,6 +83,13 @@ export function useInlineEdit<T>(opts: {
   return { editing, draft, setDraft, saving, error, begin, cancel, commit };
 }
 
+/** The resting surface of an inline editor. "tint" (default) is the zinc-50
+ *  chip — THE editability affordance on surfaces that MIX editable and static
+ *  values. "transparent" drops it for DENSE, uniformly-editable surfaces (a
+ *  task list/board where every cell edits — the chip repeated everywhere is
+ *  noise, and hover/focus still reveal the input). */
+export type InlineEditBackground = "tint" | "transparent";
+
 interface InlineEditFrameProps {
   editing: boolean;
   /** The formatted current value, shown in view mode. Empty → placeholder. */
@@ -101,6 +110,8 @@ interface InlineEditFrameProps {
   accessibilityLabel?: string;
   /** Strike + mute the resting value (a completed item that stays editable). */
   struck?: boolean;
+  /** Resting surface — see {@link InlineEditBackground}. Default "tint". */
+  background?: InlineEditBackground;
 }
 
 interface InlineEditViewProps {
@@ -119,20 +130,23 @@ interface InlineEditViewProps {
   active?: boolean;
   /** Strike + mute the resting value (a completed/superseded item that stays editable). */
   struck?: boolean;
+  /** Resting surface — see {@link InlineEditBackground}. Default "tint". */
+  background?: InlineEditBackground;
   ref?: Ref<View>;
 }
 
 /**
  * The view-mode box of an inline-editable field: the value as plain text in a
  * `FocusRingPressable` (an input, so it hovers via its BORDER — the transparent
- * edge reveals on hover, never a grey wash; the pointer cursor signals it's
- * editable), at the kit's control height with a transparent border — so
+ * edge reveals on hover, never a grey wash; the cursor stays the default arrow —
+ * the zinc-50 chip + hover-border are the affordance, a pointer would read as a
+ * button), at the kit's control height with a transparent border — so
  * swapping to an input, or floating a dropdown above it, never shifts the
  * layout. Used by `InlineEditFrame`, and as the overlay trigger for the
  * select/date inline editors (it forwards ref + onPress to a `PopoverTrigger`).
  */
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, ref } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, background = "tint", ref } = props;
   // Stop the press here so an inline editor nested in a pressable row (a task
   // row that expands on press) edits the field instead of triggering the row.
   const handlePress = onPress
@@ -152,7 +166,7 @@ export function InlineEditView(props: InlineEditViewProps) {
       // An inline-edit field is an input — it hovers via its BORDER, not a grey
       // wash: the transparent edge reveals on hover (the kit's hover-border),
       // then fills + rings when open. Suppressed while open (the ring leads).
-      style={(state) => [styles.view, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && styles.viewHovered]}
+      style={(state) => [styles.view, (background === "transparent" || disabled) && styles.viewTransparent, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && styles.viewHovered]}
     >
       {typeof display === "string" ? (
         <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null]}>
@@ -174,6 +188,7 @@ export function InlineEditView(props: InlineEditViewProps) {
  * directly as a `Popover` trigger instead.)
  */
 export function InlineEditFrame(props: InlineEditFrameProps) {
+  const labels = useLoticsLocale().inline;
   const {
     editing,
     display,
@@ -188,11 +203,13 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     disabled,
     accessibilityLabel,
     struck,
+    background,
   } = props;
 
   if (!editing) {
     return (
       <InlineEditView
+        background={background}
         display={display}
         placeholder={placeholder}
         onPress={onBegin}
@@ -218,8 +235,8 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
         </View>
         {controls === "buttons" ? (
           <View style={styles.buttons}>
-            <IconButton icon="check" color="primary" size="sm" tooltip="Save" onPress={onCommit} disabled={saving} />
-            <IconButton icon="x" color="secondary" size="sm" tooltip="Cancel" onPress={onCancel} disabled={saving} />
+            <IconButton icon="check" color="primary" size="sm" tooltip={labels.save} onPress={onCommit} disabled={saving} />
+            <IconButton icon="x" color="secondary" size="sm" tooltip={labels.cancel} onPress={onCancel} disabled={saving} />
           </View>
         ) : null}
       </View>
@@ -247,24 +264,37 @@ export const inlineValueTextStyle: TextStyle = {
 const viewTextStyle = [inlineValueTextStyle, { flex: 1 }];
 
 const styles = StyleSheet.create({
+  // At REST an editor sits on a zinc-50 chip — THE editability affordance: a
+  // read-only `InlineStatic` stays flat, so editable and static values are
+  // distinguishable without hovering (they were pixel-identical before, and
+  // users could not discover what was editable).
   view: {
     minHeight: INLINE_CONTROL_HEIGHT,
     borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
     borderColor: "transparent",
+    backgroundColor: colors.zinc[50],
     paddingHorizontal: 8,
     flexDirection: "row",
     alignItems: "center",
     gap: 6,
+    // An inline editor is an INPUT, not a button — keep the default arrow
+    // cursor (the chip + hover-border carry the affordance; a pointer reads
+    // as a button press). Overrides the Pressable's pointer default.
+    cursor: "auto",
   },
+  // The transparent opt-out — dense, uniformly-editable surfaces.
+  viewTransparent: { backgroundColor: "transparent" },
   // Open (popover showing): the transparent edge fills in to the kit's 1px border
-  // under the 2px active ring — identical to a focused input.
+  // under the 2px active ring — identical to a focused input; the chip clears to
+  // the input's white surface.
   viewActive: {
     borderColor: colors.border,
+    backgroundColor: colors.white,
     boxShadow: FOCUS_RING,
   },
-  // Hover (not open): reveal the kit hover-border on the transparent edge — the
-  // input-family affordance, no grey wash.
+  // Hover (not open): reveal the kit hover-border on the chip — the input-family
+  // affordance.
   viewHovered: {
     borderColor: HOVER_BORDER,
   },

package/src/inline_member_select.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useMemo } from "react";
+import type { InlineEditBackground } from "./inline_edit";
 import { InlineSelect } from "./inline_select";
 import { MemberChip } from "./member_chip";
 import type { MemberSelectMember } from "./member_select";
@@ -18,6 +19,8 @@ interface InlineMemberSelectProps {
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
   /** Show an in-menu search box to filter the roster; default false. */
   searchable?: boolean;
 }

package/src/inline_number_input.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import type { KeyboardEvent } from "react";
 import { NumberInput } from "./number_input";
-import { InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
+import { type InlineEditBackground, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
 
 export interface InlineNumberInputProps {
   value: number | null;
@@ -15,6 +15,8 @@ export interface InlineNumberInputProps {
   controls?: InlineEditControls;
   disabled?: boolean;
   accessibilityLabel?: string;
+  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  background?: InlineEditBackground;
 }
 
 /**
@@ -23,7 +25,7 @@ export interface InlineNumberInputProps {
  * the bare numeric field at the same height, so the form never reflows.
  */
 export function InlineNumberInput(props: InlineNumberInputProps) {
-  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel } = props;
+  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel , background } = props;
   const edit = useInlineEdit<number | null>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -43,6 +45,7 @@ export function InlineNumberInput(props: InlineNumberInputProps) {
 
   return (
     <InlineEditFrame
+      background={background}
       editing={edit.editing}
       display={display}
       placeholder={placeholder}