@buoy-gg/redux 7.0.32 → 7.0.34

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

@@ -38,24 +38,27 @@ const FREE_TIER_ACTION_LIMIT = exports.FREE_TIER_ACTION_LIMIT = _sharedUi.TIER_L
  */
 function EmptyState({
   isEnabled,
-  query
+  query,
+  totalActions
 }) {
-  const isFiltered = query.length > 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.emptyState,
-    testID: `${_testIDs.REDUX_TEST_ID}-empty`,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
-      size: 32,
-      color: _sharedUi.night.color.textTertiary
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyTitle,
-      testID: `${_testIDs.REDUX_TEST_ID}-empty-title`,
-      children: isFiltered ? "No Matches" : "No Redux actions"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.emptyText,
-      testID: `${_testIDs.REDUX_TEST_ID}-empty-text`,
-      children: isFiltered ? `No action type contains "${query}"` : isEnabled ? "Actions will appear here as they are dispatched" : "Enable capture to start recording actions"
-    })]
+  const content = (0, _sharedUi.resolveListEmptyState)({
+    subject: "actions",
+    search: query,
+    total: totalActions,
+    capturing: isEnabled,
+    waiting: {
+      otto: "waiting",
+      title: "No Redux actions",
+      message: "Actions will appear here as they are dispatched"
+    },
+    paused: {
+      title: "No Redux actions",
+      message: "Enable capture to start recording actions"
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
+    ...content,
+    testID: `${_testIDs.REDUX_TEST_ID}-empty`
   });
 }
 function ReduxModal({
@@ -268,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, {
@@ -505,14 +488,11 @@ 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
+        query: searchText,
+        totalActions: stats.totalActions
       })]
     })
   });
@@ -594,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",
@@ -709,22 +668,6 @@ const styles = _reactNative.StyleSheet.create({
     paddingTop: 8,
     paddingBottom: 20
   },
-  emptyState: {
-    alignItems: "center",
-    paddingVertical: 40
-  },
-  emptyTitle: {
-    color: _sharedUi.night.color.text,
-    fontSize: 14,
-    fontWeight: "600",
-    marginTop: 12,
-    marginBottom: 6
-  },
-  emptyText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 12,
-    textAlign: "center"
-  },
   // Locked actions banner styles
   lockedBanner: {
     flexDirection: "row",

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
       };
     }
   }
-};
+});

package/lib/commonjs/redux/utils/reduxActionStore.js

