@lotics/ui 6.2.0 → 6.4.0

package/AGENTS.md

@@ -205,6 +205,10 @@ builds the new record and attaches it; existing matches attach directly. The cre
 BELOW matches by default (the keyboard highlight lands on the first MATCH, so Enter on a partial
 picks it, never a duplicate); pass `customOptionPlacement="top"` to pin it above. Use
 `reflectSelection={false}` and render the attached record below as a card with a Change action.
+For input-level status that must stay visible while results scroll (validity feedback on the typed
+value, a result count, a secondary "create" affordance), pass `footer={({ close }) => …}` — a pinned
+row below the listbox, OUTSIDE keyboard option-nav; call `close()` from a footer action that hands
+off elsewhere (so the popover dismisses cleanly instead of floating over what you navigated to).
 
 ### Line items — create → preview → edit (a composition, not a primitive)
 For a list of records you build then revise (invoice rows, repair lines, config entries), each
@@ -757,7 +761,7 @@ list · list_item · menu_button · menu_list_item · detail_row · pressable_ro
 check_circle (CheckCircle — the completion ring: an empty ring that springs to a filled check when done, distinct from the square checkbox; the task/to-do/checklist toggle. Compose task rows directly, no Task component) · action_menu ·
 floating_action_bar · filter_chip · column_filter (ColumnFilter — the typed per-column filter pill +
 columnFilterToConditions; for a register filtering on several columns) · chip_group · search_input ·
-sort_header · table · data_grid (DataGrid — the inline-managed grouped table: a grouped, sortable grid of LIVE inline-editor cells (`columns[].cell` → ANY field) + optional per-row `leading` (a CheckCircle) + `renderGroupFooter` (per-group add, align with the exported `gridRowStyle`) + `labels` (localize the sort-header a11y via `SortHeaderLabels`). Owns header/sections/rows; consumer owns data + sort/group/filter/collapse state + toolbar. Renders ALL rows — MODERATE data; 10k+ → the paginated `Table` register. Examples: `tpl_task_board`, `tpl_pipeline`) · pagination · accordion · stepper (Stepper + Step — done/current/upcoming/warning/complete progress on a track (horizontal) or spine (vertical); compound `<Step status>children` OR data `steps[]`+`current`; the guided-run / agent-feed primitive — subsumes the old StepList) ·
+sort_header · table · data_grid (DataGrid — the inline-managed grouped table: a grouped, sortable grid of LIVE inline-editor cells (`columns[].cell` → ANY field) + optional per-row `leading` (a CheckCircle) + `renderGroupFooter` (per-group add, align with the exported `gridRowStyle`) + `labels` (localize the sort-header a11y via `SortHeaderLabels`). Owns header/sections/rows; consumer owns data + sort/group/filter/collapse state + toolbar. Renders ALL rows — MODERATE data; 10k+ → the paginated `Table` register. Examples: `tpl_task_board`, `tpl_pipeline`) · pagination · accordion · stepper (Stepper + Step — done/current/upcoming/warning/complete progress on a track (horizontal) or spine (vertical); compound `<Step status>children` OR data `steps[]`+`current`; **navigable** via `Step.onPress` (both orientations — the whole step is the tap target) + `active` to wash the selected one, so it doubles as a section/phase switcher; the guided-run / agent-feed primitive — subsumes the old StepList) ·
 step_progress · timeline (heterogeneous event LOG — per-row icon + expandable details, models the past; NOT progress) · drawer (+ DrawerFooter) · dialog · popover · tooltip ·
 alert · peek · empty_state · completion_state · callout (Callout · CalloutTitle ·
 CalloutText · CalloutActions) · kpi_card · kpi_strip · metric · trend_chip · sparkline ·

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "6.2.0",
+  "version": "6.4.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/combobox.tsx

