react-native-inapp-inspector 1.1.1 → 1.1.3

package/README.md

@@ -185,6 +185,20 @@ import store from './store';
 connectReduxStore(store);
 ```
 
+**Recommended:** if you use thunks, sagas or RTK Query, also add the inspector middleware so actions dispatched from inside them are captured with full type/payload attribution (they bypass the wrapped outer dispatch otherwise):
+
+```tsx
+import {inspectorReduxMiddleware} from 'react-native-inapp-inspector';
+
+const store = configureStore({
+  reducer,
+  middleware: getDefaultMiddleware =>
+    getDefaultMiddleware().concat(inspectorReduxMiddleware),
+});
+```
+
+Using both together is safe — they de-duplicate automatically.
+
 The Redux tab shows the latest state tree, recent dispatches, payloads, and changed top-level state slices. Action history is capped at 50 entries.
 
 ---

package/dist/commonjs/components/ConsoleLogCard.js

@@ -320,6 +320,24 @@ exports.ConsoleLogCard = react_1.default.memo(function ConsoleLogCard({ item, se
                 : `Object{${Object.keys(jsonContent.data).length}}`}
                   </react_native_1.Text>
                 </react_native_1.View>)}
+              {/* #9 — collapsed duplicate counter */}
+              {'duplicateCount' in item &&
+            item.duplicateCount != null &&
+            item.duplicateCount > 1 && (<react_native_1.View style={[
+                styles.badge,
+                {
+                    backgroundColor: 'rgba(104, 75, 155, 0.1)',
+                    borderColor: 'rgba(104, 75, 155, 0.25)',
+                    borderWidth: 1,
+                },
+            ]}>
+                    <react_native_1.Text style={[
+                styles.badgeText,
+                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
+            ]}>
+                      ×{item.duplicateCount}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
               {isAnalyticsError && (<react_native_1.View style={[
                 styles.badge,
                 { backgroundColor: `${AppColors_1.AppColors.skyBlue}15` },

package/dist/commonjs/components/JsonViewer.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
     defaultExpandDepth?: number;
+    wrap?: boolean;
 }) => React.JSX.Element;
 export default JsonViewer;

package/dist/commonjs/components/JsonViewer.js

@@ -9,11 +9,13 @@ const react_native_1 = require("react-native");
 const TreeNode_1 = __importDefault(require("./TreeNode"));
 // Stylesheet
 const styles_1 = __importDefault(require("../styles"));
-const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, }) => {
+const JsonViewer = ({ data, search, forceOpen, defaultExpandDepth, wrap, }) => {
+    const tree = (<TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>);
+    if (wrap) {
+        return <react_native_1.View style={[styles_1.default.codeBlock, { width: '100%' }]}>{tree}</react_native_1.View>;
+    }
     return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>
-      <react_native_1.View style={styles_1.default.codeBlock}>
-        <TreeNode_1.default data={data} search={search} forceOpen={forceOpen} defaultExpandDepth={defaultExpandDepth}/>
-      </react_native_1.View>
+      <react_native_1.View style={styles_1.default.codeBlock}>{tree}</react_native_1.View>
     </react_native_1.ScrollView>);
 };
 exports.default = JsonViewer;

package/dist/commonjs/components/LogCard.js

@@ -116,6 +116,23 @@ const LogCard = react_1.default.memo(function LogCard({ item, onPress, timelineM
                 .json
               </react_native_1.Text>
             </react_native_1.View>)}
+
+          {/* #9 — collapsed duplicate counter */}
+          {item.duplicateCount != null && item.duplicateCount > 1 && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${AppColors_1.AppColors.purple}15`,
+                    borderColor: `${AppColors_1.AppColors.purple}30`,
+                    marginLeft: 6,
+                },
+            ]}>
+              <react_native_1.Text style={[
+                styles_1.default.chipText,
+                { color: AppColors_1.AppColors.purple, fontWeight: '700' },
+            ]}>
+                ×{item.duplicateCount}
+              </react_native_1.Text>
+            </react_native_1.View>)}
         </react_native_1.View>
 
         <react_native_1.View style={styles_1.default.cardBottomRow}>

package/dist/commonjs/components/MetaAccordion.js

@@ -45,7 +45,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
-          
+
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
@@ -56,9 +56,12 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             {
                 borderColor: 'rgba(107, 78, 255, 0.25)',
                 backgroundColor: 'rgba(107, 78, 255, 0.08)',
-            }
+            },
+        ]}>
+              <react_native_1.Text style={[
+            styles_1.default.statusText,
+            { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold },
         ]}>
