@buoy-gg/redux 3.0.1 → 3.0.2

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

@@ -1 +1,531 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.FREE_TIER_ACTION_LIMIT=void 0,exports.ReduxModal=ReduxModal;var _react=require("react"),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_useReduxActions=require("../hooks/useReduxActions"),_useAutoInstrumentRedux=require("../hooks/useAutoInstrumentRedux"),_ReduxActionItem=require("./ReduxActionItem"),_ReduxActionDetailContent=require("./ReduxActionDetailContent"),_jsxRuntime=require("react/jsx-runtime");const FREE_TIER_ACTION_LIMIT=exports.FREE_TIER_ACTION_LIMIT=25;function EmptyState({isEnabled:e}){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.emptyState,children:[(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:32,color:_sharedUi.macOSColors.text.muted}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyTitle,children:"No Redux actions"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.emptyText,children:e?"Actions will appear here as they are dispatched":"Enable capture to start recording actions"})]})}function ReduxModal({visible:e,onClose:t,onBack:r,onMinimize:a,enableSharedModalDimensions:s=!1}){const i=(0,_license.useIsPro)(),[o,n]=(0,_react.useState)(!1),{isInstrumented:l,isLoading:d,error:c,isReactReduxAvailable:u}=(0,_useAutoInstrumentRedux.useAutoInstrumentRedux)(),{filteredActions:h,filter:x,setFilter:_,stats:m,clearActions:C,isEnabled:g,toggleCapture:y}=(0,_useReduxActions.useReduxActions)(),p=(0,_react.useMemo)(()=>i?h:h.slice(0,FREE_TIER_ACTION_LIMIT),[h,i]),j=(0,_react.useMemo)(()=>i?0:Math.max(0,h.length-FREE_TIER_ACTION_LIMIT),[h.length,i]),R=j>0,[b,S]=(0,_react.useState)(null),U=(0,_react.useRef)([]);U.current=p;const T=null!==b?p[b]:null,[v,f]=(0,_react.useState)(""),[O,I]=(0,_react.useState)(!1),A=(0,_react.useRef)(null),k=(0,_react.useRef)(null),N=(0,_react.useCallback)(e=>{},[]),w=e=>{f(e),_(t=>({...t,searchText:e}))},B=(0,_react.useCallback)(e=>{const t=U.current.findIndex(t=>t.id===e.id);S(t>=0?t:0)},[]),z=(0,_react.useCallback)(()=>{n(!0)},[]),E=(0,_react.useCallback)(()=>{S(null)},[]),M=(0,_react.useCallback)(e=>{S(e)},[]),P=(0,_react.useCallback)(e=>e.id,[]),V=(0,_react.useCallback)(({item:e})=>(0,_jsxRuntime.jsx)(_ReduxActionItem.ReduxActionItem,{action:e,onPress:B}),[B]),D=s?_sharedUi.devToolsStorageKeys.modal.root():"buoy-redux-modal";if(!e)return null;const W=T&&null!==b?(0,_jsxRuntime.jsx)(_ReduxActionDetailContent.ReduxActionDetailFooter,{action:T,actions:p,selectedIndex:b,onIndexChange:M}):null,H=T&&p.length>1?68:0;return(0,_jsxRuntime.jsxs)(_sharedUi.TickProvider,{children:[(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:D,header:{showToggleButton:!0,customContent:T?(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:E}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:T.type,centered:!0})]}):(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[r&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:r}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:O?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerSearchContainer,children:[(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.macOSColors.text.secondary}),(0,_jsxRuntime.jsx)(_reactNative.TextInput,{ref:A,style:styles.headerSearchInput,placeholder:"Search action types...",placeholderTextColor:_sharedUi.macOSColors.text.muted,value:v,onChangeText:w,onSubmitEditing:()=>I(!1),onBlur:()=>I(!1),autoCapitalize:"none",autoCorrect:!1,returnKeyType:"search"}),v.length>0&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>{w(""),I(!1)},style:styles.headerSearchClear,children:(0,_jsxRuntime.jsx)(_sharedUi.X,{size:14,color:_sharedUi.macOSColors.text.secondary})})]}):(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerChipRow,children:[(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.headerChip,!x.onlyWithChanges&&styles.headerChipActive],onPress:()=>_(e=>({...e,onlyWithChanges:!1})),children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.headerChipLabel,children:"ALL"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.headerChipValue,{color:_sharedUi.macOSColors.text.primary}],children:m.totalActions})]}),(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:[styles.headerChip,x.onlyWithChanges&&styles.headerChipActive],onPress:()=>_(e=>({...e,onlyWithChanges:!0})),children:[(0,_jsxRuntime.jsx)(_sharedUi.Zap,{size:12,color:_sharedUi.macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.headerChipValue,{color:_sharedUi.macOSColors.semantic.warning}],children:m.actionsWithChanges})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.headerChip,children:[(0,_jsxRuntime.jsx)(_sharedUi.CheckCircle,{size:12,color:_sharedUi.macOSColors.semantic.success}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:[styles.headerChipValue,{color:_sharedUi.macOSColors.semantic.success}],children:m.uniqueActionTypes})]})]})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:()=>I(!0),style:styles.headerActionButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.macOSColors.text.secondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:async()=>{if(!i)return void n(!0);const e=h.map(e=>({id:e.id,type:e.type,...void 0!==e.payload&&{payload:e.payload},timestamp:e.timestamp,prevState:e.prevState,nextState:e.nextState,hasStateChange:e.hasStateChange}));await(0,_sharedUi.copyToClipboard)(e)},style:[styles.headerActionButton,0===h.length&&styles.headerActionButtonDisabled],disabled:0===h.length,children:(0,_jsxRuntime.jsx)(_sharedUi.Copy,{size:14,color:h.length>0?_sharedUi.macOSColors.text.secondary:_sharedUi.macOSColors.text.disabled})}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{isEnabled:g,onToggle:y,accessibilityLabel:"Toggle Redux action capture"}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{onPress:C,style:[styles.headerActionButton,0===h.length&&styles.headerActionButtonDisabled],disabled:0===h.length,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:h.length>0?_sharedUi.macOSColors.text.muted:_sharedUi.macOSColors.text.disabled})})]})]})},onModeChange:N,enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:W,footerHeight:H,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:T&&null!==b?(0,_jsxRuntime.jsx)(_ReduxActionDetailContent.ReduxActionDetailContent,{action:T,actions:p,selectedIndex:b,onIndexChange:M,disableInternalFooter:!0}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[c&&!l&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.errorBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.AlertTriangle,{size:14,color:_sharedUi.macOSColors.semantic.error}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.errorText,children:u?"Not inside a Redux Provider. Wrap your app with <Provider store={store}>.":"react-redux not installed. Run: npm install react-redux"})]}),!g&&l&&(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.macOSColors.semantic.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Action capture is disabled"})]}),R&&(0,_jsxRuntime.jsxs)(_reactNative.TouchableOpacity,{style:styles.lockedBanner,onPress:z,activeOpacity:.8,children:[(0,_jsxRuntime.jsx)(_sharedUi.Lock,{size:14,color:_sharedUi.buoyColors.primary}),(0,_jsxRuntime.jsxs)(_reactNative.Text,{style:styles.lockedText,children:[j," older ",1===j?"action":"actions"," locked"]}),(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.upgradeBadge,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.upgradeBadgeText,children:"UPGRADE"})})]}),p.length>0?(0,_jsxRuntime.jsx)(_reactNative.FlatList,{ref:k,data:p,renderItem:V,keyExtractor:P,contentContainerStyle:styles.listContent,showsVerticalScrollIndicator:!0,removeClippedSubviews:!0,initialNumToRender:15,maxToRenderPerBatch:10,windowSize:10,scrollEnabled:!1}):(0,_jsxRuntime.jsx)(EmptyState,{isEnabled:g})]})})}),(0,_jsxRuntime.jsx)(_sharedUi.ProUpgradeModal,{visible:o,onClose:()=>n(!1),featureName:"Full Action History"})]})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.macOSColors.background.base},headerSearchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:_sharedUi.macOSColors.background.input,borderRadius:10,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,paddingHorizontal:12,paddingVertical:5},headerSearchInput:{flex:1,color:_sharedUi.macOSColors.text.primary,fontSize:13,marginLeft:6,paddingVertical:2},headerSearchClear:{marginLeft:6,padding:4},headerChipRow:{flexDirection:"row",alignItems:"center",gap:8},headerChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:_sharedUi.macOSColors.background.hover,paddingHorizontal:10,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default},headerChipActive:{backgroundColor:_sharedUi.macOSColors.semantic.infoBackground,borderColor:_sharedUi.macOSColors.semantic.info+"50"},headerChipLabel:{fontSize:10,fontWeight:"700",color:_sharedUi.macOSColors.text.muted},headerChipValue:{fontSize:12,fontWeight:"600",fontFamily:"monospace"},headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.macOSColors.background.hover,borderWidth:1,borderColor:_sharedUi.macOSColors.border.default,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},startButton:{backgroundColor:_sharedUi.macOSColors.semantic.successBackground,borderColor:_sharedUi.macOSColors.semantic.success+"40"},stopButton:{backgroundColor:_sharedUi.macOSColors.semantic.errorBackground,borderColor:_sharedUi.macOSColors.semantic.error+"40"},errorBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.macOSColors.semantic.errorBackground,borderRadius:8,borderWidth:1,borderColor:_sharedUi.macOSColors.semantic.error+"20"},errorText:{color:_sharedUi.macOSColors.semantic.error,fontSize:11,flex:1},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.macOSColors.semantic.warningBackground,borderRadius:8,borderWidth:1,borderColor:_sharedUi.macOSColors.semantic.warning+"20"},disabledText:{color:_sharedUi.macOSColors.semantic.warning,fontSize:11,flex:1},listContent:{paddingTop:8,paddingBottom:20},emptyState:{alignItems:"center",paddingVertical:40},emptyTitle:{color:_sharedUi.macOSColors.text.primary,fontSize:14,fontWeight:"600",marginTop:12,marginBottom:6},emptyText:{color:_sharedUi.macOSColors.text.muted,fontSize:12,textAlign:"center"},lockedBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.primary+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.primary+"33"},lockedText:{color:_sharedUi.buoyColors.primary,fontSize:11,fontWeight:"500",flex:1},upgradeBadge:{backgroundColor:_sharedUi.buoyColors.primary,paddingHorizontal:8,paddingVertical:3,borderRadius:4},upgradeBadgeText:{color:"#fff",fontSize:9,fontWeight:"700",letterSpacing:.5}});
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FREE_TIER_ACTION_LIMIT = void 0;
+exports.ReduxModal = ReduxModal;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _license = require("@buoy-gg/license");
+var _useReduxActions = require("../hooks/useReduxActions");
+var _reduxActionStore = require("../utils/reduxActionStore");
+var _useAutoInstrumentRedux = require("../hooks/useAutoInstrumentRedux");
+var _ReduxActionItem = require("./ReduxActionItem");
+var _ReduxActionDetailContent = require("./ReduxActionDetailContent");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Main Redux DevTools modal
+ *
+ * This component auto-instruments the Redux store when it mounts,
+ * providing zero-config action capture for the DevTools.
+ */
+
+/** Free tier limit for action history */
+const FREE_TIER_ACTION_LIMIT = exports.FREE_TIER_ACTION_LIMIT = 25;
+function EmptyState({
+  isEnabled
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.emptyState,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+      size: 32,
+      color: _sharedUi.macOSColors.text.muted
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyTitle,
+      children: "No Redux actions"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: styles.emptyText,
+      children: isEnabled ? "Actions will appear here as they are dispatched" : "Enable capture to start recording actions"
+    })]
+  });
+}
+function ReduxModal({
+  visible,
+  onClose,
+  onBack,
+  onMinimize,
+  enableSharedModalDimensions = false
+}) {
+  const isPro = (0, _license.useIsPro)();
+  const [showProModal, setShowProModal] = (0, _react.useState)(false);
+
+  // Auto-instrument the Redux store (zero-config)
+  const {
+    isInstrumented,
+    isLoading: isInstrumentLoading,
+    error: instrumentError,
+    isReactReduxAvailable
+  } = (0, _useAutoInstrumentRedux.useAutoInstrumentRedux)();
+  const {
+    filteredActions,
+    filter,
+    setFilter,
+    stats,
+    clearActions,
+    isEnabled,
+    toggleCapture
+  } = (0, _useReduxActions.useReduxActions)();
+
+  // For free users, limit visible actions to FREE_TIER_ACTION_LIMIT
+  const visibleActions = (0, _react.useMemo)(() => {
+    if (isPro) return filteredActions;
+    return filteredActions.slice(0, FREE_TIER_ACTION_LIMIT);
+  }, [filteredActions, isPro]);
+
+  // Calculate how many actions are locked
+  const lockedActionCount = (0, _react.useMemo)(() => {
+    if (isPro) return 0;
+    return Math.max(0, filteredActions.length - FREE_TIER_ACTION_LIMIT);
+  }, [filteredActions.length, isPro]);
+  const hasLockedActions = lockedActionCount > 0;
+
+  // Selection state - track index for navigation
+  const [selectedActionIndex, setSelectedActionIndex] = (0, _react.useState)(null);
+  const actionsRef = (0, _react.useRef)([]);
+
+  // Keep actions ref in sync (using visible actions for navigation)
+  actionsRef.current = visibleActions;
+
+  // Get selected action from index
+  const selectedAction = selectedActionIndex !== null ? visibleActions[selectedActionIndex] : null;
+  const [searchText, setSearchText] = (0, _react.useState)("");
+  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
+  const searchInputRef = (0, _react.useRef)(null);
+  const flatListRef = (0, _react.useRef)(null);
+  const handleModeChange = (0, _react.useCallback)(_mode => {
+    // Mode changes handled by JsModal
+  }, []);
+  const handleSearch = text => {
+    setSearchText(text);
+    setFilter(prev => ({
+      ...prev,
+      searchText: text
+    }));
+  };
+  const handleActionPress = (0, _react.useCallback)(action => {
+    const index = actionsRef.current.findIndex(a => a.id === action.id);
+    setSelectedActionIndex(index >= 0 ? index : 0);
+  }, []);
+  const handleUpgradePress = (0, _react.useCallback)(() => {
+    setShowProModal(true);
+  }, []);
+  const handleBack = (0, _react.useCallback)(() => {
+    setSelectedActionIndex(null);
+  }, []);
+  const handleIndexChange = (0, _react.useCallback)(newIndex => {
+    setSelectedActionIndex(newIndex);
+  }, []);
+  const handleCopyAll = async () => {
+    if (!isPro) {
+      setShowProModal(true);
+      return;
+    }
+    const actionsData = filteredActions.map(action => ({
+      id: action.id,
+      type: action.type,
+      ...(action.payload !== undefined && {
+        payload: action.payload
+      }),
+      timestamp: action.timestamp,
+      prevState: action.prevState,
+      nextState: action.nextState,
+      hasStateChange: action.hasStateChange
+    }));
+    await (0, _sharedUi.copyToClipboard)(actionsData);
+  };
+
+  // FlatList optimization
+  const keyExtractor = (0, _react.useCallback)(item => item.id, []);
+  const renderItem = (0, _react.useCallback)(({
+    item
+  }) => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionItem.ReduxActionItem, {
+      action: item,
+      onPress: handleActionPress
+    });
+  }, [handleActionPress]);
+  const renderHeaderContent = () => {
+    // Detail view header - show action type
+    if (selectedAction) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+          onBack: handleBack
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+          title: selectedAction.type,
+          centered: true
+        })]
+      });
+    }
+
+    // Main list view header
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
+      children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
+        onBack: onBack
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
+        title: "",
+        children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.headerSearchContainer,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+            size: 14,
+            color: _sharedUi.macOSColors.text.secondary
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+            ref: searchInputRef,
+            style: styles.headerSearchInput,
+            placeholder: "Search action types...",
+            placeholderTextColor: _sharedUi.macOSColors.text.muted,
+            value: searchText,
+            onChangeText: handleSearch,
+            onSubmitEditing: () => setIsSearchActive(false),
+            onBlur: () => setIsSearchActive(false),
+            autoCapitalize: "none",
+            autoCorrect: false,
+            returnKeyType: "search"
+          }), searchText.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+            onPress: () => {
+              handleSearch("");
+              setIsSearchActive(false);
+            },
+            style: styles.headerSearchClear,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
+              size: 14,
+              color: _sharedUi.macOSColors.text.secondary
+            })
+          })]
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: styles.headerChipRow,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.headerChip, !filter.onlyWithChanges && styles.headerChipActive],
+            onPress: () => setFilter(prev => ({
+              ...prev,
+              onlyWithChanges: false
+            })),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.headerChipLabel,
+              children: "ALL"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.headerChipValue, {
+                color: _sharedUi.macOSColors.text.primary
+              }],
+              children: stats.totalActions
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: [styles.headerChip, filter.onlyWithChanges && styles.headerChipActive],
+            onPress: () => setFilter(prev => ({
+              ...prev,
+              onlyWithChanges: true
+            })),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Zap, {
+              size: 12,
+              color: _sharedUi.macOSColors.semantic.warning
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.headerChipValue, {
+                color: _sharedUi.macOSColors.semantic.warning
+              }],
+              children: stats.actionsWithChanges
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.headerChip,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CheckCircle, {
+              size: 12,
+              color: _sharedUi.macOSColors.semantic.success
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: [styles.headerChipValue, {
+                color: _sharedUi.macOSColors.semantic.success
+              }],
+              children: stats.uniqueActionTypes
+            })]
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: () => setIsSearchActive(true),
+          style: styles.headerActionButton,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
+            size: 14,
+            color: _sharedUi.macOSColors.text.secondary
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: handleCopyAll,
+          style: [styles.headerActionButton, filteredActions.length === 0 && styles.headerActionButtonDisabled],
+          disabled: filteredActions.length === 0,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
+            size: 14,
+            color: filteredActions.length > 0 ? _sharedUi.macOSColors.text.secondary : _sharedUi.macOSColors.text.disabled
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
+          isEnabled: isEnabled,
+          onToggle: toggleCapture,
+          accessibilityLabel: "Toggle Redux action capture"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+          onPress: clearActions,
+          style: [styles.headerActionButton, filteredActions.length === 0 && styles.headerActionButtonDisabled],
+          disabled: filteredActions.length === 0,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
+            size: 14,
+            color: filteredActions.length > 0 ? _sharedUi.macOSColors.text.muted : _sharedUi.macOSColors.text.disabled
+          })
+        })]
+      })]
+    });
+  };
+  const persistenceKey = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.modal.root() : "buoy-redux-modal";
+  if (!visible) return null;
+
+  // Footer for detail view navigation
+  const footerNode = selectedAction && selectedActionIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionDetailContent.ReduxActionDetailFooter, {
+    action: selectedAction,
+    actions: visibleActions,
+    selectedIndex: selectedActionIndex,
+    onIndexChange: handleIndexChange
+  }) : null;
+  const footerHeight = selectedAction && visibleActions.length > 1 ? 68 : 0;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.TickProvider, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
+      visible: visible,
+      onClose: onClose,
+      onMinimize: onMinimize,
+      persistenceKey: persistenceKey,
+      header: {
+        showToggleButton: true,
+        customContent: renderHeaderContent()
+      },
+      onModeChange: handleModeChange,
+      enablePersistence: true,
+      initialMode: "bottomSheet",
+      enableGlitchEffects: true,
+      styles: {},
+      footer: footerNode,
+      footerHeight: footerHeight,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.container,
+        children: selectedAction && selectedActionIndex !== null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReduxActionDetailContent.ReduxActionDetailContent, {
+          action: selectedAction,
+          actions: visibleActions,
+          selectedIndex: selectedActionIndex,
+          onIndexChange: handleIndexChange,
+          disableInternalFooter: true
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [instrumentError && !isInstrumented && !_reduxActionStore.reduxActionStore.isCaptureSuppressed() && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.errorBanner,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.AlertTriangle, {
+              size: 14,
+              color: _sharedUi.macOSColors.semantic.error
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.errorText,
+              children: isReactReduxAvailable ? "Not inside a Redux Provider. Wrap your app with <Provider store={store}>." : "react-redux not installed. Run: npm install react-redux"
+            })]
+          }), !isEnabled && isInstrumented && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: styles.disabledBanner,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Power, {
+              size: 14,
+              color: _sharedUi.macOSColors.semantic.warning
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+              style: styles.disabledText,
+              children: "Action capture is disabled"
+            })]
+          }), hasLockedActions && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
+            style: styles.lockedBanner,
+            onPress: handleUpgradePress,
+            activeOpacity: 0.8,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Lock, {
+              size: 14,
+              color: _sharedUi.buoyColors.primary
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+              style: styles.lockedText,
+              children: [lockedActionCount, " older ", lockedActionCount === 1 ? "action" : "actions", " locked"]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: styles.upgradeBadge,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+                style: styles.upgradeBadgeText,
+                children: "UPGRADE"
+              })
+            })]
+          }), visibleActions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.FlatList, {
+            ref: flatListRef,
+            data: visibleActions,
+            renderItem: renderItem,
+            keyExtractor: keyExtractor,
+            contentContainerStyle: styles.listContent,
+            showsVerticalScrollIndicator: true,
+            removeClippedSubviews: true,
+            initialNumToRender: 15,
+            maxToRenderPerBatch: 10,
+            windowSize: 10,
+            scrollEnabled: false
+          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(EmptyState, {
+            isEnabled: isEnabled
+          })]
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ProUpgradeModal, {
+      visible: showProModal,
+      onClose: () => setShowProModal(false),
+      featureName: "Full Action History"
+    })]
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: _sharedUi.macOSColors.background.base
+  },
+  headerSearchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: _sharedUi.macOSColors.background.input,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    paddingHorizontal: 12,
+    paddingVertical: 5
+  },
+  headerSearchInput: {
+    flex: 1,
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 13,
+    marginLeft: 6,
+    paddingVertical: 2
+  },
+  headerSearchClear: {
+    marginLeft: 6,
+    padding: 4
+  },
+  headerChipRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  headerChip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 4,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default
+  },
+  headerChipActive: {
+    backgroundColor: _sharedUi.macOSColors.semantic.infoBackground,
+    borderColor: _sharedUi.macOSColors.semantic.info + "50"
+  },
+  headerChipLabel: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: _sharedUi.macOSColors.text.muted
+  },
+  headerChipValue: {
+    fontSize: 12,
+    fontWeight: "600",
+    fontFamily: "monospace"
+  },
+  headerActionButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: _sharedUi.macOSColors.background.hover,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.border.default,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  headerActionButtonDisabled: {
+    opacity: 0.55
+  },
+  startButton: {
+    backgroundColor: _sharedUi.macOSColors.semantic.successBackground,
+    borderColor: _sharedUi.macOSColors.semantic.success + "40"
+  },
+  stopButton: {
+    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
+    borderColor: _sharedUi.macOSColors.semantic.error + "40"
+  },
+  errorBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.macOSColors.semantic.errorBackground,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.error + "20"
+  },
+  errorText: {
+    color: _sharedUi.macOSColors.semantic.error,
+    fontSize: 11,
+    flex: 1
+  },
+  disabledBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.macOSColors.semantic.warningBackground,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.macOSColors.semantic.warning + "20"
+  },
+  disabledText: {
+    color: _sharedUi.macOSColors.semantic.warning,
+    fontSize: 11,
+    flex: 1
+  },
+  listContent: {
+    paddingTop: 8,
+    paddingBottom: 20
+  },
+  emptyState: {
+    alignItems: "center",
+    paddingVertical: 40
+  },
+  emptyTitle: {
+    color: _sharedUi.macOSColors.text.primary,
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 12,
+    marginBottom: 6
+  },
+  emptyText: {
+    color: _sharedUi.macOSColors.text.muted,
+    fontSize: 12,
+    textAlign: "center"
+  },
+  // Locked actions banner styles
+  lockedBanner: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    padding: 10,
+    marginHorizontal: 12,
+    marginTop: 8,
+    backgroundColor: _sharedUi.buoyColors.primary + "15",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: _sharedUi.buoyColors.primary + "33"
+  },
+  lockedText: {
+    color: _sharedUi.buoyColors.primary,
+    fontSize: 11,
+    fontWeight: "500",
+    flex: 1
+  },
+  upgradeBadge: {
+    backgroundColor: _sharedUi.buoyColors.primary,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+    borderRadius: 4
+  },
+  upgradeBadgeText: {
+    color: "#fff",
+    fontSize: 9,
+    fontWeight: "700",
+    letterSpacing: 0.5
+  }
+});

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

