@buoy-gg/redux 7.0.33 → 7.0.34

package/lib/commonjs/preset.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createReduxTool = createReduxTool;
-exports.reduxToolPreset = void 0;
+exports.reduxToolPreset = exports.createReduxTool = void 0;
 var _ReduxModal = require("./redux/components/ReduxModal");
 var _ReduxIcon = require("./redux/components/ReduxIcon");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Pre-configured Redux DevTools preset for FloatingDevTools
@@ -48,7 +48,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * - State diff visualization
  * - Filter by action type
  */
-const reduxToolPreset = exports.reduxToolPreset = {
+const reduxToolPreset = exports.reduxToolPreset = (0, _sharedUi.defineToolPreset)({
   id: "redux",
   name: "REDUX",
   description: "Redux action & state inspector",
@@ -62,7 +62,7 @@ const reduxToolPreset = exports.reduxToolPreset = {
   props: {
     enableSharedModalDimensions: false
   }
-};
+});
 
 /**
  * Create a custom Redux DevTools configuration.
@@ -78,21 +78,13 @@ const reduxToolPreset = exports.reduxToolPreset = {
  * });
  * ```
  */
-function createReduxTool(options) {
-  return {
-    id: options?.id || "redux",
-    name: options?.name || "REDUX",
-    description: options?.description || "Redux action & state inspector",
-    slot: "both",
-    icon: ({
-      size
-    }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxIcon.ReduxIcon, {
-      size: size,
-      color: options?.iconColor
-    }),
-    component: _ReduxModal.ReduxModal,
-    props: {
-      enableSharedModalDimensions: options?.enableSharedModalDimensions !== undefined ? options.enableSharedModalDimensions : false
-    }
-  };
-}
+const createReduxTool = exports.createReduxTool = (0, _sharedUi.createToolFactory)(reduxToolPreset, options => ({
+  enableSharedModalDimensions: options.enableSharedModalDimensions ?? false
+}), options => ({
+  icon: ({
+    size
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxIcon.ReduxIcon, {
+    size: size,
+    color: options.iconColor
+  })
+}));

package/lib/commonjs/redux/components/ReduxActionInfoView.js

@@ -109,37 +109,6 @@ function SectionHeader({
   });
 }
 
-/**
- * Info row component for key-value display
- */
-function InfoRow({
-  label,
-  value,
-  valueColor,
-  mono = false,
-  testID
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.infoRow,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.infoLabel,
-      children: label
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [styles.infoValue, mono && styles.infoValueMono, valueColor && {
-        color: valueColor
-      }]
-      // `ellipsizeMode="middle"` truncates the RENDERED text and iOS reports
-      // the truncated string back, so anything a test reads off one of these
-      // rows has to be short enough to fit on the line.
-      ,
-      numberOfLines: 1,
-      ellipsizeMode: "middle",
-      testID: testID,
-      children: value
-    })]
-  });
-}
-
 /**
  * Format timestamp for display
  */
@@ -229,17 +198,17 @@ const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _reac
         title: "ACTION INFO"
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.cardContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Type",
           value: action.type,
           mono: true,
           testID: `${_testIDs.REDUX_TEST_ID}-info-type`
-        }), action.sliceName && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.sliceName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Slice",
           value: action.sliceName,
           mono: true,
           testID: `${_testIDs.REDUX_TEST_ID}-info-slice`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Action",
           value: action.actionName,
           mono: true,
@@ -411,11 +380,11 @@ const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _reac
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
         style: styles.cardContent,
-        children: [action.meta?.requestId && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        children: [action.meta?.requestId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Request ID",
           value: action.meta.requestId,
           mono: true
-        }), action.meta?.requestStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.meta?.requestStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Status",
           value: action.meta.requestStatus.toUpperCase(),
           valueColor: categoryInfo.color,
@@ -438,15 +407,15 @@ const ReduxActionInfoView = exports.ReduxActionInfoView = /*#__PURE__*/(0, _reac
               children: JSON.stringify(action.meta.arg)
             })
           })]
-        }), action.meta?.rejectedWithValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.meta?.rejectedWithValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Rejected With Value",
           value: "true",
           valueColor: _sharedUi.buoyColors.error
-        }), action.meta?.aborted && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.meta?.aborted && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Aborted",
           value: "true",
           valueColor: _sharedUi.buoyColors.warning