-              <react_native_1.Text style={[styles_1.default.statusText, { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                 {method || 'GET'}
               </react_native_1.Text>
             </react_native_1.View>
@@ -96,7 +99,9 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
               <react_native_1.Text style={styles_1.default.metaLabel}>Content Type</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text style={styles_1.default.metaValue}>{contentType || 'application/json'}</react_native_1.Text>
+            <react_native_1.Text style={styles_1.default.metaValue}>
+              {contentType || 'application/json'}
+            </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
 
@@ -130,7 +135,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             </react_native_1.View>
           </react_native_1.View>
           <react_native_1.View style={styles_1.default.metaDivider}/>
-          
+
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.SizeIcon color={AppColors_1.AppColors.grayTextWeak}/>
@@ -145,7 +150,22 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
               <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
               <react_native_1.Text style={styles_1.default.metaLabel}>Full URL</react_native_1.Text>
             </react_native_1.View>
-            <react_native_1.Text selectable={true} numberOfLines={3} ellipsizeMode="tail" style={[styles_1.default.metaValue, { fontSize: 11.5, color: AppColors_1.AppColors.grayTextWeak, flex: 1, textAlign: 'right', lineHeight: 16 }]}>
+            <react_native_1.Text selectable={true} numberOfLines={3} ellipsizeMode="tail" onPress={() => {
+            if (url) {
+                react_native_1.Linking.openURL(url).catch(() => { });
+            }
+        }} style={[
+            styles_1.default.metaValue,
+            {
+                fontSize: 11.5,
+                color: url ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak,
+                textDecorationLine: url ? 'underline' : 'none',
+                fontFamily: AppFonts_1.AppFonts.interMedium,
+                flex: 1,
+                textAlign: 'right',
+                lineHeight: 16,
+            },
+        ]}>
               {url || '—'}
             </react_native_1.Text>
           </react_native_1.View>

package/dist/commonjs/components/NetworkIcons.d.ts

@@ -40,5 +40,12 @@ export declare const HtmlIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const CssIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const JsIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const EyeIcon: ({ color, size }: any) => React.JSX.Element;
-export declare const SettingsIcon: ({ color, size }: any) => React.JSX.Element;
-export declare const FolderIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SettingsIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const FolderIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const WipeIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const LayersIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const UserIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const InfoCircleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const WarningTriangleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
+exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -317,16 +317,72 @@ const EyeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
     </react_native_svg_1.default>);
 };
 exports.EyeIcon = EyeIcon;
-const SettingsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+const SettingsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
       <react_native_svg_1.Circle cx="12" cy="12" r="3" stroke={color} strokeWidth="2"/>
     </react_native_svg_1.default>);
 };
 exports.SettingsIcon = SettingsIcon;
-const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </react_native_svg_1.default>);
 };
 exports.FolderIcon = FolderIcon;
+// #3 — Broom/sweep "wipe" icon used by the header Clear-Everything button.
+const WipeIcon = ({ color = '#FFFFFF', size = 16 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      {/* Handle */}
+      <react_native_svg_1.Path d="M19.5 3.5L12.7 10.3" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      {/* Brush head */}
+      <react_native_svg_1.Path d="M13.5 9.5l1.5 1.5c.8.8.8 2 0 2.8L10 19l-5-5 5.2-5.5c.8-.8 2-.8 2.8 0z" stroke={color} strokeWidth="2" strokeLinejoin="round"/>
+      {/* Bristle strokes */}
+      <react_native_svg_1.Path d="M7.5 16.5L5.5 18.5M10 19l-1.5 1.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      {/* Dust sparks */}
+      <react_native_svg_1.Path d="M3 11.5h.01M5.5 8.5h.01" stroke={color} strokeWidth="2.4" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.WipeIcon = WipeIcon;
+// #7 — Icons for the inner filter chips / sub tabs.
+const LayersIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.LayersIcon = LayersIcon;
+const UserIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Circle cx="12" cy="7" r="4" stroke={color} strokeWidth="2"/>
+    </react_native_svg_1.default>);
+};
+exports.UserIcon = UserIcon;
+const InfoCircleIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M12 16v-4M12 8h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.InfoCircleIcon = InfoCircleIcon;
+const WarningTriangleIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M12 9v4M12 17h.01" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.WarningTriangleIcon = WarningTriangleIcon;
+const ErrorCircleIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="10" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M15 9l-6 6M9 9l6 6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.ErrorCircleIcon = ErrorCircleIcon;
+const TrendingUpIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12, }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M23 6l-9.5 9.5-5-5L1 18" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M17 6h6v6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.TrendingUpIcon = TrendingUpIcon;

package/dist/commonjs/components/ReduxTreeView.js

