@buoy-gg/redux 7.0.33 → 7.0.35

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",
@@ -648,7 +603,7 @@ const styles = _reactNative.StyleSheet.create({
   headerChipValue: {
     fontSize: 12,
     fontWeight: "600",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   headerActionButton: {
     width: 32,

package/lib/commonjs/redux/hooks/useReduxActions.js

@@ -5,41 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useReduxActions = useReduxActions;
 var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _reduxActionStore = require("../utils/reduxActionStore");
 /**
  * Hook for consuming Redux actions from the store
+ *
+ * The subscribe / filter / pause / clear plumbing is shared `useChangeLog`;
+ * this file owns the redux-specific stats, action types and selection.
  */
 
+const filterActions = (_actions, filter) => _reduxActionStore.reduxActionStore.filterActions(filter);
 function useReduxActions() {
-  const [actions, setActions] = (0, _react.useState)(() => _reduxActionStore.reduxActionStore.getActions());
-  const [filter, setFilter] = (0, _react.useState)({});
-  const [isEnabled, setIsEnabled] = (0, _react.useState)(() => _reduxActionStore.reduxActionStore.getEnabled());
+  const log = (0, _sharedUi.useChangeLog)(_reduxActionStore.reduxActionStore, {
+    filterItems: filterActions
+  });
   const [selectedAction, setSelectedAction] = (0, _react.useState)(null);
 
-  // Subscribe to store changes
-  (0, _react.useEffect)(() => {
-    const unsubscribe = _reduxActionStore.reduxActionStore.subscribe(newActions => {
-      setActions(newActions);
-    });
-    return () => {
-      unsubscribe();
-    };
-  }, []);
-
-  // Filter actions based on current filter
-  const filteredActions = (0, _react.useMemo)(() => {
-    return _reduxActionStore.reduxActionStore.filterActions(filter);
-  }, [actions, filter]);
-
   // Get stats
   const stats = (0, _react.useMemo)(() => {
     return _reduxActionStore.reduxActionStore.getStats();
-  }, [actions]);
+  }, [log.items]);
 
   // Get unique action types
   const actionTypes = (0, _react.useMemo)(() => {
     return _reduxActionStore.reduxActionStore.getUniqueActionTypes();
-  }, [actions]);
+  }, [log.items]);
 
   // Clear actions
   const clearActions = (0, _react.useCallback)(() => {
@@ -47,26 +37,19 @@ function useReduxActions() {
     setSelectedAction(null);
   }, []);
 
-  // Toggle capture
-  const toggleCapture = (0, _react.useCallback)(() => {
-    const newEnabled = !isEnabled;
-    _reduxActionStore.reduxActionStore.setEnabled(newEnabled);
-    setIsEnabled(newEnabled);
-  }, [isEnabled]);
-
   // Get action by ID
   const getActionById = (0, _react.useCallback)(id => {
     return _reduxActionStore.reduxActionStore.getActionById(id);
   }, []);
   return {
-    actions,
-    filteredActions,
-    filter,
-    setFilter,
+    actions: log.items,
+    filteredActions: log.filteredItems,
+    filter: log.filter,
+    setFilter: log.setFilter,
     stats,
     clearActions,
-    isEnabled,
-    toggleCapture,
+    isEnabled: log.isEnabled,
+    toggleCapture: log.toggleCapture,
     actionTypes,
     getActionById,
     selectedAction,

package/lib/commonjs/redux/sync/reduxSyncAdapter.js

@@ -7,19 +7,8 @@ exports.reduxSyncAdapter = void 0;
 var _reduxActionStore = require("../utils/reduxActionStore");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _autoInstrument = require("../utils/autoInstrument");
-/**
- * Upper bound for one on-demand action-detail response. Generous — this is a
- * single explicit fetch, not a per-action stream — but still guarded so a
- * pathological tree can't OOM the device through the reply emit.
- */
-const MAX_ACTION_DETAIL_BYTES = 8 * 1024 * 1024;
-
 /** Per-action budget for `payload`/`action`/`meta.arg`/`error` on the snapshot wire. */
-const MAX_WIRE_PAYLOAD_BYTES = 16 * 1024;
-function toWireValue(value) {
-  if (value === undefined) return value;
-  return (0, _sharedUi.isOverWireBudget)(value, MAX_WIRE_PAYLOAD_BYTES) ? _reduxActionStore.PAYLOAD_ON_DEVICE : value;
-}
+const toWireValue = value => (0, _sharedUi.toWire)(value, _reduxActionStore.PAYLOAD_ON_DEVICE);
 
 /**
  * Per-action wire cache. `reduxActionStore` never mutates an action in place —
@@ -28,10 +17,7 @@ function toWireValue(value) {
  * `action`, `meta.arg` and `error` in the list is re-measured on all ~5
  * snapshots per second for as long as it stays in the list.
  */
-const wireCache = new WeakMap();
-function toWireAction(a) {
-  const cached = wireCache.get(a);
-  if (cached) return cached;
+const toWireAction = (0, _sharedUi.memoByIdentity)(a => {
   const wire = (0, _reduxActionStore.isEvictedState)(a.prevState) ? {
     ...a
   } : {
@@ -54,9 +40,8 @@ function toWireAction(a) {
       arg
     };
   }
-  wireCache.set(a, wire);
   return wire;
-}
+});
 /** Top-level slice names of the state tree, for the compact (no-values) view. */
 function topLevelKeys(state) {
   return state && typeof state === "object" && !Array.isArray(state) ? Object.keys(state) : [];
@@ -93,7 +78,7 @@ function unavailable() {
  * dispatch actions — redux is action-based, so the *current state* isn't in the
  * action-log snapshot.
  */
-const reduxSyncAdapter = exports.reduxSyncAdapter = {
+const reduxSyncAdapter = exports.reduxSyncAdapter = (0, _sharedUi.createSyncAdapter)({
   version: 2,
   /**
    * WIRE-FORM snapshot: actions WITHOUT raw prevState/nextState trees.
@@ -118,7 +103,7 @@ const reduxSyncAdapter = exports.reduxSyncAdapter = {
     getActionDetail: params => {
       const {
         id
-      } = params ?? {};
+      } = (0, _sharedUi.readParams)(params);
       if (!id) return {
         found: false,
         reason: "missing id"
@@ -138,11 +123,7 @@ const reduxSyncAdapter = exports.reduxSyncAdapter = {
       }
       // Per-field cap: oversized fields degrade individually instead of
       // failing the whole detail (a giant payload shouldn't hide the trees).
-      const cappedNote = {
-        __buoyTruncated: true,
-        note: `Exceeds the ${MAX_ACTION_DETAIL_BYTES / (1024 * 1024)}MB detail limit — inspect it on-device.`
-      };
-      const cap = value => (0, _sharedUi.isOverWireBudget)(value, MAX_ACTION_DETAIL_BYTES) ? cappedNote : value;
+      const cap = value => (0, _sharedUi.capDetail)(value, _sharedUi.WIRE_DETAIL_LIMIT_BYTES);
       const capMeta = meta => {
         if (!meta) return meta;
         const arg = cap(meta.arg);
@@ -169,7 +150,7 @@ const reduxSyncAdapter = exports.reduxSyncAdapter = {
     getState: params => {
       const {
         includeValues = false
-      } = params ?? {};
+      } = (0, _sharedUi.readParams)(params);
       const store = (0, _autoInstrument.getActiveStore)();
       if (!store) {
         return unavailable();
@@ -191,7 +172,7 @@ const reduxSyncAdapter = exports.reduxSyncAdapter = {
     dispatch: params => {
       const {
         action
-      } = params;
+      } = (0, _sharedUi.readParams)(params);
       const store = (0, _autoInstrument.getActiveStore)();
       if (!store) {
         return {
@@ -199,11 +180,12 @@ const reduxSyncAdapter = exports.reduxSyncAdapter = {
           ...unavailable()
         };
       }
+      if (!action) throw new Error("dispatch requires an `action`");
       store.dispatch(action);
       return {
         dispatched: true,
-        type: action?.type
+        type: action.type
       };
     }
   }
-};
+});