-        }), action.meta?.condition && /*#__PURE__*/(0, _jsxRuntime.jsx)(InfoRow, {
+        }), action.meta?.condition && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.InfoRow, {
           label: "Condition",
           value: "true",
           valueColor: _sharedUi.night.color.textTertiary
@@ -609,27 +578,6 @@ const styles = _reactNative.StyleSheet.create({
     padding: 14,
     gap: 10
   },
-  infoRow: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between"
-  },
-  infoLabel: {
-    fontSize: 11,
-    color: _sharedUi.night.color.textTertiary,
-    fontWeight: "500"
-  },
-  infoValue: {
-    fontSize: 11,
-    color: _sharedUi.night.color.text,
-    fontWeight: "500",
-    flex: 1,
-    textAlign: "right",
-    marginLeft: 12
-  },
-  infoValueMono: {
-    fontFamily: "monospace"
-  },
   badgeRow: {
     flexDirection: "row",
     flexWrap: "wrap",

package/lib/commonjs/redux/components/ReduxActionItem.js

@@ -240,119 +240,76 @@ const ReduxActionItem = exports.ReduxActionItem = /*#__PURE__*/(0, _react.memo)(
   // Get color for this operation's badge
   const opColor = getOperationColor(operationIndex);
 
-  // Custom badge showing state change, slow action, or linked indicator
-  let customBadge = undefined;
+  // The async-sequence chip ("1/2 #3") sits in front of whatever indicator
+  // the row shows; the ⚡ / 🕒 indicators and the mono action verb are drawn
+  // by the shared ChangeRow.
+  const sequenceChip = hasLinkedActions ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.asyncSequenceBadge, {
+      backgroundColor: opColor.bg
+    }],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: [styles.asyncSequenceText, {
+        color: opColor.text
+      }],
+      testID: testID ? `${testID}-seq` : undefined,
+      children: [asyncPosition, "/", linkedCount, " #", operationIndex]
+    })
+  }) : undefined;
+  const common = {
+    statusColor,
+    statusLabel,
+    sublabel,
+    primaryText,
+    timestamp: action.timestamp,
+    onPress: () => onPress(action),
+    testID,
+    accessibilityLabel: `${primaryText}, ${statusLabel}, ${sublabel}`
+  };
   if (action.isSlowAction) {
-    // Show slow action warning
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [hasLinkedActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.slowBadge,
-        testID: testID ? `${testID}-slow` : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Clock, {
-          size: 12,
-          color: _sharedUi.buoyColors.error
-        })
-      })]
+    // Slow action warning (with the sequence chip when part of a flow).
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      slow: true
     });
-  } else if (action.category === "rejected") {
-    // Show error badge for rejected actions
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [hasLinkedActions && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.errorBadge,
-        testID: testID ? `${testID}-error` : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
-          size: 12,
-          color: _sharedUi.buoyColors.error
-        })
-      })]
+  }
+  if (action.category === "rejected") {
+    // Error badge for rejected actions.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+      ...common,
+      customBadge: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.badgeContainer,
+        children: [sequenceChip, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: styles.errorBadge,
+          testID: testID ? `${testID}-error` : undefined,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertCircle, {
+            size: 12,
+            color: _sharedUi.buoyColors.error
+          })
+        })]
+      })
     });
-  } else if (hasLinkedActions) {
-    // Show linked indicator for async actions
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [styles.asyncSequenceBadge, {
-          backgroundColor: opColor.bg
-        }],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
-          style: [styles.asyncSequenceText, {
-            color: opColor.text
-          }],
-          testID: testID ? `${testID}-seq` : undefined,
-          children: [asyncPosition, "/", linkedCount, " #", operationIndex]
-        })
-      }), action.hasStateChange && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.changeBadge,
-        testID: testID ? `${testID}-change` : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-          size: 12,
-          color: _sharedUi.buoyColors.warning
-        })
-      })]
+  }
+  if (hasLinkedActions) {
+    // Linked indicator for async actions.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+      ...common,
+      badgePrefix: sequenceChip,
+      changed: action.hasStateChange
     });
