react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,1221 +1,358 @@
-import React, { useState, useMemo, useEffect } from 'react';
-import { Alert, Platform, Pressable, ScrollView, StyleSheet, Text, TextInput, ToastAndroid, TouchableOpacity, View, } from 'react-native';
-import { useTranslation } from '../../i18n';
-import { useInspector } from './InspectorContext';
-import SegmentedTabs from '../SegmentedTabs';
-import JsonViewer from '../JsonViewer';
-import DiffViewer from '../DiffViewer';
-import CopyButton from '../CopyButton';
-import TouchableScale from '../TouchableScale';
-import HighlightText from '../HighlightText';
-import AnimatedEntrance from '../AnimatedEntrance';
-import { getActionHistory } from '../../customHooks/reduxLogger';
-import { getSize, openInVSCode, parseStackLine } from '../../helpers';
-import { getCustomStorage } from '../../helpers/settingsStore';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { TerminalIcon, SearchIcon, ClearIcon, ClockIcon, LayersIcon, TrashIcon, ForwardChevronIcon, LiveStateIcon, TimelineIcon, StorageIcon, MetadataIcon, BoltIcon, AtomIcon, ScreenIcon, ListenerIcon, DocIcon, ExternalLinkIcon, CodeBracketsIcon, } from '../NetworkIcons';
-const getOriginBadge = (originType) => {
-    switch (originType) {
-        case 'saga':
-            return {
-                label: 'SAGA',
-                renderIcon: (color, size = 9) => (<BoltIcon color={color} size={size}/>),
-                bg: AppColors.purple100,
-                text: AppColors.brandPurple,
-                border: AppColors.purple200,
-            };
-        case 'thunk':
-            return {
-                label: 'THUNK',
-                renderIcon: (color, size = 9) => (<AtomIcon color={color} size={size}/>),
-                bg: AppColors.amber100,
-                text: AppColors.amber800Warm,
-                border: AppColors.amber200,
-            };
-        case 'ui':
-            return {
-                label: 'UI',
-                renderIcon: (color, size = 9) => (<ScreenIcon color={color} size={size}/>),
-                bg: AppColors.sky100,
-                text: AppColors.sky600,
-                border: AppColors.sky400,
-            };
-        case 'listener':
-            return {
-                label: 'LISTENER',
-                renderIcon: (color, size = 9) => (<ListenerIcon color={color} size={size}/>),
-                bg: AppColors.teal100,
-                text: AppColors.teal700,
-                border: AppColors.teal400,
-            };
-        default:
-            return {
-                label: 'DIRECT',
-                renderIcon: (color, size = 9) => (<BoltIcon color={color} size={size}/>),
-                bg: AppColors.slate100,
-                text: AppColors.slate700,
-                border: AppColors.slate200,
-            };
-    }
-};
-const ReduxDetail = React.memo(() => {
-    const { t } = useTranslation();
-    const { reduxState, reduxLastActionMap, selectedReduxSlice, selectedReduxAction, setSelectedReduxSlice, } = useInspector();
-    const [detailSearch, setDetailSearch] = useState('');
-    const [sliceTab, setSliceTab] = useState('live');
-    const [actionTab, setActionTab] = useState('payload');
-    const [viewMode, setViewMode] = useState('pretty');
-    const [expandedActionId, setExpandedActionId] = useState(null);
-    const [isPersisted, setIsPersisted] = useState(false);
-    const [persistedData, setPersistedData] = useState(null);
-    const allActionHistory = useMemo(() => {
-        return getActionHistory();
-    }, [reduxLastActionMap]);
-    const sliceActions = 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]);
-    const filteredTimelineActions = useMemo(() => {
-        if (!detailSearch.trim())
-            return sliceActions;
-        const q = detailSearch.toLowerCase();
-        return sliceActions.filter(action => {
-            return (action.type.toLowerCase().includes(q) ||
-                (action.callerFile && action.callerFile.toLowerCase().includes(q)) ||
-                (action.payload &&
-                    JSON.stringify(action.payload).toLowerCase().includes(q)));
-        });
-    }, [sliceActions, detailSearch]);
-    useEffect(() => {
-        if (!selectedReduxSlice)
-            return;
-        async function checkPersistence() {
-            try {
-                const storage = 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) {
-            }
-            setIsPersisted(false);
-            setPersistedData(null);
-        }
-        checkPersistence();
-    }, [selectedReduxSlice]);
-    const handleClearPersistence = () => {
-        if (!selectedReduxSlice)
-            return;
-        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 = 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 (Platform.OS === 'android') {
-                            ToastAndroid.show('Persisted state cleared', ToastAndroid.SHORT);
-                        }
-                        else {
-                            Alert.alert('Cleared', 'Persisted state has been cleared.');
-                        }
-                    }
-                    catch (err) {
-                        Alert.alert('Error', 'Failed to clear persisted state.');
-                    }
-                },
-            },
-        ]);
-    };
-    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: t('redux.liveState', 'Live State'),
-                icon: (isActive) => (<LiveStateIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-            },
-            {
-                key: 'timeline',
-                label: `${t('redux.timeline', 'Timeline')} (${sliceActions.length})`,
-                icon: (isActive) => (<TimelineIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-            },
-            {
-                key: 'persisted',
-                label: isPersisted
-                    ? t('redux.persisted', 'Persisted')
-                    : t('redux.storage', 'Storage'),
-                icon: (isActive) => (<StorageIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-            },
-            {
-                key: 'metadata',
-                label: t('redux.metadata', 'Metadata'),
-                icon: (isActive) => (<MetadataIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-            },
-        ];
-        return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
+import Ze,{useState as E,useMemo as Ve,useEffect as _e}from"react";import{Alert as ze,Platform as et,Pressable as U,ScrollView as Z,StyleSheet as tt,Text as C,TextInput as Tt,ToastAndroid as Oe,TouchableOpacity as Ne,View as T}from"react-native";import{useTranslation as ht}from"../../i18n";import{useInspector as wt}from"./InspectorContext";import Me from"../SegmentedTabs";import K from"../JsonViewer";import He from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../TouchableScale";import St from"../HighlightText";import Bt from"../AnimatedEntrance";import{getActionHistory as Vt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{TerminalIcon as It,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Je,TrashIcon as Ge,ForwardChevronIcon as Rt,LiveStateIcon as Ue,TimelineIcon as Te,StorageIcon as Ce,MetadataIcon as Ft,BoltIcon as Pe,AtomIcon as Dt,ScreenIcon as At,ListenerIcon as Lt,DocIcon as We,ExternalLinkIcon as Se,CodeBracketsIcon as Ot}from"../NetworkIcons";const Ke=z=>{switch(z){case"saga":return{label:"SAGA",renderIcon:(A,D=9)=><Pe color={A}size={D}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(A,D=9)=><Dt color={A}size={D}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(A,D=9)=><At color={A}size={D}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(A,D=9)=><Lt color={A}size={D}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(A,D=9)=><Pe color={A}size={D}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Nt=Ze.memo(()=>{const{t:z}=ht(),{reduxState:A,reduxLastActionMap:D,selectedReduxSlice:W,selectedReduxAction:V,setSelectedReduxSlice:Mt}=wt(),[F,Re]=E(""),[O,ve]=E("live"),[Q,qe]=E("payload"),[Fe,De]=E("pretty"),[Qe,Xe]=E(null),[J,G]=E(!1),[X,N]=E(null),ke=Ve(()=>Vt(),[D]),j=Ve(()=>W?ke.filter(B=>!B.affectedSlices||B.affectedSlices.length===0?!0:B.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!F.trim())return j;const B=F.toLowerCase();return j.filter(R=>R.type.toLowerCase().includes(B)||R.callerFile&&R.callerFile.toLowerCase().includes(B)||R.payload&&JSON.stringify(R.payload).toLowerCase().includes(B))},[j,F]);_e(()=>{if(!W)return;async function B(){try{const R=$e();if(!R){G(!1),N(null);return}let v=await R.getItem(`persist:${W}`);if(v){try{N(JSON.parse(v))}catch{N(v)}G(!0);return}let I=await R.getItem("persist:root");if(I){const S=JSON.parse(I);if(S&&S[W]!==void 0){const P=S[W];try{N(typeof P=="string"?JSON.parse(P):P)}catch{N(P)}G(!0);return}}}catch{}G(!1),N(null)}B()},[W]);const Le=()=>{W&&ze.alert("Clear Persisted State",`Are you sure you want to delete persisted storage for slice "${W}"?`,[{text:"Cancel",style:"cancel"},{text:"Delete",style:"destructive",onPress:async()=>{try{const B=$e();if(!B)return;typeof B.removeItem=="function"?await B.removeItem(`persist:${W}`):await B.setItem(`persist:${W}`,""),G(!1),N(null),ve("live"),et.OS==="android"?Oe.show("Persisted state cleared",Oe.SHORT):ze.alert("Cleared","Persisted state has been cleared.")}catch{ze.alert("Error","Failed to clear persisted state.")}}}])};if(W!=null){const B=A?.[W],R=B&&typeof B=="object"?Object.keys(B).length:typeof B<"u"?1:0,v=D[W],I=[{key:"live",label:z("redux.liveState","Live State"),icon:S=><Ue color={S?e.white:e.grayText}size={12}/>},{key:"timeline",label:`${z("redux.timeline","Timeline")} (${j.length})`,icon:S=><Te color={S?e.white:e.grayText}size={12}/>},{key:"persisted",label:J?z("redux.persisted","Persisted"):z("redux.storage","Storage"),icon:S=><Ce color={S?e.white:e.grayText}size={12}/>},{key:"metadata",label:z("redux.metadata","Metadata"),icon:S=><Ft color={S?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
-        <View style={reduxDetailStyles.infoBar}>
-          <View style={reduxDetailStyles.infoTopRow}>
-            <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-                flexWrap: 'wrap',
-                flex: 1,
-                minWidth: 0,
-            }}>
-              <View style={[
-                reduxDetailStyles.methodBadge,
-                { backgroundColor: AppColors.indigo600Alt },
-            ]}>
-                <Text style={reduxDetailStyles.methodBadgeText}>
-                  {t('redux.slice', 'SLICE')}
-                </Text>
-              </View>
-              <Text style={reduxDetailStyles.sliceNameText} numberOfLines={1}>
-                {selectedReduxSlice}
-              </Text>
-              {isPersisted ? (<View style={reduxDetailStyles.persistedChip}>
-                  <StorageIcon color={AppColors.emerald700} size={10}/>
-                  <Text style={reduxDetailStyles.persistedChipText}>
-                    {t('redux.persisted', 'Persisted').toUpperCase()}
-                  </Text>
-                </View>) : (<View style={reduxDetailStyles.inMemoryChip}>
-                  <Text style={reduxDetailStyles.inMemoryChipText}>
-                    {t('redux.inMemory', 'In-Memory').toUpperCase()}
-                  </Text>
-                </View>)}
-              {lastAction?.timestamp && (<View style={reduxDetailStyles.timePill}>
-                  <ClockIcon color={AppColors.violet600} size={10}/>
-                  <Text style={reduxDetailStyles.timeText}>
-                    {lastAction.timestamp}
-                  </Text>
-                </View>)}
-            </View>
+        <T style={t.infoBar}>
+          <T style={t.infoTopRow}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",flex:1,minWidth:0}}>
+              <T style={[t.methodBadge,{backgroundColor:e.indigo600Alt}]}>
+                <C style={t.methodBadgeText}>
+                  {z("redux.slice","SLICE")}
+                </C>
+              </T>
+              <C style={t.sliceNameText}numberOfLines={1}>
+                {W}
+              </C>
+              {J?<T style={t.persistedChip}>
+                  <Ce color={e.emerald700}size={10}/>
+                  <C style={t.persistedChipText}>
+                    {z("redux.persisted","Persisted").toUpperCase()}
+                  </C>
+                </T>:<T style={t.inMemoryChip}>
+                  <C style={t.inMemoryChipText}>
+                    {z("redux.inMemory","In-Memory").toUpperCase()}
+                  </C>
+                </T>}
+              {v?.timestamp&&<T style={t.timePill}>
+                  <Ie color={e.violet600}size={10}/>
+                  <C style={t.timeText}>
+                    {v.timestamp}
+                  </C>
+                </T>}
+            </T>
 
             
-            <CopyButton value={() => (sliceTab === 'live' ? sliceData : persistedData)} label={t('redux.sliceJson', 'Slice JSON')}/>
-          </View>
+            <Ee value={()=>O==="live"?B:X}label={z("redux.sliceJson","Slice JSON")}/>
+          </T>
 
           
-          <View style={reduxDetailStyles.subStatsRow}>
-            <View style={[
-                reduxDetailStyles.statPill,
-                {
-                    backgroundColor: AppColors.indigo50,
-                    borderColor: AppColors.indigo400,
-                },
-            ]}>
-              <LayersIcon color={AppColors.indigo600Alt} size={11}/>
-              <Text style={[
-                reduxDetailStyles.statLabel,
-                { color: AppColors.indigo600Alt },
-            ]}>
-                {t('redux.keys', 'Keys')}:
-              </Text>
-              <Text style={[
-                reduxDetailStyles.statValue,
-                { color: AppColors.indigo600Alt },
-            ]}>
-                {fieldsCount}
-              </Text>
-            </View>
-            <View style={[
-                reduxDetailStyles.statPill,
-                {
-                    backgroundColor: AppColors.sky100,
-                    borderColor: AppColors.sky400,
-                },
-            ]}>
-              <Text style={[
-                reduxDetailStyles.statLabel,
-                { color: AppColors.sky600 },
-            ]}>
-                {t('redux.size', 'Size')}:
-              </Text>
-              <Text style={[
-                reduxDetailStyles.statValue,
-                { color: AppColors.sky600 },
-            ]}>
-                {getSize(sliceData)}
-              </Text>
-            </View>
-            <View style={[
-                reduxDetailStyles.statPill,
-                {
-                    backgroundColor: AppColors.purple100,
-                    borderColor: AppColors.purple200,
-                },
-            ]}>
-              <TimelineIcon color={AppColors.violet600} size={11}/>
-              <Text style={[
-                reduxDetailStyles.statLabel,
-                { color: AppColors.brandPurple },
-            ]}>
-                {t('redux.timeline', 'Timeline')}:
-              </Text>
-              <Text style={[
-                reduxDetailStyles.statValue,
-                { color: AppColors.brandPurple },
-            ]}>
-                {sliceActions.length}
-              </Text>
-            </View>
-            {lastAction && (<View style={[
-                    reduxDetailStyles.statPill,
-                    {
-                        backgroundColor: AppColors.amber100,
-                        borderColor: AppColors.amber200,
-                        flexShrink: 1,
-                        maxWidth: 160,
-                    },
-                ]}>
-                <BoltIcon color={AppColors.amber800Warm} size={11}/>
-                <Text style={[
-                    reduxDetailStyles.statLabel,
-                    { color: AppColors.amber800Warm },
-                ]}>
-                  {t('redux.last', 'Last')}:
-                </Text>
-                <Text style={[
-                    reduxDetailStyles.statValue,
-                    { color: AppColors.amber800Warm, flexShrink: 1 },
-                ]} numberOfLines={1}>
-                  {lastAction.type}
-                </Text>
-              </View>)}
-          </View>
+          <T style={t.subStatsRow}>
+            <T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
+              <Je color={e.indigo600Alt}size={11}/>
+              <C style={[t.statLabel,{color:e.indigo600Alt}]}>
+                {z("redux.keys","Keys")}:
+              </C>
+              <C style={[t.statValue,{color:e.indigo600Alt}]}>
+                {R}
+              </C>
+            </T>
+            <T style={[t.statPill,{backgroundColor:e.sky100,borderColor:e.sky400}]}>
+              <C style={[t.statLabel,{color:e.sky600}]}>
+                {z("redux.size","Size")}:
+              </C>
+              <C style={[t.statValue,{color:e.sky600}]}>
+                {q(B)}
+              </C>
+            </T>
+            <T style={[t.statPill,{backgroundColor:e.purple100,borderColor:e.purple200}]}>
+              <Te color={e.violet600}size={11}/>
+              <C style={[t.statLabel,{color:e.brandPurple}]}>
+                {z("redux.timeline","Timeline")}:
+              </C>
+              <C style={[t.statValue,{color:e.brandPurple}]}>
+                {j.length}
+              </C>
+            </T>
+            {v&&<T style={[t.statPill,{backgroundColor:e.amber100,borderColor:e.amber200,flexShrink:1,maxWidth:160}]}>
+                <Pe color={e.amber800Warm}size={11}/>
+                <C style={[t.statLabel,{color:e.amber800Warm}]}>
+                  {z("redux.last","Last")}:
+                </C>
+                <C style={[t.statValue,{color:e.amber800Warm,flexShrink:1}]}numberOfLines={1}>
+                  {v.type}
+                </C>
+              </T>}
+          </T>
 
           
-          <SegmentedTabs tabs={sliceTabs} activeKey={sliceTab} onChange={key => setSliceTab(key)} style={{ marginTop: 10 }}/>
-        </View>
+          <Me tabs={I}activeKey={O}onChange={S=>ve(S)}style={{marginTop:10}}/>
+        </T>
 
         
-        {sliceTab !== 'metadata' && (<View style={reduxDetailStyles.searchContainer}>
-            <SearchIcon color={AppColors.grayTextWeak} size={14}/>
-            <TextInput placeholder={sliceTab === 'timeline'
-                    ? 'Search action type, file, or payload...'
-                    : 'Search keys or values...'} placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={setDetailSearch} style={reduxDetailStyles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {detailSearch.length > 0 && (<Pressable onPress={() => setDetailSearch('')} hitSlop={10}>
-                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-              </Pressable>)}
-          </View>)}
+        {O!=="metadata"&&<T style={t.searchContainer}>
+            <Pt color={e.grayTextWeak}size={14}/>
+            <Tt placeholder={O==="timeline"?"Search action type, file, or payload...":"Search keys or values..."}placeholderTextColor={e.grayTextWeak}value={F}onChangeText={Re}style={t.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            {F.length>0&&<U onPress={()=>Re("")}hitSlop={10}>
+                <Wt color={e.grayTextWeak}size={14}/>
+              </U>}
+          </T>}
 
         
-        {sliceTab === 'timeline' ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
-            {filteredTimelineActions.length === 0 ? (<View style={reduxDetailStyles.emptyBox}>
-                <TimelineIcon color={AppColors.grayTextWeak} size={28}/>
-                <Text style={reduxDetailStyles.emptyBoxText}>
-                  {detailSearch.trim()
-                        ? 'No actions matching your search query.'
-                        : 'No dispatched actions recorded for this slice yet.'}
-                </Text>
-              </View>) : (filteredTimelineActions.map((action, aIdx) => {
-                    const isExpanded = expandedActionId === action.id;
-                    const originMeta = getOriginBadge(action.originType);
-                    const callerBasename = action.callerFile
-                        ? action.callerFile.split('/').pop()
-                        : null;
-                    return (<AnimatedEntrance key={action.id} index={aIdx} distance={6}>
-                    <TouchableScale onPress={() => setExpandedActionId(isExpanded ? null : action.id)} style={reduxDetailStyles.timelineCard}>
-                      <View style={reduxDetailStyles.timelineHeader}>
-                        <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 6,
-                            flex: 1,
-                            minWidth: 0,
-                            flexWrap: 'wrap',
-                        }}>
-                          <View style={reduxDetailStyles.actionBadge}>
-                            <Text style={reduxDetailStyles.actionBadgeText}>
-                              #{action.id}
-                            </Text>
-                          </View>
+        {O==="timeline"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
+            {Ae.length===0?<T style={t.emptyBox}>
+                <Te color={e.grayTextWeak}size={28}/>
+                <C style={t.emptyBoxText}>
+                  {F.trim()?"No actions matching your search query.":"No dispatched actions recorded for this slice yet."}
+                </C>
+              </T>:Ae.map((S,P)=>{const M=Qe===S.id,$=Ke(S.originType),Ye=S.callerFile?S.callerFile.split("/").pop():null;return<Bt key={S.id}index={P}distance={6}>
+                    <Ct onPress={()=>Xe(M?null:S.id)}style={t.timelineCard}>
+                      <T style={t.timelineHeader}>
+                        <T style={{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0,flexWrap:"wrap"}}>
+                          <T style={t.actionBadge}>
+                            <C style={t.actionBadgeText}>
+                              #{S.id}
+                            </C>
+                          </T>
                           
-                          <View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 3,
-                            backgroundColor: originMeta.bg,
-                            paddingHorizontal: 5,
-                            paddingVertical: 2,
-                            borderRadius: 4,
-                            borderWidth: 1,
-                            borderColor: originMeta.border,
-                        }}>
-                            {originMeta.renderIcon(originMeta.text, 8.5)}
-                            <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8.5,
-                            color: originMeta.text,
-                            letterSpacing: 0.3,
-                        }}>
-                              {originMeta.label}
-                            </Text>
-                          </View>
+                          <T style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:$.bg,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:$.border}}>
+                            {$.renderIcon($.text,8.5)}
+                            <C style={{fontFamily:k.interBold,fontSize:8.5,color:$.text,letterSpacing:.3}}>
+                              {$.label}
+                            </C>
+                          </T>
 
-                          <HighlightText text={action.type} search={detailSearch} style={reduxDetailStyles.actionTitle} highlightStyle={reduxDetailStyles.highlight}/>
-                        </View>
+                          <St text={S.type}search={F}style={t.actionTitle}highlightStyle={t.highlight}/>
+                        </T>
 
-                        <View style={reduxDetailStyles.timePill}>
-                          <ClockIcon color={AppColors.purple} size={10}/>
-                          <Text style={reduxDetailStyles.timeText}>
-                            {action.timestamp}
-                          </Text>
-                        </View>
-                      </View>
+                        <T style={t.timePill}>
+                          <Ie color={e.purple}size={10}/>
+                          <C style={t.timeText}>
+                            {S.timestamp}
+                          </C>
+                        </T>
+                      </T>
 
                       
-                      {action.callerFile && (<View style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                marginTop: 6,
-                                marginBottom: 2,
-                                paddingHorizontal: 8,
-                                paddingVertical: 4,
-                                backgroundColor: AppColors.grayBackground,
-                                borderRadius: 6,
-                                borderWidth: 1,
-                                borderColor: AppColors.dividerColor,
-                            }}>
-                          <View style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                gap: 5,
-                                flex: 1,
-                                minWidth: 0,
-                            }}>
-                            <DocIcon color={AppColors.sky600} size={10}/>
-                            <Text style={{
-                                fontFamily: AppFonts.interMedium,
-                                fontSize: 9.5,
-                                color: AppColors.grayTextWeak,
-                            }}>
-                              {t('redux.triggeredFrom', 'Triggered From:')}
-                            </Text>
-                            <Text style={{
-                                fontFamily: AppFonts.interBold,
-                                fontSize: 9.5,
-                                color: AppColors.sky600,
-                            }} numberOfLines={1}>
-                              {callerBasename}:{action.callerLine || 1}
-                            </Text>
-                          </View>
+                      {S.callerFile&&<T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:6,marginBottom:2,paddingHorizontal:8,paddingVertical:4,backgroundColor:e.grayBackground,borderRadius:6,borderWidth:1,borderColor:e.dividerColor}}>
+                          <T style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0}}>
+                            <We color={e.sky600}size={10}/>
+                            <C style={{fontFamily:k.interMedium,fontSize:9.5,color:e.grayTextWeak}}>
+                              {z("redux.triggeredFrom","Triggered From:")}
+                            </C>
+                            <C style={{fontFamily:k.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
+                              {Ye}:{S.callerLine||1}
+                            </C>
+                          </T>
 
-                          <Pressable onPress={() => openInVSCode(action.callerFile, action.callerLine, action.callerCol)} hitSlop={8} style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                gap: 3,
-                                backgroundColor: AppColors.sky100,
-                                paddingHorizontal: 5,
-                                paddingVertical: 2,
-                                borderRadius: 4,
-                            }}>
-                            <ExternalLinkIcon color={AppColors.sky600} size={9}/>
-                            <Text style={{
-                                fontFamily: AppFonts.interBold,
-                                fontSize: 8.5,
-                                color: AppColors.sky600,
-                            }}>
-                              {t('redux.openInEditor', 'Open in Editor')}
-                            </Text>
-                          </Pressable>
-                        </View>)}
+                          <U onPress={()=>_(S.callerFile,S.callerLine,S.callerCol)}hitSlop={8}style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.sky100,paddingHorizontal:5,paddingVertical:2,borderRadius:4}}>
+                            <Se color={e.sky600}size={9}/>
+                            <C style={{fontFamily:k.interBold,fontSize:8.5,color:e.sky600}}>
+                              {z("redux.openInEditor","Open in Editor")}
+                            </C>
+                          </U>
+                        </T>}
 
                       
-                      {isExpanded ? (<View style={reduxDetailStyles.expandedContent}>
+                      {M?<T style={t.expandedContent}>
                           
-                          {action.stack ? (<View style={{ marginBottom: 12 }}>
-                              <Text style={reduxDetailStyles.expandedSectionTitle}>
-                                {t('redux.callStack', 'Call Stack Trace')}:
-                              </Text>
-                              <View style={{
-                                    backgroundColor: AppColors.grayBackground,
-                                    borderRadius: 8,
-                                    padding: 8,
-                                    borderWidth: 1,
-                                    borderColor: AppColors.dividerColor,
-                                    gap: 4,
-                                }}>
-                                {action.stack
-                                    .split('\n')
-                                    .map(l => l.trim())
-                                    .filter(l => l.length > 0 &&
-                                    !l.includes('reduxLogger') &&
-                                    !l.includes('inspectorReduxMiddleware'))
-                                    .slice(0, 8)
-                                    .map((frameLine, fIdx) => {
-                                    const parsed = parseStackLine(frameLine, fIdx === 0);
-                                    const isApp = parsed.frameType === 'app';
-                                    return (<Pressable key={fIdx} onPress={() => {
-                                            if (parsed.fileName !== 'Unknown') {
-                                                openInVSCode(parsed.fullPath ||
-                                                    parsed.fileName, parsed.lineNumber, parsed.columnNumber);
-                                            }
-                                        }} style={{
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            paddingVertical: 3,
-                                            borderBottomWidth: fIdx < 7 ? 0.5 : 0,
-                                            borderBottomColor: AppColors.dividerColor,
-                                        }}>
-                                        <View style={{ flex: 1, minWidth: 0 }}>
-                                          <Text style={{
-                                            fontFamily: isApp
-                                                ? AppFonts.interBold
-                                                : AppFonts.interRegular,
-                                            fontSize: 9.5,
-                                            color: isApp
-                                                ? AppColors.primaryBlack
-                                                : AppColors.grayTextWeak,
-                                        }} numberOfLines={1}>
-                                            {parsed.functionName || 'anonymous'}
-                                          </Text>
-                                          <Text style={{
-                                            fontFamily: AppFonts.interRegular,
-                                            fontSize: 8.5,
-                                            color: isApp
-                                                ? AppColors.sky600
-                                                : AppColors.grayTextWeak,
-                                        }} numberOfLines={1}>
-                                            {parsed.fileName}:
-                                            {parsed.lineNumber || 1}:
-                                            {parsed.columnNumber || 1}
-                                          </Text>
-                                        </View>
-                                        {isApp && (<ExternalLinkIcon color={AppColors.sky600} size={10}/>)}
-                                      </Pressable>);
-                                })}
-                              </View>
-                            </View>) : null}
+                          {S.stack?<T style={{marginBottom:12}}>
+                              <C style={t.expandedSectionTitle}>
+                                {z("redux.callStack","Call Stack Trace")}:
+                              </C>
+                              <T style={{backgroundColor:e.grayBackground,borderRadius:8,padding:8,borderWidth:1,borderColor:e.dividerColor,gap:4}}>
+                                {S.stack.split(`
+`).map(H=>H.trim()).filter(H=>H.length>0&&!H.includes("reduxLogger")&&!H.includes("inspectorReduxMiddleware")).slice(0,8).map((H,Be)=>{const L=je(H,Be===0),Y=L.frameType==="app";return<U key={Be}onPress={()=>{L.fileName!=="Unknown"&&_(L.fullPath||L.fileName,L.lineNumber,L.columnNumber)}}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:3,borderBottomWidth:Be<7?.5:0,borderBottomColor:e.dividerColor}}>
+                                        <T style={{flex:1,minWidth:0}}>
+                                          <C style={{fontFamily:Y?k.interBold:k.interRegular,fontSize:9.5,color:Y?e.primaryBlack:e.grayTextWeak}}numberOfLines={1}>
+                                            {L.functionName||"anonymous"}
+                                          </C>
+                                          <C style={{fontFamily:k.interRegular,fontSize:8.5,color:Y?e.sky600:e.grayTextWeak}}numberOfLines={1}>
+                                            {L.fileName}:
+                                            {L.lineNumber||1}:
+                                            {L.columnNumber||1}
+                                          </C>
+                                        </T>
+                                        {Y&&<Se color={e.sky600}size={10}/>}
+                                      </U>})}
+                              </T>
+                            </T>:null}
 
-                          {action.payload !== undefined && (<View style={{ marginBottom: 12 }}>
-                              <Text style={reduxDetailStyles.expandedSectionTitle}>
-                                {t('redux.actionPayload', 'Action Payload:')}
-                              </Text>
-                              <JsonViewer data={action.payload} search={detailSearch} forceOpen={true} wrap={true}/>
-                            </View>)}
+                          {S.payload!==void 0&&<T style={{marginBottom:12}}>
+                              <C style={t.expandedSectionTitle}>
+                                {z("redux.actionPayload","Action Payload:")}
+                              </C>
+                              <K data={S.payload}search={F}forceOpen={!0}wrap={!0}/>
+                            </T>}
 
-                          <Text style={reduxDetailStyles.expandedSectionTitle}>
-                            {t('redux.stateChangesDiff', 'State Changes (Diff):')}
-                          </Text>
-                          <DiffViewer oldData={action.prevState?.[selectedReduxSlice] || {}} newData={action.nextState?.[selectedReduxSlice] || {}} forceOpen={true}/>
-                        </View>) : (<View style={reduxDetailStyles.collapsedPrompt}>
-                          <Text style={reduxDetailStyles.collapsedPromptText}>
-                            {t('redux.tapToInspectAction', 'Tap to inspect action payload & diff changes')}
-                          </Text>
-                          <ForwardChevronIcon color={AppColors.grayTextWeak} size={12}/>
-                        </View>)}
-                    </TouchableScale>
-                  </AnimatedEntrance>);
-                }))}
-          </ScrollView>) : sliceTab === 'metadata' ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
-            <View style={reduxDetailStyles.metadataCard}>
-              {[
-                    { label: 'Slice Name', value: selectedReduxSlice },
-                    { label: 'Root Keys Count', value: `${fieldsCount} keys` },
-                    { label: 'In-Memory State Size', value: getSize(sliceData) },
-                    {
-                        label: 'Persistence Status',
-                        value: isPersisted
-                            ? `Persisted (${getSize(persistedData)})`
-                            : 'Not Persisted (In-Memory)',
-                    },
-                    {
-                        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) => (<View key={rIdx} style={[
-                        reduxDetailStyles.metaRow,
-                        rIdx === 6 && { borderBottomWidth: 0 },
-                    ]}>
-                  <Text style={reduxDetailStyles.metaLabel}>{row.label}</Text>
-                  <Text style={reduxDetailStyles.metaValue} selectable numberOfLines={2}>
-                    {row.value}
-                  </Text>
-                </View>))}
+                          <C style={t.expandedSectionTitle}>
+                            {z("redux.stateChangesDiff","State Changes (Diff):")}
+                          </C>
+                          <He oldData={S.prevState?.[W]||{}}newData={S.nextState?.[W]||{}}forceOpen={!0}/>
+                        </T>:<T style={t.collapsedPrompt}>
+                          <C style={t.collapsedPromptText}>
+                            {z("redux.tapToInspectAction","Tap to inspect action payload & diff changes")}
+                          </C>
+                          <Rt color={e.grayTextWeak}size={12}/>
+                        </T>}
+                    </Ct>
+                  </Bt>})}
+          </Z>:O==="metadata"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
+            <T style={t.metadataCard}>
+              {[{label:"Slice Name",value:W},{label:"Root Keys Count",value:`${R} keys`},{label:"In-Memory State Size",value:q(B)},{label:"Persistence Status",value:J?`Persisted (${q(X)})`:"Not Persisted (In-Memory)"},{label:"Dispatched Actions History",value:`${j.length} recorded actions`},{label:"Last Dispatched Action",value:v?v.type:"None"},{label:"Last Action Timestamp",value:v?v.timestamp:"Initial"}].map((S,P)=><T key={P}style={[t.metaRow,P===6&&{borderBottomWidth:0}]}>
+                  <C style={t.metaLabel}>{S.label}</C>
+                  <C style={t.metaValue}selectable numberOfLines={2}>
+                    {S.value}
+                  </C>
+                </T>)}
 
