@lotics/ui 43.2.0 → 43.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "43.2.0",
+  "version": "43.3.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/inline_edit.tsx

@@ -259,6 +259,11 @@ function fieldSurface(o: { variant: InlineEditVariant; disabled?: boolean; activ
   return (hovered: boolean): StyleProp<ViewStyle>[] => [
     styles.view,
     (o.variant === "bare" || o.disabled) && styles.viewBare,
+    // Keyed on the VARIANT alone, never on `disabled` — a disabled `framed`
+    // field shares the line above (it must not promise a press) but stays in its
+    // column with the enabled fields beside it. Bleeding that one would pull a
+    // read-only value 8px out of a form nobody could see was misaligned.
+    o.variant === "bare" && styles.viewBareBleed,
     CONTROL_TRANSITION,
     o.active && styles.viewActive,
     !o.active && hovered && !o.disabled && (o.variant === "bare" ? styles.viewHovered : styles.viewHoveredFramed),
@@ -557,7 +562,15 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
   }
 
   return (
-    <View>
+    // THE SAME BLEED AS THE RESTING VIEW, on the element that is outermost HERE.
+    // A bare field must sit on its column in BOTH modes or it jumps 8px the
+    // moment you click it — which is how the half-done version of this read: the
+    // resting text aligned, and the input under the caret did not.
+    //
+    // Applied only when there are no verbs, because with them the shell below IS
+    // the outermost element and takes the bleed from `fieldSurface`. Applying it
+    // in both places would bleed 16.
+    <View style={actions == null && variant === "bare" ? styles.viewBareBleed : null}>
       <View style={styles.editRow}>
         {/* ONE SHELL, ACROSS BOTH MODES — not "the same shape rebuilt", the same
             ELEMENT. Only its contents swap.
@@ -673,6 +686,26 @@ const styles = StyleSheet.create({
   // 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" },
+  // A bare field at rest looks like TEXT, so it aligns like text: its glyphs sit
+  // on the column, not its invisible box. The frame's 8px inset is real padding
+  // the eye cannot see at rest, and it put every bare value 8px right of the
+  // header naming it — measurably, in the grid AND on a record surface.
+  //
+  // The inset is pulled OUT rather than removed, because it is doing a second
+  // job: it is the air inside the border that fades in on hover. Setting it to 0
+  // would align the text and then draw the hover frame hard against the first
+  // glyph. Bleeding keeps both — text on the column, air inside the frame — and,
+  // critically, hover moves NOTHING, which zeroing padding at hover-time would
+  // not have managed.
+  //
+  // LEFT only. A matching right bleed looks symmetrical in the style sheet and is
+  // pure overhang on screen: it aligns nothing (the text is left-aligned) and
+  // pushes the frame 8px past the edge every neighbour stops at, which is
+  // visible the moment the border paints — a focused field ending 8px right of
+  // the row's own menu. With `marginLeft` alone the box grows leftward, its right
+  // edge stays on the container, and `paddingRight` still holds the text off the
+  // border.
+  viewBareBleed: { marginLeft: -8 },
   // 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 },

package/src/inline_text_input.tsx

@@ -23,7 +23,8 @@ export interface InlineTextInputProps {
   /**
    * Line budget for a value a reader has to read WHOLE rather than recognise —
    * a payment term, an address, a clause. Default 1 (the single-line field).
-   * Above 1 the field is that many lines tall and wraps, in both states. Enter
+   * Above 1 the field is that many lines tall and wraps, in both states, and is
+   * what decides that Enter inserts a newline rather than committing. Enter
    * then inserts a newline; the field commits on blur (or the ✓ in "buttons").
    *
    * With `autoGrow` this becomes the MINIMUM rather than the whole budget.
@@ -78,16 +79,30 @@ export function InlineTextInput(props: InlineTextInputProps) {
   const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant, actions, numberOfLines, autoGrow } = props;
   // Growing implies wrapping: a field that grows on one line has nowhere to go.
   const multiline = (numberOfLines ?? 1) > 1 || autoGrow === true;
+  // WHAT ENTER MEANS IS DECLARED BY `numberOfLines`, NOT BY WRAPPING. They were
+  // one flag, so `autoGrow` silently turned Enter into a newline — a keyboard
+  // change nobody can predict from a prop that says "fit the value".
+  //
+  // A field declared ONE line tall holds a single-line value that happens to
+  // wrap when it runs long (a title, a summary), and Enter is how you finish it.
+  // Declaring 2+ lines is declaring PROSE, where Enter is a paragraph break and
+  // blur commits. The two real callers split exactly there: a record entry's
+  // one-line gist (`numberOfLines={1} autoGrow`) against a three-line reserve.
+  const enterCommits = (numberOfLines ?? 1) <= 1;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
     (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
       const key = e.nativeEvent.key;
       if (key === "Escape") edit.cancel();
-      // On a multiline field Enter is a NEWLINE; the value commits on blur.
-      else if (key === "Enter" && !multiline) void edit.commit();
+      else if (key === "Enter" && enterCommits) {
+        // On a WRAPPING field the browser would insert the newline as well, so
+        // committing without this leaves a stray line break in the saved value.
+        e.preventDefault();
+        void edit.commit();
+      }
     },
-    [edit, multiline],
+    [edit, enterCommits],
   );
 
   // Commit on blur (the ergonomic default for moving through a form). In

package/src/timeline.tsx

@@ -22,10 +22,15 @@ export interface TimelineItem {
    * for one entry, and the disc, which centres on the label row, ended up 80px
    * below the first line it was meant to sit beside.
    *
-   * So a label that can run long belongs in `details` as well, in full. The
-   * clamp is the contract rather than a prop: a prop would let the next caller
-   * re-open the same hole, and the whole point is that the row keeps its beat
-   * whatever the caller hands it.
+   * The clamp holds while the row is COLLAPSED and lifts when it opens, so a
+   * long label is readable in full without being copied anywhere. **Never repeat
+   * it in `details`** — that was the old advice here, and it produced the same
+   * sentence twice, cut off above and whole below, on every caller that followed
+   * it. `details` carries what the label does not.
+   *
+   * The clamp is the contract rather than a prop: a prop would let the next
+   * caller re-open the same hole, and the whole point is that the row keeps its
+   * beat whatever the caller hands it.
    */
   label: string;
   /**
@@ -106,7 +111,13 @@ export function Timeline(props: TimelineProps) {
           <View style={styles.row}>
             <Text
               size="sm"
-              numberOfLines={2}
+              // Clamped while COLLAPSED only. Expanding a row is a request to
+              // see more of what is there, and a label that stays truncated
+              // through it leaves the caller one way to make its own label
+              // readable: repeat it inside `details`. Then the reader meets the
+              // same sentence twice, once cut off and once whole, which reads as
+              // a rendering bug rather than as disclosure.
+              numberOfLines={expanded ? undefined : 2}
               // The same ink an unfilled field draws (`Not set`, `No date set`),
               // so an unwritten row reads as unwritten everywhere it appears.
               color={item.placeholder ? "zinc-400" : undefined}