react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -1,13 +1,4 @@
 import React from 'react';
-export interface MetaAccordionProps {
-    status: number | null | undefined;
-    statusColor: string;
-    duration: number | null | undefined;
-    size: string;
-    triggeredAt: string;
-    method: string;
-    contentType?: string;
-    url: string;
-}
+import { MetaAccordionProps } from '../types';
 declare const MetaAccordion: ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }: MetaAccordionProps) => React.JSX.Element;
 export default MetaAccordion;

package/dist/commonjs/components/MetaAccordion.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
 const react_native_1 = require("react-native");
 // Constants
 const constants_1 = require("../constants");
@@ -53,8 +54,9 @@ const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const styles_1 = __importDefault(require("../styles"));
 const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, method, contentType, url, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
     const [urlExpanded, setUrlExpanded] = (0, react_1.useState)(false);
-    const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 400, 390);
+    const { toggleOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(true, 800, 390);
     const isFailed = status === 0 || status == null;
     const renderFormattedUrl = (rawUrl) => {
         if (!rawUrl)
@@ -82,10 +84,10 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 search = pathAndSearch.substring(queryIndex);
             }
             return (<react_native_1.Text style={{ lineHeight: 16 }}>
-          {protocol ? (<react_native_1.Text style={{ color: '#94A3B8', fontFamily: AppFonts_1.AppFonts.interRegular }}>{protocol}</react_native_1.Text>) : null}
+          {protocol ? (<react_native_1.Text style={{ color: AppColors_1.AppColors.slate400, fontFamily: AppFonts_1.AppFonts.interRegular }}>{protocol}</react_native_1.Text>) : null}
           <react_native_1.Text style={{ color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold }}>{host}</react_native_1.Text>
-          <react_native_1.Text style={{ color: '#334155', fontFamily: AppFonts_1.AppFonts.interMedium }}>{pathname}</react_native_1.Text>
-          {search ? (<react_native_1.Text style={{ color: '#0D9488', fontFamily: AppFonts_1.AppFonts.interRegular }}>{search}</react_native_1.Text>) : null}
+          <react_native_1.Text style={{ color: AppColors_1.AppColors.slate700, fontFamily: AppFonts_1.AppFonts.interMedium }}>{pathname}</react_native_1.Text>
+          {search ? (<react_native_1.Text style={{ color: AppColors_1.AppColors.teal600, fontFamily: AppFonts_1.AppFonts.interRegular }}>{search}</react_native_1.Text>) : null}
         </react_native_1.Text>);
         }
         catch {
@@ -107,7 +109,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.CalendarIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              <react_native_1.Text style={styles_1.default.metaLabel}>Triggered At</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.metaLabel}>{t('network.triggeredAt')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.Text style={[
             styles_1.default.metaValue,
@@ -121,13 +123,13 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <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}/>
-              <react_native_1.Text style={styles_1.default.metaLabel}>Method</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.metaLabel}>{t('network.methodHeader')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={[
             styles_1.default.statusChip,
             {
-                borderColor: 'rgba(107, 78, 255, 0.25)',
-                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+                borderColor: `${AppColors_1.AppColors.brandPurple}40`,
+                backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
             },
         ]}>
               <react_native_1.Text style={[
@@ -143,7 +145,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.StatusIcon color={AppColors_1.AppColors.grayTextWeak}/>
-              <react_native_1.Text style={styles_1.default.metaLabel}>Status</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.metaLabel}>{t('network.statusHeader')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={[
             styles_1.default.statusChip,
@@ -160,7 +162,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             styles_1.default.statusText,
             { color: isFailed ? AppColors_1.AppColors.errorColor : statusColor },
         ]}>
-                {isFailed ? 'Failed (Network Error)' : String(status)}
+                {isFailed ? t('network.failedNetworkError') : String(status)}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
@@ -169,7 +171,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <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.Text style={styles_1.default.metaLabel}>{t('network.contentType')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.Text style={styles_1.default.metaValue}>
               {contentType || 'application/json'}
@@ -180,7 +182,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <react_native_1.View style={styles_1.default.metaRow}>
             <react_native_1.View style={styles_1.default.metaLabelRow}>
               <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              <react_native_1.Text style={styles_1.default.metaLabel}>Duration</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.metaLabel}>{t('network.durationHeader')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={styles_1.default.metaValueRow}>
               {duration != null && !isFailed && (<react_native_1.View style={[
@@ -195,10 +197,10 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 { color: (0, helpers_1.getDurationColor)(duration) },
             ]}>
                     {duration < constants_1.DURATION_FAST_MS
-                ? 'Fast'
+                ? t('network.perf.fast')
                 : duration < constants_1.DURATION_SLOW_MS
-                    ? 'Moderate'
-                    : 'Slow'}
+                    ? t('network.perf.moderate')
+                    : t('network.perf.slow')}
                   </react_native_1.Text>
                 </react_native_1.View>)}
               <react_native_1.Text style={styles_1.default.metaValue}>
@@ -211,7 +213,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
           <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}/>
-              <react_native_1.Text style={styles_1.default.metaLabel}>Size</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.metaLabel}>{t('network.sizeHeader')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.Text style={styles_1.default.metaValue}>{size}</react_native_1.Text>
           </react_native_1.View>
@@ -221,7 +223,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
             <react_native_1.View style={{ flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center' }}>
               <react_native_1.View style={styles_1.default.metaLabelRow}>
                 <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.Text style={styles_1.default.metaLabel}>{t('network.fullUrl')}</react_native_1.Text>
               </react_native_1.View>
               
               <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
@@ -231,7 +233,7 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 fontSize: 10.5,
                 color: AppColors_1.AppColors.purple,
             }}>
-                      {urlExpanded ? 'Show Less' : 'Show More'}
+                      {urlExpanded ? t('network.showLess') : t('network.showMore')}
                     </react_native_1.Text>
                   </TouchableScale_1.default>)}
                 
@@ -242,18 +244,18 @@ const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, metho
                 color: AppColors_1.AppColors.purple,
                 textDecorationLine: 'underline',
             }}>
