react-native-inapp-inspector 2.3.25 → 2.4.0

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

@@ -1,183 +1,173 @@
-import Fe,{useCallback as ee,useMemo as N,useRef as We,useState as q}from"react";import{FlatList as Oe,Platform as te,Pressable as Ce,StyleSheet as Ee,Text as R,TextInput as Me,TouchableOpacity as Te,View as C}from"react-native";import{useTranslation as Ne}from"../../i18n";import{useInspector as $e}from"./InspectorContext";import Ue from"../TouchableScale";import Ge from"../AnimatedEntrance";import Ke from"../EmptyState";import Ze from"../EndOfListFooter";import Se from"../HighlightText";import{getSize as Re,openInVSCode as qe,getCleanCallerDisplay as Je}from"../../helpers";import F from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{getActionHistory as Qe,getReduxAutoRefresh as Xe,setReduxAutoRefresh as _e}from"../../customHooks/reduxLogger";import{TerminalIcon as Ie,SearchIcon as Ye,ClearIcon as Ct,LayersIcon as Tt,ClockIcon as St,SizeIcon as Rt,ForwardChevronIcon as It,SortArrowIcon as At,BoltIcon as G,AtomIcon as Vt,ScreenIcon as Bt,ListenerIcon as Ht,DocIcon as Lt,LoadingSpinnerIcon as Pt,CircleAlertIcon as Dt,TextAaIcon as Ft,HeaderPauseIcon as Wt}from"../NetworkIcons";const ke=L=>{switch(L){case"saga":return{label:"SAGA",renderIcon:(I,z=9)=><G color={I}size={z}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(I,z=9)=><Vt color={I}size={z}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(I,z=9)=><Bt color={I}size={z}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(I,z=9)=><Ht color={I}size={z}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(I,z=9)=><G color={I}size={z}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Ot=Fe.memo(()=>{const{t:L}=Ne(),{reduxState:I,reduxLastActionMap:z,reduxSearch:A,setReduxSearch:K,setSelectedReduxSlice:J}=$e(),ze=We(null),[Q,Ae]=q(100),[W,Ve]=q("latest"),[$,Be]=q(!Xe()),ve=ee(()=>{Be(t=>{const S=!t;return _e(!S),S})},[]),He=N(()=>Re(I),[I]),X=N(()=>Qe(),[z]),U=N(()=>!I||typeof I!="object"?[]:Object.keys(I).map(S=>{const T=I[S],v=Array.isArray(T),M=T&&typeof T=="object";let D="Primitive",H=0;v?(H=T.length,D=`Array [${H}]`):M?(H=Object.keys(T).length,D=`Object {${H}}`):typeof T<"u"&&(H=1,D=typeof T);let O="live",B;M&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(O="loading",B="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(O="error",B=typeof T.error=="string"?T.error:"Error"):H===0&&(O="empty",B="Empty"));const V=z[S],Pe=V?.updatedAt||0,De=X.filter(E=>!E.affectedSlices||E.affectedSlices.length===0?!0:E.affectedSlices.includes(S)).length;let _;if(V){let E;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const Y=Object.keys(V.payload);E=`{ ${Y.slice(0,3).join(", ")}${Y.length>3?"...":""} }`}else E=String(V.payload)}catch{}_={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:E,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${S}`,name:S,keysCount:H,sizeStr:Re(T),typeLabel:D,status:O,statusMessage:B,timelineCount:De,lastAction:_,updatedAt:Pe}}),[I,z,X]),P=N(()=>{let t=U;if(A&&A.trim().length>0){const S=A.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const v=I?I[T.name]:null,M=[T.name||"",T.lastAction?.type||"",T.lastAction?.payloadPreview||"",T.lastAction?.originType||"",T.status||"",T.statusMessage||"",v?typeof v=="string"?v:JSON.stringify(v):""].join(" ").toLowerCase();return S.every(D=>M.includes(D))})}return[...t].sort((S,T)=>W==="latest"&&T.updatedAt!==S.updatedAt?T.updatedAt-S.updatedAt:S.name.localeCompare(T.name))},[U,A,W,I]),Z=N(()=>P.slice(0,Q),[P,Q]),j=N(()=>{const t=Object.values(z);return t.length===0?null:t.reduce((S,T)=>S?(T.updatedAt||0)>(S.updatedAt||0)?T:S:T,null)},[z]),Le=ee(({item:t,index:S})=>{const T=t.updatedAt>0&&Date.now()-t.updatedAt<5e3,v=t.status==="error"?e.errorColor:t.status==="loading"?e.warningIconGold:t.status==="empty"?e.grayTextWeak:e.greenColor,M=t.status==="error"?e.red100:t.status==="loading"?e.amber100:t.status==="empty"?e.grayBackground:e.emeraldBg,D=t.status==="error"?e.errorBorder:t.status==="loading"?e.amber200:t.status==="empty"?e.dividerColor:e.emeraldBorder,H=t.status==="error"?e.red600:t.status==="loading"?e.amber800Warm:t.status==="empty"?e.grayTextWeak:e.emerald700,O=t.lastAction?.callerFile?Je(t.lastAction.callerFile):null;return<Ge index={S}distance={8}>
-          <C style={r.cardContainer}>
-            <Ue onPress={()=>{J(t.name)}}style={[r.card,{borderLeftWidth:3.5,borderLeftColor:v,backgroundColor:t.status==="error"?e.errorCardBg:e.white},T&&r.cardRecentlyUpdated]}>
-              <C style={r.cardBody}>
+import Le,{useCallback as Pe,useMemo as N,useRef as De,useState as _}from"react";import{FlatList as Fe,Platform as Y,Pressable as Ce,StyleSheet as We,Text as S,TextInput as Oe,TouchableOpacity as Ee,View as C}from"react-native";import{useTranslation as je}from"../../i18n";import{useInspector as Me}from"./InspectorContext";import Ne from"../TouchableScale";import $e from"../AnimatedEntrance";import Ue from"../EmptyState";import Ge from"../EndOfListFooter";import Te from"../HighlightText";import{getSize as Se,openInVSCode as Ke,getCleanCallerDisplay as Ze}from"../../helpers";import E from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import{getActionHistory as qe}from"../../customHooks/reduxLogger";import{TerminalIcon as Ie,SearchIcon as Je,ClearIcon as Qe,LayersIcon as Xe,ClockIcon as _e,SizeIcon as Ye,ForwardChevronIcon as Ct,SortArrowIcon as Tt,BoltIcon as U,AtomIcon as St,ScreenIcon as It,ListenerIcon as Rt,DocIcon as At,LoadingSpinnerIcon as Vt,CircleAlertIcon as Ht,TextAaIcon as Bt}from"../NetworkIcons";const Re=L=>{switch(L){case"saga":return{label:"SAGA",renderIcon:(R,A=9)=><U color={R}size={A}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(R,A=9)=><St color={R}size={A}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(R,A=9)=><It color={R}size={A}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(R,A=9)=><Rt color={R}size={A}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(R,A=9)=><U color={R}size={A}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Lt=Le.memo(()=>{const{t:L}=je(),{reduxState:R,reduxLastActionMap:A,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:Z}=Me(),ze=De(null),[q,Ae]=_(100),[F,ke]=_("latest"),Ve=N(()=>Se(R),[R]),J=N(()=>qe(),[A]),$=N(()=>!R||typeof R!="object"?[]:Object.keys(R).map(I=>{const T=R[I],H=Array.isArray(T),M=T&&typeof T=="object";let D="Primitive",B=0;H?(B=T.length,D=`Array [${B}]`):M?(B=Object.keys(T).length,D=`Object {${B}}`):typeof T<"u"&&(B=1,D=typeof T);let W="live",v;M&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(W="loading",v="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(W="error",v=typeof T.error=="string"?T.error:"Error"):B===0&&(W="empty",v="Empty"));const V=A[I],He=V?.updatedAt||0,Be=J.filter(O=>!O.affectedSlices||O.affectedSlices.length===0?!0:O.affectedSlices.includes(I)).length;let Q;if(V){let O;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const X=Object.keys(V.payload);O=`{ ${X.slice(0,3).join(", ")}${X.length>3?"...":""} }`}else O=String(V.payload)}catch{}Q={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:O,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${I}`,name:I,keysCount:B,sizeStr:Se(T),typeLabel:D,status:W,statusMessage:v,timelineCount:Be,lastAction:Q,updatedAt:He}}),[R,A,J]),P=N(()=>{let t=$;if(k&&k.trim().length>0){const I=k.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const H=R?R[T.name]:null,M=[T.name||"",T.lastAction?.type||"",T.lastAction?.payloadPreview||"",T.lastAction?.originType||"",T.status||"",T.statusMessage||"",H?typeof H=="string"?H:JSON.stringify(H):""].join(" ").toLowerCase();return I.every(D=>M.includes(D))})}return[...t].sort((I,T)=>F==="latest"&&T.updatedAt!==I.updatedAt?T.updatedAt-I.updatedAt:I.name.localeCompare(T.name))},[$,k,F,R]),K=N(()=>P.slice(0,q),[P,q]),j=N(()=>{const t=Object.values(A);return t.length===0?null:t.reduce((I,T)=>I?(T.updatedAt||0)>(I.updatedAt||0)?T:I:T,null)},[A]),ve=Pe(({item:t,index:I})=>{const T=t.updatedAt>0&&Date.now()-t.updatedAt<5e3,H=t.status==="error"?e.errorColor:t.status==="loading"?e.warningIconGold:t.status==="empty"?e.grayTextWeak:e.greenColor,M=t.status==="error"?e.red100:t.status==="loading"?e.amber100:t.status==="empty"?e.grayBackground:e.emeraldBg,D=t.status==="error"?e.errorBorder:t.status==="loading"?e.amber200:t.status==="empty"?e.dividerColor:e.emeraldBorder,B=t.status==="error"?e.red600:t.status==="loading"?e.amber800Warm:t.status==="empty"?e.grayTextWeak:e.emerald700,W=t.lastAction?.callerFile?Ze(t.lastAction.callerFile):null;return<$e index={I}distance={8}>
+          <C style={o.cardContainer}>
+            <Ne onPress={()=>{Z(t.name)}}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:H,backgroundColor:t.status==="error"?e.errorCardBg:e.white},T&&o.cardRecentlyUpdated]}>
+              <C style={o.cardBody}>
                 
-                <C style={r.cardHeaderRow}>
-                  <C style={r.cardHeaderLeft}>
-                    <R style={r.serialNumber}>#{S+1}</R>
-                    <C style={[r.methodBadge,{backgroundColor:e.violet600}]}>
-                      <R style={r.methodBadgeText}>REDUX</R>
+                <C style={o.cardHeaderRow}>
+                  <C style={o.cardHeaderLeft}>
+                    <S style={o.serialNumber}>#{I+1}</S>
+                    <C style={[o.methodBadge,{backgroundColor:e.violet600}]}>
+                      <S style={o.methodBadgeText}>REDUX</S>
                     </C>
-                    <C style={[r.chip,{backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`}]}>
-                      <R style={[r.chipText,{color:e.violet600}]}>
+                    <C style={[o.chip,{backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`}]}>
+                      <S style={[o.chipText,{color:e.violet600}]}>
                         {t.typeLabel.toUpperCase()}
-                      </R>
+                      </S>
                     </C>
 
-                    {t.lastAction?.originType&&(()=>{const B=ke(t.lastAction.originType);return<C style={[r.chip,{backgroundColor:B.bg,borderColor:B.border}]}>
-                          {B.renderIcon(B.text,8.5)}
-                          <R style={[r.chipText,{color:B.text}]}>
-                            {B.label}
-                          </R>
+                    {t.lastAction?.originType&&(()=>{const v=Re(t.lastAction.originType);return<C style={[o.chip,{backgroundColor:v.bg,borderColor:v.border}]}>
+                          {v.renderIcon(v.text,8.5)}
+                          <S style={[o.chipText,{color:v.text}]}>
+                            {v.label}
+                          </S>
                         </C>})()}
                   </C>
 
-                  <C style={r.cardHeaderRight}>
-                    <C style={[r.statusPill,{backgroundColor:M,borderColor:D}]}>
-                      {t.status==="loading"?<Pt color={e.amber800Warm}size={10}/>:t.status==="error"?<Dt color={e.red600}size={10}/>:t.status==="empty"?null:<C style={r.liveDot}/>}
-                      <R style={[r.statusPillText,{color:H}]}>
+                  <C style={o.cardHeaderRight}>
+                    <C style={[o.statusPill,{backgroundColor:M,borderColor:D}]}>
+                      {t.status==="loading"?<Vt color={e.amber800Warm}size={10}/>:t.status==="error"?<Ht color={e.red600}size={10}/>:t.status==="empty"?null:<C style={o.liveDot}/>}
+                      <S style={[o.statusPillText,{color:B}]}>
                         {t.status==="loading"?"Loading":t.status==="error"?t.statusMessage||"Error":t.status==="empty"?"Empty":"Live"}
-                      </R>
+                      </S>
                     </C>
-                    <It color={e.grayTextWeak}size={13}/>
+                    <Ct color={e.grayTextWeak}size={13}/>
                   </C>
                 </C>
 
                 
-                <C style={r.cardMainRow}>
-                  <C style={r.sliceNameRow}>
-                    <Se text={t.name}search={A}style={r.sliceNameText}highlightStyle={r.highlight}numberOfLines={1}/>
-                    {t.timelineCount>0&&<C style={r.actionCountChip}>
-                        <G color={e.violet600}size={9}/>
-                        <R style={r.actionCountChipText}>
+                <C style={o.cardMainRow}>
+                  <C style={o.sliceNameRow}>
+                    <Te text={t.name}search={k}style={o.sliceNameText}highlightStyle={o.highlight}numberOfLines={1}/>
+                    {t.timelineCount>0&&<C style={o.actionCountChip}>
+                        <U color={e.violet600}size={9}/>
+                        <S style={o.actionCountChipText}>
                           {t.timelineCount}
-                        </R>
+                        </S>
                       </C>}
                   </C>
-                  <C style={r.actionPreviewRow}>
+                  <C style={o.actionPreviewRow}>
                     <Ie color={e.grayTextWeak}size={10}/>
-                    {t.lastAction?<Se text={t.lastAction.type+(t.lastAction.payloadPreview?` \xB7 ${t.lastAction.payloadPreview}`:"")}search={A}style={r.actionPreviewText}highlightStyle={r.highlight}numberOfLines={1}/>:<R style={r.actionPreviewEmptyText}numberOfLines={1}>
+                    {t.lastAction?<Te text={t.lastAction.type+(t.lastAction.payloadPreview?` \xB7 ${t.lastAction.payloadPreview}`:"")}search={k}style={o.actionPreviewText}highlightStyle={o.highlight}numberOfLines={1}/>:<S style={o.actionPreviewEmptyText}numberOfLines={1}>
                         Initial state (no actions dispatched yet)
-                      </R>}
+                      </S>}
                   </C>
                 </C>
 
                 
-                <C style={r.cardFooterRow}>
-                  <C style={r.footerLeft}>
-                    <St color={e.grayTextWeak}size={10}/>
-                    <R style={r.footerTimestampText}numberOfLines={1}>
+                <C style={o.cardFooterRow}>
+                  <C style={o.footerLeft}>
+                    <_e color={e.grayTextWeak}size={10}/>
+                    <S style={o.footerTimestampText}numberOfLines={1}>
                       {t.lastAction?.timestamp||"Initial state"}
-                    </R>
-                    {O&&<Ce onPress={()=>qe(t.lastAction.callerFile,t.lastAction.callerLine,t.lastAction.callerCol)}hitSlop={6}style={r.callerChip}>
-                        <Lt color={e.sky600}size={9}/>
-                        <R style={r.callerChipText}>
-                          {O.display}
-                        </R>
+                    </S>
+                    {W&&<Ce onPress={()=>Ke(t.lastAction.callerFile,t.lastAction.callerLine,t.lastAction.callerCol)}hitSlop={6}style={o.callerChip}>
+                        <At color={e.sky600}size={9}/>
+                        <S style={o.callerChipText}>
+                          {W.display}
+                        </S>
                       </Ce>}
                   </C>
 
-                  <C style={r.footerRight}>
-                    <C style={r.metaStatChip}>
-                      <Rt color={e.violet600}size={9.5}/>
-                      <R style={r.metaStatText}>
+                  <C style={o.footerRight}>
+                    <C style={o.metaStatChip}>
+                      <Ye color={e.violet600}size={9.5}/>
+                      <S style={o.metaStatText}>
                         {t.sizeStr}
-                      </R>
+                      </S>
                     </C>
-                    <C style={r.metaStatChip}>
-                      <Tt color={e.violet600}size={9.5}/>
-                      <R style={r.metaStatText}>
+                    <C style={o.metaStatChip}>
+                      <Xe color={e.violet600}size={9.5}/>
+                      <S style={o.metaStatText}>
                         {t.keysCount} keys
-                      </R>
+                      </S>
                     </C>
                   </C>
                 </C>
               </C>
 
               
-              <C style={r.waterfallContainer}>
-                <C style={[r.waterfallBar,{backgroundColor:v,width:T?"100%":"35%"}]}/>
+              <C style={o.waterfallContainer}>
+                <C style={[o.waterfallBar,{backgroundColor:H,width:T?"100%":"35%"}]}/>
               </C>
-            </Ue>
+            </Ne>
           </C>
-        </Ge>},[A,J]);return I?<C style={{flex:1,backgroundColor:e.grayBackground}}>
+        </$e>},[k,Z]);return R?<C style={{flex:1,backgroundColor:e.grayBackground}}>
       
-      <C style={r.overviewCard}>
-        <C style={r.statCol}>
-          <R style={r.statHeading}>{L("redux.activeSlices","ACTIVE SLICES")}</R>
-          <R style={r.statBigVal}>{U.length}</R>
+      <C style={o.overviewCard}>
+        <C style={o.statCol}>
+          <S style={o.statHeading}>{L("redux.activeSlices","ACTIVE SLICES")}</S>
+          <S style={o.statBigVal}>{$.length}</S>
         </C>
-        <C style={r.statDivider}/>
-        <C style={r.statCol}>
-          <R style={r.statHeading}>{L("redux.totalState","TOTAL STATE")}</R>
-          <R style={r.statBigVal}>{He}</R>
+        <C style={o.statDivider}/>
+        <C style={o.statCol}>
+          <S style={o.statHeading}>{L("redux.totalState","TOTAL STATE")}</S>
+          <S style={o.statBigVal}>{Ve}</S>
         </C>
-        <C style={r.statDivider}/>
-        <C style={[r.statCol,{flex:1.6}]}>
+        <C style={o.statDivider}/>
+        <C style={[o.statCol,{flex:1.6}]}>
           <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-            <R style={r.statHeading}>{L("redux.lastActionHeader","LAST ACTION")}</R>
-            {j?.originType&&(()=>{const t=ke(j.originType);return<C style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:t.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
+            <S style={o.statHeading}>{L("redux.lastActionHeader","LAST ACTION")}</S>
+            {j?.originType&&(()=>{const t=Re(j.originType);return<C style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:t.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
                   {t.renderIcon(t.text,8)}
-                  <R style={{fontFamily:k.interBold,fontSize:7.5,color:t.text}}>
+                  <S style={{fontFamily:z.interBold,fontSize:7.5,color:t.text}}>
                     {t.label}
-                  </R>
+                  </S>
                 </C>})()}
           </C>
-          <R style={r.statLastAction}numberOfLines={1}>
+          <S style={o.statLastAction}numberOfLines={1}>
             {j?j.type:"Initial"}
-          </R>
-          {j?.timestamp&&<R style={r.statLastTime}>
+          </S>
+          {j?.timestamp&&<S style={o.statLastTime}>
               {j.timestamp}
-            </R>}
+            </S>}
         </C>
       </C>
 
       
-      <C style={r.toolbarContainer}>
-        <C style={r.searchRow}>
-          <C style={F.searchContainer}>
-            <Ye color={e.grayTextWeak}size={15}/>
-            <Me accessible={!0}accessibilityRole="search"accessibilityLabel="Search Redux slices or actions"accessibilityHint="Type to filter state slices in real time"placeholder={L("redux.searchPlaceholder","Search state or actions...")}placeholderTextColor={e.grayTextWeak}value={A}onChangeText={K}style={F.searchInput}autoCorrect={!1}autoCapitalize="none"/>
-            {A.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+      <C style={o.toolbarContainer}>
+        <C style={o.searchRow}>
+          <C style={E.searchContainer}>
+            <Je color={e.grayTextWeak}size={15}/>
+            <Oe accessible={!0}accessibilityRole="search"accessibilityLabel="Search Redux slices or actions"accessibilityHint="Type to filter state slices in real time"placeholder={L("redux.searchPlaceholder","Search state or actions...")}placeholderTextColor={e.grayTextWeak}value={k}onChangeText={G}style={E.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            {k.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
                 <C style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
-                  <R style={{color:e.purple,fontSize:9.5,fontFamily:k.interBold}}>
+                  <S style={{color:e.purple,fontSize:9.5,fontFamily:z.interBold}}>
                     {P.length}
-                  </R>
+                  </S>
                 </C>
-                <Ce accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>K("")}hitSlop={10}>
-                  <Ct color={e.grayTextWeak}size={14}/>
+                <Ce accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>G("")}hitSlop={10}>
+                  <Qe color={e.grayTextWeak}size={14}/>
                 </Ce>
               </C>}
           </C>
 
           
-          <Te accessible={!0}accessibilityRole="button"accessibilityLabel={$?"Resume live Redux updates":"Pause live Redux updates"}accessibilityHint="Toggles automatic recording of Redux state updates"style={[F.toolbarBtn,$&&{backgroundColor:`${e.darkOrange}1F`,borderColor:e.darkOrange}]}onPress={ve}hitSlop={6}>
-            <Wt isPaused={$}color={$?e.darkOrange:e.grayTextStrong}size={16}/>
-          </Te>
-
-          
-          <Te accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${W==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[F.toolbarBtn,W==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>Ve(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
-            <At color={W==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
-          </Te>
+          <Ee accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${F==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[E.toolbarBtn,F==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>ke(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
+            <Tt color={F==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
+          </Ee>
         </C>
 
-        <C style={r.headerSubRow}>
-          <R style={r.resultCount}>
-            Showing {P.length} of {U.length} state slices
-          </R>
-          <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
-            {$&&<C style={r.pausedBannerPill}>
-                <R style={r.pausedBannerText}>PAUSED</R>
-              </C>}
-            <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-              {W==="latest"?<G color={e.brandPurple}size={11}/>:<Ft color={e.brandPurple}size={11}/>}
-              <R style={r.sortLabel}>
-                {W==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
-              </R>
-            </C>
+        <C style={o.headerSubRow}>
+          <S style={o.resultCount}>
+            Showing {P.length} of {$.length} state slices
+          </S>
+          <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
+            {F==="latest"?<U color={e.brandPurple}size={11}/>:<Bt color={e.brandPurple}size={11}/>}
+            <S style={o.sortLabel}>
+              {F==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
+            </S>
           </C>
         </C>
       </C>
 
       
-      <Oe ref={ze}data={Z}keyExtractor={t=>t.id}renderItem={Le}getItemLayout={(t,S)=>({length:126,offset:126*S,index:S})}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={te.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ke isSearch={A.trim().length>0}searchQuery={A}onClearSearch={()=>K("")}customTitle={A.trim().length>0?"No Matching Slices":"No Redux State Detected"}customSub={A.trim().length>0?`No Redux slices match "${A}"`:"Attach the Redux store or dispatch actions to see state slices."}/>}ListFooterComponent={P.length>0?<Ze count={Z.length}totalCount={P.length}label="slices"hasMore={Z.length<P.length}onLoadMore={()=>Ae(t=>t+10)}/>:null}contentContainerStyle={[r.listContent,P.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
-    </C>:<C style={F.emptyContainer}>
-        <C style={F.emptyIconWrap}>
+      <Fe ref={ze}data={K}keyExtractor={t=>t.id}renderItem={ve}getItemLayout={(t,I)=>({length:126,offset:126*I,index:I})}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={Y.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ue isSearch={k.trim().length>0}searchQuery={k}onClearSearch={()=>G("")}customTitle={k.trim().length>0?"No Matching Slices":"No Redux State Detected"}customSub={k.trim().length>0?`No Redux slices match "${k}"`:"Attach the Redux store or dispatch actions to see state slices."}/>}ListFooterComponent={P.length>0?<Ge count={K.length}totalCount={P.length}label="slices"hasMore={K.length<P.length}onLoadMore={()=>Ae(t=>t+10)}/>:null}contentContainerStyle={[o.listContent,P.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+    </C>:<C style={E.emptyContainer}>
+        <C style={E.emptyIconWrap}>
           <Ie color={e.purple}size={32}/>
         </C>
-        <R style={F.emptyTitle}>{L("redux.noStoreConnected","No Redux Store Connected")}</R>
-        <R style={F.emptySub}>
+        <S style={E.emptyTitle}>{L("redux.noStoreConnected","No Redux Store Connected")}</S>
+        <S style={E.emptySub}>
           {L("redux.connectStoreTip","Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.")}
-        </R>
-      </C>}),r=Ee.create({overviewCard:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,marginHorizontal:12,marginTop:10,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},statCol:{flex:1},statDivider:{width:1,height:28,backgroundColor:e.dividerColor,marginHorizontal:8},statHeading:{fontFamily:k.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:k.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:k.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:k.interRegular,fontSize:9.5,color:e.grayTextWeak},toolbarContainer:{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingHorizontal:12,paddingTop:8,paddingBottom:6,marginTop:8},searchRow:{flexDirection:"row",alignItems:"center",gap:8},headerSubRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:6,paddingHorizontal:2},resultCount:{fontFamily:k.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:k.interMedium,fontSize:10.5,color:e.brandPurple},listContent:{paddingVertical:8,paddingBottom:36},cardContainer:{paddingHorizontal:10,paddingVertical:4,height:126},card:{backgroundColor:e.white,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2.5,elevation:1.5,height:118,overflow:"hidden"},cardRecentlyUpdated:{borderColor:`${e.brandPurple}66`,backgroundColor:e.purpleTintBg},cardBody:{paddingHorizontal:12,paddingTop:9,paddingBottom:7,flex:1,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22,gap:6},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},serialNumber:{fontFamily:k.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:k.interBold,color:e.white,fontSize:9,lineHeight:12,letterSpacing:.4},chip:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:k.interBold,fontSize:8.5,lineHeight:11,letterSpacing:.3},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},liveDot:{width:6,height:6,borderRadius:3,backgroundColor:e.emerald500},statusPillText:{fontFamily:k.interBold,fontSize:9.5,lineHeight:12},cardMainRow:{height:48,minHeight:48,maxHeight:48,justifyContent:"space-between",gap:3},sliceNameRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},sliceNameText:{fontFamily:k.interBold,fontSize:12.5,lineHeight:16,color:e.primaryBlack,flex:1},actionCountChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},actionCountChipText:{fontFamily:k.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:te.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:k.interRegular,fontSize:10,lineHeight:13,color:e.slate400,fontStyle:"italic",flex:1},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},footerTimestampText:{fontFamily:k.interRegular,fontSize:10,lineHeight:13,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.sky100,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3,borderWidth:.5,borderColor:e.sky400,marginLeft:4},callerChipText:{fontFamily:k.interMedium,fontSize:8.5,lineHeight:11,color:e.sky600},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:k.interBold,color:e.violetSoftText,fontSize:9,lineHeight:12},waterfallContainer:{height:2.5,width:"100%",backgroundColor:e.graySurface,borderRadius:1.5,overflow:"hidden"},waterfallBar:{height:"100%",borderRadius:1.5},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2},pausedBannerPill:{backgroundColor:e.amber100,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.amber200},pausedBannerText:{fontFamily:k.interBold,fontSize:9,color:e.amber800Warm,letterSpacing:.5}});export default Ot;
+        </S>
+      </C>}),o=We.create({overviewCard:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,marginHorizontal:12,marginTop:10,borderRadius:12,padding:12,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.03,shadowRadius:3,elevation:1},statCol:{flex:1},statDivider:{width:1,height:28,backgroundColor:e.dividerColor,marginHorizontal:8},statHeading:{fontFamily:z.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:z.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:z.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:z.interRegular,fontSize:9.5,color:e.grayTextWeak},toolbarContainer:{backgroundColor:e.white,borderBottomWidth:1,borderBottomColor:e.dividerColor,paddingHorizontal:12,paddingTop:8,paddingBottom:6,marginTop:8},searchRow:{flexDirection:"row",alignItems:"center",gap:8},headerSubRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:6,paddingHorizontal:2},resultCount:{fontFamily:z.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:z.interMedium,fontSize:10.5,color:e.brandPurple},listContent:{paddingVertical:8,paddingBottom:36},cardContainer:{paddingHorizontal:10,paddingVertical:4,height:126},card:{backgroundColor:e.white,borderRadius:10,borderWidth:1,borderColor:e.grayBorderSecondary,shadowColor:e.shadowColorString,shadowOffset:{width:0,height:1},shadowOpacity:.05,shadowRadius:2.5,elevation:1.5,height:118,overflow:"hidden"},cardRecentlyUpdated:{borderColor:`${e.brandPurple}66`,backgroundColor:e.purpleTintBg},cardBody:{paddingHorizontal:12,paddingTop:9,paddingBottom:7,flex:1,justifyContent:"space-between"},cardHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:22,minHeight:22,maxHeight:22,gap:6},cardHeaderLeft:{flexDirection:"row",alignItems:"center",gap:6,flex:1,minWidth:0},cardHeaderRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},serialNumber:{fontFamily:z.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:z.interBold,color:e.white,fontSize:9,lineHeight:12,letterSpacing:.4},chip:{flexDirection:"row",alignItems:"center",gap:3,paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:1},chipText:{fontFamily:z.interBold,fontSize:8.5,lineHeight:11,letterSpacing:.3},statusPill:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1},liveDot:{width:6,height:6,borderRadius:3,backgroundColor:e.emerald500},statusPillText:{fontFamily:z.interBold,fontSize:9.5,lineHeight:12},cardMainRow:{height:48,minHeight:48,maxHeight:48,justifyContent:"space-between",gap:3},sliceNameRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},sliceNameText:{fontFamily:z.interBold,fontSize:12.5,lineHeight:16,color:e.primaryBlack,flex:1},actionCountChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:`${e.violet600}14`,borderColor:`${e.violet600}2E`,borderWidth:1,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3.5},actionCountChipText:{fontFamily:z.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:Y.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:z.interRegular,fontSize:10,lineHeight:13,color:e.slate400,fontStyle:"italic",flex:1},cardFooterRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",height:18,minHeight:18,maxHeight:18,gap:6},footerLeft:{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0,overflow:"hidden"},footerRight:{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0},footerTimestampText:{fontFamily:z.interRegular,fontSize:10,lineHeight:13,color:e.slate400},callerChip:{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.sky100,paddingHorizontal:4.5,paddingVertical:1,borderRadius:3,borderWidth:.5,borderColor:e.sky400,marginLeft:4},callerChipText:{fontFamily:z.interMedium,fontSize:8.5,lineHeight:11,color:e.sky600},metaStatChip:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.violetSoftBg,borderColor:e.violetSoftBorder,borderWidth:1,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:4},metaStatText:{fontFamily:z.interBold,color:e.violetSoftText,fontSize:9,lineHeight:12},waterfallContainer:{height:2.5,width:"100%",backgroundColor:e.graySurface,borderRadius:1.5,overflow:"hidden"},waterfallBar:{height:"100%",borderRadius:1.5},highlight:{backgroundColor:e.yellowHighlight,color:e.primaryBlack,borderRadius:2}});export default Lt;