-  } else if (action.hasStateChange) {
-    // Show state change indicator with action badge
-    customBadge = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.badgeContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: [styles.actionBadgeText, {
-          color: statusColor
-        }],
-        testID: testID ? `${testID}-badge` : undefined,
-        children: actionBadge
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.changeBadge,
-        testID: testID ? `${testID}-change` : undefined,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-          size: 12,
-          color: _sharedUi.buoyColors.warning
-        })
-      })]
+  }
+  if (action.hasStateChange) {
+    // State change indicator with the action verb.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+      ...common,
+      badgeText: actionBadge,
+      changed: true
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
-    testID: testID,
-    statusTestID: testID ? `${testID}-status` : undefined,
-    statusSublabelTestID: testID ? `${testID}-sublabel` : undefined,
-    accessibilityLabel: `${primaryText}, ${statusLabel}, ${sublabel}`,
-    statusDotColor: statusColor,
-    statusLabel: statusLabel,
-    statusSublabel: sublabel,
-    primaryText: primaryText,
-    bottomRightText: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.RelativeTime, {
-      timestamp: action.timestamp
-    })
-    // Use customBadge if we have special indicators, otherwise show action badge as text
-    ,
-    customBadge: customBadge,
-    badgeText: customBadge ? undefined : actionBadge,
-    badgeColor: statusColor,
-    showChevron: true,
-    onPress: () => onPress(action)
+  // Nothing special: CompactRow's plain badge with the action verb.
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ChangeRow, {
+    ...common,
+    plainBadgeText: actionBadge
   });
 });
 const styles = _reactNative.StyleSheet.create({
@@ -361,17 +318,6 @@ const styles = _reactNative.StyleSheet.create({
     alignItems: "center",
     gap: 4
   },
-  actionBadgeText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace"
-  },
-  changeBadge: {
-    paddingHorizontal: 4
-  },
-  slowBadge: {
-    paddingHorizontal: 4
-  },
   errorBadge: {
     paddingHorizontal: 4
   },

package/lib/commonjs/redux/components/ReduxDetailViewToggle.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReduxDetailViewToggle = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -13,132 +12,39 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * ReduxDetailViewToggle
  *
  * Three-card toggle for switching between Action, State, and Diff views.
- * Redux-specific component for the enhanced detail view.
+ * The cards themselves are the shared `DetailViewToggle`; this file owns
+ * the redux view list and testID prefix.
  */
 
-const VIEW_CONFIGS = [{
+// Active-card chrome takes the single night accent (the per-view
+// warning/info/success tints were selection chrome, not data).
+const VIEWS = [{
   key: "action",
   label: "ACTION",
   description: "View action details",
-  icon: _sharedUi.FileText,
-  // Active-card chrome takes the single night accent (the per-view
-  // warning/info/success tints were selection chrome, not data).
-  activeColor: _sharedUi.night.color.accent
+  icon: _sharedUi.FileText
 }, {
   key: "state",
   label: "STATE",
   description: "View current state",
-  icon: _sharedUi.Database,
-  activeColor: _sharedUi.night.color.accent
+  icon: _sharedUi.Database
 }, {
   key: "diff",
   label: "DIFF",
   description: "Compare changes",
-  icon: _sharedUi.GitBranch,
-  activeColor: _sharedUi.night.color.accent
+  icon: _sharedUi.GitBranch
 }];
+const DIFF_DISABLED = ["diff"];
 const ReduxDetailViewToggle = exports.ReduxDetailViewToggle = /*#__PURE__*/(0, _react.memo)(function ReduxDetailViewToggle({
   activeView,
   onViewChange,
   diffDisabled = false
 }) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.container,
-    children: VIEW_CONFIGS.map(config => {
-      const isActive = activeView === config.key;
-      const isDisabled = config.key === "diff" && diffDisabled;
-      const IconComponent = config.icon;
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
-        style: [styles.card, isActive && [styles.cardActive, {
-          borderColor: config.activeColor
-        }], isDisabled && styles.cardDisabled],
-        onPress: () => !isDisabled && onViewChange(config.key),
-        activeOpacity: isDisabled ? 1 : 0.8,
-        disabled: isDisabled,
-        testID: `buoy-redux-view-${config.key}`,
-        accessibilityRole: "button",
-        accessibilityLabel: config.label,
-        accessibilityState: {
-          selected: isActive,
-          disabled: isDisabled
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.cardContent,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-            size: 14,
-            color: isActive ? config.activeColor : isDisabled ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textSecondary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [styles.cardLabel, isActive && [styles.cardLabelActive, {
-              color: config.activeColor
-            }], isDisabled && styles.cardLabelDisabled],
-            children: config.label
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          style: [styles.cardDescription, isActive && styles.cardDescriptionActive, isDisabled && styles.cardDescriptionDisabled],
-          children: config.description
-        })]
-      }, config.key);
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.DetailViewToggle, {
+    views: VIEWS,
+    activeView: activeView,
+    onViewChange: onViewChange,
+    disabledKeys: diffDisabled ? DIFF_DISABLED : undefined,
+    testIDPrefix: "buoy-redux"
   });
-});
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flexDirection: "row",
-    gap: 8,
-    padding: 14,
-    // Transparent so the night sheet's star field shows through.
-    backgroundColor: "transparent"
-  },
-  card: {
-    flex: 1,
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 12,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    padding: 10,
-    gap: 4
-  },
-  cardActive: {
-    borderWidth: 1.5,
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    shadowColor: _sharedUi.night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 8,
-    elevation: 3
-  },
-  cardDisabled: {
-    opacity: 0.5
-  },
-  cardContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 6
-  },
-  cardLabel: {
-    fontSize: 10,
-    fontWeight: "700",
-    letterSpacing: 0.5,
-    color: _sharedUi.night.color.textSecondary
-  },
-  cardLabelActive: {
-    color: _sharedUi.night.color.text
-  },
-  cardLabelDisabled: {
-    color: _sharedUi.night.color.textTertiary
-  },
-  cardDescription: {
-    fontSize: 9,
-    color: _sharedUi.night.color.textTertiary,
-    lineHeight: 12
-  },
-  cardDescriptionActive: {
-    color: _sharedUi.night.color.textSecondary
-  },
-  cardDescriptionDisabled: {
-    color: _sharedUi.night.color.textTertiary
-  }
 });