@@ -1 +1,52 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"FREE_TIER_ACTION_LIMIT",{enumerable:!0,get:function(){return _ReduxModal.FREE_TIER_ACTION_LIMIT}}),Object.defineProperty(exports,"ReduxActionDetailContent",{enumerable:!0,get:function(){return _ReduxActionDetailContent.ReduxActionDetailContent}}),Object.defineProperty(exports,"ReduxActionDetailFooter",{enumerable:!0,get:function(){return _ReduxActionDetailContent.ReduxActionDetailFooter}}),Object.defineProperty(exports,"ReduxActionDetailView",{enumerable:!0,get:function(){return _ReduxActionDetailView.ReduxActionDetailView}}),Object.defineProperty(exports,"ReduxActionItem",{enumerable:!0,get:function(){return _ReduxActionItem.ReduxActionItem}}),Object.defineProperty(exports,"ReduxIcon",{enumerable:!0,get:function(){return _ReduxIcon.ReduxIcon}}),Object.defineProperty(exports,"ReduxModal",{enumerable:!0,get:function(){return _ReduxModal.ReduxModal}});var _ReduxModal=require("./ReduxModal"),_ReduxActionItem=require("./ReduxActionItem"),_ReduxActionDetailView=require("./ReduxActionDetailView"),_ReduxActionDetailContent=require("./ReduxActionDetailContent"),_ReduxIcon=require("./ReduxIcon");
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FREE_TIER_ACTION_LIMIT", {
+  enumerable: true,
+  get: function () {
+    return _ReduxModal.FREE_TIER_ACTION_LIMIT;
+  }
+});
+Object.defineProperty(exports, "ReduxActionDetailContent", {
+  enumerable: true,
+  get: function () {
+    return _ReduxActionDetailContent.ReduxActionDetailContent;
+  }
+});
+Object.defineProperty(exports, "ReduxActionDetailFooter", {
+  enumerable: true,
+  get: function () {
+    return _ReduxActionDetailContent.ReduxActionDetailFooter;
+  }
+});
+Object.defineProperty(exports, "ReduxActionDetailView", {
+  enumerable: true,
+  get: function () {
+    return _ReduxActionDetailView.ReduxActionDetailView;
+  }
+});
+Object.defineProperty(exports, "ReduxActionItem", {
+  enumerable: true,
+  get: function () {
+    return _ReduxActionItem.ReduxActionItem;
+  }
+});
+Object.defineProperty(exports, "ReduxIcon", {
+  enumerable: true,
+  get: function () {
+    return _ReduxIcon.ReduxIcon;
+  }
+});
+Object.defineProperty(exports, "ReduxModal", {
+  enumerable: true,
+  get: function () {
+    return _ReduxModal.ReduxModal;
+  }
+});
+var _ReduxModal = require("./ReduxModal");
+var _ReduxActionItem = require("./ReduxActionItem");
+var _ReduxActionDetailView = require("./ReduxActionDetailView");
+var _ReduxActionDetailContent = require("./ReduxActionDetailContent");
+var _ReduxIcon = require("./ReduxIcon");

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

