@lotics/ui 22.2.0 → 23.0.0

package/src/inline_edit.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, type ReactNode, type Ref } from "react";
-import { View, StyleSheet, type GestureResponderEvent, type TextStyle } from "react-native";
+import { Pressable, View, StyleSheet, type GestureResponderEvent, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
 import { Text } from "./text";
 import { IconButton } from "./icon_button";
 import { useLoticsLocale } from "./locale";
@@ -118,15 +118,25 @@ export function useInlineEditFocusRestore(editing: boolean, restore: () => void)
   }, [editing, restore]);
 }
 
-/** 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";
+/**
+ * How much of the field's frame shows AT REST — an axis of WEIGHT, not of use.
+ *
+ * - `"framed"` (default): the pill surface always visible — white, 1px border.
+ *   Required wherever editable and static values MIX (a record's `DetailTable`),
+ *   because there the frame is the only thing saying which values you can change.
+ * - `"bare"`: nothing at rest; the same border fades in on hover. For a surface
+ *   where EVERY value is editable — a register/`DataGrid` column, a task row —
+ *   the per-field frame states what the whole surface already promises, and
+ *   repeated down a column it draws the grid a second time.
+ *
+ * Open is identical either way (the 2px ring). HOVER is not, and deliberately:
+ * hover must be a CHANGE you can see, so a `bare` field has its border arrive out
+ * of nothing, while a `framed` one — already bordered — deepens that border AND
+ * tints, since zinc-200 → zinc-400 on a 1px line is too quiet on its own.
+ *
+ * Either way this changes what a field looks like, never what it does.
+ */
+export type InlineEditVariant = "framed" | "bare";
 
 interface InlineEditFrameProps {
   editing: boolean;
@@ -148,12 +158,134 @@ interface InlineEditFrameProps {
   accessibilityLabel?: string;
   /** Strike + mute the resting value (a completed item that stays editable). */
   struck?: boolean;
-  /** Form field or grid cell — see {@link InlineEditVariant}. Default "form". */
+  /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   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). */
   affordance?: ReactNode;
+  /** Verbs on the field's surface — see `InlineEditView.actions`. Rendered in BOTH
+   *  modes (inside the chip at rest, beside the input while editing) so the field
+   *  never changes width on focus or on commit. Pass it UNCONDITIONALLY and
+   *  `disabled` the verb when it has nothing to act on: a slot that appears once
+   *  the value is non-empty is the same layout shift by another route. */
+  actions?: ReactNode;
+}
+
+/**
+ * The field's VALUE REGION — what a reader sees where the value is, in the one
+ * form both modes agree on.
+ *
+ * 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). Shared so a field that swaps to an input and back cannot change how
+ * its resting value is drawn on the way through.
+ */
+function fieldContent(o: {
+  display: string | ReactNode;
+  placeholder?: string | ReactNode;
+  struck?: boolean;
+  tone?: TextColor;
+  trailing?: ReactNode;
+}) {
+  const { display, placeholder, struck, tone, trailing } = o;
+  const isEmptyString = typeof display === "string" && display === "";
+  return (
+    <>
+      {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>
+      )}
+      {trailing != null ? trailing : null}
+    </>
+  );
+}
+
+/**
+ * THE field's resting/hover/open styling, in ONE place.
+ *
+ * It is a function rather than four style arrays because both modes need the
+ * SAME answer: a field that hovers one way at rest and another way while editing
+ * flashes as the two disagree — which is exactly what a hand-assembled second
+ * copy did (it painted the border but dropped the tint, so clicking into a
+ * framed field made its hover fill vanish for the length of the swap).
+ *
+ * `variant` decides what hover has left to SAY: a `bare` field has its border
+ * ARRIVE (loud on its own), a `framed` field already has one, so it takes the
+ * tint as well.
+ */
+function fieldSurface(o: { variant: InlineEditVariant; disabled?: boolean; active?: boolean; editing?: boolean }) {
+  return (hovered: boolean): StyleProp<ViewStyle>[] => [
+    styles.view,
+    (o.variant === "bare" || o.disabled) && styles.viewBare,
+    CONTROL_TRANSITION,
+    o.active && styles.viewActive,
+    !o.active && hovered && !o.disabled && (o.variant === "bare" ? styles.viewHovered : styles.viewHoveredFramed),
+    // While an input is mounted inside, it brings its own height — the surface
+    // must not add its resting vertical padding on top.
+    o.editing && styles.editHost,
+  ];
+}
+
+/**
+ * THE FIELD SURFACE — the one implementation of "a bordered box holding a
+ * control and, optionally, the verbs that act on its value".
+ *
+ * It exists because that box used to be assembled by hand in four places (the
+ * resting view with and without verbs, the editing frame with and without), and
+ * the copies drifted: one drew a border inside a border, one added its resting
+ * padding to an input that already had a height, one killed the focus ring.
+ * Every one of those was a call site re-deriving the same anatomy.
+ *
+ * The anatomy it owns, once:
+ * - the surface + its `variant` / hover / open / disabled states;
+ * - HOVER TRACKED HERE, on the box, not on the control inside it —
+ *   react-native-web hands a parent's hover to the innermost pressable, so a
+ *   control-tracked border drops out the moment the pointer crosses a verb;
+ * - FOCUS-WITHIN, so the ring paints on the whole field rather than on the text
+ *   region inside it: React bubbles focus, so the box hears the control it
+ *   contains, and the box is what a reader perceives as "the field";
+ * - the verbs as SIBLINGS of the control, never nested in it (a button must not
+ *   contain a button), on the surface's own right edge.
+ *
+ * The CONTROL it wraps must draw no surface of its own — that is what
+ * `seamless` means on `TextInputField` / `NumberInput`. One box, one owner.
+ */
+function InlineFieldShell(props: {
+  surface: (hovered: boolean) => StyleProp<ViewStyle>[];
+  actions: ReactNode;
+  /** The outer box, for a caller that anchors an overlay to the FIELD (a
+   *  select's popover inherits this width — the control inside is narrower). */
+  anchorRef?: Ref<View>;
+  /** Set while the control inside holds focus; the ring paints on the box. */
+  focusable?: boolean;
+  children: ReactNode;
+}) {
+  const { surface, actions, anchorRef, focusable = true, children } = props;
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  // RN's types declare neither; react-native-web forwards both to the DOM node
+  // (the same boundary cast `PressableRow` uses for its own hover).
+  const domProps = {
+    onMouseEnter: () => setHovered(true),
+    onMouseLeave: () => setHovered(false),
+    ...(focusable ? { onFocus: () => setFocused(true), onBlur: () => setFocused(false) } : {}),
+  } as object;
+  return (
+    <View
+      ref={anchorRef}
+      style={[...surface(hovered), styles.shell, focused && styles.shellFocused]}
+      {...domProps}
+    >
+      <View style={styles.shellControl}>{children}</View>
+      {actions}
+    </View>
+  );
 }
 
 interface InlineEditViewProps {
@@ -167,8 +299,34 @@ interface InlineEditViewProps {
   onPress?: () => void;
   disabled?: boolean;
   accessibilityLabel?: string;
-  /** Right-aligned adornment — e.g. a chevron for a select, a spinner while saving. */
+  /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
+  variant?: InlineEditVariant;
+  /**
+   * A handle on the FIELD's outer box, for a caller that anchors an overlay to
+   * it — a select's popover inherits the trigger's width, and with `actions` the
+   * control inside the field is narrower than the field, so anchoring to `ref`
+   * would open a dropdown too small for the row it belongs to.
+   *
+   * Distinct from `ref` on purpose: `ref` means "the focusable control" (the
+   * thing `.focus()` restores focus to), this means "the box you see". They are
+   * the same element only when the field carries no verbs.
+   */
+  anchorRef?: Ref<View>;
+  /** Right-aligned adornment — e.g. a chevron for a select, a spinner while saving.
+   *  DECORATION only: it renders inside the press target, so it may never hold a
+   *  control (a button must not contain a button). A control goes in `actions`. */
   trailing?: ReactNode;
+  /** Verbs that live ON the field's surface — an `InlineButton` Copy, Open… Use
+   *  this when the act is ABOUT THE VALUE, so it travels with what it acts on
+   *  instead of pairing across the row to a trailing column.
+   *
+   *  Passing it changes the ANATOMY, because it has to: the surface moves to a
+   *  wrapper and the press target becomes the value region beside these verbs, so
+   *  each keeps its own press and neither nests in the other. The focus ring then
+   *  rings the value region — the element that actually took focus — rather than
+   *  the whole field. Everything else (hover on the full surface, the ref, the
+   *  active/open edge) is unchanged. */
+  actions?: ReactNode;
   /** True while the field's popover (select/date) is open: wears the 2px active
    *  ring so a mouse-opened trigger reads like a focused input (no `:focus-visible`). */
   active?: boolean;
@@ -179,8 +337,6 @@ interface InlineEditViewProps {
   onFocus?: () => void;
   /** Strike + mute the resting value (a completed/superseded item that stays editable). */
   struck?: boolean;
-  /** 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. */
@@ -189,18 +345,18 @@ interface InlineEditViewProps {
 }
 
 /**
- * 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 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`).
+ * The view-mode box of an inline-editable field: the value as plain text on the
+ * shared control surface — white with a 1px border when `framed`, frameless
+ * until hover when `bare`. It hovers via its BORDER, never a grey wash, and the
+ * cursor stays the default arrow: the surface itself is the affordance, and a
+ * pointer would read as a button. The border is present at every state (merely
+ * transparent when `bare` rests), 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, variant = "form", tone, onFocus, ref } = props;
-  const isEmptyString = typeof display === "string" && display === "";
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef } = 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
@@ -209,33 +365,51 @@ export function InlineEditView(props: InlineEditViewProps) {
         onPress();
       }
     : undefined;
+  const content = fieldContent({ display, placeholder, struck, tone, trailing });
+  const surface = fieldSurface({ variant, disabled, active });
+
+  // WITH VERBS: the shell owns the surface, the pressable is just the value
+  // region inside it. `ref` stays on the PRESSABLE — it means "the focusable
+  // control", which `InlineEditFrame` calls `.focus()` on to restore focus after
+  // a keyboard close; `anchorRef` is the separate handle for the outer box.
+  if (actions != null) {
+    return (
+      <InlineFieldShell surface={surface} actions={actions} anchorRef={anchorRef}>
+        {/* A PLAIN Pressable, not `FocusRingPressable`: the SHELL paints the ring
+            (focus-within), and a control that rang as well would draw a second
+            2px box tight around the value — which reads as the value jumping the
+            moment the field takes focus. The ring has exactly one owner, for the
+            same reason the surface and the text inset each do. */}
+        <Pressable
+          ref={ref}
+          disabled={disabled}
+          onPress={handlePress}
+          onFocus={onFocus}
+          accessibilityRole="button"
+          accessibilityLabel={accessibilityLabel}
+          style={styles.viewInner}
+        >
+          {content}
+        </Pressable>
+      </InlineFieldShell>
+    );
+  }
+
   return (
     <FocusRingPressable
-      ref={ref}
+      // No verbs: the box and the control are the same element, so one ref
+      // serves both jobs. `anchorRef` wins when both are passed — a caller that
+      // asked for the box gets the box.
+      ref={anchorRef ?? ref}
       disabled={disabled}
       onPress={handlePress}
       onFocus={onFocus}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
-      // 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)]}
+      style={(state) => surface(state.hovered ?? false)}
     >
-      {/* 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>
-      )}
-      {trailing != null ? trailing : null}
+      {content}
     </FocusRingPressable>
   );
 }
@@ -267,6 +441,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     struck,
     variant,
     affordance,
+    actions,
   } = props;
 
   const viewRef = useRef<View>(null);
@@ -292,7 +467,9 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     }, []),
   );
 
-  if (!editing) {
+  // WITHOUT verbs the two modes are genuinely different elements (the resting
+  // button, then the input), and each owns its own surface — unchanged.
+  if (actions == null && !editing) {
     return (
       <InlineEditView
         ref={viewRef}
@@ -312,6 +489,46 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
   return (
     <View>
       <View style={styles.editRow}>
+        {/* ONE SHELL, ACROSS BOTH MODES — not "the same shape rebuilt", the same
+            ELEMENT. Only its contents swap.
+
+            Rebuilding it per mode looked equivalent and was not: the new shell
+            mounted under a stationary pointer, which fires no `mouseenter`, so it
+            came up UN-hovered and the hover styling dropped for the length of the
+            swap — the flash. Anything the shell tracks would have been lost the
+            same way. Persisting it also means the verbs are not remounted, so
+            they cannot move, which is the contract this whole path exists for. */}
+        {actions != null ? (
+          <View style={styles.editControl}>
+            <InlineFieldShell
+              surface={fieldSurface({ variant: variant ?? "framed", disabled, editing })}
+              actions={actions}
+            >
+              {editing ? (
+                <>
+                  {children}
+                  {saving ? (
+                    <View style={styles.savingOverlay} pointerEvents="none">
+                      <ActivityIndicator size={16} color={colors.zinc[400]} />
+                    </View>
+                  ) : null}
+                </>
+              ) : (
+                <Pressable
+                  ref={viewRef}
+                  disabled={disabled}
+                  onPress={onBegin}
+                  onFocus={handleViewFocus}
+                  accessibilityRole="button"
+                  accessibilityLabel={accessibilityLabel}
+                  style={styles.viewInner}
+                >
+                  {fieldContent({ display, placeholder, struck, trailing: affordance })}
+                </Pressable>
+              )}
+            </InlineFieldShell>
+          </View>
+        ) : (
         <View style={styles.editControl}>
           {children}
           {/* The saving spinner floats inside the input's right edge — it must
@@ -322,6 +539,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
             </View>
           ) : null}
         </View>
+        )}
         {controls === "buttons" ? (
           <View style={styles.buttons}>
             <IconButton icon="check" color="primary" size="sm" tooltip={labels.save} onPress={onCommit} disabled={saving} />
@@ -353,16 +571,17 @@ 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).
+  // At REST an editor wears THE pill surface — white, 1px border — the same one
+  // `Chip`, `ChipGroup` and a secondary `Button` wear, so every control a record
+  // row can hold reads as one family. It is still THE editability affordance: a
+  // read-only `InlineStatic` stays flat and borderless, and a bordered box beside
+  // bare text is a plainer signal than a tint ever was.
   view: {
     minHeight: INLINE_CONTROL_HEIGHT,
     borderRadius: CONTROL_RADIUS,
     borderWidth: 1,
-    borderColor: "transparent",
-    backgroundColor: colors.zinc[50],
+    borderColor: colors.border,
+    backgroundColor: colors.white,
     paddingHorizontal: 8,
     // Vertical padding matters only when the display content is TALLER than
     // one line (a rich select showing title + description at rest): minHeight
@@ -377,30 +596,50 @@ const styles = StyleSheet.create({
     // 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; the chip clears to
-  // the input's white surface.
+  // Nothing at rest — the frame arrives on hover. Also how a DISABLED field
+  // rests, whatever its variant: an inert value must not promise a press.
+  viewBare: { backgroundColor: "transparent", borderColor: "transparent" },
+  // The shell's own inset: the right edge tightens to 4 so an `InlineButton` sits
+  // on the surface's edge with the same air a `Chip`'s dismiss gets.
+  shell: { paddingRight: 4 },
+  // Focus paints on the FIELD, not on the value region inside it.
+  shellFocused: { borderColor: colors.border, boxShadow: FOCUS_RING },
+  // The control's slot: it takes the slack so the verbs keep the right edge.
+  shellControl: { flex: 1, minWidth: 0, alignSelf: "stretch", justifyContent: "center", position: "relative" },
+  // The value region inside a verb-hosting resting field: carries the row layout
+  // the surface would otherwise own. `userSelect` here rather than via the
+  // `FocusRingPressable` prop — a drag across a value must edit, not select text.
+  viewInner: { flex: 1, minWidth: 0, alignSelf: "stretch", flexDirection: "row", alignItems: "center", gap: 6, ...({ userSelect: "none", cursor: "auto" } as ViewStyle) },
+  // Open (popover showing): the resting surface plus the 2px active ring — the
+  // one thing that separates open from at-rest, and identical to a focused input.
   viewActive: {
     borderColor: colors.border,
     backgroundColor: colors.white,
     boxShadow: FOCUS_RING,
   },
-  // 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.
+  // Hover on a BARE field: the border arrives out of nothing — the whole signal.
   viewHovered: {
     borderColor: HOVER_BORDER,
   },
-  viewHoveredWash: {
-    backgroundColor: colors.zinc[100],
+  // Hover on a FRAMED field: the border deepens AND the surface tints. The border
+  // alone would be zinc-200 → zinc-400, a shade shift on a 1px line — too quiet to
+  // mark the field you are about to act on. The tint is the old resting chip,
+  // promoted to the state it always read as: "this one".
+  //
+  // It is deliberately NOT applied to `bare`: those live inside rows that wash on
+  // hover themselves, and a cell lighter than the row under it reads backwards.
+  viewHoveredFramed: {
+    borderColor: HOVER_BORDER,
+    backgroundColor: colors.zinc[50],
   },
   placeholder: { color: colors.zinc[400] },
   struck: { textDecorationLine: "line-through", color: colors.zinc[500] },
   viewNode: { flex: 1, minWidth: 0 },
   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
+  // vertical padding on top — that was a 12px jump the moment the field focused.
+  editHost: { paddingVertical: 0 },
   savingOverlay: { position: "absolute", right: 8, top: 0, bottom: 0, justifyContent: "center" },
   buttons: { flexDirection: "row", gap: 6, height: INLINE_CONTROL_HEIGHT, alignItems: "center" },
   error: { marginTop: 4 },

package/src/inline_member_select.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, type ReactNode } from "react";
 import { View, StyleSheet } from "react-native";
 import type { InlineEditVariant } from "./inline_edit";
 import { InlineSelect } from "./inline_select";
@@ -26,9 +26,14 @@ interface InlineMemberSelectProps {
   onClear?: () => void | Promise<void>;
   placeholder?: string;
   disabled?: boolean;
-  accessibilityLabel?: string;
-  /** Form field (default) or grid cell — see {@link 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;
   /** 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

package/src/inline_number_input.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, type ReactNode } from "react";
 import type { KeyboardEvent } from "react";
 import { NumberInput } from "./number_input";
 import { type InlineEditVariant, InlineEditFrame, useInlineEdit, type InlineEditControls } from "./inline_edit";
@@ -14,9 +14,13 @@ export interface InlineNumberInputProps {
   max?: number;
   controls?: InlineEditControls;
   disabled?: boolean;
-  accessibilityLabel?: string;
-  /** Resting surface — "tint" (default, the zinc-50 chip) or "transparent". */
+  /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
+  /** Verbs on the field's surface — see `InlineEditView.actions`. Rendered in
+   *  BOTH modes so the field never changes width on focus; pass it
+   *  UNCONDITIONALLY and `disabled` the verb when it has nothing to act on. */
+  actions?: ReactNode;
+  accessibilityLabel?: string;
 }
 
 /**
@@ -25,7 +29,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 , variant } = props;
+  const { value, onSave, format, placeholder, min, max, controls = "blur", disabled, accessibilityLabel, variant, actions } = props;
   const edit = useInlineEdit<number | null>({ value, onSave });
 
   const onKeyDown = useCallback(
@@ -46,6 +50,7 @@ export function InlineNumberInput(props: InlineNumberInputProps) {
   return (
     <InlineEditFrame
       variant={variant}
+      actions={actions}
       editing={edit.editing}
       display={display}
       placeholder={placeholder}
@@ -67,6 +72,8 @@ export function InlineNumberInput(props: InlineNumberInputProps) {
         min={min}
         max={max}
         accessibilityLabel={accessibilityLabel}
+        // With verbs on the field, the FRAME owns the surface and the ring.
+        seamless={actions != null}
       />
     </InlineEditFrame>
   );

package/src/inline_select.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from "react";
+import { useRef, useState, type ReactNode } from "react";
 import { View, StyleSheet } from "react-native";
 import { Icon } from "./icon";
 import { Text } from "./text";
@@ -24,9 +24,14 @@ interface InlineSelectBaseProps<T extends string, D = unknown> {
    *  as-is (e.g. an avatar "add" ghost for an `avatarOnly` member cell). */
   placeholder?: string | ReactNode;
   disabled?: boolean;
-  accessibilityLabel?: string;
-  /** Form field (default) or grid cell — see {@link 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;
   /** Show an in-menu search box; default false. */
   searchable?: boolean;
   /** Offer a "create" row when the query matches no option — picking it commits the
@@ -67,30 +72,36 @@ function InlineSelectShell(props: {
   display: string | ReactNode;
   placeholder?: string | ReactNode;
   accessibilityLabel?: string;
-  variant?: InlineEditVariant;
   saving: boolean;
   error: string | null;
   children: ReactNode;
+  variant?: InlineEditVariant;
+  actions?: ReactNode;
 }) {
+  // The popover INHERITS THE TRIGGER'S WIDTH, so it has to measure the FIELD —
+  // with verbs on the surface the value region inside it is narrower, and
+  // anchoring there would open a list too small for the row it belongs to.
+  const anchorRef = useRef<View>(null);
   return (
     <View>
-      <Popover open={props.open && !props.disabled} onOpenChange={props.onOpenChange} side="bottom" align="start" inheritTriggerWidth>
+      <Popover open={props.open && !props.disabled} onOpenChange={props.onOpenChange} triggerRef={anchorRef} side="bottom" align="start" inheritTriggerWidth>
         <PopoverTrigger>
           <InlineEditView
+            anchorRef={anchorRef}
+            actions={props.actions}
             variant={props.variant}
             display={props.display}
             placeholder={props.placeholder}
             disabled={props.disabled}
             active={props.open && !props.disabled}
             accessibilityLabel={props.accessibilityLabel}
-            // A `cell` reads value-first: it drops the resting chevron (the column
-            // header + the uniformly-editable grid are the affordance), like the date
-            // cell drops its calendar glyph. A `form` field keeps the chevron. The
-            // saving spinner shows in both.
+            // The resting chevron says "this opens a list" — the same promise on
+            // every surface, now that a field looks the same everywhere. The
+            // saving spinner replaces it while a write is in flight.
             trailing={
               props.saving ? (
                 <ActivityIndicator size={16} color={colors.zinc[400]} />
-              ) : props.variant === "cell" ? undefined : (
+              ) : (
                 <Icon name="chevron-down" size={18} color={colors.zinc[400]} />
               )
             }
@@ -108,7 +119,7 @@ function InlineSelectShell(props: {
 }
 
 export function InlineSelect<T extends string, D = unknown>(props: InlineSelectProps<T, D>) {
-  const { options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, variant, searchable = false, allowCustom = false, customOptionLabel } = props;
+  const { options, renderOptionContent, renderSelected, placeholder, disabled, accessibilityLabel, searchable = false, allowCustom = false, customOptionLabel, variant, actions } = props;
   const labels = useLoticsLocale().inline;
   const [open, setOpen] = useState(false);
   const [saving, setSaving] = useState(false);
@@ -151,13 +162,14 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
     };
     return (
       <InlineSelectShell
+        variant={variant}
+        actions={actions}
         open={open}
         onOpenChange={onOpenChange}
         disabled={disabled}
         display={selected.length > 0 ? <View style={styles.tags}>{selected.map((o) => <View key={o.value}>{chip(o)}</View>)}</View> : ""}
         placeholder={placeholder}
         accessibilityLabel={accessibilityLabel}
-        variant={variant}
         saving={saving}
         error={error}
       >
@@ -196,13 +208,14 @@ export function InlineSelect<T extends string, D = unknown>(props: InlineSelectP
   };
   return (
     <InlineSelectShell
+      variant={variant}
+      actions={actions}
       open={open}
       onOpenChange={setOpen}
       disabled={disabled}
       display={selected ? (renderSelected ? renderSelected(selected) : renderOptionContent ? renderOptionContent(selected) : (selected.label ?? "")) : ""}
       placeholder={placeholder}
       accessibilityLabel={accessibilityLabel}
-      variant={variant}
       saving={saving}
       error={error}
     >