@@ -44,6 +44,44 @@ const AppFonts_1 = require("../styles/AppFonts");
 const NetworkIcons_1 = require("./NetworkIcons");
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
+const helpers_1 = require("../helpers");
+// #15 — copy-to-clipboard control for a single dispatched action
+const ActionCopyButton = ({ value }) => {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    return (<react_native_1.Pressable hitSlop={10} onPress={() => {
+            (0, helpers_1.copyToClipboard)(value(), 'Action');
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1200);
+        }} style={{
+            width: 26,
+            height: 26,
+            borderRadius: 7,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: copied
+                ? `${AppColors_1.AppColors.greenColor}1A`
+                : AppColors_1.AppColors.grayBackground,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.dividerColor,
+        }}>
+      {copied ? (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.greenColor} size={13}/>) : (<NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>)}
+    </react_native_1.Pressable>);
+};
+// #15 — derive the redux module / folder name from an action type.
+// Supports RTK slice convention ("booking/setDate" -> "Booking") and
+// falls back to the first affected slice.
+const getActionModule = (type, affectedSlices) => {
+    if (type && type.includes('/')) {
+        const prefix = type.split('/')[0];
+        if (prefix)
+            return prefix.charAt(0).toUpperCase() + prefix.slice(1);
+    }
+    if (affectedSlices && affectedSlices.length > 0) {
+        const s = affectedSlices[0];
+        return s.charAt(0).toUpperCase() + s.slice(1);
+    }
+    return null;
+};
 // Custom icons
 const DatabaseIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M12 2C6.5 2 2 4.2 2 7v10c0 2.8 4.5 5 10 5s10-2.2 10-5V7c0-2.8-4.5-5-10-5z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
@@ -353,12 +391,49 @@ const ReduxActionTimeline = ({ history, onClear, search, }) => {
                         },
                     ]}>
                   <react_native_1.View style={timelineStyles.cardHeader}>
-                    <react_native_1.View style={timelineStyles.typeBadge}>
-                      <react_native_1.Text style={timelineStyles.typeText}>{item.type}</react_native_1.Text>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        flex: 1,
+                    }}>
+                      {(() => {
+                        const moduleName = getActionModule(item.type, item.affectedSlices);
+                        return moduleName ? (<react_native_1.View style={{
+                                paddingHorizontal: 7,
+                                paddingVertical: 2,
+                                borderRadius: 6,
+                                backgroundColor: `${AppColors_1.AppColors.purple}14`,
+                                borderWidth: 1,
+                                borderColor: `${AppColors_1.AppColors.purple}33`,
+                            }}>
+                            <react_native_1.Text style={{
+                                fontFamily: AppFonts_1.AppFonts.interBold,
+                                fontSize: 9.5,
+                                color: AppColors_1.AppColors.purple,
+                                letterSpacing: 0.2,
+                            }}>
+                              {moduleName}
+                            </react_native_1.Text>
+                          </react_native_1.View>) : null;
+                    })()}
+                      <react_native_1.View style={timelineStyles.typeBadge}>
+                        <react_native_1.Text style={timelineStyles.typeText}>{item.type}</react_native_1.Text>
+                      </react_native_1.View>
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 8,
+                    }}>
+                      <react_native_1.Text style={timelineStyles.timestamp}>
+                        {item.timestamp}
+                      </react_native_1.Text>
+                      <ActionCopyButton value={() => ({
+                        type: item.type,
+                        payload: item.payload,
+                    })}/>
                     </react_native_1.View>
-                    <react_native_1.Text style={timelineStyles.timestamp}>
-                      {item.timestamp}
-                    </react_native_1.Text>
                   </react_native_1.View>
 
                   {item.affectedSlices.length > 0 && (<react_native_1.View style={timelineStyles.slicesRow}>

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.1";
+export declare const LIB_VERSION = "1.1.3";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '1.1.1';
+exports.LIB_VERSION = '1.1.3';

package/dist/commonjs/customHooks/reduxLogger.d.ts

@@ -1,16 +1,30 @@
-export declare const getReduxState: () => any;
-export declare const setReduxAutoRefresh: (val: boolean) => void;
-export declare const getReduxAutoRefresh: () => boolean;
-export declare const getLastActionForReducer: () => Record<string, any>;
-export declare const clearLastActionForReducer: () => void;
-export declare const getActionHistory: () => {
+export interface ReduxHistoryEntry {
     id: number;
     type: string;
     payload: any;
     timestamp: string;
     affectedSlices: string[];
-}[];
+}
+export declare const getReduxState: () => any;
+export declare const setReduxAutoRefresh: (val: boolean) => void;
+export declare const getReduxAutoRefresh: () => boolean;
+export declare const getLastActionForReducer: () => Record<string, any>;
+export declare const clearLastActionForReducer: () => void;
+export declare const getActionHistory: () => ReduxHistoryEntry[];
 export declare const clearActionHistory: () => void;
 export declare const setReduxState: (state: any) => void;
 export declare const subscribeReduxState: (cb: () => void) => () => void;
+/**
+ * Standard Redux middleware — add it to your store to capture every action,
+ * including those dispatched from thunks, sagas and RTK Query:
+ *
+ *   const store = configureStore({
+ *     reducer,
+ *     middleware: gDM => gDM().concat(inspectorReduxMiddleware),
+ *   });
+ *
+ * Pair with `connectReduxStore(store)` (safe — they de-duplicate) or rely on
+ * the middleware alone; the initial snapshot is taken on the first action.
+ */
+export declare const inspectorReduxMiddleware: (storeApi: any) => (next: (action: any) => any) => (action: any) => any;
 export declare const connectReduxStore: (store: any) => void;