package/lib/commonjs/redux/components/ReduxModal.js

@@ -271,49 +271,29 @@ function ReduxModal({
         onBack: onBack
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
         title: "",
-        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: styles.headerSearchContainer,
-          testID: `${_testIDs.REDUX_TEST_ID}-search`,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-            size: 14,
-            color: _sharedUi.night.color.textSecondary
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-            ref: searchInputRef,
-            testID: `${_testIDs.REDUX_TEST_ID}-search-field`,
-            style: styles.headerSearchInput,
-            placeholder: "Search action types...",
-            placeholderTextColor: _sharedUi.night.color.textTertiary,
-            value: searchText,
-            onChangeText: handleSearch,
-            onSubmitEditing: () => searchInputRef.current?.blur()
-            // Stay open while the query still filters the list.
-            //
-            // Collapsing it on blur hid the reason rows were missing: the
-            // header went back to its chips — which count the WHOLE
-            // capture, not the filtered list — while the list stayed
-            // narrowed, so the tool showed "4 actions" above a single row
-            // and offered nothing to explain the gap. The only way back
-            // was to reopen a field the user had no reason to think was
-            // still armed.
-            ,
-            onBlur: () => {
-              if (searchText.length === 0) setIsSearchActive(false);
-            },
-            accessibilityLabel: "Search action types",
-            autoCapitalize: "none",
-            autoCorrect: false,
-            returnKeyType: "search"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-            onPress: closeSearch,
-            style: styles.headerSearchClear,
-            testID: `${_testIDs.REDUX_TEST_ID}-search-clear`,
-            accessibilityRole: "button",
-            accessibilityLabel: "Close search",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-              size: 14,
-              color: _sharedUi.night.color.textSecondary
-            })
-          })]
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
+          value: searchText,
+          onChangeText: handleSearch,
+          onCancel: closeSearch,
+          placeholder: "Search action types...",
+          accessibilityLabel: "Search action types",
+          iconSize: 14,
+          testID: `${_testIDs.REDUX_TEST_ID}-search-field`,
+          containerTestID: `${_testIDs.REDUX_TEST_ID}-search`,
+          clearTestID: `${_testIDs.REDUX_TEST_ID}-search-clear`
+          // Stay open while the query still filters the list.
+          //
+          // Collapsing it on blur hid the reason rows were missing: the
+          // header went back to its chips — which count the WHOLE
+          // capture, not the filtered list — while the list stayed
+          // narrowed, so the tool showed "4 actions" above a single row
+          // and offered nothing to explain the gap. The only way back
+          // was to reopen a field the user had no reason to think was
+          // still armed.
+          ,
+          onBlur: () => {
+            if (searchText.length === 0) setIsSearchActive(false);
+          }
         }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: styles.headerChipRow,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
@@ -508,11 +488,7 @@ function ReduxModal({
         keyExtractor: keyExtractor,
         contentContainerStyle: styles.listContent,
         showsVerticalScrollIndicator: true,
-        removeClippedSubviews: true,
-        initialNumToRender: 12,
-        maxToRenderPerBatch: 8,
-        windowSize: 5,
-        updateCellsBatchingPeriod: 50
+        ..._sharedUi.EVENT_LIST_PRESET
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
         isEnabled: isEnabled,
         query: searchText,
@@ -598,27 +574,6 @@ const styles = _reactNative.StyleSheet.create({
     // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
     backgroundColor: "transparent"
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    paddingHorizontal: 12,
-    paddingVertical: 5
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    marginLeft: 6,
-    paddingVertical: 2
-  },
-  headerSearchClear: {
-    marginLeft: 6,
-    padding: 4
-  },
   headerChipRow: {
     flexDirection: "row",
     alignItems: "center",