@lotics/ui 12.1.2 → 13.7.1

package/src/badge.tsx

@@ -9,15 +9,16 @@ interface BadgeProps {
   label?: string;
   color?: ColorName;
   /**
-   * The status-indicator weight:
-   * - "tonal" (default): a filled pill — a record's prominent STATUS field (a
-   *   register's Status column, a drawer header). For categorical status, not
-   *   a metric value: a percentage/amount is a number, never a chip.
-   * - "dot": pill-less — a colored dot + label, the LIGHT indicator for
-   *   legends, secondary/inline status, or a metric's quality cue (a
-   *   healthy-vs-thin margin) where a filled chip would be too heavy.
-   * (StatusGrid/StatusLegend keep their own dot — their color is raw hex,
-   * coupled to the grid cells' tint, a separate data-viz concern.)
+   * The status-indicator weight — DEFAULT to `dot`:
+   * - "dot": pill-less — a colored dot + label. The everyday status indicator:
+   *   legends, register cells, inline/secondary status, a metric's quality cue.
+   *   Light enough to sit anywhere without shouting. Reach for this by default.
+   * - "tonal": a filled pill — HEAVY, and easy to overuse into clutter. Reserve
+   *   it for the ONE prominent status of a surface (a drawer header, a register's
+   *   primary Status column). One per view, a deliberate choice — not sprinkled
+   *   through rows or option lists. If in doubt, use `dot`.
+   * (StatusGrid/StatusLegend keep their own dot — raw hex coupled to the grid
+   * cells' tint, a separate data-viz concern.)
    */
   variant?: "tonal" | "dot";
   style?: StyleProp<ViewStyle>;
@@ -25,8 +26,23 @@ interface BadgeProps {
   userSelect?: "none" | "auto";
 }
 
+/**
+ * A STATUS indicator — a lifecycle state, a risk level, a quality cue — that reads at a
+ * GLANCE. That is the ONLY thing a Badge is for; keep the vocabulary scarce so a colored
+ * chip always MEANS state.
+ *
+ * NOT for a type / category / attribute / count (a party's type, a document kind, a city,
+ * "3 files") — that is not a status, and a pill for it is noise. Render it as inline TEXT
+ * (a muted metadata line; a taller row is fine). If you're adding a Badge "to show more
+ * info" in a row or an option list, STOP — that's text, not a badge.
+ *
+ * Default `variant="dot"`; `tonal` is the heavy exception (see the prop doc).
+ */
+
 export function Badge(props: BadgeProps) {
-  const { label, color, variant = "tonal", style, tooltip, userSelect = "none" } = props;
+  // Default `dot` (the light indicator) — `tonal` is the heavy pill you opt INTO
+  // deliberately, so a bare <Badge> never silently clutters a row with a filled chip.
+  const { label, color, variant = "dot", style, tooltip, userSelect = "none" } = props;
   const tooltipProps = useTooltip(tooltip);
   const hue = color && colors[color] ? colors[color] : null;
 

package/src/checklist.tsx

@@ -21,7 +21,7 @@ import { ActionMenu, type ActionMenuItem } from "./action_menu";
 //     <ChecklistRow control={<CheckCircle …/>} trailing={<InlineMemberSelect …/>}
 //                   menu={{ items: [{ key: "delete", label: "Delete task", danger: true, … }],
 //                           accessibilityLabel: "Task options: …" }}>
-//       <InlineTextInput background="transparent" struck={done} … />
+//       <InlineTextInput variant="cell" struck={done} … />
 //     </ChecklistRow>
 //     <SuggestionChip label="Verify the tax ID" onAdd={materialize} onDismiss={dismiss} />
 //     <CaptureRow … />

package/src/detail_row.tsx

@@ -111,6 +111,11 @@ export interface DetailRowProps {
    *  hidden ⓘ gloss. Invalid STATE → `error` or a co-located `Callout`. Same
    *  name, same meaning as `FormField.description`. */
   description?: string;
+  /** A consequence the user should WEIGH before acting — renders in the same
+   *  annotation slot in amber (`Text color="warning"`), one tone between the
+   *  muted `description` and the danger `error`, announced on appearance. Same
+   *  name, same meaning as `FormField.warning`. */
+  warning?: string;
   /** Field-level failure, under the value in danger ink with `FormField`'s
    *  alert semantics (announced on appearance). For CONSUMER-validated state —
    *  the `Inline*` editors already render their own transient save errors;
@@ -136,13 +141,13 @@ export interface DetailRowProps {
  */
 export function DetailRow(props: DetailRowProps) {
   const table = useContext(DetailTableContext);
-  const { label, children, trailing, labelSize = "sm", description, error, flat } = props;
+  const { label, children, trailing, 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 / error) live UNDER THE VALUE — the row grows,
-  // so the label + trailing center against the CONTROL LINE, not the block.
-  const annotated = description != null || error != null;
+  // Annotations (description / warning / error) live UNDER THE VALUE — the row
+  // grows, so the label + trailing center against the CONTROL LINE, not the block.
+  const annotated = description != null || warning != null || error != null;
   // 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
   // so the perceived gap matches a chip row's. Horizontal mode only (stacked
@@ -155,9 +160,10 @@ export function DetailRow(props: DetailRowProps) {
       </Text>
     </View>
   );
-  // Error first (adjacent to the control that failed, FormField's alert
-  // semantics), then the guidance. Indented to the inline chip's OWN text
-  // inset (paddingHorizontal 8), so annotations align with the value's text.
+  // Severity descending from the control: error first (adjacent to the control
+  // that failed, FormField's alert semantics), then warning, then the guidance.
+  // Indented to the inline chip's OWN text inset (paddingHorizontal 8), so
+  // annotations align with the value's text.
   const annotations = annotated ? (
     <>
       {error != null ? (
@@ -165,6 +171,11 @@ export function DetailRow(props: DetailRowProps) {
           {error}
         </Text>
       ) : null}
+      {warning != null ? (
+        <Text size="xs" color="warning" accessibilityRole="alert" aria-live="polite" style={styles.annotation}>
+          {warning}
+        </Text>
+      ) : null}
       {description != null ? (
         <Text size="xs" color="muted" style={styles.annotation}>
           {description}
@@ -184,12 +195,17 @@ export function DetailRow(props: DetailRowProps) {
           {label}
         </Text>
         {/* stacked wears the FORM grammar exactly: label · description ·
-            control · error (the `FormField` order) */}
+            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">
+            {warning}
+          </Text>
+        ) : null}
         {error != null ? (
           <Text size="xs" color="danger" accessibilityRole="alert" aria-live="polite">
             {error}

package/src/drawer.tsx

@@ -13,7 +13,11 @@ export interface DrawerProps {
   onOpenChange: (open: boolean) => void;
   /** Header title. A string renders as the standard title; a node renders as-is. */
   title?: ReactNode;
-  /** Panel width on non-small screens (number = px, or a `%` string). Full-width on small screens. */
+  /**
+   * Panel width on non-small screens (number = px, or a `%` string). Rarely set —
+   * the ONE standard width (600) fits record side-panels and lighter detail alike;
+   * override only for a genuinely exceptional panel. Full-width on small screens.
+   */
   width?: number | `${number}%`;
   /**
    * Record sequencing — step to the previous/next record WITHOUT closing the
@@ -43,8 +47,12 @@ export interface DrawerProps {
  * the scrim and the header close button both dismiss it. The panel goes
  * full-width on small screens.
  */
+/** The ONE standard drawer width — every drawer is this wide unless it passes an
+ *  explicit `width` for a genuinely exceptional case. */
+const DRAWER_WIDTH = 600;
+
 export function Drawer(props: DrawerProps) {
-  const { open, onOpenChange, title, width = 420, onPrev, onNext, position, children, testID } = props;
+  const { open, onOpenChange, title, width = DRAWER_WIDTH, onPrev, onNext, position, children, testID } = props;
   const loc = useLoticsLocale().drawer;
   const screenSize = useScreenSize();
   useOverlayScope(open);

package/src/form_date_picker.tsx

@@ -8,12 +8,13 @@ export interface FormDatePickerProps
 /** `FormField` wrapping a `DatePicker` — one labeled date field. (Omits `style`; for a grid cell
  *  use a bare `FormField style={half}` around `DatePicker`.) */
 export function FormDatePicker(props: FormDatePickerProps) {
-  const { label, description, optional, optionalLabel, error, ...datePickerProps } = props;
+  const { label, description, warning, optional, optionalLabel, error, ...datePickerProps } = props;
 
   return (
     <FormField
       label={label}
       description={description}
+      warning={warning}
       error={error}
       optional={optional}
       optionalLabel={optionalLabel}

package/src/form_field.tsx

@@ -8,6 +8,10 @@ export interface FormFieldProps {
   label: string;
   optional?: boolean;
   description?: string;
+  /** A consequence the user should WEIGH before acting — amber, one tone between
+   *  the muted `description` and the danger `error`. Same name/meaning on
+   *  `DetailRow`. */
+  warning?: string;
   error?: string;
   style?: StyleProp<ViewStyle>;
   /** Label shown next to `label` when `optional` is true. Defaults to the locale
@@ -18,12 +22,13 @@ export interface FormFieldProps {
 /**
  * Binding emitted by `FormField` to the single input it wraps. Descendants
  * that call `useFormField()` apply these props to the native input so screen
- * readers know the label, error, and description apply to it.
+ * readers know the label, description, warning, and error apply to it.
  */
 export interface FormFieldBinding {
   inputId: string;
   labelId: string;
   descriptionId: string | undefined;
+  warningId: string | undefined;
   errorId: string | undefined;
   invalid: boolean;
 }
@@ -33,7 +38,7 @@ const FormFieldContext = createContext<FormFieldBinding | null>(null);
 /**
  * Returns the association IDs set by the nearest enclosing `FormField`.
  * Inputs spread the returned props onto their underlying element so label,
- * description, and error are announced together. Returns `null` when the
+ * description, warning, and error are announced together. Returns `null` when the
  * input is used outside a `FormField` — callers should then provide their
  * own `accessibilityLabel`.
  */
@@ -42,18 +47,20 @@ export function useFormField(): FormFieldBinding | null {
 }
 
 export function FormField(props: FormFieldProps & { children: React.ReactNode }) {
-  const { label, description, error, optional, style, children, optionalLabel } = props;
+  const { label, description, warning, error, optional, style, children, optionalLabel } = props;
   const resolvedOptionalLabel = optionalLabel ?? useLoticsLocale().formField.optional;
 
   const inputId = useId();
   const labelId = `${inputId}-label`;
   const descriptionId = description ? `${inputId}-description` : undefined;
+  const warningId = warning ? `${inputId}-warning` : undefined;
   const errorId = error ? `${inputId}-error` : undefined;
 
   const binding: FormFieldBinding = {
     inputId,
     labelId,
     descriptionId,
+    warningId,
     errorId,
     invalid: !!error,
   };
@@ -86,6 +93,19 @@ export function FormField(props: FormFieldProps & { children: React.ReactNode })
         )}
         <Spacer size={8} />
         <View>{children}</View>
+        {warning && (
+          <>
+            <Spacer size={8} />
+            {/*
+              Below the control, above the error — the three tones read
+              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">
+              {warning}
+            </Text>
+          </>
+        )}
         {error && (
           <>
             <Spacer size={8} />

package/src/form_picker.tsx

@@ -5,12 +5,13 @@ import { Picker, PickerProps } from "./picker";
 export function FormPicker<T extends string>(
   props: PickerProps<T> & FormFieldProps,
 ) {
-  const { label, description, optional, optionalLabel, error, ...pickerProps } = props;
+  const { label, description, warning, optional, optionalLabel, error, ...pickerProps } = props;
 
   return (
     <FormField
       label={label}
       description={description}
+      warning={warning}
       error={error}
       optional={optional}
       optionalLabel={optionalLabel}

package/src/form_switch.tsx

@@ -7,10 +7,11 @@ import { Spacer } from "./spacer";
 
 export interface FormSwitchProps extends Omit<FormFieldProps, "optional">, SwitchProps {}
 
-/** A labeled on/off toggle — a `Switch` + clickable label + optional `description`/`error`. */
+/** A labeled on/off toggle — a `Switch` + clickable label + optional `description`/`warning`/`error`. */
 export function FormSwitch(props: FormSwitchProps) {
-  const { label, description, error, value, onChange } = props;
+  const { label, description, warning, error, value, onChange } = props;
   const labelId = useId();
+  const warningId = warning ? `${labelId}-warning` : undefined;
   const errorId = error ? `${labelId}-error` : undefined;
 
   return (
@@ -44,6 +45,19 @@ export function FormSwitch(props: FormSwitchProps) {
         </View>
       </View>
 
+      {!!warning && (
+        <>
+          <Spacer size={8} />
+          <Text
+            nativeID={warningId}
+            color="warning"
+            accessibilityRole="alert"
+            aria-live="polite"
+          >
+            {warning}
+          </Text>
+        </>
+      )}
       {!!error && (
         <>
           <Spacer size={8} />

package/src/form_text_input.tsx

@@ -4,13 +4,13 @@ import { TextInputField } from "./text_input_field";
 
 export interface FormTextInputProps extends Omit<FormFieldProps, "style">, TextInputProps {}
 
-/** `FormField` (label / description / error / optional) wrapping a `TextInputField` — one labeled
- *  text field. For a 2-col grid cell, prefer a bare `FormField style={half}` around the input. */
+/** `FormField` (label / description / warning / error / optional) wrapping a `TextInputField` — one
+ *  labeled text field. For a 2-col grid cell, prefer a bare `FormField style={half}` around the input. */
 export function FormTextInput(props: FormTextInputProps) {
-  const { label, description, optional, error, ...textInputProps } = props;
+  const { label, description, warning, optional, error, ...textInputProps } = props;
 
   return (
-    <FormField label={label} description={description} error={error} optional={optional}>
+    <FormField label={label} description={description} warning={warning} error={error} optional={optional}>
       <TextInputField {...textInputProps} />
     </FormField>
   );

package/src/inline_date_picker.tsx

@@ -9,7 +9,8 @@ import { DateField } from "./date_field";
 import { isoHasTime, resolveDateCommit } from "./date_picker_value";
 import { formatDate } from "./format_date";
 import { ActivityIndicator } from "./activity_indicator";
-import { type InlineEditBackground, InlineEditView } from "./inline_edit";
+import { type InlineEditVariant, InlineEditView } from "./inline_edit";
+import { type TextColor } from "./text_utils";
 import { useLoticsLocale } from "./locale";
 import { getInteractionModality } from "./interaction_modality";
 import { shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
@@ -34,8 +35,11 @@ export interface InlineDatePickerProps {
   locale?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
-  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  /** Form field (default) or grid cell — see `InlineEditVariant`. */
+  variant?: InlineEditVariant;
+  /** 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;
 }
 
 /**
@@ -54,7 +58,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 , background } = props;
+  const { value, onSave, onClear, format = "date", optionalTime, placeholder, locale, disabled, accessibilityLabel , variant, tone } = props;
   const locales = useLoticsLocale();
   const inlineLabels = locales.inline;
   const dateLabels = locales.datePicker;
@@ -228,6 +232,11 @@ 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;
 
   return (
     <View>
@@ -254,17 +263,18 @@ export function InlineDatePicker(props: InlineDatePickerProps) {
         ) : (
           <PopoverTrigger>
             <InlineEditView
-              background={background}
+              variant={variant}
+              tone={tone}
               display={display}
               placeholder={placeholder}
               disabled={disabled}
               active={open && !disabled}
               accessibilityLabel={accessibilityLabel}
               onFocus={handleViewFocus}
-              // A rest affordance (like the select's chevron): a calendar glyph marks
-              // the field as a tappable date control even when empty — no hover / pointer
-              // cursor needed, so it reads as interactive on touch.
-              trailing={trailing}
+              // A rest affordance (like the select's chevron): in a FORM a calendar glyph
+              // marks the field as a tappable date control even when empty; a grid CELL
+              // drops it (see restTrailing) to read value-first.
+              trailing={restTrailing}
             />
           </PopoverTrigger>
         )}

package/src/inline_edit.tsx

@@ -7,7 +7,7 @@ import { ActivityIndicator } from "./activity_indicator";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { colors } from "./colors";
 import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
-import { fontFamilyRegular, getInputTextStyle } from "./text_utils";
+import { fontFamilyRegular, getInputTextStyle, getTextColor, type TextColor } from "./text_utils";
 import { getInteractionModality } from "./interaction_modality";
 import { shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
 
@@ -85,12 +85,15 @@ 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";
+/** Which surface an inline editor lives on — the ONE axis that separates a FORM
+ *  field from a data-grid CELL:
+ *  - `"form"` (default): the zinc-50 chip at rest + a hover-BORDER. THE editability
+ *    affordance on surfaces that MIX editable and static values (a `DetailTable`).
+ *  - `"cell"`: transparent at rest + a background-tint WASH on hover (the same
+ *    `PressableHighlight` language as the row/cell it sits in). For DENSE,
+ *    uniformly-editable surfaces where every cell edits — a register/`DataGrid`
+ *    column, a task row — where the repeated chip + per-field border are noise. */
+export type InlineEditVariant = "form" | "cell";
 
 interface InlineEditFrameProps {
   editing: boolean;
@@ -112,8 +115,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;
+  /** Form field or grid cell — see {@link InlineEditVariant}. Default "form". */
+  variant?: InlineEditVariant;
   /** Right-aligned rest affordance shown in VIEW mode (e.g. a clock for a time
    *  field) — a hover-independent cue the field opens a picker. Omit for plain
    *  text/number inputs (typing IS the affordance). */
@@ -125,7 +128,9 @@ interface InlineEditViewProps {
    *  rendered as-is — e.g. a `MemberChip` / `OptionBadge` for a rich resting
    *  value. A node takes the flex slot; the trailing adornment still right-aligns. */
   display: string | ReactNode;
-  placeholder?: string;
+  /** Empty-state content. A string reads as muted placeholder text; a NODE (a dashed
+   *  avatar "add" ghost, a placeholder chip) renders as-is in the value slot. */
+  placeholder?: string | ReactNode;
   onPress?: () => void;
   disabled?: boolean;
   accessibilityLabel?: string;
@@ -141,8 +146,12 @@ interface InlineEditViewProps {
   onFocus?: () => void;
   /** Strike + mute the resting value (a completed/superseded item that stays editable). */
   struck?: boolean;
-  /** Resting surface — see {@link InlineEditBackground}. Default "tint". */
-  background?: InlineEditBackground;
+  /** Form field or grid cell — see {@link InlineEditVariant}. Default "form". */
+  variant?: InlineEditVariant;
+  /** Colours the resting VALUE by semantic state — an overdue date red, a soon-due
+   *  amber (the caller owns the rule). Applies only to a set, non-struck string value;
+   *  the placeholder + struck styles win. Default: the standard value ink. */
+  tone?: TextColor;
   ref?: Ref<View>;
 }
 
@@ -157,7 +166,8 @@ interface InlineEditViewProps {
  * 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, background = "tint", onFocus, ref } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, active, struck, variant = "form", tone, onFocus, ref } = props;
+  const isEmptyString = typeof display === "string" && display === "";
   // 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
@@ -175,14 +185,19 @@ export function InlineEditView(props: InlineEditViewProps) {
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
-      // 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, (background === "transparent" || disabled) && styles.viewTransparent, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && styles.viewHovered]}
+      // Hover language follows the variant: a `form` field reveals its BORDER
+      // (an input's edge); a `cell` field lives in a dense grid/row/task context,
+      // so it takes the background-tint WASH — the same `PressableHighlight`
+      // language as the cells beside it. Both suppressed while open (fill + ring lead).
+      style={(state) => [styles.view, (variant === "cell" || disabled) && styles.viewTransparent, CONTROL_TRANSITION, active && styles.viewActive, !active && state.hovered && !disabled && (variant === "cell" ? styles.viewHoveredWash : styles.viewHovered)]}
     >
-      {typeof display === "string" ? (
-        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null]}>
-          {display || placeholder || "—"}
+      {/* Empty string display → the placeholder (a node renders as-is, a string reads muted);
+          a node display renders as-is; a value string wears the value style (+ tone). */}
+      {isEmptyString && placeholder != null && typeof placeholder !== "string" ? (
+        <View style={styles.viewNode}>{placeholder}</View>
+      ) : typeof display === "string" ? (
+        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null, tone && display && !struck ? { color: getTextColor(tone) } : null]}>
+          {display || (typeof placeholder === "string" ? placeholder : "") || "—"}
         </Text>
       ) : (
         <View style={styles.viewNode}>{display}</View>
@@ -217,7 +232,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     disabled,
     accessibilityLabel,
     struck,
-    background,
+    variant,
     affordance,
   } = props;
 
@@ -266,7 +281,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     return (
       <InlineEditView
         ref={viewRef}
-        background={background}
+        variant={variant}
         display={display}
         placeholder={placeholder}
         onPress={onBegin}
@@ -357,11 +372,15 @@ const styles = StyleSheet.create({
     backgroundColor: colors.white,
     boxShadow: FOCUS_RING,
   },
-  // Hover (not open): reveal the kit hover-border on the chip — the input-family
-  // affordance.
+  // Hover (not open): a tint FORM field reveals the kit hover-border (input family);
+  // a transparent CELL/dense field takes the background-tint wash (zinc-100), the
+  // same language as the cells beside it.
   viewHovered: {
     borderColor: HOVER_BORDER,
   },
+  viewHoveredWash: {
+    backgroundColor: colors.zinc[100],
+  },
   placeholder: { color: colors.zinc[400] },
   struck: { textDecorationLine: "line-through", color: colors.zinc[500] },
   viewNode: { flex: 1, minWidth: 0 },

package/src/inline_member_select.tsx

@@ -1,7 +1,11 @@
 import { useCallback, useMemo } from "react";
-import type { InlineEditBackground } from "./inline_edit";
+import { View, StyleSheet } from "react-native";
+import type { InlineEditVariant } from "./inline_edit";
 import { InlineSelect } from "./inline_select";
 import { MemberChip } from "./member_chip";
+import { Avatar } from "./avatar";
+import { Icon } from "./icon";
+import { colors } from "./colors";
 import type { MemberSelectMember } from "./member_select";
 import type { PickerOption } from "./picker";
 
@@ -23,19 +27,25 @@ interface InlineMemberSelectProps {
   placeholder?: string;
   disabled?: boolean;
   accessibilityLabel?: string;
-  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
-  background?: InlineEditBackground;
+  /** Form field (default) or grid cell — see {@link InlineEditVariant}. */
+  variant?: InlineEditVariant;
   /** Show an in-menu search box to filter the roster; default false. */
   searchable?: boolean;
+  /** Resting display = the bare AVATAR only (no name), a dashed "add" ghost when
+   *  empty — for a DENSE row/cell where the name won't fit (a task-row assignee).
+   *  The dropdown rows still show avatar + name. Default false (avatar + name). */
+  avatarOnly?: boolean;
 }
 
+const AVATAR_ONLY_SIZE = 24;
+
 /**
  * Edit a `select_member` field in place: the assigned member shows as a
- * {@link MemberChip} (avatar + name) at the kit's control height; clicking it
- * floats a member picker (every option a `MemberChip`) and picking commits — no
- * layout shift. The inline-edit twin of {@link MemberSelect} (use that in a
- * form); built on {@link InlineSelect}. PURE: pass the candidate `members` (an
- * app feeds `useMembers`); this fetches nothing.
+ * {@link MemberChip} (avatar + name) — or the bare avatar with `avatarOnly` for a
+ * dense cell — at the kit's control height; clicking floats a member picker (every
+ * option a `MemberChip`) and picking commits, no layout shift. The inline-edit twin
+ * of {@link MemberSelect} (use that in a form); built on {@link InlineSelect}. PURE:
+ * pass the candidate `members` (an app feeds `useMembers`); this fetches nothing.
  *
  * ```tsx
  * const { members } = useMembers();
@@ -43,7 +53,7 @@ interface InlineMemberSelectProps {
  * ```
  */
 export function InlineMemberSelect(props: InlineMemberSelectProps) {
-  const { members, ...inline } = props;
+  const { members, avatarOnly, placeholder, ...inline } = props;
 
   const byId = useMemo(() => new Map(members.map((m) => [m.id, m])), [members]);
   const options = useMemo<PickerOption<string>[]>(
@@ -60,12 +70,35 @@ export function InlineMemberSelect(props: InlineMemberSelectProps) {
     [byId],
   );
 
+  const renderAvatar = useCallback(
+    (option: PickerOption<string>) => {
+      const member = byId.get(option.value);
+      if (!member) return null;
+      return <Avatar size={AVATAR_ONLY_SIZE} name={member.name || member.email || member.id} source={member.image ? { uri: member.image } : undefined} announce />;
+    },
+    [byId],
+  );
+
   return (
     <InlineSelect<string>
       options={options}
       renderOptionContent={renderMember}
-      renderSelected={renderMember}
+      renderSelected={avatarOnly ? renderAvatar : renderMember}
+      placeholder={avatarOnly ? <View style={styles.ghost}><Icon name="plus" size={13} color={colors.zinc[400]} /></View> : placeholder}
       {...inline}
     />
   );
 }
+
+const styles = StyleSheet.create({
+  ghost: {
+    width: AVATAR_ONLY_SIZE,
+    height: AVATAR_ONLY_SIZE,
+    borderRadius: AVATAR_ONLY_SIZE / 2,
+    borderWidth: 1,
+    borderStyle: "dashed",
+    borderColor: colors.zinc[300],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});