@lotics/ui 6.3.0 → 6.4.0

package/AGENTS.md

@@ -761,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.3.0",
+  "version": "6.4.0",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

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" },