-                      Open
+                      {t('network.open')}
                     </react_native_1.Text>
                   </TouchableScale_1.default>)}
               </react_native_1.View>
             </react_native_1.View>
             
             <react_native_1.View style={{
-            backgroundColor: '#F8FAFC',
+            backgroundColor: AppColors_1.AppColors.slate50,
             borderRadius: 8,
             padding: 8,
             borderWidth: 1.5,
-            borderColor: '#E2E8F0',
+            borderColor: AppColors_1.AppColors.slate200,
             width: '100%',
             marginTop: 2,
         }}>

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface NavigationTrackerProps {
+    onStateChange: (state: any) => void;
+    navigationRef?: any;
+}
+export declare const NavigationTracker: ({ onStateChange, navigationRef, }: NavigationTrackerProps) => React.ReactElement | null;
+export default NavigationTracker;

package/dist/commonjs/components/NavigationTracker.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavigationTracker = void 0;
+const react_1 = __importStar(require("react"));
+const native_1 = require("@react-navigation/native");
+const ContextNavigationTracker = ({ onStateChange, }) => {
+    const navState = (0, native_1.useNavigationState)(state => state);
+    (0, react_1.useEffect)(() => {
+        onStateChange(navState);
+    }, [navState, onStateChange]);
+    return null;
+};
+const NavigationTracker = ({ onStateChange, navigationRef, }) => {
+    const navContext = (0, react_1.useContext)(native_1.NavigationContext);
+    (0, react_1.useEffect)(() => {
+        if (!navigationRef)
+            return;
+        const getRef = () => navigationRef?.current || navigationRef;
+        const handleStateChange = () => {
+            const ref = getRef();
+            if (!ref)
+                return;
+            if (typeof ref.getRootState === 'function') {
+                onStateChange(ref.getRootState());
+            }
+            else if (typeof ref.getState === 'function') {
+                onStateChange(ref.getState());
+            }
+        };
+        const ref = getRef();
+        if (ref && typeof ref.addListener === 'function') {
+            const unsubscribe = ref.addListener('state', handleStateChange);
+            handleStateChange();
+            return unsubscribe;
+        }
+    }, [navigationRef, onStateChange]);
+    if (navContext) {
+        return <ContextNavigationTracker onStateChange={onStateChange}/>;
+    }
+    return null;
+};
+exports.NavigationTracker = NavigationTracker;
+exports.default = exports.NavigationTracker;

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

