@buoy-gg/redux 5.0.0 → 6.0.1

package/README.md

@@ -1,55 +1,71 @@
 # @buoy-gg/redux
 
-## Description
+[![npm version](https://img.shields.io/npm/v/@buoy-gg/redux?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/redux) [![npm downloads](https://img.shields.io/npm/dm/@buoy-gg/redux?style=flat-square&labelColor=1c1c1c&color=10B981)](https://www.npmjs.com/package/@buoy-gg/redux)
 
-redux package for the monorepo.
+**Redux DevTools on the device — action log, state diffs, and time travel with zero store changes.**
 
-## Installation
+Part of [Buoy](https://github.com/Buoy-gg/buoy) — devtools that live inside your React Native app. Install it and it auto-appears in the floating menu from [`@buoy-gg/core`](https://www.npmjs.com/package/@buoy-gg/core).
 
-This package is part of the monorepo and is automatically available to other packages and the example app.
+## Install
 
-## Usage
+```bash
+npm install @buoy-gg/core @buoy-gg/redux
+```
 
-```typescript
-import { ReduxComponent } from '@buoy-gg/redux';
+## Quick start
 
-// Use in your component
-<ReduxComponent title="Hello World" />
-```
+Zero config. Your existing store works as-is — no middleware, no wrapper. The tool auto-instruments the store when `FloatingDevTools` mounts.
 
-## Development
+```tsx
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import { FloatingDevTools } from '@buoy-gg/core';
 
-### Building
+const store = configureStore({ reducer: rootReducer }); // unchanged
 
-```bash
-pnpm build
+export default function App() {
+  return (
+    <Provider store={store}>
+      <YourApp />
+      <FloatingDevTools />
+    </Provider>
+  );
+}
 ```
 
-### Type Checking
+### Optional: full time travel
 
-```bash
-pnpm typecheck
-```
+To jump back to past states (not just view them), wrap your reducer:
 
-### Clean Build
+```tsx
+import { withBuoyDevTools } from '@buoy-gg/redux';
 
-```bash
-pnpm clean
+const store = configureStore({
+  reducer: withBuoyDevTools(rootReducer),
+});
 ```
 
-## Structure
+## What you get
 
-```
-redux/
-├── src/
-│   └── index.ts        # Main export file
-├── lib/                # Built output (git ignored)
-├── package.json
-├── tsconfig.json
-└── README.md
-```
+- **Every action, captured** — type, payload, timestamp, and a diff summary (`+added -removed ~modified`) per dispatch
+- **Frame-budget warnings** — actions taking longer than 16ms are flagged so slow reducers can't hide
+- **RTK async thunk linking** — pending → fulfilled/rejected automatically connected by Request ID, with a visual timeline and per-request durations
+- **Time travel** — jump to the state after any action, or replay an action to re-test your reducers
+- **Three-tab detail view** — full action payload, full state tree, and a side-by-side diff (tree or split view)
+- **Search & filter** — find actions by type, or show only actions that actually changed state
+- **Export & copy** — dump action history as JSON for bug reports or test fixtures
+- **Recording toggle** — pause capture when you need to focus, resume when ready
+
+## Desktop & AI
+
+The same live session streams to [Buoy Desktop](https://github.com/Buoy-gg/Buoy-Desktop) (free, macOS/Windows/Linux) and to Claude Code or Cursor via the [Buoy MCP server](https://buoy.gg/buoy/latest/docs/mcp).
+
+## Free vs Pro
+
+Every tool is free. [Pro](https://buoy.gg/pricing) unlocks production builds, the MCP server, and unlimited capture. Every weekend, Pro features unlock free for everyone.
+
+---
 
-## Dependencies
+📚 [Full docs](https://buoy.gg/buoy/latest/docs/tools/redux) · [All Buoy tools](https://github.com/Buoy-gg/buoy)
 
-- Uses `@buoy-gg/shared-ui` for common components and utilities
-- React and React Native as peer dependencies
+Proprietary software. © Buoy LLC. [Terms](https://buoy.gg/terms)

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

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ReduxActionItem = ReduxActionItem;
+exports.ReduxActionItem = void 0;
+var _react = require("react");
 var _reactNative = require("react-native");
 var _sharedUi = require("@buoy-gg/shared-ui");
 var _reduxActionStore = require("../utils/reduxActionStore");
@@ -206,11 +207,15 @@ function getPrimaryText(action) {
   }
   return action.type;
 }
-function ReduxActionItem({
+
+// Memo justified by profiling (tool-bench 2026-07-06): ReduxActionItem
+// x172 renders during a 5s idle dwell at 200 seeded actions. The relative
+// timestamp is delegated to the shared <RelativeTime/> leaf so the 5s
+// tick re-renders only that Text, not this row.
+const ReduxActionItem = exports.ReduxActionItem = /*#__PURE__*/(0, _react.memo)(function ReduxActionItem({
   action,
   onPress
 }) {
-  const relativeTime = (0, _sharedUi.useRelativeTime)(action.timestamp);
   const sliceName = action.sliceName ?? undefined;
   const statusColor = getStatusColor(action.category, action.hasStateChange, sliceName);
   const statusLabel = getStatusLabel(action.category, sliceName);
@@ -323,7 +328,9 @@ function ReduxActionItem({
     statusLabel: statusLabel,
     statusSublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: relativeTime
+    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,
@@ -332,7 +339,7 @@ function ReduxActionItem({
     showChevron: true,
     onPress: () => onPress(action)
   });
-}
+});
 const styles = _reactNative.StyleSheet.create({
   badgeContainer: {
     flexDirection: "row",

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

@@ -281,6 +281,10 @@ function ReduxModal({
     onIndexChange: handleIndexChange
   }) : null;
   const footerHeight = selectedAction && visibleActions.length > 1 ? 68 : 0;
+
+  // The action list owns its scrolling so FlatList virtualization works
+  // (see ZustandModal — same pattern, same tool-bench evidence).
+  const listOwnsScroll = selectedAction == null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
       visible: visible,
@@ -295,6 +299,7 @@ function ReduxModal({
       enablePersistence: true,
       initialMode: "bottomSheet",
       enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
       styles: {},
       footer: footerNode,
       footerHeight: footerHeight,
@@ -350,10 +355,10 @@ function ReduxModal({
             contentContainerStyle: styles.listContent,
             showsVerticalScrollIndicator: true,
             removeClippedSubviews: true,
-            initialNumToRender: 15,
-            maxToRenderPerBatch: 10,
-            windowSize: 10,
-            scrollEnabled: false
+            initialNumToRender: 12,
+            maxToRenderPerBatch: 8,
+            windowSize: 5,
+            updateCellsBatchingPeriod: 50
           }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
             isEnabled: isEnabled
           })]

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

@@ -5,8 +5,9 @@
  * Uses shared CompactRow for consistent styling with React Query devtools
  */
 
+import { memo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import { CompactRow, buoyColors, Zap, AlertCircle, Clock, useRelativeTime } from "@buoy-gg/shared-ui";
+import { CompactRow, buoyColors, Zap, AlertCircle, Clock, RelativeTime } from "@buoy-gg/shared-ui";
 import { reduxActionStore } from "../utils/reduxActionStore";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -202,11 +203,15 @@ function getPrimaryText(action) {
   }
   return action.type;
 }
-export function ReduxActionItem({
+
+// Memo justified by profiling (tool-bench 2026-07-06): ReduxActionItem
+// x172 renders during a 5s idle dwell at 200 seeded actions. The relative
+// timestamp is delegated to the shared <RelativeTime/> leaf so the 5s
+// tick re-renders only that Text, not this row.
+export const ReduxActionItem = /*#__PURE__*/memo(function ReduxActionItem({
   action,
   onPress
 }) {
-  const relativeTime = useRelativeTime(action.timestamp);
   const sliceName = action.sliceName ?? undefined;
   const statusColor = getStatusColor(action.category, action.hasStateChange, sliceName);
   const statusLabel = getStatusLabel(action.category, sliceName);
@@ -319,7 +324,9 @@ export function ReduxActionItem({
     statusLabel: statusLabel,
     statusSublabel: sublabel,
     primaryText: primaryText,
-    bottomRightText: relativeTime
+    bottomRightText: /*#__PURE__*/_jsx(RelativeTime, {
+      timestamp: action.timestamp
+    })
     // Use customBadge if we have special indicators, otherwise show action badge as text
     ,
     customBadge: customBadge,
@@ -328,7 +335,7 @@ export function ReduxActionItem({
     showChevron: true,
     onPress: () => onPress(action)
   });
-}
+});
 const styles = StyleSheet.create({
   badgeContainer: {
     flexDirection: "row",

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

@@ -276,6 +276,10 @@ export function ReduxModal({
     onIndexChange: handleIndexChange
   }) : null;
   const footerHeight = selectedAction && visibleActions.length > 1 ? 68 : 0;
+
+  // The action list owns its scrolling so FlatList virtualization works
+  // (see ZustandModal — same pattern, same tool-bench evidence).
+  const listOwnsScroll = selectedAction == null;
   return /*#__PURE__*/_jsxs(TickProvider, {
     children: [/*#__PURE__*/_jsx(JsModal, {
       visible: visible,
@@ -290,6 +294,7 @@ export function ReduxModal({
       enablePersistence: true,
       initialMode: "bottomSheet",
       enableGlitchEffects: true,
+      disableScrollWrapper: listOwnsScroll,
       styles: {},
       footer: footerNode,
       footerHeight: footerHeight,
@@ -345,10 +350,10 @@ export function ReduxModal({
             contentContainerStyle: styles.listContent,
             showsVerticalScrollIndicator: true,
             removeClippedSubviews: true,
-            initialNumToRender: 15,
-            maxToRenderPerBatch: 10,
-            windowSize: 10,
-            scrollEnabled: false
+            initialNumToRender: 12,
+            maxToRenderPerBatch: 8,
+            windowSize: 5,
+            updateCellsBatchingPeriod: 50
           }) : /*#__PURE__*/_jsx(EmptyState, {
             isEnabled: isEnabled
           })]

package/lib/typescript/redux/components/ReduxActionItem.d.ts

@@ -7,6 +7,6 @@ interface ReduxActionItemProps {
     action: ReduxAction;
     onPress: (action: ReduxAction) => void;
 }
-export declare function ReduxActionItem({ action, onPress }: ReduxActionItemProps): import("react").JSX.Element;
+export declare const ReduxActionItem: import("react").NamedExoticComponent<ReduxActionItemProps>;
 export {};
 //# sourceMappingURL=ReduxActionItem.d.ts.map

package/lib/typescript/redux/components/ReduxActionItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReduxActionItem.d.ts","sourceRoot":"","sources":["../../../../src/redux/components/ReduxActionItem.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,OAAO,KAAK,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AAG5D,UAAU,oBAAoB;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AA+JD,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,oBAAoB,+BAmGxE"}
+{"version":3,"file":"ReduxActionItem.d.ts","sourceRoot":"","sources":["../../../../src/redux/components/ReduxActionItem.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,KAAK,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AAG5D,UAAU,oBAAoB;IAC5B,MAAM,EAAE,WAAW,CAAC;IACpB,OAAO,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;CACxC;AAmKD,eAAO,MAAM,eAAe,4DAkG1B,CAAC"}

package/lib/typescript/redux/components/ReduxModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReduxModal.d.ts","sourceRoot":"","sources":["../../../../src/redux/components/ReduxModal.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AA2CH,yCAAyC;AACzC,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAgBD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,GACpC,EAAE,eAAe,sCA4XjB"}
+{"version":3,"file":"ReduxModal.d.ts","sourceRoot":"","sources":["../../../../src/redux/components/ReduxModal.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AA2CH,yCAAyC;AACzC,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC,UAAU,eAAe;IACvB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,2BAA2B,CAAC,EAAE,OAAO,CAAC;CACvC;AAgBD,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,OAAO,EACP,MAAM,EACN,UAAU,EACV,2BAAmC,GACpC,EAAE,eAAe,sCAiYjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/redux",
-  "version": "5.0.0",
+  "version": "6.0.1",
   "description": "Redux Toolkit DevTools for React Native",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -26,9 +26,9 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/shared-ui": "5.0.0",
-    "@buoy-gg/license": "5.0.0",
-    "@buoy-gg/floating-tools-core": "5.0.0"
+    "@buoy-gg/license": "6.0.1",
+    "@buoy-gg/floating-tools-core": "6.0.1",
+    "@buoy-gg/shared-ui": "6.0.1"
   },
   "peerDependencies": {
     "@reduxjs/toolkit": ">=2.0.0",