react-native-inapp-inspector 1.1.18 → 1.1.19

package/dist/commonjs/components/ReduxTreeView.js

@@ -1,1257 +0,0 @@
-"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 });
-exports.ReduxTreeView = void 0;
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const AppColors_1 = require("../styles/AppColors");
-const AppFonts_1 = require("../styles/AppFonts");
-const NetworkIcons_1 = require("./NetworkIcons");
-const JsonViewer_1 = __importDefault(require("./JsonViewer"));
-const DiffViewer_1 = __importDefault(require("./DiffViewer"));
-const TouchableScale_1 = __importDefault(require("./TouchableScale"));
-const SegmentedTabs_1 = __importDefault(require("./SegmentedTabs"));
-const CopyButton_1 = __importDefault(require("./CopyButton"));
-const helpers_1 = require("../helpers");
-const settingsStore_1 = require("../helpers/settingsStore");
-// Enable LayoutAnimation for Android
-if (react_native_1.Platform.OS === 'android') {
-    react_native_1.UIManager.setLayoutAnimationEnabledExperimental?.(true);
-}
-const animateLayout = () => {
-    react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
-};
-// Chevron pointing left (for back buttons)
-const BackChevronIcon = ({ color = AppColors_1.AppColors.purple, size = 12 }) => (<react_native_1.View style={{ transform: [{ rotate: '180deg' }], marginRight: 4 }}>
-    <NetworkIcons_1.ChevronIcon color={color} size={size}/>
-  </react_native_1.View>);
-// Chevron pointing right (for list items)
-const ForwardChevronIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 12 }) => (<react_native_1.View style={{ transform: [{ rotate: '0deg' }], marginLeft: 'auto' }}>
-    <NetworkIcons_1.ChevronIcon color={color} size={size}/>
-  </react_native_1.View>);
-// Helper: check if a value recursively contains a string term
-const valueContainsTerm = (val, term) => {
-    if (!term)
-        return true;
-    const t = term.toLowerCase();
-    if (val === null || val === undefined)
-        return false;
-    if (typeof val !== 'object') {
-        return String(val).toLowerCase().includes(t);
-    }
-    if (Array.isArray(val)) {
-        return val.some(item => valueContainsTerm(item, term));
-    }
-    return Object.keys(val).some(key => key.toLowerCase().includes(t) || valueContainsTerm(val[key], term));
-};
-exports.ReduxTreeView = react_1.default.memo(({ state, actionHistory = [], lastActionMap = {}, search = '', onSearchChange, autoRefresh = true, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey = null, onSelectSliceKey, selectedActionId = null, onSelectActionId, }) => {
-    const [activeTab, setActiveTab] = (0, react_1.useState)('state');
-    const [actionSubTab, setActionSubTab] = (0, react_1.useState)('payload');
-    // local fallbacks if props are not provided
-    const [localSliceKey, setLocalSliceKey] = (0, react_1.useState)(null);
-    const [localActionId, setLocalActionId] = (0, react_1.useState)(null);
-    const activeSliceKey = onSelectSliceKey ? selectedSliceKey : localSliceKey;
-    const activeActionId = onSelectActionId ? selectedActionId : localActionId;
-    const setActiveSliceKey = (key) => {
-        if (onSelectSliceKey)
-            onSelectSliceKey(key);
-        else
-            setLocalSliceKey(key);
-    };
-    const setActiveActionId = (id) => {
-        if (onSelectActionId)
-            onSelectActionId(id);
-        else
-            setLocalActionId(id);
-    };
-    // Expand / collapse all states for detail views
-    const [sliceForceOpen, setSliceForceOpen] = (0, react_1.useState)(undefined);
-    const [actionForceOpen, setActionForceOpen] = (0, react_1.useState)(undefined);
-    const [searchModeType, setSearchModeType] = (0, react_1.useState)(true);
-    const [searchModeData, setSearchModeData] = (0, react_1.useState)(true);
-    // Sorting directions
-    const [stateSortAsc, setStateSortAsc] = (0, react_1.useState)(true);
-    const [actionSortAsc, setActionSortAsc] = (0, react_1.useState)(false);
-    // Persistence-related states for State Slice details
-    const [sliceDetailTab, setSliceDetailTab] = (0, react_1.useState)('live');
-    const [isPersisted, setIsPersisted] = (0, react_1.useState)(false);
-    const [persistedData, setPersistedData] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        if (activeSliceKey === null) {
-            setIsPersisted(false);
-            setPersistedData(null);
-            setSliceDetailTab('live');
-            return;
-        }
-        async function checkPersistence() {
-            try {
-                const storage = (0, settingsStore_1.getCustomStorage)();
-                if (!storage) {
-                    setIsPersisted(false);
-                    setPersistedData(null);
-                    return;
-                }
-                // Check direct key: persist:sliceKey
-                let raw = await storage.getItem(`persist:${activeSliceKey}`);
-                if (raw) {
-                    try {
-                        setPersistedData(JSON.parse(raw));
-                    }
-                    catch {
-                        setPersistedData(raw);
-                    }
-                    setIsPersisted(true);
-                    return;
-                }
-                // Check root key: persist:root
-                let rootRaw = await storage.getItem('persist:root');
-                if (rootRaw) {
-                    const parsedRoot = JSON.parse(rootRaw);
-                    if (parsedRoot && parsedRoot[activeSliceKey] !== undefined) {
-                        const nested = parsedRoot[activeSliceKey];
-                        try {
-                            setPersistedData(typeof nested === 'string' ? JSON.parse(nested) : nested);
-                        }
-                        catch {
-                            setPersistedData(nested);
-                        }
-                        setIsPersisted(true);
-                        return;
-                    }
-                }
-            }
-            catch (e) {
-                console.log('Error checking Redux persistence:', e);
-            }
-            setIsPersisted(false);
-            setPersistedData(null);
-        }
-        checkPersistence();
-    }, [activeSliceKey]);
-    const handleClearPersistence = () => {
-        react_native_1.Alert.alert('Clear Persisted State', `Are you sure you want to delete the persisted storage item for the slice "${activeSliceKey}"? This will clear the value from device storage, but the current active in-memory Redux state will remain unchanged until the next app reload.`, [
-            { text: 'Cancel', style: 'cancel' },
-            {
-                text: 'Delete',
-                style: 'destructive',
-                onPress: async () => {
-                    try {
-                        const storage = (0, settingsStore_1.getCustomStorage)();
-                        if (!storage)
-                            return;
-                        // Delete direct key
-                        if (typeof storage.removeItem === 'function') {
-                            await storage.removeItem(`persist:${activeSliceKey}`);
-                        }
-                        else {
-                            await storage.setItem(`persist:${activeSliceKey}`, '');
-                        }
-                        // Delete from root key
-                        let rootRaw = await storage.getItem('persist:root');
-                        if (rootRaw) {
-                            const parsed = JSON.parse(rootRaw);
-                            if (parsed && parsed[activeSliceKey] !== undefined) {
-                                delete parsed[activeSliceKey];
-                                await storage.setItem('persist:root', JSON.stringify(parsed));
-                            }
-                        }
-                        setIsPersisted(false);
-                        setPersistedData(null);
-                        setSliceDetailTab('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 from device storage.');
-                        }
-                    }
-                    catch (err) {
-                        react_native_1.Alert.alert('Error', 'Failed to clear persisted state.');
-                    }
-                }
-            }
-        ]);
-    };
-    const isSearching = search.trim().length > 0;
-    (0, react_1.useEffect)(() => {
-        onDetailOpenChange?.(activeSliceKey !== null || activeActionId !== null);
-        return () => {
-            onDetailOpenChange?.(false);
-        };
-    }, [activeSliceKey, activeActionId, onDetailOpenChange]);
-    // Reset details view when tab changes
-    const switchTab = (tab) => {
-        animateLayout();
-        setActiveTab(tab);
-        setActiveSliceKey(null);
-        setActiveActionId(null);
-        setSliceForceOpen(undefined);
-        setActionForceOpen(undefined);
-    };
-    const handleGoBackSlice = () => {
-        animateLayout();
-        setActiveSliceKey(null);
-        setSliceForceOpen(undefined);
-    };
-    const handleGoBackAction = () => {
-        animateLayout();
-        setActiveActionId(null);
-        setActionForceOpen(undefined);
-    };
-    // Filtered state keys based on search query
-    const filteredStateKeys = (0, react_1.useMemo)(() => {
-        if (!state || typeof state !== 'object')
-            return [];
-        const keys = Object.keys(state);
-        let result = keys;
-        if (isSearching) {
-            result = keys.filter(key => {
-                const typeMatch = searchModeType && key.toLowerCase().includes(search.toLowerCase());
-                const dataMatch = searchModeData && valueContainsTerm(state[key], search);
-                return typeMatch || dataMatch;
-            });
-        }
-        return [...result].sort((a, b) => {
-            const comparison = a.localeCompare(b);
-            return stateSortAsc ? comparison : -comparison;
-        });
-    }, [state, search, isSearching, searchModeType, searchModeData, stateSortAsc]);
-    // Filtered action history based on search query
-    const filteredActionHistory = (0, react_1.useMemo)(() => {
-        if (!actionHistory)
-            return [];
-        let result = actionHistory;
-        if (isSearching) {
-            result = actionHistory.filter(action => {
-                const typeMatch = searchModeType && action.type.toLowerCase().includes(search.toLowerCase());
-                const payloadMatch = searchModeData && action.payload && valueContainsTerm(action.payload, search);
-                return typeMatch || payloadMatch;
-            });
-        }
-        return [...result].sort((a, b) => {
-            const comparison = a.id - b.id;
-            return actionSortAsc ? comparison : -comparison;
-        });
-    }, [actionHistory, search, isSearching, searchModeType, searchModeData, actionSortAsc]);
-    // Find currently selected action object
-    const selectedAction = (0, react_1.useMemo)(() => {
-        if (activeActionId === null)
-            return null;
-        return actionHistory.find(a => a.id === activeActionId) || null;
-    }, [activeActionId, actionHistory]);
-    if (!state || typeof state !== 'object') {
-        return (<react_native_1.View style={styles.errorContainer}>
-        <react_native_1.Text style={styles.errorText}>No connected Redux store state found.</react_native_1.Text>
-      </react_native_1.View>);
-    }
-    // ── Render Detail View: State Slice ──
-    if (activeTab === 'state' && activeSliceKey !== null) {
-        const sliceData = state[activeSliceKey];
-        const fieldsCount = typeof sliceData === 'object' && sliceData !== null
-            ? Object.keys(sliceData).length
-            : 1;
-        const sliceTabs = [
-            { key: 'live', label: 'Live State' },
-            ...(isPersisted
-                ? [{ key: 'persisted', label: `Persisted (${(0, helpers_1.getSize)(persistedData)})` }]
-                : []),
-            { key: 'metadata', label: 'Metadata' },
-        ];
-        return (<react_native_1.View style={{ flex: 1 }}>
-        {/* Detail info header bar */}
-        <react_native_1.View style={styles.apiLikeInfoBar}>
-          <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginBottom: 8,
-            }}>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              <react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.purple }]}>
-                <react_native_1.Text style={styles.apiMethodBadgeText}>REDUX</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={[
-                styles.apiMethodBadge,
-                {
-                    backgroundColor: `${AppColors_1.AppColors.brandPurple}18`,
-                    borderWidth: 1,
-                    borderColor: `${AppColors_1.AppColors.brandPurple}40`,
-                },
-            ]}>
-                <react_native_1.Text style={[styles.apiMethodBadgeText, { color: AppColors_1.AppColors.brandPurple }]}>
-                  SLICE
-                </react_native_1.Text>
-              </react_native_1.View>
-              {isPersisted && (<react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.emerald500 }]}>
-                  <react_native_1.Text style={styles.apiMethodBadgeText}>PERSISTED</react_native_1.Text>
-                </react_native_1.View>)}
-              <react_native_1.View style={styles.apiChip}>
-                <react_native_1.Text style={styles.apiChipText}>{(0, helpers_1.getSize)(sliceData)}</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.apiChip}>
-                <react_native_1.Text style={styles.apiChipText}>
-                  {fieldsCount} {fieldsCount === 1 ? 'field' : 'fields'}
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-
-            <CopyButton_1.default value={JSON.stringify(sliceDetailTab === 'live' ? sliceData : persistedData, null, 2)} label={`Slice '${activeSliceKey}'`}/>
-          </react_native_1.View>
-
-          <react_native_1.Text style={styles.apiTitleText} selectable={true}>
-            {activeSliceKey}
-          </react_native_1.Text>
-
-          <react_native_1.View style={styles.apiMetaRow}>
-            <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>
-            <react_native_1.Text style={styles.apiMetaText}>
-              Last updated: {lastActionMap[activeSliceKey] ? lastActionMap[activeSliceKey].timestamp : 'Initial'}
-            </react_native_1.Text>
-          </react_native_1.View>
-        </react_native_1.View>
-
-        {/* Back button row + sub-tabs */}
-        <react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 8, paddingBottom: 4 }}>
-          <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginBottom: 8,
-            }}>
-            <TouchableScale_1.default onPress={handleGoBackSlice} style={styles.backBtn} hitSlop={12}>
-              <BackChevronIcon color={AppColors_1.AppColors.purple} size={12}/>
-              <react_native_1.Text style={styles.backBtnText}>State Slices</react_native_1.Text>
-            </TouchableScale_1.default>
-
-            {isPersisted && sliceDetailTab === 'persisted' && (<TouchableScale_1.default onPress={handleClearPersistence} style={[styles.detailHeaderBtn, { borderColor: `${AppColors_1.AppColors.errorColor}40` }]} hitSlop={8}>
-                <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={14}/>
-              </TouchableScale_1.default>)}
-          </react_native_1.View>
-
-          <SegmentedTabs_1.default tabs={sliceTabs} activeKey={sliceDetailTab} onChange={key => {
-                animateLayout();
-                setSliceDetailTab(key);
-            }}/>
-        </react_native_1.View>
-
-        {/* Search row (for live/persisted tabs) */}
-        {sliceDetailTab !== 'metadata' && (<react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 4, paddingBottom: 4 }}>
-            <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    backgroundColor: AppColors_1.AppColors.purpleShade50,
-                    borderRadius: 8,
-                    paddingHorizontal: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                    height: 36,
-                }}>
-              <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
-              <react_native_1.TextInput placeholder="Search in slice keys or values..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={onSearchChange} style={{
-                    flex: 1,
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 12,
-                    color: AppColors_1.AppColors.grayTextStrong,
-                    paddingHorizontal: 8,
-                    paddingVertical: 0,
-                }} autoCorrect={false} autoCapitalize="none"/>
-              {search.length > 0 && (<react_native_1.Pressable onPress={() => onSearchChange?.('')} hitSlop={10}>
-                  <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
-                </react_native_1.Pressable>)}
-            </react_native_1.View>
-          </react_native_1.View>)}
-
-        {/* Scrollable Tab Content */}
-        <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingHorizontal: 12, paddingTop: 6, paddingBottom: 28, flexGrow: 1 }} showsVerticalScrollIndicator={true} keyboardShouldPersistTaps="handled">
-          {sliceDetailTab === 'metadata' ? (<react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                    overflow: 'hidden',
-                    paddingHorizontal: 12,
-                    paddingVertical: 4,
-                }}>
-              {[
-                    { label: 'Slice Name', value: activeSliceKey },
-                    { label: 'Fields Count', value: `${fieldsCount} root keys` },
-                    { label: 'State Size', value: (0, helpers_1.getSize)(sliceData) },
-                    {
-                        label: 'Persistence',
-                        value: isPersisted ? `Persisted (${(0, helpers_1.getSize)(persistedData)})` : 'Not Persisted',
-                    },
-                    {
-                        label: 'Last Dispatched Action',
-                        value: lastActionMap[activeSliceKey] ? lastActionMap[activeSliceKey].type : 'None',
-                    },
-                    {
-                        label: 'Last Updated At',
-                        value: lastActionMap[activeSliceKey] ? lastActionMap[activeSliceKey].timestamp : 'Initial',
-                    },
-                ].map((row, rIdx) => (<react_native_1.View key={rIdx} style={{
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        paddingVertical: 9,
-                        borderBottomWidth: rIdx < 5 ? 1 : 0,
-                        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
-                    }}>
-                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 11.5, color: AppColors_1.AppColors.grayTextWeak }}>
-                    {row.label}
-                  </react_native_1.Text>
-                  <react_native_1.Text selectable style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 11.5,
-                        color: AppColors_1.AppColors.primaryBlack,
-                        maxWidth: '60%',
-                        textAlign: 'right',
-                    }}>
-                    {row.value}
-                  </react_native_1.Text>
-                </react_native_1.View>))}
-            </react_native_1.View>) : (<JsonViewer_1.default data={sliceDetailTab === 'live' ? sliceData : (persistedData ?? 'No persisted data')} search={search} forceOpen={sliceForceOpen !== undefined ? sliceForceOpen : (isSearching ? true : undefined)} fullHeight={true}/>)}
-        </react_native_1.ScrollView>
-      </react_native_1.View>);
-    }
-    // ── Render Detail View: Timeline Action ──
-    if (activeTab === 'timeline' && selectedAction !== null) {
-        const affectedSlices = selectedAction.affectedSlices || [];
-        const actionTabs = [
-            { key: 'payload', label: 'Payload' },
-            { key: 'diff', label: 'Diff Changes' },
-            { key: 'state', label: 'Snapshot' },
-            { key: 'metadata', label: 'Metadata' },
-        ];
-        return (<react_native_1.View style={{ flex: 1 }}>
-        {/* Detail info header bar */}
-        <react_native_1.View style={styles.apiLikeInfoBar}>
-          <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginBottom: 8,
-            }}>
-            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
-              <react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.purple }]}>
-                <react_native_1.Text style={styles.apiMethodBadgeText}>REDUX</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={[styles.apiMethodBadge, { backgroundColor: AppColors_1.AppColors.amber500 }]}>
-                <react_native_1.Text style={styles.apiMethodBadgeText}>ACTION</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.apiChip}>
-                <react_native_1.Text style={styles.apiChipText}>#{selectedAction.id}</react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={styles.apiChip}>
-                <react_native_1.Text style={styles.apiChipText}>{(0, helpers_1.getSize)(selectedAction.payload)}</react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.View>
-
-            <CopyButton_1.default value={JSON.stringify(actionSubTab === 'payload'
-                ? selectedAction.payload
-                : actionSubTab === 'diff'
-                    ? { prev: selectedAction.prevState, next: selectedAction.nextState }
-                    : selectedAction.nextState, null, 2)} label={actionSubTab === 'payload' ? 'Action Payload' : 'State Snapshot'}/>
-          </react_native_1.View>
-
-          <react_native_1.Text style={styles.apiTitleText} selectable={true}>
-            {selectedAction.type}
-          </react_native_1.Text>
-
-          <react_native_1.View style={styles.apiMetaRow}>
-            <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={11}/>
-            <react_native_1.Text style={styles.apiMetaText}>
-              Dispatched: {selectedAction.timestamp}
-            </react_native_1.Text>
-          </react_native_1.View>
-
-          {/* Affected Slices Tags list */}
-          {affectedSlices.length > 0 && (<react_native_1.View style={[styles.detailAffectedTags, { marginTop: 6, paddingHorizontal: 0, paddingBottom: 0 }]}>
-              <react_native_1.Text style={styles.affectedTagsLabel}>AFFECTED SLICES:</react_native_1.Text>
-              <react_native_1.View style={styles.detailTagsList}>
-                {affectedSlices.map(slice => (<react_native_1.View key={slice} style={styles.sliceTag}>
-                    <react_native_1.Text style={styles.sliceTagText}>{slice}</react_native_1.Text>
-                  </react_native_1.View>))}
-              </react_native_1.View>
-            </react_native_1.View>)}
-        </react_native_1.View>
-
-        {/* Back button row + sub-tabs */}
-        <react_native_1.View style={{ paddingHorizontal: 12, paddingTop: 8, paddingBottom: 4 }}>
-          <react_native_1.View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                marginBottom: 8,
-            }}>
-            <TouchableScale_1.default onPress={handleGoBackAction} style={styles.backBtn} hitSlop={12}>
-              <BackChevronIcon color={AppColors_1.AppColors.purple} size={12}/>
-              <react_native_1.Text style={styles.backBtnText}>Actions Timeline</react_native_1.Text>
-            </TouchableScale_1.default>
-          </react_native_1.View>
-
-          <SegmentedTabs_1.default tabs={actionTabs} activeKey={actionSubTab} onChange={key => {
-                animateLayout();
-                setActionSubTab(key);
-            }}/>
-        </react_native_1.View>
-
-        {/* Scrollable Tab Content */}
-        <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ paddingHorizontal: 12, paddingTop: 6, paddingBottom: 28, flexGrow: 1 }} showsVerticalScrollIndicator={true} keyboardShouldPersistTaps="handled">
-          {actionSubTab === 'payload' && (<JsonViewer_1.default data={selectedAction.payload ?? 'No payload data'} wrap forceOpen={actionForceOpen !== undefined ? actionForceOpen : undefined} fullHeight={true}/>)}
-
-          {actionSubTab === 'diff' && (<DiffViewer_1.default oldData={selectedAction.prevState} newData={selectedAction.nextState}/>)}
-
-          {actionSubTab === 'state' && (<JsonViewer_1.default data={selectedAction.nextState} wrap forceOpen={actionForceOpen !== undefined ? actionForceOpen : undefined} fullHeight={true}/>)}
-
-          {actionSubTab === 'metadata' && (<react_native_1.View style={{
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderRadius: 10,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.dividerColor,
-                    overflow: 'hidden',
-                    paddingHorizontal: 12,
-                    paddingVertical: 4,
-                }}>
-              {[
-                    { label: 'Action Type', value: selectedAction.type },
-                    { label: 'Action ID', value: `#${selectedAction.id}` },
-                    { label: 'Dispatched At', value: selectedAction.timestamp },
-                    { label: 'Payload Size', value: (0, helpers_1.getSize)(selectedAction.payload) },
-                    { label: 'Snapshot Size', value: (0, helpers_1.getSize)(selectedAction.nextState) },
-                    {
-                        label: 'Affected Slices',
-                        value: affectedSlices.length > 0 ? affectedSlices.join(', ') : 'None',
-                    },
-                ].map((row, rIdx) => (<react_native_1.View key={rIdx} style={{
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        paddingVertical: 9,
-                        borderBottomWidth: rIdx < 5 ? 1 : 0,
-                        borderBottomColor: AppColors_1.AppColors.grayBorderSecondary,
-                    }}>
-                  <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interMedium, fontSize: 11.5, color: AppColors_1.AppColors.grayTextWeak }}>
-                    {row.label}
-                  </react_native_1.Text>
-                  <react_native_1.Text selectable style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 11.5,
-                        color: AppColors_1.AppColors.primaryBlack,
-                        maxWidth: '60%',
-                        textAlign: 'right',
-                    }}>
-                    {row.value}
-                  </react_native_1.Text>
-                </react_native_1.View>))}
-            </react_native_1.View>)}
-        </react_native_1.ScrollView>
-      </react_native_1.View>);
-    }
-    // ── Render List Views (Default) ──
-    return (<react_native_1.View style={styles.container}>
-      {/* ── Control Bar ── */}
-      <react_native_1.View style={styles.toolbar}>
-        <react_native_1.View style={styles.statusSection}>
-          <react_native_1.View style={[styles.statusBadge, autoRefresh ? styles.statusBadgeActive : styles.statusBadgePaused]}>
-            <react_native_1.View style={[styles.statusDot, autoRefresh ? styles.statusDotActive : styles.statusDotPaused]}/>
-            <react_native_1.Text style={[styles.statusBadgeText, autoRefresh ? styles.statusTextActive : styles.statusTextPaused]}>
-              {autoRefresh ? 'LIVE' : 'PAUSED'}
-            </react_native_1.Text>
-          </react_native_1.View>
-        </react_native_1.View>
-
-        <react_native_1.View style={styles.toolbarActions}>
-          {/* Sorting Toggle Button */}
-          <TouchableScale_1.default onPress={() => {
-            animateLayout();
-            if (activeTab === 'state') {
-                setStateSortAsc(prev => !prev);
-            }
-            else {
-                setActionSortAsc(prev => !prev);
-            }
-        }} style={styles.iconBtn} hitSlop={8}>
-            <NetworkIcons_1.SortIcon ascending={activeTab === 'state' ? stateSortAsc : actionSortAsc} color={AppColors_1.AppColors.purple} size={15}/>
-          </TouchableScale_1.default>
-
-          {onToggleAutoRefresh && (<TouchableScale_1.default onPress={onToggleAutoRefresh} style={styles.iconBtn} hitSlop={8}>
-              <NetworkIcons_1.HeaderPauseIcon isPaused={!autoRefresh} color={AppColors_1.AppColors.purple} size={15}/>
-            </TouchableScale_1.default>)}
-          {onClearHistory && (<TouchableScale_1.default onPress={onClearHistory} style={[styles.iconBtn, { borderColor: AppColors_1.AppColors.errorColor + '40', backgroundColor: AppColors_1.AppColors.errorColor + '08' }]} hitSlop={8}>
-              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={15}/>
-            </TouchableScale_1.default>)}
-        </react_native_1.View>
-      </react_native_1.View>
-
-      {/* ── Search Bar ── */}
-      {onSearchChange && (<react_native_1.View style={styles.searchContainer}>
-          <react_native_1.View style={styles.searchBar}>
-            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-            <react_native_1.TextInput placeholder="Search keys, values, or action payloads..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={onSearchChange} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {search.length > 0 && (<TouchableScale_1.default onPress={() => onSearchChange('')} hitSlop={10}>
-                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-              </TouchableScale_1.default>)}
-          </react_native_1.View>
-          <react_native_1.View style={styles.filterChipRow}>
-            <react_native_1.Text style={styles.filterChipLabel}>FILTER BY:</react_native_1.Text>
-            <react_native_1.Pressable onPress={() => {
-                animateLayout();
-                if (searchModeType && !searchModeData)
-                    return; // Prevent disabling both
-                setSearchModeType(!searchModeType);
-            }} style={[styles.filterChip, searchModeType && styles.filterChipActive]}>
-              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                <NetworkIcons_1.SignalIcon color={searchModeType ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayText} size={11}/>
-                <react_native_1.Text style={[styles.filterChipText, searchModeType && styles.filterChipTextActive]}>
-                  Type / Key
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.Pressable>
-            <react_native_1.Pressable onPress={() => {
-                animateLayout();
-                if (!searchModeType && searchModeData)
-                    return; // Prevent disabling both
-                setSearchModeData(!searchModeData);
-            }} style={[styles.filterChip, searchModeData && styles.filterChipActive]}>
-              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                <NetworkIcons_1.LayersIcon color={searchModeData ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayText} size={11}/>
-                <react_native_1.Text style={[styles.filterChipText, searchModeData && styles.filterChipTextActive]}>
-                  Payload Data
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.Pressable>
-          </react_native_1.View>
-        </react_native_1.View>)}
-
-      {/* ── Tab Selector ── */}
-      <react_native_1.View style={styles.tabContainer}>
-        <react_native_1.Pressable style={[styles.tabButton, activeTab === 'state' && styles.tabButtonActive]} onPress={() => switchTab('state')}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <NetworkIcons_1.LayersIcon color={activeTab === 'state' ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayText} size={12}/>
-            <react_native_1.Text style={[styles.tabButtonText, activeTab === 'state' && styles.tabButtonTextActive]}>
-              State Slices ({filteredStateKeys.length})
-            </react_native_1.Text>
-          </react_native_1.View>
-        </react_native_1.Pressable>
-        <react_native_1.Pressable style={[styles.tabButton, activeTab === 'timeline' && styles.tabButtonActive]} onPress={() => switchTab('timeline')}>
-          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <NetworkIcons_1.TerminalIcon color={activeTab === 'timeline' ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayText} size={12}/>
-            <react_native_1.Text style={[styles.tabButtonText, activeTab === 'timeline' && styles.tabButtonTextActive]}>
-              Actions ({filteredActionHistory.length})
-            </react_native_1.Text>
-          </react_native_1.View>
-        </react_native_1.Pressable>
-      </react_native_1.View>
-
-      {/* ── State List View ── */}
-      {activeTab === 'state' && (<react_native_1.ScrollView style={styles.scrollList} contentContainerStyle={styles.scrollContent}>
-          {filteredStateKeys.length === 0 ? (<react_native_1.View style={styles.emptyState}>
-              <react_native_1.Text style={styles.emptyStateText}>
-                {isSearching ? 'No store slices match your search.' : 'Redux store contains no state.'}
-              </react_native_1.Text>
-            </react_native_1.View>) : (filteredStateKeys.map(reducerKey => {
-                const sliceData = state[reducerKey];
-                const fieldsCount = typeof sliceData === 'object' && sliceData !== null
-                    ? Object.keys(sliceData).length
-                    : 1;
-                const lastAction = lastActionMap[reducerKey];
-                const lastUpdatedTime = lastAction ? lastAction.timestamp : 'Initial';
-                return (<TouchableScale_1.default key={reducerKey} onPress={() => {
-                        animateLayout();
-                        setActiveSliceKey(reducerKey);
-                    }} style={styles.listRow}>
-                  <react_native_1.View style={styles.sliceIcon}>
-                    <NetworkIcons_1.FolderIcon color={AppColors_1.AppColors.purple} size={11}/>
-                  </react_native_1.View>
-                  <react_native_1.View style={styles.rowMain}>
-                    <react_native_1.Text style={styles.rowTitle}>{reducerKey}</react_native_1.Text>
-                    <react_native_1.Text style={styles.rowSub}>
-                      {(0, helpers_1.getSize)(sliceData)} • {fieldsCount} {fieldsCount === 1 ? 'field' : 'fields'} • Updated: {lastUpdatedTime}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                  <ForwardChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
-                </TouchableScale_1.default>);
-            }))}
-        </react_native_1.ScrollView>)}
-
-      {/* ── Timeline List View ── */}
-      {activeTab === 'timeline' && (<react_native_1.ScrollView style={styles.scrollList} contentContainerStyle={styles.scrollContent}>
-          {filteredActionHistory.length === 0 ? (<react_native_1.View style={styles.emptyState}>
-              <react_native_1.Text style={styles.emptyStateText}>
-                {isSearching
-                    ? 'No actions match your search.'
-                    : 'No actions dispatched yet. Trigger an action in the app to populate history.'}
-              </react_native_1.Text>
-            </react_native_1.View>) : (filteredActionHistory.map(action => {
-                const id = action.id;
-                const affectedSlices = action.affectedSlices || [];
-                return (<TouchableScale_1.default key={id} onPress={() => {
-                        animateLayout();
-                        setActiveActionId(id);
-                    }} style={styles.listRow}>
-                  <react_native_1.View style={styles.seqBadge}>
-                    <react_native_1.Text style={styles.seqText}>#{action.id}</react_native_1.Text>
-                  </react_native_1.View>
-                  <react_native_1.View style={styles.rowMain}>
-                    <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-                      <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={11}/>
-                      <react_native_1.Text style={styles.actionTitleText} numberOfLines={1}>{action.type}</react_native_1.Text>
-                    </react_native_1.View>
-                    <react_native_1.View style={styles.actionMetaRow}>
-                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.grayTextWeak} size={9}/>
-                      <react_native_1.Text style={styles.actionTimeText}>{action.timestamp} • {(0, helpers_1.getSize)(action.payload)}</react_native_1.Text>
-                    </react_native_1.View>
-                    {affectedSlices.length > 0 && (<react_native_1.View style={styles.tagsContainer}>
-                        {affectedSlices.map(slice => (<react_native_1.View key={slice} style={styles.sliceTagMini}>
-                            <react_native_1.Text style={styles.sliceTagMiniText}>{slice}</react_native_1.Text>
-                          </react_native_1.View>))}
-                      </react_native_1.View>)}
-                  </react_native_1.View>
-                  <ForwardChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={10}/>
-                </TouchableScale_1.default>);
-            }))}
-        </react_native_1.ScrollView>)}
-    </react_native_1.View>);
-});
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-    },
-    scrollList: {
-        flex: 1,
-    },
-    errorContainer: {
-        padding: 24,
-        alignItems: 'center',
-    },
-    errorText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    toolbar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-        paddingVertical: 10,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-    },
-    statusSection: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    statusBadge: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 8,
-        paddingVertical: 3,
-        borderRadius: 12,
-        borderWidth: 1,
-    },
-    statusBadgeActive: {
-        backgroundColor: AppColors_1.AppColors.greenStatus,
-        borderColor: AppColors_1.AppColors.greenColor + '30',
-    },
-    statusBadgePaused: {
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    statusDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        marginRight: 6,
-    },
-    statusDotActive: {
-        backgroundColor: AppColors_1.AppColors.greenBaggageText,
-    },
-    statusDotPaused: {
-        backgroundColor: AppColors_1.AppColors.grayTextWeak,
-    },
-    statusBadgeText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9,
-        letterSpacing: 0.5,
-    },
-    statusTextActive: {
-        color: AppColors_1.AppColors.greenBaggageText,
-    },
-    statusTextPaused: {
-        color: AppColors_1.AppColors.grayText,
-    },
-    toolbarActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    iconBtn: {
-        width: 28,
-        height: 28,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.purple + '40',
-        backgroundColor: AppColors_1.AppColors.purpleShade50,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    searchContainer: {
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-        paddingBottom: 10,
-    },
-    searchBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderRadius: 8,
-        marginHorizontal: 12,
-        marginTop: 10,
-        marginBottom: 8,
-        paddingHorizontal: 10,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.dividerColor,
-        height: 36,
-    },
-    filterChipRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 12,
-        gap: 8,
-    },
-    filterChipLabel: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors_1.AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-        marginRight: 2,
-    },
-    filterChip: {
-        paddingHorizontal: 10,
-        paddingVertical: 4,
-        borderRadius: 12,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    filterChipActive: {
-        backgroundColor: AppColors_1.AppColors.purpleShade50,
-        borderColor: AppColors_1.AppColors.purple,
-    },
-    filterChipText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayText,
-    },
-    filterChipTextActive: {
-        color: AppColors_1.AppColors.purple,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors_1.AppColors.grayTextStrong,
-        marginLeft: 6,
-        padding: 0,
-    },
-    tabContainer: {
-        flexDirection: 'row',
-        backgroundColor: AppColors_1.AppColors.dividerColor,
-        borderRadius: 8,
-        padding: 3,
-        marginHorizontal: 12,
-        marginTop: 10,
-        marginBottom: 10,
-    },
-    tabButton: {
-        flex: 1,
-        paddingVertical: 7,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 6,
-    },
-    tabButtonActive: {
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        shadowColor: AppColors_1.AppColors.shadowColorString,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.08,
-        shadowRadius: 2,
-        elevation: 2,
-    },
-    tabButtonText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors_1.AppColors.grayText,
-    },
-    tabButtonTextActive: {
-        color: AppColors_1.AppColors.purple,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-    },
-    scrollContent: {
-        paddingBottom: 24,
-        paddingHorizontal: 12,
-    },
-    emptyState: {
-        padding: 24,
-        alignItems: 'center',
-    },
-    emptyStateText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors_1.AppColors.grayTextWeak,
-        textAlign: 'center',
-    },
-    listRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        paddingHorizontal: 12,
-        paddingVertical: 14,
-        borderRadius: 10,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        marginBottom: 8,
-        shadowColor: AppColors_1.AppColors.shadowColorString,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.03,
-        shadowRadius: 2,
-        elevation: 1,
-    },
-    rowMain: {
-        flex: 1,
-        marginLeft: 10,
-    },
-    rowTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13.5,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    rowSub: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-        marginTop: 2,
-    },
-    sliceIcon: {
-        width: 22,
-        height: 22,
-        borderRadius: 6,
-        backgroundColor: AppColors_1.AppColors.purpleShade50,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    seqBadge: {
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-        borderWidth: 1,
-        borderRadius: 4,
-        paddingHorizontal: 5,
-        paddingVertical: 2,
-        alignItems: 'center',
-        justifyContent: 'center',
-        minWidth: 28,
-    },
-    seqText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.grayText,
-    },
-    actionTitleText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13,
-        color: AppColors_1.AppColors.purple,
-    },
-    actionMetaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        marginTop: 2,
-    },
-    actionTimeText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    tagsContainer: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 4,
-        marginTop: 4,
-    },
-    sliceTagMini: {
-        backgroundColor: AppColors_1.AppColors.purpleShade50,
-        borderColor: AppColors_1.AppColors.purple + '20',
-        borderWidth: 1,
-        borderRadius: 3,
-        paddingHorizontal: 4,
-        paddingVertical: 0.5,
-    },
-    sliceTagMiniText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 8.5,
-        color: AppColors_1.AppColors.purple,
-    },
-    // ── Detail Views Styles ──
-    detailHeaderBar: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 12,
-        paddingVertical: 12,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-    },
-    backBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 6,
-        paddingRight: 8,
-    },
-    backBtnText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors_1.AppColors.purple,
-    },
-    detailHeaderInfo: {
-        flex: 1,
-        marginLeft: 10,
-        marginRight: 10,
-    },
-    detailTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 13.5,
-        color: AppColors_1.AppColors.primaryBlack,
-    },
-    detailSub: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-        marginTop: 2,
-    },
-    detailHeaderActions: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    detailHeaderBtn: {
-        padding: 6,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.purple + '20',
-        backgroundColor: AppColors_1.AppColors.purpleShade50,
-        alignItems: 'center',
-        justifyContent: 'center',
-        width: 28,
-        height: 28,
-    },
-    detailCopyBtn: {
-        padding: 6,
-        borderRadius: 6,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.purple + '20',
-        backgroundColor: AppColors_1.AppColors.purpleShade50,
-    },
-    detailTimeRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        marginTop: 1,
-    },
-    detailTimeText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    detailAffectedTags: {
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-    },
-    affectedTagsLabel: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors_1.AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-        marginBottom: 4,
-    },
-    detailTagsList: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        gap: 4,
-    },
-    sliceTag: {
-        backgroundColor: AppColors_1.AppColors.purpleShade50,
-        borderColor: AppColors_1.AppColors.purple + '20',
-        borderWidth: 1,
-        borderRadius: 4,
-        paddingHorizontal: 6,
-        paddingVertical: 1.5,
-    },
-    sliceTagText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.purple,
-    },
-    subTabRow: {
-        flexDirection: 'row',
-        padding: 8,
-        gap: 8,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-    },
-    subTabPill: {
-        paddingHorizontal: 12,
-        paddingVertical: 5,
-        borderRadius: 12,
-        backgroundColor: AppColors_1.AppColors.grayBackground,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-    },
-    subTabPillActive: {
-        backgroundColor: AppColors_1.AppColors.purple,
-        borderColor: AppColors_1.AppColors.purple,
-    },
-    subTabPillText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.grayText,
-    },
-    subTabPillTextActive: {
-        color: AppColors_1.AppColors.white,
-        fontFamily: AppFonts_1.AppFonts.interBold,
-    },
-    detailScrollContent: {
-        paddingBottom: 24,
-    },
-    jsonViewerContainer: {
-        paddingHorizontal: 12,
-        paddingVertical: 8,
-    },
-    detailBox: {
-        padding: 10,
-    },
-    detailBoxHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 8,
-        paddingHorizontal: 4,
-    },
-    detailBoxTitle: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors_1.AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-        textTransform: 'uppercase',
-    },
-    apiLikeInfoBar: {
-        paddingHorizontal: 16,
-        paddingVertical: 14,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-    },
-    apiBadgeRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        marginBottom: 8,
-    },
-    apiMethodBadge: {
-        paddingHorizontal: 8,
-        paddingVertical: 2,
-        borderRadius: 4,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    apiMethodBadgeText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.white,
-        letterSpacing: 0.5,
-    },
-    apiChip: {
-        paddingHorizontal: 7,
-        paddingVertical: 2,
-        borderRadius: 4,
-        backgroundColor: `${AppColors_1.AppColors.purple}0F`,
-        borderWidth: 1,
-        borderColor: `${AppColors_1.AppColors.purple}26`,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    apiChipText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors_1.AppColors.purple,
-    },
-    apiTitleText: {
-        fontFamily: AppFonts_1.AppFonts.interBold,
-        fontSize: 16,
-        color: AppColors_1.AppColors.primaryBlack,
-        marginBottom: 8,
-    },
-    apiMetaRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-    },
-    apiMetaText: {
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 11,
-        color: AppColors_1.AppColors.grayTextWeak,
-    },
-    contentDetailSubHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        paddingHorizontal: 12,
-        paddingVertical: 10,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors_1.AppColors.dividerColor,
-        backgroundColor: AppColors_1.AppColors.primaryLight,
-    },
-});