react-native-inapp-inspector 2.4.1 → 2.4.2

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

@@ -1,11 +1,11 @@
-import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert as ze,Platform as tt,Pressable as U,ScrollView as Z,StyleSheet as rt,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 He from"../SegmentedTabs";import K from"../JsonViewer";import Me from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../ShareButton";import St from"../TouchableScale";import Bt from"../HighlightText";import Vt from"../AnimatedEntrance";import{getActionHistory as zt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{shareReduxReport as It}from"../../helpers/shareFormatter";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{TerminalIcon as Je,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Ge,TrashIcon as Ue,ForwardChevronIcon as Rt,LiveStateIcon as Ke,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 qe=z=>{switch(z){case"saga":return{label:"SAGA",renderIcon:(D,v=9)=><Dt color={D}size={v}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(D,v=9)=><Pe color={D}size={v}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"epic":return{label:"EPIC",renderIcon:(D,v=9)=><Je color={D}size={v}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(D,v=9)=><Lt color={D}size={v}/>,bg:e.teal100,text:e.teal700,border:e.teal400};case"component":return{label:"UI DISPATCH",renderIcon:(D,v=9)=><At color={D}size={v}/>,bg:e.sky100,text:e.sky600,border:e.sky400};default:return{label:"DISPATCH",renderIcon:(D,v=9)=><Pe color={D}size={v}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Nt=_e.memo(()=>{const{t:z}=ht(),{reduxState:D,reduxLastActionMap:v,selectedReduxSlice:W,selectedReduxAction:V}=wt(),[A,Re]=E(""),[O,ve]=E("live"),[Q,Qe]=E("payload"),[Fe,De]=E("raw"),[Xe,Ye]=E(null),[J,G]=E(!1),[X,N]=E(null),ke=Ve(()=>zt(),[v]),j=Ve(()=>W?ke.filter(B=>!B.affectedSlices||B.affectedSlices.length===0?!0:B.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!A.trim())return j;const B=A.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,A]);et(()=>{if(!W)return;async function B(){try{const R=$e();if(!R){G(!1),N(null);return}let F=await R.getItem(`persist:${W}`);if(F){try{N(JSON.parse(F))}catch{N(F)}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"),tt.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=D?.[W],R=B&&typeof B=="object"?Object.keys(B).length:typeof B<"u"?1:0,F=v[W],I=[{key:"live",label:z("redux.liveState","Live State"),icon:S=><Ke 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}}>
+import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert as ze,Platform as tt,Pressable as U,ScrollView as Z,StyleSheet as rt,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 He from"../SegmentedTabs";import K from"../JsonViewer";import Me from"../DiffViewer";import Ee from"../CopyButton";import Ct from"../ShareButton";import St from"../TouchableScale";import Bt from"../HighlightText";import Vt from"../AnimatedEntrance";import{getActionHistory as zt}from"../../customHooks/reduxLogger";import{getSize as q,openInVSCode as _,parseStackLine as je}from"../../helpers";import{shareReduxReport as It}from"../../helpers/shareFormatter";import{getCustomStorage as $e}from"../../helpers/settingsStore";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{TerminalIcon as Je,SearchIcon as Pt,ClearIcon as Wt,ClockIcon as Ie,LayersIcon as Ge,TrashIcon as Ue,ForwardChevronIcon as Rt,LiveStateIcon as Ke,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 qe=V=>{switch(V){case"saga":return{label:"SAGA",renderIcon:(D,F=9)=><Dt color={D}size={F}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(D,F=9)=><Pe color={D}size={F}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"epic":return{label:"EPIC",renderIcon:(D,F=9)=><Je color={D}size={F}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(D,F=9)=><Lt color={D}size={F}/>,bg:e.teal100,text:e.teal700,border:e.teal400};case"component":return{label:"UI DISPATCH",renderIcon:(D,F=9)=><At color={D}size={F}/>,bg:e.sky100,text:e.sky600,border:e.sky400};default:return{label:"DISPATCH",renderIcon:(D,F=9)=><Pe color={D}size={F}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Nt=_e.memo(()=>{const{t:V}=ht(),{reduxState:D,reduxLastActionMap:F,selectedReduxSlice:W,selectedReduxAction:z}=wt(),[A,Re]=E(""),[O,Fe]=E("live"),[Q,Qe]=E("payload"),[ve,De]=E("raw"),[Xe,Ye]=E(null),[J,G]=E(!1),[X,N]=E(null),ke=Ve(()=>zt(),[F]),j=Ve(()=>W?ke.filter(B=>!B.affectedSlices||B.affectedSlices.length===0?!0:B.affectedSlices.includes(W)):ke,[ke,W]),Ae=Ve(()=>{if(!A.trim())return j;const B=A.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,A]);et(()=>{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(V("redux.clearPersistedTitle","Clear Persisted State"),V("redux.clearPersistedMessage",'Are you sure you want to delete persisted storage for slice "{{slice}}"?').replace("{{slice}}",W||""),[{text:V("common.cancel","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),Fe("live"),tt.OS==="android"?Oe.show("Persisted state cleared",Oe.SHORT):ze.alert(V("redux.clearedPersisted","Persisted state has been cleared."))}catch{ze.alert(V("common.failed","Failed"),V("redux.clearPersistedError","Failed to clear persisted state."))}}}])};if(W!=null){const B=D?.[W],R=B&&typeof B=="object"?Object.keys(B).length:typeof B<"u"?1:0,v=F[W],I=[{key:"live",label:V("redux.liveState","Live State"),icon:S=><Ke color={S?e.white:e.grayText}size={12}/>},{key:"timeline",label:`${V("redux.timeline","Timeline")} (${j.length})`,icon:S=><Te color={S?e.white:e.grayText}size={12}/>},{key:"persisted",label:J?V("redux.persisted","Persisted"):V("redux.storage","Storage"),icon:S=><Ce color={S?e.white:e.grayText}size={12}/>},{key:"metadata",label:V("redux.metadata","Metadata"),icon:S=><Ft color={S?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
         <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")}
+                  {V("redux.slice","SLICE")}
                 </C>
               </T>
               <C style={t.sliceNameText}numberOfLines={1}>
@@ -14,23 +14,23 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
               {J?<T style={t.persistedChip}>
                   <Ce color={e.emerald700}size={10}/>
                   <C style={t.persistedChipText}>
-                    {z("redux.persisted","Persisted").toUpperCase()}
+                    {V("redux.persisted","Persisted").toUpperCase()}
                   </C>
                 </T>:<T style={t.inMemoryChip}>
                   <C style={t.inMemoryChipText}>
-                    {z("redux.inMemory","In-Memory").toUpperCase()}
+                    {V("redux.inMemory","In-Memory").toUpperCase()}
                   </C>
                 </T>}
-              {F?.timestamp&&<T style={t.timePill}>
+              {v?.timestamp&&<T style={t.timePill}>
                   <Ie color={e.violet600}size={10}/>
                   <C style={t.timeText}>
-                    {F.timestamp}
+                    {v.timestamp}
                   </C>
                 </T>}
             </T>
 
             
-            <Ee value={()=>O==="live"?B:X}label={z("redux.sliceJson","Slice JSON")}/>
+            <Ee value={()=>O==="live"?B:X}label={V("redux.sliceJson","Slice JSON")}/>
           </T>
 
           
@@ -38,7 +38,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             <T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
               <Ge color={e.indigo600Alt}size={11}/>
               <C style={[t.statLabel,{color:e.indigo600Alt}]}>
-                {z("redux.keys","Keys")}:
+                {V("redux.keys","Keys")}:
               </C>
               <C style={[t.statValue,{color:e.indigo600Alt}]}>
                 {R}
@@ -46,7 +46,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             </T>
             <T style={[t.statPill,{backgroundColor:e.sky100,borderColor:e.sky400}]}>
               <C style={[t.statLabel,{color:e.sky600}]}>
-                {z("redux.size","Size")}:
+                {V("redux.size","Size")}:
               </C>
               <C style={[t.statValue,{color:e.sky600}]}>
                 {q(B)}
@@ -55,25 +55,25 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             <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")}:
+                {V("redux.timeline","Timeline")}:
               </C>
               <C style={[t.statValue,{color:e.brandPurple}]}>
                 {j.length}
               </C>
             </T>
-            {F&&<T style={[t.statPill,{backgroundColor:e.amber100,borderColor:e.amber200,flexShrink:1,maxWidth:160}]}>
+            {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")}:
+                  {V("redux.last","Last")}:
                 </C>
                 <C style={[t.statValue,{color:e.amber800Warm,flexShrink:1}]}numberOfLines={1}>
-                  {F.type}
+                  {v.type}
                 </C>
               </T>}
           </T>
 
           
-          <He tabs={I}activeKey={O}onChange={S=>ve(S)}style={{marginTop:10}}/>
+          <He tabs={I}activeKey={O}onChange={S=>Fe(S)}style={{marginTop:10}}/>
         </T>
 
         
@@ -125,7 +125,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                           <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:")}
+                              {V("redux.triggeredFrom","Triggered From:")}
                             </C>
                             <C style={{fontFamily:k.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
                               {Ze}:{S.callerLine||1}
@@ -135,7 +135,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                           <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")}
+                              {V("redux.openInEditor","Open in Editor")}
                             </C>
                           </U>
                         </T>}
@@ -145,7 +145,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                           
                           {S.stack?<T style={{marginBottom:12}}>
                               <C style={t.expandedSectionTitle}>
-                                {z("redux.callStack","Call Stack Trace")}:
+                                {V("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(`
@@ -167,18 +167,18 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
 
                           {S.payload!==void 0&&<T style={{marginBottom:12}}>
                               <C style={t.expandedSectionTitle}>
-                                {z("redux.actionPayload","Action Payload:")}
+                                {V("redux.actionPayload","Action Payload:")}
                               </C>
                               <K data={S.payload}search={A}forceOpen={!0}wrap={!0}/>
                             </T>}
 
                           <C style={t.expandedSectionTitle}>
-                            {z("redux.stateChangesDiff","State Changes (Diff):")}
+                            {V("redux.stateChangesDiff","State Changes (Diff):")}
                           </C>
                           <Me 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")}
+                            {V("redux.tapToInspectAction","Tap to inspect action payload & diff changes")}
                           </C>
                           <Rt color={e.grayTextWeak}size={12}/>
                         </T>}
@@ -186,7 +186,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                   </Vt>})}
           </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:F?F.type:"None"},{label:"Last Action Timestamp",value:F?F.timestamp:"Initial"}].map((S,P)=><T key={P}style={[t.metaRow,P===6&&{borderBottomWidth:0}]}>
+              {[{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}
@@ -219,7 +219,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                   </T>
                 </T>
                 <T style={{flex:1,marginTop:8}}>
-                  <K data={X}search={A}forceOpen={A.length>0?!0:void 0}mode={Fe}onModeChange={De}fullHeight={!0}wrap={!0}/>
+                  <K data={X}search={A}forceOpen={A.length>0?!0:void 0}mode={ve}onModeChange={De}fullHeight={!0}wrap={!0}/>
                 </T>
               </T>:<T style={t.emptyBox}>
                 <Ce color={e.grayTextWeak}size={32}/>
@@ -232,16 +232,16 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 </C>
               </T>}
           </T>:<T style={{flex:1,padding:10}}>
-            <K data={B}search={A}forceOpen={A.length>0?!0:void 0}mode={Fe}onModeChange={De}fullHeight={!0}wrap={!0}/>
+            <K data={B}search={A}forceOpen={A.length>0?!0:void 0}mode={ve}onModeChange={De}fullHeight={!0}wrap={!0}/>
           </T>}
-      </T>}if(V!=null){const B=qe(V.originType),R=V.callerFile?V.callerFile.split("/").pop():null,F=[{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=><Ke color={I?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
+      </T>}if(z!=null){const B=qe(z.originType),R=z.callerFile?z.callerFile.split("/").pop():null,v=[{key:"payload",label:V("redux.payload","Payload"),icon:I=><Ot color={I?e.white:e.grayText}size={12}/>},{key:"diff",label:V("redux.diff","State Diff"),icon:I=><Te color={I?e.white:e.grayText}size={12}/>},{key:"stack",label:V("redux.callStack","Call Stack"),icon:I=><We color={I?e.white:e.grayText}size={12}/>},{key:"raw",label:"Raw Action",icon:I=><Ke color={I?e.white:e.grayText}size={12}/>}];return<T style={{flex:1,backgroundColor:e.grayBackground}}>
         
         <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}
+                  #{z.id}
                 </C>
               </T>
               
@@ -252,32 +252,32 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 </C>
               </T>
               <C style={t.sliceNameText}numberOfLines={1}>
-                {V.type}
+                {z.type}
               </C>
-              {V.timestamp&&<T style={t.timePill}>
+              {z.timestamp&&<T style={t.timePill}>
                   <Ie color={e.purple}size={10}/>
                   <C style={t.timeText}>
-                    {V.timestamp}
+                    {z.timestamp}
                   </C>
                 </T>}
             </T>
 
             
             <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
-              <Ct onShare={()=>It(V)}/>
-              <Ee value={()=>V}label="Copy Action"/>
+              <Ct onShare={()=>It(z)}/>
+              <Ee value={()=>z}label="Copy Action"/>
             </T>
           </T>
 
           
           <T style={t.subStatsRow}>
-            {V.affectedSlices&&V.affectedSlices.length>0&&<T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
+            {z.affectedSlices&&z.affectedSlices.length>0&&<T style={[t.statPill,{backgroundColor:e.indigo50,borderColor:e.indigo400}]}>
                   <Ge color={e.indigo600Alt}size={11}/>
                   <C style={[t.statLabel,{color:e.indigo600Alt}]}>
                     Slices:
                   </C>
                   <C style={[t.statValue,{color:e.indigo600Alt}]}>
-                    {V.affectedSlices.join(", ")}
+                    {z.affectedSlices.join(", ")}
                   </C>
                 </T>}
             <T style={[t.statPill,{backgroundColor:e.sky100,borderColor:e.sky400}]}>
@@ -285,24 +285,24 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 Payload Size:
               </C>
               <C style={[t.statValue,{color:e.sky600}]}>
-                {q(V.payload)}
+                {q(z.payload)}
               </C>
             </T>
           </T>
 
           
-          {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}}>
+          {z.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:
                 </C>
                 <C style={{fontFamily:k.interBold,fontSize:9.5,color:e.sky600}}numberOfLines={1}>
-                  {R}:{V.callerLine||1}
+                  {R}:{z.callerLine||1}
                 </C>
               </T>
 
-              <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}}>
+              <U onPress={()=>_(z.callerFile,z.callerLine,z.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
@@ -311,24 +311,24 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
             </T>}
 
           
-          <He tabs={F}activeKey={Q}onChange={I=>Qe(I)}style={{marginTop:10}}/>
+          <He tabs={v}activeKey={Q}onChange={I=>Qe(I)}style={{marginTop:10}}/>
         </T>
 
         
         {Q==="payload"?<T style={{flex:1,padding:10}}>
-            {V.payload!==void 0?<K data={V.payload}search={A}forceOpen={!0}fullHeight={!0}wrap={!0}/>:<T style={t.emptyBox}>
+            {z.payload!==void 0?<K data={z.payload}search={A}forceOpen={!0}fullHeight={!0}wrap={!0}/>:<T style={t.emptyBox}>
                 <C style={t.emptyBoxText}>
                   This action has no payload dispatched.
                 </C>
               </T>}
           </T>:Q==="diff"?<Z style={{flex:1}}contentContainerStyle={{padding:12,paddingBottom:40}}keyboardShouldPersistTaps="handled">
-            <Me oldData={V.prevState||{}}newData={V.nextState||{}}forceOpen={!0}/>
+            <Me oldData={z.prevState||{}}newData={z.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}}>
+            {z.stack?<T style={{backgroundColor:e.white,borderRadius:10,padding:10,borderWidth:1,borderColor:e.dividerColor}}>
                 <C style={t.expandedSectionTitle}>
                   Dispatched from call stack:
                 </C>
-                {V.stack.split(`
+                {z.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),H=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:H?k.interBold:k.interRegular,fontSize:10.5,color:H?e.primaryBlack:e.grayTextWeak}}numberOfLines={1}>
@@ -347,7 +347,7 @@ import _e,{useState as E,useMemo as Ve,useEffect as et}from"react";import{Alert
                 </C>
               </T>}
           </Z>:<T style={{flex:1,padding:10}}>
-            <K data={V}forceOpen={!0}fullHeight={!0}wrap={!0}/>
+            <K data={z}forceOpen={!0}fullHeight={!0}wrap={!0}/>
           </T>}
       </T>}return<T style={t.emptyBox}>
       <Je color={e.purple}size={32}/>

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

@@ -1,11 +1,11 @@
-import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react";import{FlatList as De,Platform as oe,Pressable as Ce,StyleSheet as Fe,Text as S,TextInput as Ee,TouchableOpacity as We,View as C}from"react-native";import{useTranslation as Oe}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 _e,getCleanCallerDisplay as Ze}from"../../helpers";import O from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as R}from"../../styles/AppFonts";import{getActionHistory as Ke}from"../../customHooks/reduxLogger";import{TerminalIcon as Ae,SearchIcon as Je,ClearIcon as Qe,LayersIcon as Xe,ClockIcon as Ye,SizeIcon as Ct,ForwardChevronIcon as Tt,SortArrowIcon as St,BoltIcon as U,AtomIcon as At,ScreenIcon as It,ListenerIcon as Rt,DocIcon as Vt,LoadingSpinnerIcon as Ht,CircleAlertIcon as Lt,TextAaIcon as Bt}from"../NetworkIcons";const Ie=B=>{switch(B){case"saga":return{label:"SAGA",renderIcon:(I,z=9)=><U color={I}size={z}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(I,z=9)=><At color={I}size={z}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(I,z=9)=><It color={I}size={z}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(I,z=9)=><Rt color={I}size={z}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(I,z=9)=><U color={I}size={z}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Re=50,ze=10,Pt=ee.memo(()=>{const{t:B}=Oe(),{reduxState:I,reduxLastActionMap:z,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:Z}=Me(),K=Pe(null),[q,J]=te(Re),[P,ke]=te("latest");ee.useEffect(()=>{J(Re),K.current?.scrollToOffset({offset:0,animated:!1})},[k,P]);const Ve=N(()=>Se(I),[I]),Q=N(()=>Ke(),[z]),$=N(()=>!I||typeof I!="object"?[]:Object.keys(I).map(A=>{const T=I[A],H=Array.isArray(T),j=T&&typeof T=="object";let F="Primitive",L=0;H?(L=T.length,F=`Array [${L}]`):j?(L=Object.keys(T).length,F=`Object {${L}}`):typeof T<"u"&&(L=1,F=typeof T);let E="live",v;j&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(E="loading",v="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(E="error",v=typeof T.error=="string"?T.error:"Error"):L===0&&(E="empty",v="Empty"));const V=z[A],He=V?.updatedAt||0,Le=Q.filter(W=>!W.affectedSlices||W.affectedSlices.length===0?!0:W.affectedSlices.includes(A)).length;let X;if(V){let W;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const Y=Object.keys(V.payload);W=`{ ${Y.slice(0,3).join(", ")}${Y.length>3?"...":""} }`}else W=String(V.payload)}catch{}X={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:W,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${A}`,name:A,keysCount:L,sizeStr:Se(T),typeLabel:F,status:E,statusMessage:v,timelineCount:Le,lastAction:X,updatedAt:He}}),[I,z,Q]),D=N(()=>{let t=$;if(k&&k.trim().length>0){const A=k.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const H=I?I[T.name]:null,j=[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 A.every(F=>j.includes(F))})}return[...t].sort((A,T)=>P==="latest"&&T.updatedAt!==A.updatedAt?T.updatedAt-A.updatedAt:A.name.localeCompare(T.name))},[$,k,P,I]),_=N(()=>D.slice(0,q),[D,q]),M=N(()=>{const t=Object.values(z);return t.length===0?null:t.reduce((A,T)=>A?(T.updatedAt||0)>(A.updatedAt||0)?T:A:T,null)},[z]),ve=Be(({item:t,index:A})=>{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,j=t.status==="error"?e.red100:t.status==="loading"?e.amber100:t.status==="empty"?e.grayBackground:e.emeraldBg,F=t.status==="error"?e.errorBorder:t.status==="loading"?e.amber200:t.status==="empty"?e.dividerColor:e.emeraldBorder,L=t.status==="error"?e.red600:t.status==="loading"?e.amber800Warm:t.status==="empty"?e.grayTextWeak:e.emerald700,E=t.lastAction?.callerFile?Ze(t.lastAction.callerFile):null;return<$e index={A}distance={8}>
+import ee,{useCallback as Le,useMemo as N,useRef as Pe,useState as te}from"react";import{FlatList as De,Platform as Fe,Pressable as Ce,StyleSheet as Ee,Text as S,TextInput as We,TouchableOpacity as Oe,View as C}from"react-native";import{useTranslation as Me}from"../../i18n";import{useInspector as je}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 _e,getCleanCallerDisplay as Ze}from"../../helpers";import O from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as R}from"../../styles/AppFonts";import{getActionHistory as Ke}from"../../customHooks/reduxLogger";import{TerminalIcon as Ie,SearchIcon as Je,ClearIcon as Qe,LayersIcon as Xe,ClockIcon as Ye,SizeIcon as Ct,ForwardChevronIcon as Tt,SortArrowIcon as St,BoltIcon as U,AtomIcon as It,ScreenIcon as At,ListenerIcon as Rt,DocIcon as Vt,LoadingSpinnerIcon as Bt,CircleAlertIcon as Ht,TextAaIcon as Lt}from"../NetworkIcons";const Ae=L=>{switch(L){case"saga":return{label:"SAGA",renderIcon:(A,z=9)=><U color={A}size={z}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(A,z=9)=><It color={A}size={z}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(A,z=9)=><At color={A}size={z}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(A,z=9)=><Rt color={A}size={z}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(A,z=9)=><U color={A}size={z}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},Re=50,ze=10,Pt=ee.memo(()=>{const{t:L}=Me(),{reduxState:A,reduxLastActionMap:z,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:Z}=je(),K=Pe(null),[q,J]=te(Re),[P,ke]=te("latest");ee.useEffect(()=>{J(Re),K.current?.scrollToOffset({offset:0,animated:!1})},[k,P]);const Ve=N(()=>Se(A),[A]),Q=N(()=>Ke(),[z]),$=N(()=>!A||typeof A!="object"?[]:Object.keys(A).map(I=>{const T=A[I],B=Array.isArray(T),j=T&&typeof T=="object";let F="Primitive",H=0;B?(H=T.length,F=`Array [${H}]`):j?(H=Object.keys(T).length,F=`Object {${H}}`):typeof T<"u"&&(H=1,F=typeof T);let E="live",v;j&&(T.loading===!0||T.isLoading===!0||T.status==="loading"||T.status==="pending"?(E="loading",v="Loading"):T.error||T.hasError||T.status==="error"||T.status==="failed"?(E="error",v=typeof T.error=="string"?T.error:"Error"):H===0&&(E="empty",v="Empty"));const V=z[I],Be=V?.updatedAt||0,He=Q.filter(W=>!W.affectedSlices||W.affectedSlices.length===0?!0:W.affectedSlices.includes(I)).length;let X;if(V){let W;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const Y=Object.keys(V.payload);W=`{ ${Y.slice(0,3).join(", ")}${Y.length>3?"...":""} }`}else W=String(V.payload)}catch{}X={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:W,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${I}`,name:I,keysCount:H,sizeStr:Se(T),typeLabel:F,status:E,statusMessage:v,timelineCount:He,lastAction:X,updatedAt:Be}}),[A,z,Q]),D=N(()=>{let t=$;if(k&&k.trim().length>0){const I=k.trim().toLowerCase().split(/\s+/).filter(Boolean);t=t.filter(T=>{const B=A?A[T.name]:null,j=[T.name||"",T.lastAction?.type||"",T.lastAction?.payloadPreview||"",T.lastAction?.originType||"",T.status||"",T.statusMessage||"",B?typeof B=="string"?B:JSON.stringify(B):""].join(" ").toLowerCase();return I.every(F=>j.includes(F))})}return[...t].sort((I,T)=>P==="latest"&&T.updatedAt!==I.updatedAt?T.updatedAt-I.updatedAt:I.name.localeCompare(T.name))},[$,k,P,A]),_=N(()=>D.slice(0,q),[D,q]),M=N(()=>{const t=Object.values(z);return t.length===0?null:t.reduce((I,T)=>I?(T.updatedAt||0)>(I.updatedAt||0)?T:I:T,null)},[z]),ve=Le(({item:t,index:I})=>{const T=t.updatedAt>0&&Date.now()-t.updatedAt<5e3,B=t.status==="error"?e.errorColor:t.status==="loading"?e.warningIconGold:t.status==="empty"?e.grayTextWeak:e.greenColor,j=t.status==="error"?e.red100:t.status==="loading"?e.amber100:t.status==="empty"?e.grayBackground:e.emeraldBg,F=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,E=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]}>
+            <Ne onPress={()=>{Z(t.name)}}style={[o.card,{borderLeftWidth:3.5,borderLeftColor:B,backgroundColor:t.status==="error"?e.errorCardBg:e.white},T&&o.cardRecentlyUpdated]}>
               <C style={o.cardBody}>
                 
                 <C style={o.cardHeaderRow}>
                   <C style={o.cardHeaderLeft}>
-                    <S style={o.serialNumber}>#{A+1}</S>
+                    <S style={o.serialNumber}>#{I+1}</S>
                     <C style={[o.methodBadge,{backgroundColor:e.violet600}]}>
                       <S style={o.methodBadgeText}>REDUX</S>
                     </C>
@@ -15,7 +15,7 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
                       </S>
                     </C>
 
-                    {t.lastAction?.originType&&(()=>{const v=Ie(t.lastAction.originType);return<C style={[o.chip,{backgroundColor:v.bg,borderColor:v.border}]}>
+                    {t.lastAction?.originType&&(()=>{const v=Ae(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}
@@ -25,8 +25,8 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
 
                   <C style={o.cardHeaderRight}>
                     <C style={[o.statusPill,{backgroundColor:j,borderColor:F}]}>
-                      {t.status==="loading"?<Ht color={e.amber800Warm}size={10}/>:t.status==="error"?<Lt color={e.red600}size={10}/>:t.status==="empty"?null:<C style={o.liveDot}/>}
-                      <S style={[o.statusPillText,{color:L}]}>
+                      {t.status==="loading"?<Bt 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:H}]}>
                         {t.status==="loading"?"Loading":t.status==="error"?t.statusMessage||"Error":t.status==="empty"?"Empty":"Live"}
                       </S>
                     </C>
@@ -46,7 +46,7 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
                       </C>}
                   </C>
                   <C style={o.actionPreviewRow}>
-                    <Ae color={e.grayTextWeak}size={10}/>
+                    <Ie color={e.grayTextWeak}size={10}/>
                     {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)
                       </S>}
@@ -87,27 +87,27 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
 
               
               <C style={o.waterfallContainer}>
-                <C style={[o.waterfallBar,{backgroundColor:H,width:T?"100%":"35%"}]}/>
+                <C style={[o.waterfallBar,{backgroundColor:B,width:T?"100%":"35%"}]}/>
               </C>
             </Ne>
           </C>
-        </$e>},[k,Z]);return I?<C style={{flex:1,backgroundColor:e.grayBackground}}>
+        </$e>},[k,Z]);return A?<C style={{flex:1,backgroundColor:e.grayBackground}}>
       
       <C style={o.overviewCard}>
         <C style={o.statCol}>
-          <S style={o.statHeading}>{B("redux.activeSlices","ACTIVE SLICES")}</S>
+          <S style={o.statHeading}>{L("redux.activeSlices","ACTIVE SLICES")}</S>
           <S style={o.statBigVal}>{$.length}</S>
         </C>
         <C style={o.statDivider}/>
         <C style={o.statCol}>
-          <S style={o.statHeading}>{B("redux.totalState","TOTAL STATE")}</S>
+          <S style={o.statHeading}>{L("redux.totalState","TOTAL STATE")}</S>
           <S style={o.statBigVal}>{Ve}</S>
         </C>
         <C style={o.statDivider}/>
         <C style={[o.statCol,{flex:1.6}]}>
           <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-            <S style={o.statHeading}>{B("redux.lastActionHeader","LAST ACTION")}</S>
-            {M?.originType&&(()=>{const t=Ie(M.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>
+            {M?.originType&&(()=>{const t=Ae(M.originType);return<C style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:t.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
                   {t.renderIcon(t.text,8)}
                   <S style={{fontFamily:R.interBold,fontSize:7.5,color:t.text}}>
                     {t.label}
@@ -128,7 +128,7 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
         <C style={o.searchRow}>
           <C style={O.searchContainer}>
             <Je color={e.grayTextWeak}size={15}/>
-            <Ee accessible={!0}accessibilityRole="search"accessibilityLabel="Search Redux slices or actions"accessibilityHint="Type to filter state slices in real time"placeholder={B("redux.searchPlaceholder","Search state or actions...")}placeholderTextColor={e.grayTextWeak}value={k}onChangeText={G}style={O.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            <We 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={O.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}}>
                   <S style={{color:e.purple,fontSize:9.5,fontFamily:R.interBold}}>
@@ -142,9 +142,9 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
           </C>
 
           
-          <We accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${P==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[O.toolbarBtn,P==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>ke(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
+          <Oe accessible={!0}accessibilityRole="button"accessibilityLabel={`Sort order: ${P==="latest"?"Recently updated first":"Alphabetical A to Z"}`}accessibilityHint="Switches sorting between recently updated and alphabetical"style={[O.toolbarBtn,P==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>ke(t=>t==="latest"?"alpha":"latest")}hitSlop={6}>
             <St color={P==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
-          </We>
+          </Oe>
         </C>
 
         <C style={o.headerSubRow}>
@@ -152,7 +152,7 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
             Showing {D.length} of {$.length} state slices
           </S>
           <C style={{flexDirection:"row",alignItems:"center",gap:4}}>
-            {P==="latest"?<U color={e.brandPurple}size={11}/>:<Bt color={e.brandPurple}size={11}/>}
+            {P==="latest"?<U color={e.brandPurple}size={11}/>:<Lt color={e.brandPurple}size={11}/>}
             <S style={o.sortLabel}>
               {P==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
             </S>
@@ -161,13 +161,13 @@ import ee,{useCallback as Be,useMemo as N,useRef as Pe,useState as te}from"react
       </C>
 
       
-      <De ref={K}data={_}keyExtractor={t=>t.id}renderItem={ve}getItemLayout={(t,A)=>({length:126,offset:126*A,index:A})}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={oe.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={D.length>0?<Ge count={_.length}totalCount={D.length}label="slices"loadMoreStep={ze}hasMore={_.length<D.length}onLoadMore={()=>J(t=>t+ze)}/>:null}contentContainerStyle={[o.listContent,D.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+      <De ref={K}data={_}keyExtractor={t=>t.id}renderItem={ve}getItemLayout={(t,I)=>({length:126,offset:126*I,index:I})}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}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={D.length>0?<Ge count={_.length}totalCount={D.length}label="slices"loadMoreStep={ze}hasMore={_.length<D.length}onLoadMore={()=>J(t=>t+ze)}/>:null}contentContainerStyle={[o.listContent,D.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
     </C>:<C style={O.emptyContainer}>
         <C style={O.emptyIconWrap}>
-          <Ae color={e.purple}size={32}/>
+          <Ie color={e.purple}size={32}/>
         </C>
-        <S style={O.emptyTitle}>{B("redux.noStoreConnected","No Redux Store Connected")}</S>
+        <S style={O.emptyTitle}>{L("redux.noStoreConnected","No Redux Store Connected")}</S>
         <S style={O.emptySub}>
-          {B("redux.connectStoreTip","Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.")}
+          {L("redux.connectStoreTip","Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.")}
         </S>
-      </C>}),o=Fe.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:R.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:R.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:R.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:R.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:R.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:R.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:R.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:R.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:R.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:R.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:R.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:R.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:oe.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:R.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:R.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:R.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:R.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 Pt;
+      </C>}),o=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:R.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:R.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:R.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:R.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:R.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:R.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:R.interBold,fontSize:10.5,lineHeight:13,color:e.grayTextWeak},methodBadge:{paddingHorizontal:5.5,paddingVertical:2,borderRadius:4,alignItems:"center",justifyContent:"center"},methodBadgeText:{fontFamily:R.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:R.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:R.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:R.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:R.interBold,fontSize:8.5,lineHeight:11,color:e.violet600},actionPreviewRow:{flexDirection:"row",alignItems:"center",gap:4.5,minHeight:15},actionPreviewText:{fontFamily:Fe.select({ios:"Menlo",default:"monospace"}),fontSize:10,lineHeight:13,color:e.grayTextWeak,flex:1},actionPreviewEmptyText:{fontFamily:R.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:R.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:R.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:R.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 Pt;