@@ -238,16 +238,9 @@ function extractMeta(action) {
 // Redux Action Store
 // ============================================
 
-class ReduxActionStore {
-  actions = [];
-  listeners = new Set();
-  clearListeners = new Set();
-  maxActions = 200;
-  idCounter = 0;
-  isEnabled = true;
-  captureSuppressed = false;
+class ReduxActionStore extends _sharedUi.ChangeLog {
   addAction(action, prevState, nextState, duration) {
-    if (!this.isEnabled || this.captureSuppressed) {
+    if (!this.canRecord()) {
       return;
     }
     const actionType = action.type || "";
@@ -273,7 +266,7 @@ class ReduxActionStore {
     const isSlowAction = (duration ?? 0) > 16; // Frame budget
 
     const reduxAction = {
-      id: `${Date.now()}-${++this.idCounter}`,
+      id: this.nextId(),
       type: actionType,
       payload: action.payload,
       action,
@@ -293,7 +286,7 @@ class ReduxActionStore {
       changedKeysCount,
       isSlowAction
     };
-    this.actions = [reduxAction, ...this.actions].slice(0, this.maxActions);
+    this.push(reduxAction);
 
     // Bound raw-state retention. Every action holds prevState/nextState by
     // reference; with structural sharing that's normally cheap, but when a
@@ -302,8 +295,8 @@ class ReduxActionStore {
     // pinned by 50 slice-replacing actions, enough to OOM-kill enterprise
     // apps. Detail view + time travel realistically use recent actions, so
     // older ones keep their diff metadata but drop the raw trees.
-    for (let i = STATE_RETENTION_LIMIT; i < this.actions.length; i++) {
-      const a = this.actions[i];
+    for (let i = STATE_RETENTION_LIMIT; i < this.items.length; i++) {
+      const a = this.items[i];
       if (a.prevState !== STATE_EVICTED) {
         a.prevState = STATE_EVICTED;
         a.nextState = STATE_EVICTED;
@@ -314,63 +307,26 @@ class ReduxActionStore {
     this.notifyListeners();
   }
   getActions() {
-    return [...this.actions];
+    return this.getAll();
   }
   getActionById(id) {
-    return this.actions.find(a => a.id === id);
+    return this.getById(id);
   }
   clearActions() {
-    this.actions = [];
-    this.notifyListeners();
-    this.clearListeners.forEach(listener => {
-      try {
-        listener();
-      } catch {
-        // Ignore listener errors
-      }
-    });
-  }
-
-  /**
-   * Listen for clearActions() calls. Used in remote mirror mode to forward a
-   * clear performed in the dashboard UI to the synced device.
-   */
-  onClear(listener) {
-    this.clearListeners.add(listener);
-    return () => {
-      this.clearListeners.delete(listener);
-    };
+    this.clear();
   }
 
   // ============================================
   // Remote Mirror Mode
   // ============================================
 
-  /**
-   * Permanently suppress local capture. Use when this store acts as a mirror
-   * of a remote device's actions (e.g. the desktop dashboard): actions arrive
-   * via replaceActions() and local instrumentation must never record.
-   */
-  disableCapture() {
-    this.captureSuppressed = true;
-  }
-
-  /**
-   * Whether the store is in remote mirror mode (capture suppressed). The UI
-   * uses this to skip local-instrumentation affordances like the
-   * "react-redux not installed" banner.
-   */
-  isCaptureSuppressed() {
-    return this.captureSuppressed;
-  }
-
   /**
    * Replace the entire action list and notify listeners. Used in remote
    * mirror mode where full snapshots arrive from a synced device. Respects
    * the enabled flag so the UI's pause button freezes the mirror.
    */
   replaceActions(actions) {
-    if (!this.isEnabled) {
+    if (!this.getEnabled()) {
       return;
     }
     // Preserve any trees a remote mirror already hydrated via
@@ -378,12 +334,12 @@ class ReduxActionStore {
     // full snapshot arriving after a detail fetch must not blank the detail
     // pane back out.
     const hydrated = new Map();
-    for (const existing of this.actions) {
+    for (const existing of this.items) {
       if (existing.prevState !== undefined && !isEvictedState(existing.prevState)) {
         hydrated.set(existing.id, existing);
       }
     }
-    this.actions = actions.slice(0, this.maxActions).map(a => {
+    const merged = actions.slice(0, this.max).map(a => {
       const h = hydrated.get(a.id);
       if (!h || !isEvictedState(a.prevState)) return a;
       return {
@@ -396,7 +352,7 @@ class ReduxActionStore {
         error: isPayloadOnDevice(a.error) ? h.error : a.error
       };
     });
-    this.notifyListeners();
+    this.setItems(merged);
   }
 
   /**
@@ -405,44 +361,18 @@ class ReduxActionStore {
    * `getActionDetail` action. Remote-mirror (desktop) use only.
    */
   hydrateAction(id, patch) {
-    const index = this.actions.findIndex(a => a.id === id);
-    if (index === -1) return;
-    this.actions = [...this.actions.slice(0, index), {
-      ...this.actions[index],
-      ...patch
-    }, ...this.actions.slice(index + 1)];
-    this.notifyListeners();
-  }
-  setEnabled(enabled) {
-    this.isEnabled = enabled;
-  }
-  getEnabled() {
-    return this.isEnabled;
-  }
-  subscribe(listener) {
-    this.listeners.add(listener);
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-  notifyListeners() {
-    const actions = this.getActions();
-    this.listeners.forEach(listener => listener(actions));
+    this.hydrateById(id, patch);
   }
   setMaxActions(max) {
-    this.maxActions = max;
-    if (this.actions.length > max) {
-      this.actions = this.actions.slice(0, max);
-      this.notifyListeners();
-    }
+    this.setMax(max);
   }
   getStats() {
-    const total = this.actions.length;
-    const withChanges = this.actions.filter(a => a.hasStateChange).length;
-    const actionTypes = new Set(this.actions.map(a => a.type));
+    const total = this.items.length;
+    const withChanges = this.items.filter(a => a.hasStateChange).length;
+    const actionTypes = new Set(this.items.map(a => a.type));
 
     // Calculate average duration
-    const durations = this.actions.filter(a => a.duration !== undefined).map(a => a.duration);
+    const durations = this.items.filter(a => a.duration !== undefined).map(a => a.duration);
     const avgDuration = durations.length > 0 ? durations.reduce((sum, d) => sum + d, 0) / durations.length : 0;
     return {
       totalActions: total,
@@ -453,7 +383,7 @@ class ReduxActionStore {
     };
   }
   filterActions(filter) {
-    let filtered = [...this.actions];
+    let filtered = [...this.items];
     if (filter.searchText) {
       const search = filter.searchText.toLowerCase();
       filtered = filtered.filter(a => a.type.toLowerCase().includes(search));
@@ -467,14 +397,14 @@ class ReduxActionStore {
     return filtered;
   }
   getUniqueActionTypes() {
-    return Array.from(new Set(this.actions.map(a => a.type))).sort();
+    return Array.from(new Set(this.items.map(a => a.type))).sort();
   }
 
   /**
    * Find related async actions by requestId
    */
   getRelatedActions(requestId) {
-    return this.actions.filter(a => a.meta?.requestId === requestId).sort((a, b) => a.timestamp - b.timestamp); // Sort chronologically
+    return this.items.filter(a => a.meta?.requestId === requestId).sort((a, b) => a.timestamp - b.timestamp); // Sort chronologically
   }
 
   /**
@@ -490,7 +420,7 @@ class ReduxActionStore {
    */
   getLinkedActionsCount(action) {
     if (!action.meta?.requestId) return 0;
-    return this.actions.filter(a => a.meta?.requestId === action.meta?.requestId).length;
+    return this.items.filter(a => a.meta?.requestId === action.meta?.requestId).length;
   }
 
   /**
@@ -528,7 +458,7 @@ class ReduxActionStore {
   getAsyncOperationIndex(requestId) {
     // Get all unique requestIds with their first timestamp
     const requestIdTimestamps = new Map();
-    for (const action of this.actions) {
+    for (const action of this.items) {
       if (action.meta?.requestId && !requestIdTimestamps.has(action.meta.requestId)) {
         requestIdTimestamps.set(action.meta.requestId, action.timestamp);
       }