@@ -16,6 +16,9 @@ export declare const CopyIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const FetchIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const TerminalIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const CheckIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CircleCheckIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CircleXIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CircleAlertIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const FailIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const TrashIcon: ({ color, size }: any) => React.JSX.Element;
 export declare const HeaderPauseIcon: ({ isPaused, color, size, }: any) => React.JSX.Element;
@@ -51,3 +54,6 @@ export declare const ErrorCircleIcon: ({ color, size, }: any) => React.JSX.Eleme
 export declare const TrendingUpIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MotionIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const SortIcon: ({ ascending, color, size, }: any) => React.JSX.Element;
+export declare const PrettyIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const RawIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const TableIcon: ({ color, size, }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -36,8 +36,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
-exports.SortIcon = exports.MotionIcon = void 0;
+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.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = 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.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -158,6 +158,28 @@ const CheckIcon = ({ color = AppColors_1.AppColors.greenColor, size = 14 }) => {
     </react_native_svg_1.default>);
 };
 exports.CheckIcon = CheckIcon;
+const CircleCheckIcon = ({ color = AppColors_1.AppColors.greenColor, size = 14 }) => {
+    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="9" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M8.5 12.5l2.5 2.5 5-5.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CircleCheckIcon = CircleCheckIcon;
+const CircleXIcon = ({ color = AppColors_1.AppColors.errorColor, size = 14 }) => {
+    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="9" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M9.5 9.5l5 5M14.5 9.5l-5 5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CircleXIcon = CircleXIcon;
+const CircleAlertIcon = ({ color = AppColors_1.AppColors.warningIconGold, size = 14 }) => {
+    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="9" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Path d="M12 7.5v5.5" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Circle cx="12" cy="16.5" r="1.1" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.CircleAlertIcon = CircleAlertIcon;
 const FailIcon = ({ color = AppColors_1.AppColors.errorColor, size = 10 }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
@@ -232,13 +254,13 @@ const DownloadIcon = ({ color = AppColors_1.AppColors.primaryLight, size = 18, }
     </react_native_svg_1.default>);
 };
 exports.DownloadIcon = DownloadIcon;
-const CloseWhite = ({ color = '#FFFFFF', size = 20 }) => {
+const CloseWhite = ({ color = AppColors_1.AppColors.white, size = 20 }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Path d="M18 6L6 18M6 6l12 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </react_native_svg_1.default>);
 };
 exports.CloseWhite = CloseWhite;
-const WhiteBackNavigation = ({ color = '#FFFFFF', size = 20 }) => {
+const WhiteBackNavigation = ({ color = AppColors_1.AppColors.white, size = 20 }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
     </react_native_svg_1.default>);
@@ -256,7 +278,7 @@ const InsightsIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }
     </react_native_svg_1.default>);
 };
 exports.InsightsIcon = InsightsIcon;
-const DebugIcon = ({ color = '#FFFFFF', size = 18 }) => {
+const DebugIcon = ({ color = AppColors_1.AppColors.white, size = 18 }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       {/* Hammer: diagonal from bottom-left to top-right */}
       {/* Handle */}
@@ -275,14 +297,14 @@ const DebugIcon = ({ color = '#FFFFFF', size = 18 }) => {
     </react_native_svg_1.default>);
 };
 exports.DebugIcon = DebugIcon;
-const SunIcon = ({ color = '#FFFFFF', size = 16 }) => {
+const SunIcon = ({ color = AppColors_1.AppColors.white, size = 16 }) => {
     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="5" stroke={color} strokeWidth="2"/>
       <react_native_svg_1.Path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" stroke={color} strokeWidth="2" strokeLinecap="round"/>
     </react_native_svg_1.default>);
 };
 exports.SunIcon = SunIcon;
-const MoonIcon = ({ color = '#FFFFFF', size = 16 }) => {
+const MoonIcon = ({ color = AppColors_1.AppColors.white, size = 16 }) => {
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
       <react_native_svg_1.Path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill={color} stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
     </react_native_svg_1.default>);
@@ -332,7 +354,7 @@ const FolderIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, })
 };
 exports.FolderIcon = FolderIcon;
 // #3 — Broom/sweep "wipe" icon used by the header Clear-Everything button.
-const WipeIcon = ({ color = '#FFFFFF', size = 16 }) => {
+const WipeIcon = ({ color = AppColors_1.AppColors.white, 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"/>
@@ -400,3 +422,27 @@ const SortIcon = ({ ascending, color = AppColors_1.AppColors.purple, size = 14,
     </react_native_svg_1.default>);
 };
 exports.SortIcon = SortIcon;
+const PrettyIcon = ({ 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="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.PrettyIcon = PrettyIcon;
+const RawIcon = ({ 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.Line x1="21" y1="6" x2="3" y2="6" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="21" y1="12" x2="3" y2="12" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+      <react_native_svg_1.Line x1="17" y1="18" x2="3" y2="18" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.RawIcon = RawIcon;
+const TableIcon = ({ 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.Rect x="3" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Rect x="14" y="3" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Rect x="14" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+      <react_native_svg_1.Rect x="3" y="14" width="7" height="7" rx="1.5" stroke={color} strokeWidth="2"/>
+    </react_native_svg_1.default>);
+};
+exports.TableIcon = TableIcon;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ReduxTabViewProps {
+    reduxState: any;
+    reduxSearch: string;
+    onSetReduxSearch: (val: string) => void;
+    reduxLastActionMap: Record<string, string>;
+}
+export declare const ReduxTabView: React.FC<ReduxTabViewProps>;
+export default ReduxTabView;

package/dist/commonjs/components/ReduxTabView.js

@@ -0,0 +1,56 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReduxTabView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_i18next_1 = require("react-i18next");
+const ReduxTreeView_1 = require("./ReduxTreeView");
+const NetworkIcons_1 = require("./NetworkIcons");
+const AppColors_1 = require("../styles/AppColors");
+const styles_1 = __importDefault(require("../styles"));
+exports.ReduxTabView = react_1.default.memo(({ reduxState, reduxSearch, onSetReduxSearch, reduxLastActionMap, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    if (!reduxState) {
+        return (<react_native_1.View style={styles_1.default.emptyContainer}>
+        <react_native_1.View style={styles_1.default.emptyIconWrap}>
+          <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={32}/>
+        </react_native_1.View>
+        <react_native_1.Text style={styles_1.default.emptyTitle}>{t('redux.no_store_title')}</react_native_1.Text>
+        <react_native_1.Text style={styles_1.default.emptySub}>
+          {t('redux.no_store_sub')}
+        </react_native_1.Text>
+      </react_native_1.View>);
+    }
+    const reducerKeys = Object.keys(reduxState ?? {});
+    if (reducerKeys.length === 0) {
+        return (<react_native_1.View style={styles_1.default.emptyContainer}>
+        <react_native_1.Text style={styles_1.default.emptyTitle}>{t('redux.empty_store_title')}</react_native_1.Text>
+        <react_native_1.Text style={styles_1.default.emptySub}>{t('redux.empty_store_sub')}</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    return (<react_native_1.View style={styles_1.default.flex1}>
+      {/* Search Bar */}
+      <react_native_1.View style={styles_1.default.searchBarWrap}>
+        <react_native_1.TextInput placeholder={t('search.redux_placeholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={onSetReduxSearch} style={styles_1.default.searchBarInput} autoCorrect={false} autoCapitalize="none"/>
+        {reduxSearch.length > 0 && (<react_native_1.Pressable onPress={() => onSetReduxSearch('')} hitSlop={10}>
+            <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+          </react_native_1.Pressable>)}
+      </react_native_1.View>
+
+      {/* Main Content Card */}
+      <react_native_1.View style={styles_1.default.contentCard}>
+        <react_native_1.View style={styles_1.default.cardHeaderRow}>
+          <react_native_1.Text style={styles_1.default.sectionHeaderTitle}>{t('redux.root_reducers')}</react_native_1.Text>
+          <react_native_1.Text style={styles_1.default.subTextWeak}>
+            {reducerKeys.length} {t('redux.slices')}
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        <ReduxTreeView_1.ReduxTreeView state={reduxState} search={reduxSearch} lastActionMap={reduxLastActionMap}/>
+      </react_native_1.View>
+    </react_native_1.View>);
+});
+exports.default = exports.ReduxTabView;