@@ -67,6 +67,13 @@ export interface ComboboxProps<T extends string = string, D = unknown> {
   placeholder?: string;
   recentsLabel?: string;
   emptyText?: string;
+  /** A pinned row rendered at the bottom of the popover (below the results, outside
+   *  the scroll area) whenever the popover is open. For input-level status that must
+   *  stay visible while results scroll — validity feedback, a result count, a "create"
+   *  affordance. It sits OUTSIDE the listbox, so its content is auxiliary (not an
+   *  option) and never enters keyboard option-nav. Receives `close` to dismiss the
+   *  popover — call it from an action that navigates elsewhere. */
+  footer?: (api: { close: () => void }) => ReactNode;
   accessibilityLabel?: string;
   disabled?: boolean;
   /** Show an in-input clear ✕ whenever the input has text (a reflected selection
@@ -111,6 +118,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     searchDebounceMs = 200,
     icon,
     placeholder,
+    footer,
     accessibilityLabel = "Results",
     disabled = false,
     clearable = false,
@@ -169,6 +177,14 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
     [onValueChange, isServer, debouncedSearch, onSearchChange, reflectSelection],
   );
 
+  // Dismiss the popover from the footer — drop focus too, mirroring the popover's
+  // own self-close (so the input's keyboard focus ring doesn't linger after a
+  // footer action hands off elsewhere).
+  const close = useCallback(() => {
+    setOpen(false);
+    inputRef.current?.blur();
+  }, []);
+
   const list = useOptionList<T, false, D>({
     options,
     value: single?.value ?? null,
@@ -347,6 +363,7 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
                 })
               )}
             </ScrollView>
+            {footer ? <View style={styles.footer}>{footer({ close })}</View> : null}
           </View>
         </PopoverContent>
       </Popover>
@@ -386,4 +403,10 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     paddingVertical: 16,
   },
+  footer: {
+    borderTopWidth: 1,
+    borderTopColor: colors.border,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+  },
 });

package/src/stepper.tsx

@@ -56,7 +56,8 @@ interface StepPositional {
 export interface StepProps extends StepPositional {
   status: StepStatus;
   children: ReactNode;
-  /** Make the step navigable; the active one holds a wash so a panel can sit beside it (vertical). */
+  /** Make the step navigable (both orientations) — the whole step is the tap target.
+   *  `active` washes the selected one (a panel can also sit beside it in vertical). */
   onPress?: () => void;
   active?: boolean;
   accessibilityLabel?: string;
@@ -116,16 +117,34 @@ export function Step(props: StepProps) {
   const { orientation, color, live } = useContext(StepperContext);
 
   if (orientation === "horizontal") {
-    return (
-      <View style={styles.hStep}>
+    const inner = (
+      <>
         <View style={styles.hTrackRow}>
           <View style={[styles.hTrack, { backgroundColor: _leftFilled ? color : colors.zinc[200] }]} />
           <Marker status={status} color={color} live={live} />
           <View style={[styles.hTrack, { backgroundColor: _rightFilled ? color : colors.zinc[200] }]} />
         </View>
         <View style={styles.hLabel}>{children}</View>
-      </View>
+      </>
     );
+    // Navigable: the whole step (marker + label + its track halves) is the tap
+    // target — generous, no dead zones; `active` washes the selected one.
+    if (onPress) {
+      return (
+        <View style={styles.hStepSlot}>
+          <PressableHighlight
+            focusRing
+            onPress={onPress}
+            accessibilityRole="button"
+            accessibilityLabel={accessibilityLabel}
+            style={[styles.hPress, active ? styles.hActive : null]}
+          >
+            {inner}
+          </PressableHighlight>
+        </View>
+      );
+    }
+    return <View style={styles.hStep}>{inner}</View>;
   }
 
   const body = <View style={[styles.vRowBox, active ? styles.vActive : null]}>{children}</View>;
@@ -210,6 +229,9 @@ const NODE = 18;
 const styles = StyleSheet.create({
   hRow: { flexDirection: "row" },
   hStep: { flex: 1, alignItems: "center", gap: 8 },
+  hStepSlot: { flex: 1 },
+  hPress: { width: "100%", alignItems: "center", gap: 8, borderRadius: 8, paddingVertical: 4 },
+  hActive: { backgroundColor: colors.zinc[100] },
   hTrackRow: { flexDirection: "row", alignItems: "center", width: "100%" },
   hTrack: { flex: 1, height: 2 },
   hLabel: { alignItems: "center" },