@@ -1 +1,25 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),Object.defineProperty(exports,"useAutoInstrumentRedux",{enumerable:!0,get:function(){return _useAutoInstrumentRedux.useAutoInstrumentRedux}}),Object.defineProperty(exports,"useReduxActions",{enumerable:!0,get:function(){return _useReduxActions.useReduxActions}}),Object.defineProperty(exports,"useReduxAvailability",{enumerable:!0,get:function(){return _useAutoInstrumentRedux.useReduxAvailability}});var _useReduxActions=require("./useReduxActions"),_useAutoInstrumentRedux=require("./useAutoInstrumentRedux");
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useAutoInstrumentRedux", {
+  enumerable: true,
+  get: function () {
+    return _useAutoInstrumentRedux.useAutoInstrumentRedux;
+  }
+});
+Object.defineProperty(exports, "useReduxActions", {
+  enumerable: true,
+  get: function () {
+    return _useReduxActions.useReduxActions;
+  }
+});
+Object.defineProperty(exports, "useReduxAvailability", {
+  enumerable: true,
+  get: function () {
+    return _useAutoInstrumentRedux.useReduxAvailability;
+  }
+});
+var _useReduxActions = require("./useReduxActions");
+var _useAutoInstrumentRedux = require("./useAutoInstrumentRedux");