-              {isPersisted && (<TouchableOpacity style={reduxDetailStyles.clearPersistBtn} onPress={handleClearPersistence}>
-                  <TrashIcon color={AppColors.errorColor} size={14}/>
-                  <Text style={reduxDetailStyles.clearPersistText}>
+              {J&&<Ne style={t.clearPersistBtn}onPress={Le}>
+                  <Ge color={e.errorColor}size={14}/>
+                  <C style={t.clearPersistText}>
                     Clear Persisted Storage For This Slice
-                  </Text>
-                </TouchableOpacity>)}
-            </View>
-          </ScrollView>) : sliceTab === 'persisted' ? (<View style={{ flex: 1, padding: 10 }}>
-            {isPersisted ? (<View style={{ flex: 1 }}>
-                <View style={reduxDetailStyles.persistedInfoCard}>
-                  <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                    }}>
-                    <View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                      <StorageIcon color={AppColors.emerald700} size={14}/>
-                      <Text style={reduxDetailStyles.persistedInfoTitle}>
-                        Stored in persistent storage ({getSize(persistedData)})
-                      </Text>
-                    </View>
-                    <TouchableOpacity style={reduxDetailStyles.clearPersistMiniBtn} onPress={handleClearPersistence}>
-                      <TrashIcon color={AppColors.errorColor} size={12}/>
-                      <Text style={reduxDetailStyles.clearPersistMiniText}>
+                  </C>
+                </Ne>}
+            </T>
+          </Z>:O==="persisted"?<T style={{flex:1,padding:10}}>
+            {J?<T style={{flex:1}}>
+                <T style={t.persistedInfoCard}>
+                  <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between"}}>
+                    <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
+                      <Ce color={e.emerald700}size={14}/>
+                      <C style={t.persistedInfoTitle}>
+                        Stored in persistent storage ({q(X)})
+                      </C>
+                    </T>
+                    <Ne style={t.clearPersistMiniBtn}onPress={Le}>
+                      <Ge color={e.errorColor}size={12}/>
+                      <C style={t.clearPersistMiniText}>
                         Clear
-                      </Text>
-                    </TouchableOpacity>
-                  </View>
-                </View>
-                <View style={{ flex: 1, marginTop: 8 }}>
-                  <JsonViewer data={persistedData} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode} fullHeight={true} wrap={true}/>
-                </View>
-              </View>) : (<View style={reduxDetailStyles.emptyBox}>
-                <StorageIcon color={AppColors.grayTextWeak} size={32}/>
-                <Text style={reduxDetailStyles.emptyBoxTitle}>
+                      </C>
+                    </Ne>
+                  </T>
+                </T>
+                <T style={{flex:1,marginTop:8}}>
+                  <K data={X}search={F}forceOpen={F.length>0?!0:void 0}mode={Fe}onModeChange={De}fullHeight={!0}wrap={!0}/>
+                </T>
+              </T>:<T style={t.emptyBox}>
+                <Ce color={e.grayTextWeak}size={32}/>
+                <C style={t.emptyBoxTitle}>
                   Not Persisted in Storage
-                </Text>
-                <Text style={reduxDetailStyles.emptyBoxText}>
+                </C>
+                <C style={t.emptyBoxText}>
                   This slice is not stored in AsyncStorage or redux-persist.
                   State exists purely in active JavaScript memory.
-                </Text>
-              </View>)}
-          </View>) : (<View style={{ flex: 1, padding: 10 }}>
-            <JsonViewer data={sliceData} search={detailSearch} forceOpen={detailSearch.length > 0 ? true : undefined} mode={viewMode} onModeChange={setViewMode} fullHeight={true} wrap={true}/>
-          </View>)}
-      </View>);
-    }
-    if (selectedReduxAction != null) {
-        const originMeta = getOriginBadge(selectedReduxAction.originType);
-        const callerBasename = selectedReduxAction.callerFile
-            ? selectedReduxAction.callerFile.split('/').pop()
-            : null;
-        const actionTabs = [
-            {
-                key: 'payload',
-                label: t('redux.payload', 'Payload'),
-                icon: (isActive) => (<CodeBracketsIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-            },
-            {
-                key: 'diff',
-                label: t('redux.diff', 'State Diff'),
-                icon: (isActive) => (<TimelineIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-            },
-            {
-                key: 'stack',
-                label: t('redux.callStack', 'Call Stack'),
-                icon: (isActive) => (<DocIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-            },
-            {
-                key: 'raw',
-                label: 'Raw Action',
-                icon: (isActive) => (<LiveStateIcon color={isActive ? AppColors.white : AppColors.grayText} size={12}/>),
-            },
-        ];
-        return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
+                </C>
+              </T>}
+          </T>:<T style={{flex:1,padding:10}}>
+            <K data={B}search={F}forceOpen={F.length>0?!0:void 0}mode={Fe}onModeChange={De}fullHeight={!0}wrap={!0}/>
+          </T>}
+      </T>}if(V!=null){const B=Ke(V.originType),R=V.callerFile?V.callerFile.split("/").pop():null,v=[{key:"payload",label:z("redux.payload","Payload"),icon:I=><Ot color={I?e.white:e.grayText}size={12}/>},{key:"diff",label:z("redux.diff","State Diff"),icon:I=><Te color={I?e.white:e.grayText}size={12}/>},{key:"stack",label:z("redux.callStack","Call Stack"),icon:I=><We color={I?e.white:e.grayText}size={12}/>},{key:"raw",label:"Raw Action",icon:I=><Ue color={I?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
-        <View style={reduxDetailStyles.infoBar}>
-          <View style={reduxDetailStyles.infoTopRow}>
-            <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 6,
-                flexWrap: 'wrap',
-                flex: 1,
-                minWidth: 0,
-            }}>
-              <View style={reduxDetailStyles.actionBadge}>
-                <Text style={reduxDetailStyles.actionBadgeText}>
-                  #{selectedReduxAction.id}
-                </Text>
-              </View>
+        <T style={t.infoBar}>
+          <T style={t.infoTopRow}>
+            <T style={{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",flex:1,minWidth:0}}>
+              <T style={t.actionBadge}>
+                <C style={t.actionBadgeText}>
+                  #{V.id}
+                </C>
+              </T>
               
-              <View style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 3,
-                backgroundColor: originMeta.bg,
-                paddingHorizontal: 5,
-                paddingVertical: 2,
-                borderRadius: 4,
-                borderWidth: 1,
-                borderColor: originMeta.border,
-            }}>
-                {originMeta.renderIcon(originMeta.text, 8.5)}
-                <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 8.5,
-                color: originMeta.text,
-                letterSpacing: 0.3,
-            }}>
-                  {originMeta.label}
-                </Text>
-              </View>
-              <Text style={reduxDetailStyles.sliceNameText} numberOfLines={1}>
-                {selectedReduxAction.type}
-              </Text>
-              {selectedReduxAction.timestamp && (<View style={reduxDetailStyles.timePill}>
-                  <ClockIcon color={AppColors.purple} size={10}/>
-                  <Text style={reduxDetailStyles.timeText}>
-                    {selectedReduxAction.timestamp}
-                  </Text>
-                </View>)}
-            </View>
+              <T style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:B.bg,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:B.border}}>
+                {B.renderIcon(B.text,8.5)}
+                <C style={{fontFamily:k.interBold,fontSize:8.5,color:B.text,letterSpacing:.3}}>
+                  {B.label}
+                </C>
+              </T>
+              <C style={t.sliceNameText}numberOfLines={1}>
+                {V.type}
+              </C>
+              {V.timestamp&&<T style={t.timePill}>
+                  <Ie color={e.purple}size={10}/>
+                  <C style={t.timeText}>
+                    {V.timestamp}
+                  </C>
+                </T>}
+            </T>
 
             
-            <CopyButton value={() => selectedReduxAction} label="Copy Action"/>
-          </View>
+            <Ee value={()=>V}label="Copy Action"/>
+          </T>
 
           
-          <View style={reduxDetailStyles.subStatsRow}>
-            {selectedReduxAction.affectedSlices &&
-                selectedReduxAction.affectedSlices.length > 0 && (<View style={[
-                    reduxDetailStyles.statPill,
-                    {
-                        backgroundColor: AppColors.indigo50,
-                        borderColor: AppColors.indigo400,
-                    },
-                ]}>
-                  <LayersIcon color={AppColors.indigo600Alt} size={11}/>
-                  <Text style={[
-                    reduxDetailStyles.statLabel,
-                    { color: AppColors.indigo600Alt },
-                ]}>
+          <T style={t.subStatsRow}>
+            {V.affectedSlices&&V.affectedSlices.length>0&&<T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
+                  <Je color={e.indigo600Alt}size={11}/>
+                  <C style={[t.statLabel,{color:e.indigo600Alt}]}>
                     Slices:
-                  </Text>
-                  <Text style={[
-                    reduxDetailStyles.statValue,
-                    { color: AppColors.indigo600Alt },
-                ]}>
-                    {selectedReduxAction.affectedSlices.join(', ')}
-                  </Text>
-                </View>)}
-            <View style={[
-                reduxDetailStyles.statPill,
-                {
-                    backgroundColor: AppColors.sky100,
-                    borderColor: AppColors.sky400,
-                },
-            ]}>
-              <Text style={[
-                reduxDetailStyles.statLabel,
-                { color: AppColors.sky600 },
-            ]}>
+                  </C>
+                  <C style={[t.statValue,{color:e.indigo600Alt}]}>
+                    {V.affectedSlices.join(", ")}
+                  </C>
+                </T>}
+            <T style={[t.statPill,{backgroundColor:e.sky100,borderColor:e.sky400}]}>
+              <C style={[t.statLabel,{color:e.sky600}]}>
                 Payload Size:
-              </Text>
-              <Text style={[
-                reduxDetailStyles.statValue,
-                { color: AppColors.sky600 },
-            ]}>
-                {getSize(selectedReduxAction.payload)}
-              </Text>
-            </View>
-          </View>
+              </C>
+              <C style={[t.statValue,{color:e.sky600}]}>
+                {q(V.payload)}
+              </C>
+            </T>
+          </T>
 
           
-          {selectedReduxAction.callerFile && (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    marginTop: 8,
-                    paddingHorizontal: 8,
-                    paddingVertical: 4,
-                    backgroundColor: AppColors.grayBackground,
-                    borderRadius: 6,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                }}>
-              <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                    flex: 1,
-                    minWidth: 0,
-                }}>
-                <DocIcon color={AppColors.sky600} size={10}/>
-                <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 9.5,
-                    color: AppColors.grayTextWeak,
-                }}>
+          {V.callerFile&&<T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:8,paddingHorizontal:8,paddingVertical:4,backgroundColor:e.grayBackground,borderRadius:6,borderWidth:1,borderColor:e.dividerColor}}>
+              <T style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0}}>
+                <We color={e.sky600}size={10}/>
+                <C style={{fontFamily:k.interMedium,fontSize:9.5,color:e.grayTextWeak}}>
                   Triggered from:
-                </Text>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors.sky600,
-                }} numberOfLines={1}>
-                  {callerBasename}:{selectedReduxAction.callerLine || 1}
-                </Text>
-              </View>
+                </C>
+                <C style={{fontFamily:k.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
+                  {R}:{V.callerLine||1}
+                </C>
+              </T>
 
-              <Pressable onPress={() => openInVSCode(selectedReduxAction.callerFile, selectedReduxAction.callerLine, selectedReduxAction.callerCol)} hitSlop={8} style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 3,
-                    backgroundColor: AppColors.sky100,
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    borderRadius: 4,
-                }}>
-                <ExternalLinkIcon color={AppColors.sky600} size={9}/>
-                <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 8.5,
-                    color: AppColors.sky600,
-                }}>
+              <U onPress={()=>_(V.callerFile,V.callerLine,V.callerCol)}hitSlop={8}style={{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.sky100,paddingHorizontal:5,paddingVertical:2,borderRadius:4}}>
+                <Se color={e.sky600}size={9}/>
+                <C style={{fontFamily:k.interBold,fontSize:8.5,color:e.sky600}}>
                   Open in Editor
-                </Text>
-              </Pressable>
-            </View>)}
+                </C>
+              </U>
+            </T>}
 
           
-          <SegmentedTabs tabs={actionTabs} activeKey={actionTab} onChange={key => setActionTab(key)} style={{ marginTop: 10 }}/>
-        </View>
+          <Me tabs={v}activeKey={Q}onChange={I=>qe(I)}style={{marginTop:10}}/>
+        </T>
 
         
-        {actionTab === 'payload' ? (<View style={{ flex: 1, padding: 10 }}>
-            {selectedReduxAction.payload !== undefined ? (<JsonViewer data={selectedReduxAction.payload} search={detailSearch} forceOpen={true} fullHeight={true} wrap={true}/>) : (<View style={reduxDetailStyles.emptyBox}>
-                <Text style={reduxDetailStyles.emptyBoxText}>
+        {Q==="payload"?<T style={{flex:1,padding:10}}>
+            {V.payload!==void 0?<K data={V.payload}search={F}forceOpen={!0}fullHeight={!0}wrap={!0}/>:<T style={t.emptyBox}>
+                <C style={t.emptyBoxText}>
                   This action has no payload dispatched.
-                </Text>
-              </View>)}
-          </View>) : actionTab === 'diff' ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
-            <DiffViewer oldData={selectedReduxAction.prevState || {}} newData={selectedReduxAction.nextState || {}} forceOpen={true}/>
-          </ScrollView>) : actionTab === 'stack' ? (<ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 12, paddingBottom: 40 }} keyboardShouldPersistTaps="handled">
-            {selectedReduxAction.stack ? (<View style={{
-                        backgroundColor: AppColors.white,
-                        borderRadius: 10,
-                        padding: 10,
-                        borderWidth: 1,
-                        borderColor: AppColors.dividerColor,
-                    }}>
-                <Text style={reduxDetailStyles.expandedSectionTitle}>
+                </C>
+              </T>}
+          </T>:Q==="diff"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
+            <He oldData={V.prevState||{}}newData={V.nextState||{}}forceOpen={!0}/>
+          </Z>:Q==="stack"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
+            {V.stack?<T style={{backgroundColor:e.white,borderRadius:10,padding:10,borderWidth:1,borderColor:e.dividerColor}}>
+                <C style={t.expandedSectionTitle}>
                   Dispatched from call stack:
-                </Text>
-                {selectedReduxAction.stack
-                        .split('\n')
-                        .map(l => l.trim())
-                        .filter(l => l.length > 0 &&
-                        !l.includes('reduxLogger') &&
-                        !l.includes('inspectorReduxMiddleware'))
-                        .map((frameLine, fIdx) => {
-                        const parsed = parseStackLine(frameLine, fIdx === 0);
-                        const isApp = parsed.frameType === 'app';
-                        return (<Pressable key={fIdx} onPress={() => {
-                                if (parsed.fileName !== 'Unknown') {
-                                    openInVSCode(parsed.fullPath || parsed.fileName, parsed.lineNumber, parsed.columnNumber);
-                                }
-                            }} style={{
-                                flexDirection: 'row',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                paddingVertical: 5,
-                                borderBottomWidth: 0.5,
-                                borderBottomColor: AppColors.dividerColor,
-                            }}>
-                        <View style={{ flex: 1, minWidth: 0 }}>
-                          <Text style={{
-                                fontFamily: isApp
-                                    ? AppFonts.interBold
-                                    : AppFonts.interRegular,
-                                fontSize: 10.5,
-                                color: isApp
-                                    ? AppColors.primaryBlack
-                                    : AppColors.grayTextWeak,
-                            }} numberOfLines={1}>
-                            {parsed.functionName || 'anonymous'}
-                          </Text>
-                          <Text style={{
-                                fontFamily: AppFonts.interRegular,
-                                fontSize: 9,
-                                color: isApp
-                                    ? AppColors.sky600
-                                    : AppColors.grayTextWeak,
-                            }} numberOfLines={1}>
-                            {parsed.fileName}:{parsed.lineNumber || 1}:
-                            {parsed.columnNumber || 1}
-                          </Text>
-                        </View>
-                        {isApp && (<ExternalLinkIcon color={AppColors.sky600} size={11}/>)}
-                      </Pressable>);
-                    })}
-              </View>) : (<View style={reduxDetailStyles.emptyBox}>
-                <Text style={reduxDetailStyles.emptyBoxText}>
+                </C>
+                {V.stack.split(`
+`).map(I=>I.trim()).filter(I=>I.length>0&&!I.includes("reduxLogger")&&!I.includes("inspectorReduxMiddleware")).map((I,S)=>{const P=je(I,S===0),M=P.frameType==="app";return<U key={S}onPress={()=>{P.fileName!=="Unknown"&&_(P.fullPath||P.fileName,P.lineNumber,P.columnNumber)}}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:5,borderBottomWidth:.5,borderBottomColor:e.dividerColor}}>
+                        <T style={{flex:1,minWidth:0}}>
+                          <C style={{fontFamily:M?k.interBold:k.interRegular,fontSize:10.5,color:M?e.primaryBlack:e.grayTextWeak}}numberOfLines={1}>
+                            {P.functionName||"anonymous"}
+                          </C>
+                          <C style={{fontFamily:k.interRegular,fontSize:9,color:M?e.sky600:e.grayTextWeak}}numberOfLines={1}>
+                            {P.fileName}:{P.lineNumber||1}:
+                            {P.columnNumber||1}
+                          </C>
+                        </T>
+                        {M&&<Se color={e.sky600}size={11}/>}
+                      </U>})}
+              </T>:<T style={t.emptyBox}>
+                <C style={t.emptyBoxText}>
                   No call stack trace captured for this action.
-                </Text>
-              </View>)}
-          </ScrollView>) : (<View style={{ flex: 1, padding: 10 }}>
-            <JsonViewer data={selectedReduxAction} forceOpen={true} fullHeight={true} wrap={true}/>
-          </View>)}
-      </View>);
-    }
-    return (<View style={reduxDetailStyles.emptyBox}>
-      <TerminalIcon color={AppColors.purple} size={32}/>
-      <Text style={reduxDetailStyles.emptyBoxTitle}>
+                </C>
+              </T>}
+          </Z>:<T style={{flex:1,padding:10}}>
+            <K data={V}forceOpen={!0}fullHeight={!0}wrap={!0}/>
+          </T>}
+      </T>}return<T style={t.emptyBox}>
+      <It color={e.purple}size={32}/>
+      <C style={t.emptyBoxTitle}>
         No Redux Slice Selected
