react-native-inapp-inspector 1.1.15 → 1.1.17

package/dist/commonjs/components/Inspector/ReduxDetail.js

@@ -0,0 +1,576 @@
+"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;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_i18next_1 = require("react-i18next");
+const InspectorContext_1 = require("./InspectorContext");
+const SegmentedTabs_1 = __importDefault(require("../SegmentedTabs"));
+const JsonViewer_1 = __importDefault(require("../JsonViewer"));
+const DiffViewer_1 = __importDefault(require("../DiffViewer"));
+const CopyButton_1 = __importDefault(require("../CopyButton"));
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const HighlightText_1 = __importDefault(require("../HighlightText"));
+const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
+const reduxLogger_1 = require("../../customHooks/reduxLogger");
+const helpers_1 = require("../../helpers");
+const settingsStore_1 = require("../../helpers/settingsStore");
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const NetworkIcons_1 = require("../NetworkIcons");
+const ReduxDetail = react_1.default.memo(() => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, setSelectedReduxAction, } = (0, InspectorContext_1.useInspector)();
+    // Search filter within details
+    const [detailSearch, setDetailSearch] = (0, react_1.useState)('');
+    // Sub-tabs for Slice
+    const [sliceTab, setSliceTab] = (0, react_1.useState)('live');
+    const [viewMode, setViewMode] = (0, react_1.useState)('pretty');
+    // Selected Action inside Timeline
+    const [expandedActionId, setExpandedActionId] = (0, react_1.useState)(null);
+    // Persistence data for active slice
+    const [isPersisted, setIsPersisted] = (0, react_1.useState)(false);
+    const [persistedData, setPersistedData] = (0, react_1.useState)(null);
+    // Fetch Action History
+    const allActionHistory = (0, react_1.useMemo)(() => {
+        return (0, reduxLogger_1.getActionHistory)();
+    }, [reduxLastActionMap]);
+    // Slices-filtered actions
+    const sliceActions = (0, react_1.useMemo)(() => {
+        if (!selectedReduxSlice)
+            return allActionHistory;
+        return allActionHistory.filter(action => {
+            if (!action.affectedSlices || action.affectedSlices.length === 0)
+                return true;
+            return action.affectedSlices.includes(selectedReduxSlice);
+        });
+    }, [allActionHistory, selectedReduxSlice]);
+    (0, react_1.useEffect)(() => {
+        if (!selectedReduxSlice)
+            return;
+        async function checkPersistence() {
+            try {
+                const storage = (0, settingsStore_1.getCustomStorage)();
+                if (!storage) {
+                    setIsPersisted(false);
+                    setPersistedData(null);
+                    return;
+                }
+                let raw = await storage.getItem(`persist:${selectedReduxSlice}`);
+                if (raw) {
+                    try {
+                        setPersistedData(JSON.parse(raw));
+                    }
+                    catch {
+                        setPersistedData(raw);
+                    }
+                    setIsPersisted(true);
+                    return;
+                }
+                let rootRaw = await storage.getItem('persist:root');
+                if (rootRaw) {
+                    const parsedRoot = JSON.parse(rootRaw);
+                    if (parsedRoot && parsedRoot[selectedReduxSlice] !== undefined) {
+                        const nested = parsedRoot[selectedReduxSlice];
+                        try {
+                            setPersistedData(typeof nested === 'string' ? JSON.parse(nested) : nested);
+                        }
+                        catch {
+                            setPersistedData(nested);
+                        }
+                        setIsPersisted(true);
+                        return;
+                    }
+                }
+            }
+            catch (e) {
+                // silent catch
+            }
+            setIsPersisted(false);
+            setPersistedData(null);
+        }
+        checkPersistence();
+    }, [selectedReduxSlice]);
+    const handleClearPersistence = () => {
+        if (!selectedReduxSlice)
+            return;
+        react_native_1.Alert.alert('Clear Persisted State', `Are you sure you want to delete persisted storage for slice "${selectedReduxSlice}"?`, [
+            { text: 'Cancel', style: 'cancel' },
+            {
+                text: 'Delete',
+                style: 'destructive',
+                onPress: async () => {
+                    try {
+                        const storage = (0, settingsStore_1.getCustomStorage)();
+                        if (!storage)
+                            return;
+                        if (typeof storage.removeItem === 'function') {
+                            await storage.removeItem(`persist:${selectedReduxSlice}`);
+                        }
+                        else {
+                            await storage.setItem(`persist:${selectedReduxSlice}`, '');
+                        }
+                        setIsPersisted(false);
+                        setPersistedData(null);
+                        setSliceTab('live');
+                        if (react_native_1.Platform.OS === 'android') {
+                            react_native_1.ToastAndroid.show('Persisted state cleared', react_native_1.ToastAndroid.SHORT);
+                        }
+                        else {
+                            react_native_1.Alert.alert('Cleared', 'Persisted state has been cleared.');
+                        }
+                    }
+                    catch (err) {
+                        react_native_1.Alert.alert('Error', 'Failed to clear persisted state.');
+                    }
+                },
+            },
+        ]);
+    };
+    // ══════════════════════════════════════════════════════════════════════════
+    // ── 1. RENDER SLICE DETAIL VIEW ───────────────────────────────────────────
+    // ══════════════════════════════════════════════════════════════════════════
+    if (selectedReduxSlice != null) {
+        const sliceData = reduxState?.[selectedReduxSlice];
+        const fieldsCount = sliceData && typeof sliceData === 'object'
+            ? Object.keys(sliceData).length
+            : typeof sliceData !== 'undefined'
+                ? 1
+                : 0;
+        const lastAction = reduxLastActionMap[selectedReduxSlice];
+        const sliceTabs = [
+            { key: 'live', label: 'Live State', icon: () => <NetworkIcons_1.LiveStateIcon color={AppColors_1.AppColors.purple} size={11}/> },
+            { key: 'timeline', label: `Timeline (${sliceActions.length})`, icon: () => <NetworkIcons_1.TimelineIcon color={AppColors_1.AppColors.purple} size={11}/> },
+            { key: 'persisted', label: isPersisted ? 'Persisted' : 'Storage', icon: () => <NetworkIcons_1.StorageIcon color={AppColors_1.AppColors.purple} size={11}/> },
+            { key: 'metadata', label: 'Metadata', icon: () => <NetworkIcons_1.MetadataIcon color={AppColors_1.AppColors.purple} size={11}/> },
+        ];
+        return (<react_native_1.View style={{ flex: 1, backgroundColor: AppColors_1.AppColors.grayBackground }}>
+        {/* Info Header Bar */}
+        <react_native_1.View style={reduxDetailStyles.infoBar}>
+          <react_native_1.View style={reduxDetailStyles.infoTopRow}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap', flex: 1 }}>
+              <react_native_1.View style={[reduxDetailStyles.methodBadge, { backgroundColor: AppColors_1.AppColors.purple }]}>
+                <react_native_1.Text style={reduxDetailStyles.methodBadgeText}>SLICE</react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.Text style={reduxDetailStyles.sliceNameText}>
+                {selectedReduxSlice}
+              </react_native_1.Text>
+              {isPersisted ? (<react_native_1.View style={reduxDetailStyles.persistedChip}>
+                  <react_native_1.Text style={reduxDetailStyles.persistedChipText}>PERSISTED</react_native_1.Text>
+                </react_native_1.View>) : (<react_native_1.View style={reduxDetailStyles.inMemoryChip}>
+                  <react_native_1.Text style={reduxDetailStyles.inMemoryChipText}>IN-MEMORY</react_native_1.Text>
+                </react_native_1.View>)}
+              {lastAction?.timestamp && (<react_native_1.View style={reduxDetailStyles.timePill}>
+                  <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple} size={10}/>
+                  <react_native_1.Text style={reduxDetailStyles.timeText}>
+                    {lastAction.timestamp}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+
+            {/* Copy Button */}
+            <CopyButton_1.default value={() => (sliceTab === 'live' ? sliceData : persistedData)} label="Slice JSON"/>
+          </react_native_1.View>
+
+          {/* Sub Stats Row */}
+          <react_native_1.View style={reduxDetailStyles.subStatsRow}>
+            <react_native_1.View style={reduxDetailStyles.statPill}>
+              <react_native_1.Text style={reduxDetailStyles.statLabel}>Root Keys:</react_native_1.Text>
+              <react_native_1.Text style={reduxDetailStyles.statValue}>{fieldsCount}</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={reduxDetailStyles.statPill}>
+              <react_native_1.Text style={reduxDetailStyles.statLabel}>Size:</react_native_1.Text>
+              <react_native_1.Text style={reduxDetailStyles.statValue}>{(0, helpers_1.getSize)(sliceData)}</react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.View style={reduxDetailStyles.statPill}>
+              <react_native_1.Text style={reduxDetailStyles.statLabel}>Timeline:</react_native_1.Text>
+              <react_native_1.Text style={reduxDetailStyles.statValue}>{sliceActions.length} actions</react_native_1.Text>
+            </react_native_1.View>
+            {lastAction && (<react_native_1.View style={[reduxDetailStyles.statPill, { flex: 1, minWidth: 140 }]}>
+                <react_native_1.Text style={reduxDetailStyles.statLabel}>Last Action:</react_native_1.Text>
+                <react_native_1.Text style={reduxDetailStyles.statValue} numberOfLines={1}>
+                  {lastAction.type}
+                </react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>
+
+          {/* Sub-Tabs */}
+          <SegmentedTabs_1.default tabs={sliceTabs} activeKey={sliceTab} onChange={key => setSliceTab(key)} style={{ marginTop: 10 }}/>
+        </react_native_1.View>
+
+        {/* Search Bar within slice */}
+        {sliceTab !== 'metadata' && (<react_native_1.View style={reduxDetailStyles.searchContainer}>
+            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+            <react_native_1.TextInput placeholder="Search keys, values, or action types..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={reduxDetailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => setDetailSearch('')} hitSlop={10}>
+                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              </react_native_1.Pressable>)}
+          </react_native_1.View>)}
+
+        {/* Content Body */}
+        {sliceTab === 'timeline' ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+            {sliceActions.length === 0 ? (<react_native_1.View style={reduxDetailStyles.emptyBox}>
+                <react_native_1.Text style={reduxDetailStyles.emptyBoxText}>
+                  No dispatched actions recorded for this slice yet.
+                </react_native_1.Text>
+              </react_native_1.View>) : (sliceActions.map((action, aIdx) => {
+                    const isExpanded = expandedActionId === action.id;
+                    return (<AnimatedEntrance_1.default key={action.id} index={aIdx} distance={6}>
+                    <TouchableScale_1.default onPress={() => setExpandedActionId(isExpanded ? null : action.id)} style={reduxDetailStyles.timelineCard}>
+                      <react_native_1.View style={reduxDetailStyles.timelineHeader}>
+                        <react_native_1.View style={reduxDetailStyles.actionBadge}>
+                          <react_native_1.Text style={reduxDetailStyles.actionBadgeText}>
+                            #{action.id}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <HighlightText_1.default text={action.type} search={detailSearch} style={reduxDetailStyles.actionTitle} highlightStyle={reduxDetailStyles.highlight}/>
+                        <react_native_1.View style={reduxDetailStyles.timePill}>
+                          <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.purple} size={10}/>
+                          <react_native_1.Text style={reduxDetailStyles.timeText}>
+                            {action.timestamp}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </react_native_1.View>
+
+                      {/* Expanded Payload & Diff Viewer */}
+                      {isExpanded ? (<react_native_1.View style={reduxDetailStyles.expandedContent}>
+                          {action.payload !== undefined && (<react_native_1.View style={{ marginBottom: 10 }}>
+                              <react_native_1.Text style={reduxDetailStyles.expandedSectionTitle}>
+                                Action Payload:
+                              </react_native_1.Text>
+                              <JsonViewer_1.default data={action.payload} search={detailSearch} forceOpen={true}/>
+                            </react_native_1.View>)}
+
+                          <react_native_1.Text style={reduxDetailStyles.expandedSectionTitle}>
+                            State Changes (Diff):
+                          </react_native_1.Text>
+                          <DiffViewer_1.default oldData={action.prevState?.[selectedReduxSlice] || {}} newData={action.nextState?.[selectedReduxSlice] || {}} forceOpen={true}/>
+                        </react_native_1.View>) : (<react_native_1.View style={reduxDetailStyles.collapsedPrompt}>
+                          <react_native_1.Text style={reduxDetailStyles.collapsedPromptText}>
+                            Tap to inspect action payload & diff changes
+                          </react_native_1.Text>
+                          <NetworkIcons_1.ForwardChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
+                        </react_native_1.View>)}
+                    </TouchableScale_1.default>
+                  </AnimatedEntrance_1.default>);
+                }))}
+          </react_native_1.ScrollView>) : sliceTab === 'metadata' ? (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+            <react_native_1.View style={reduxDetailStyles.metadataCard}>
+              {[
+                    { label: 'Slice Name', value: selectedReduxSlice },
+                    { label: 'Root Keys Count', value: `${fieldsCount} keys` },
+                    { label: 'In-Memory State Size', value: (0, helpers_1.getSize)(sliceData) },
+                    {
+                        label: 'Persistence Status',
+                        value: isPersisted ? `Persisted (${(0, helpers_1.getSize)(persistedData)})` : 'Not Persisted',
+                    },
+                    {
+                        label: 'Dispatched Actions History',
+                        value: `${sliceActions.length} recorded actions`,
+                    },
+                    {
+                        label: 'Last Dispatched Action',
+                        value: lastAction ? lastAction.type : 'None',
+                    },
+                    {
+                        label: 'Last Action Timestamp',
+                        value: lastAction ? lastAction.timestamp : 'Initial',
+                    },
+                ].map((row, rIdx) => (<react_native_1.View key={rIdx} style={[
+                        reduxDetailStyles.metaRow,
+                        rIdx === 6 && { borderBottomWidth: 0 },
+                    ]}>
+                  <react_native_1.Text style={reduxDetailStyles.metaLabel}>{row.label}</react_native_1.Text>
+                  <react_native_1.Text style={reduxDetailStyles.metaValue} selectable numberOfLines={2}>
+                    {row.value}
+                  </react_native_1.Text>
+                </react_native_1.View>))}
+
+              {isPersisted && (<react_native_1.TouchableOpacity style={reduxDetailStyles.clearPersistBtn} onPress={handleClearPersistence}>
+                  <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={14}/>
+                  <react_native_1.Text style={reduxDetailStyles.clearPersistText}>
+                    Clear Persisted Storage For This Slice
+                  </react_native_1.Text>
+                </react_native_1.TouchableOpacity>)}
+            </react_native_1.View>
+          </react_native_1.ScrollView>) : (<react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
+            <JsonViewer_1.default data={sliceTab === 'live' ? sliceData : persistedData ?? 'No persisted state stored.'} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode}/>
+          </react_native_1.ScrollView>)}
+      </react_native_1.View>);
+    }
+    return null;
+});
+const reduxDetailStyles = react_native_1.StyleSheet.create({
+    infoBar: {
+        backgroundColor: AppColors_1.AppColors.white,
+        padding: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+    },
+    infoTopRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 8,
+    },
+    methodBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 3,
+        borderRadius: 6,
+    },
+    methodBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 10,
+        color: AppColors_1.AppColors.white,
+        letterSpacing: 0.5,
+    },
+    sliceNameText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 14,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    persistedChip: {
+        backgroundColor: '#D1FAE5',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#A7F3D0',
+    },
+    persistedChipText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: '#047857',
+    },
+    inMemoryChip: {
+        backgroundColor: '#F3E8FF',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#E9D5FF',
+    },
+    inMemoryChipText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: '#7E22CE',
+    },
+    subStatsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        flexWrap: 'wrap',
+    },
+    statPill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    statLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    statValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    searchContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 8,
+        marginHorizontal: 12,
+        marginTop: 10,
+        paddingHorizontal: 10,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+        height: 36,
+        gap: 8,
+    },
+    searchInput: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        padding: 0,
+    },
+    timelineCard: {
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 10,
+        padding: 12,
+        marginBottom: 8,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    timelineHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    actionBadge: {
+        backgroundColor: '#EEF2FF',
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: '#C7D2FE',
+    },
+    actionBadgeText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: '#4338CA',
+    },
+    actionTitle: {
+        flex: 1,
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.primaryBlack,
+    },
+    timePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 3,
+        backgroundColor: `${AppColors_1.AppColors.purple}14`,
+        paddingHorizontal: 6,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    timeText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.purple,
+    },
+    collapsedPrompt: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginTop: 8,
+        paddingTop: 6,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.dividerColor,
+    },
+    collapsedPromptText: {
+        fontFamily: AppFonts_1.AppFonts.interRegular,
+        fontSize: 10.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    expandedContent: {
+        marginTop: 10,
+        paddingTop: 10,
+        borderTopWidth: 1,
+        borderTopColor: AppColors_1.AppColors.dividerColor,
+    },
+    expandedSectionTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextStrong,
+        marginBottom: 4,
+    },
+    metadataCard: {
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 12,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    metaRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 10,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+    },
+    metaLabel: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    metaValue: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.primaryBlack,
+        maxWidth: '60%',
+        textAlign: 'right',
+    },
+    clearPersistBtn: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 6,
+        backgroundColor: '#FEF2F2',
+        borderWidth: 1,
+        borderColor: '#FEE2E2',
+        borderRadius: 8,
+        paddingVertical: 10,
+        marginTop: 14,
+    },
+    clearPersistText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        color: AppColors_1.AppColors.errorColor,
+    },
+    emptyBox: {
+        backgroundColor: AppColors_1.AppColors.white,
+        borderRadius: 12,
+        padding: 24,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.dividerColor,
+    },
+    emptyBoxText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 12.5,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    highlight: {
+        backgroundColor: '#FEF08A',
+        color: '#854D0E',
+        fontFamily: AppFonts_1.AppFonts.interBold,
+    },
+});
+exports.default = ReduxDetail;

package/dist/commonjs/components/Inspector/ReduxTab.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const ReduxTab: () => React.JSX.Element;
+declare const ReduxTab: React.MemoExoticComponent<() => React.JSX.Element>;
 export default ReduxTab;