-      </Text>
-      <Text style={reduxDetailStyles.emptyBoxText}>
+      </C>
+      <C style={t.emptyBoxText}>
         Select a slice from the Redux tab to inspect its state and dispatched
         actions.
-      </Text>
-    </View>);
-});
-const reduxDetailStyles = StyleSheet.create({
-    infoBar: {
-        backgroundColor: AppColors.white,
-        padding: 12,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-    },
-    infoTopRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 8,
-    },
-    methodBadge: {
-        paddingHorizontal: 7,
-        paddingVertical: 2.5,
-        borderRadius: 5,
-    },
-    methodBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.white,
-        letterSpacing: 0.4,
-    },
-    sliceNameText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
-        flexShrink: 1,
-    },
-    persistedChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3.5,
-        backgroundColor: AppColors.mintGreenBg,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.mintGreenBorder,
-    },
-    persistedChipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.mintGreenText,
-    },
-    inMemoryChip: {
-        backgroundColor: AppColors.indigo50,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.blueBorder,
-    },
-    inMemoryChipText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.indigo600Alt,
-    },
-    subStatsRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexWrap: 'wrap',
-    },
-    statPill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    statPillText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.grayText,
-    },
-    statLabel: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-    },
-    statValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.primaryBlack,
-    },
-    searchContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.white,
-        borderRadius: 8,
-        marginHorizontal: 12,
-        marginTop: 10,
-        paddingHorizontal: 10,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        height: 36,
-        gap: 8,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        padding: 0,
-    },
-    timelineCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 10,
-        padding: 12,
-        marginBottom: 8,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.03,
-        shadowRadius: 3,
-        elevation: 1,
-    },
-    timelineHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-    },
-    actionBadge: {
-        backgroundColor: AppColors.indigo50,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.blueBorder,
-    },
-    actionBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.indigo600Alt,
-    },
-    actionTitle: {
-        flex: 1,
-        fontFamily: AppFonts.interBold,
-        fontSize: 12.5,
-        color: AppColors.primaryBlack,
-    },
-    timePill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-    },
-    timeText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.purple,
-    },
-    collapsedPrompt: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginTop: 8,
-        paddingTop: 6,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-    },
-    collapsedPromptText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-    },
-    expandedContent: {
-        marginTop: 10,
-        paddingTop: 10,
-        borderTopWidth: 1,
-        borderTopColor: AppColors.dividerColor,
-    },
-    expandedSectionTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.grayTextStrong,
-        marginBottom: 6,
-    },
-    metadataCard: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.03,
-        shadowRadius: 3,
-        elevation: 1,
-    },
-    metaRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        paddingVertical: 10,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.dividerColor,
-    },
-    metaLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.grayTextWeak,
-    },
-    metaValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.primaryBlack,
-        maxWidth: '60%',
-        textAlign: 'right',
-    },
-    persistedInfoCard: {
-        backgroundColor: AppColors.mintGreenBg,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.mintGreenBorder,
-        padding: 10,
-    },
-    persistedInfoTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.mintGreenText,
-    },
-    clearPersistMiniBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: AppColors.errorCardBg,
-        paddingHorizontal: 6,
-        paddingVertical: 2.5,
-        borderRadius: 4,
-    },
-    clearPersistMiniText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.errorColor,
-    },
-    clearPersistBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        gap: 6,
-        backgroundColor: AppColors.errorCardBg,
-        borderWidth: 1,
-        borderColor: AppColors.errorBorder,
-        borderRadius: 8,
-        paddingVertical: 10,
-        marginTop: 14,
-    },
-    clearPersistText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 12,
-        color: AppColors.errorColor,
-    },
-    emptyBox: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 24,
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        margin: 12,
-        gap: 8,
-    },
-    emptyBoxTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
-    },
-    emptyBoxText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 12,
-        color: AppColors.grayTextWeak,
-        textAlign: 'center',
-        lineHeight: 18,
-    },
-    highlight: {
-        backgroundColor: AppColors.yellowHighlight,
-        color: AppColors.amber800Warm,
-        fontFamily: AppFonts.interBold,
-    },
-});
-export default ReduxDetail;
+      </C>
+    </T>}),t=tt.create({infoBar:{backgroundColor:e.white,padding:12,borderBottomWidth:1,borderBottomColor:e.dividerColor},infoTopRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:8},methodBadge:{paddingHorizontal:7,paddingVertical:2.5,borderRadius:5},methodBadgeText:{fontFamily:k.interBold,fontSize:9.5,color:e.white,letterSpacing:.4},sliceNameText:{fontFamily:k.interBold,fontSize:14,color:e.primaryBlack,flexShrink:1},persistedChip:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.mintGreenBg,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.mintGreenBorder},persistedChipText:{fontFamily:k.interBold,fontSize:9,color:e.mintGreenText},inMemoryChip:{backgroundColor:e.indigo50,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.blueBorder},inMemoryChipText:{fontFamily:k.interBold,fontSize:9,color:e.indigo600Alt},subStatsRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},statPill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:6,paddingVertical:2.5,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},statPillText:{fontFamily:k.interMedium,fontSize:10,color:e.grayText},statLabel:{fontFamily:k.interBold,fontSize:10,color:e.grayTextWeak},statValue:{fontFamily:k.interBold,fontSize:10.5,color:e.primaryBlack},searchContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,borderRadius:8,marginHorizontal:12,marginTop:10,paddingHorizontal:10,borderWidth:1,borderColor:e.dividerColor,height:36,gap:8},searchInput:{flex:1,fontFamily:k.interRegular,fontSize:12,color:e.primaryBlack,padding:0},timelineCard:{backgroundColor:e.white,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},timelineHeader:{flexDirection:"row",alignItems:"center",gap:8},actionBadge:{backgroundColor:e.indigo50,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.blueBorder},actionBadgeText:{fontFamily:k.interBold,fontSize:9.5,color:e.indigo600Alt},actionTitle:{flex:1,fontFamily:k.interBold,fontSize:12.5,color:e.primaryBlack},timePill:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,paddingHorizontal:6,paddingVertical:2,borderRadius:4},timeText:{fontFamily:k.interMedium,fontSize:10,color:e.purple},collapsedPrompt:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginTop:8,paddingTop:6,borderTopWidth:1,borderTopColor:e.dividerColor},collapsedPromptText:{fontFamily:k.interRegular,fontSize:10.5,color:e.grayTextWeak},expandedContent:{marginTop:10,paddingTop:10,borderTopWidth:1,borderTopColor:e.dividerColor},expandedSectionTitle:{fontFamily:k.interBold,fontSize:11,color:e.grayTextStrong,marginBottom:6},metadataCard:{backgroundColor:e.white,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},metaRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingVertical:10,borderBottomWidth:1,borderBottomColor:e.dividerColor},metaLabel:{fontFamily:k.interMedium,fontSize:12,color:e.grayTextWeak},metaValue:{fontFamily:k.interBold,fontSize:12,color:e.primaryBlack,maxWidth:"60%",textAlign:"right"},persistedInfoCard:{backgroundColor:e.mintGreenBg,borderRadius:8,borderWidth:1,borderColor:e.mintGreenBorder,padding:10},persistedInfoTitle:{fontFamily:k.interBold,fontSize:11,color:e.mintGreenText},clearPersistMiniBtn:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.errorCardBg,paddingHorizontal:6,paddingVertical:2.5,borderRadius:4},clearPersistMiniText:{fontFamily:k.interBold,fontSize:9.5,color:e.errorColor},clearPersistBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:e.errorCardBg,borderWidth:1,borderColor:e.errorBorder,borderRadius:8,paddingVertical:10,marginTop:14},clearPersistText:{fontFamily:k.interBold,fontSize:12,color:e.errorColor},emptyBox:{backgroundColor:e.white,borderRadius:12,padding:24,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:e.dividerColor,margin:12,gap:8},emptyBoxTitle:{fontFamily:k.interBold,fontSize:14,color:e.primaryBlack},emptyBoxText:{fontFamily:k.interMedium,fontSize:12,color:e.grayTextWeak,textAlign:"center",lineHeight:18},highlight:{backgroundColor:e.yellowHighlight,color:e.amber800Warm,fontFamily:k.interBold}});export default Nt;