react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,748 +1,170 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import { FlatList, Platform, Pressable, StyleSheet, Text, TextInput, TouchableOpacity, View, } from 'react-native';
-import { useTranslation } from '../../i18n';
-import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import AnimatedEntrance from '../AnimatedEntrance';
-import EmptyState from '../EmptyState';
-import EndOfListFooter from '../EndOfListFooter';
-import HighlightText from '../HighlightText';
-import { getSize, openInVSCode } from '../../helpers';
-import styles from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { getActionHistory, getReduxAutoRefresh, setReduxAutoRefresh, } from '../../customHooks/reduxLogger';
-import { TerminalIcon, SearchIcon, ClearIcon, LayersIcon, ClockIcon, ForwardChevronIcon, SortArrowIcon, BoltIcon, AtomIcon, ScreenIcon, ListenerIcon, DocIcon, LoadingSpinnerIcon, CircleAlertIcon, TextAaIcon, HeaderPauseIcon, } from '../NetworkIcons';
-const getOriginBadge = (originType) => {
-    switch (originType) {
-        case 'saga':
-            return {
-                label: 'SAGA',
-                renderIcon: (color, size = 9) => <BoltIcon color={color} size={size}/>,
-                bg: AppColors.purple100,
-                text: AppColors.brandPurple,
-                border: AppColors.purple200,
-            };
-        case 'thunk':
-            return {
-                label: 'THUNK',
-                renderIcon: (color, size = 9) => <AtomIcon color={color} size={size}/>,
-                bg: AppColors.amber100,
-                text: AppColors.amber800Warm,
-                border: AppColors.amber200,
-            };
-        case 'ui':
-            return {
-                label: 'UI',
-                renderIcon: (color, size = 9) => <ScreenIcon color={color} size={size}/>,
-                bg: AppColors.sky100,
-                text: AppColors.sky600,
-                border: AppColors.sky400,
-            };
-        case 'listener':
-            return {
-                label: 'LISTENER',
-                renderIcon: (color, size = 9) => <ListenerIcon color={color} size={size}/>,
-                bg: AppColors.teal100,
-                text: AppColors.teal700,
-                border: AppColors.teal400,
-            };
-        default:
-            return {
-                label: 'DIRECT',
-                renderIcon: (color, size = 9) => <BoltIcon color={color} size={size}/>,
-                bg: AppColors.slate100,
-                text: AppColors.slate700,
-                border: AppColors.slate200,
-            };
-    }
-};
-const ReduxTab = React.memo(() => {
-    const { t } = useTranslation();
-    const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, setSelectedReduxSlice, } = useInspector();
-    const listRef = useRef(null);
-    const [sortMode, setSortMode] = useState('latest');
-    const [isReduxPaused, setIsReduxPaused] = useState(!getReduxAutoRefresh());
-    const handleTogglePause = useCallback(() => {
-        setIsReduxPaused(prev => {
-            const next = !prev;
-            setReduxAutoRefresh(!next);
-            return next;
-        });
-    }, []);
-    const totalStateSize = useMemo(() => {
-        return getSize(reduxState);
-    }, [reduxState]);
-    const allActions = useMemo(() => {
-        return getActionHistory();
-    }, [reduxLastActionMap]);
-    const sliceItems = useMemo(() => {
-        if (!reduxState || typeof reduxState !== 'object')
-            return [];
-        const keys = Object.keys(reduxState);
-        return keys.map(key => {
-            const sliceVal = reduxState[key];
-            const isArray = Array.isArray(sliceVal);
-            const isObject = sliceVal && typeof sliceVal === 'object';
-            let typeLabel = 'Primitive';
-            let keysCount = 0;
-            if (isArray) {
-                keysCount = sliceVal.length;
-                typeLabel = `Array [${keysCount}]`;
-            }
-            else if (isObject) {
-                keysCount = Object.keys(sliceVal).length;
-                typeLabel = `Object {${keysCount}}`;
-            }
-            else if (typeof sliceVal !== 'undefined') {
-                keysCount = 1;
-                typeLabel = typeof sliceVal;
-            }
-            let status = 'live';
-            let statusMessage;
-            if (isObject) {
-                if (sliceVal.loading === true ||
-                    sliceVal.isLoading === true ||
-                    sliceVal.status === 'loading' ||
-                    sliceVal.status === 'pending') {
-                    status = 'loading';
-                    statusMessage = 'Loading';
-                }
-                else if (sliceVal.error ||
-                    sliceVal.hasError ||
-                    sliceVal.status === 'error' ||
-                    sliceVal.status === 'failed') {
-                    status = 'error';
-                    statusMessage = typeof sliceVal.error === 'string' ? sliceVal.error : 'Error';
-                }
-                else if (keysCount === 0) {
-                    status = 'empty';
-                    statusMessage = 'Empty';
-                }
-            }
-            const lastActionRaw = reduxLastActionMap[key];
-            const updatedAt = lastActionRaw?.updatedAt || 0;
-            const timelineCount = allActions.filter(action => {
-                if (!action.affectedSlices || action.affectedSlices.length === 0)
-                    return true;
-                return action.affectedSlices.includes(key);
-            }).length;
-            let lastAction = undefined;
-            if (lastActionRaw) {
-                let payloadPreview;
-                if (lastActionRaw.payload !== undefined && lastActionRaw.payload !== null) {
-                    try {
-                        if (typeof lastActionRaw.payload === 'object') {
-                            const pKeys = Object.keys(lastActionRaw.payload);
-                            payloadPreview = `{ ${pKeys.slice(0, 3).join(', ')}${pKeys.length > 3 ? '...' : ''} }`;
-                        }
-                        else {
-                            payloadPreview = String(lastActionRaw.payload);
-                        }
-                    }
-                    catch { }
-                }
-                lastAction = {
-                    type: lastActionRaw.type,
-                    timestamp: lastActionRaw.timestamp,
-                    updatedAt: lastActionRaw.updatedAt,
-                    payloadPreview,
-                    originType: lastActionRaw.originType,
-                    callerFile: lastActionRaw.callerFile,
-                    callerLine: lastActionRaw.callerLine,
-                    callerCol: lastActionRaw.callerCol,
-                };
-            }
-            return {
-                id: `slice-${key}`,
-                name: key,
-                keysCount,
-                sizeStr: getSize(sliceVal),
-                typeLabel,
-                status,
-                statusMessage,
-                timelineCount,
-                lastAction,
-                updatedAt,
-            };
-        });
-    }, [reduxState, reduxLastActionMap, allActions]);
-    const filteredSlices = useMemo(() => {
-        let list = sliceItems;
-        if (reduxSearch && reduxSearch.trim().length > 0) {
-            const queryTokens = reduxSearch.trim().toLowerCase().split(/\s+/).filter(Boolean);
-            list = list.filter(item => {
-                const sliceVal = reduxState ? reduxState[item.name] : null;
-                const searchTarget = [
-                    item.name || '',
-                    item.lastAction?.type || '',
-                    item.lastAction?.payloadPreview || '',
-                    item.lastAction?.originType || '',
-                    item.status || '',
-                    item.statusMessage || '',
-                    sliceVal ? (typeof sliceVal === 'string' ? sliceVal : JSON.stringify(sliceVal)) : '',
-                ].join(' ').toLowerCase();
-                return queryTokens.every(tok => searchTarget.includes(tok));
-            });
-        }
-        return [...list].sort((a, b) => {
-            if (sortMode === 'latest') {
-                if (b.updatedAt !== a.updatedAt) {
-                    return b.updatedAt - a.updatedAt;
-                }
-                return a.name.localeCompare(b.name);
-            }
-            return a.name.localeCompare(b.name);
-        });
-    }, [sliceItems, reduxSearch, sortMode, reduxState]);
-    const lastGlobalAction = useMemo(() => {
-        const actions = Object.values(reduxLastActionMap);
-        if (actions.length === 0)
-            return null;
-        return actions.reduce((latest, curr) => {
-            if (!latest)
-                return curr;
-            return (curr.updatedAt || 0) > (latest.updatedAt || 0) ? curr : latest;
-        }, null);
-    }, [reduxLastActionMap]);
-    const renderSliceItem = useCallback(({ item, index }) => {
-        const isRecentlyUpdated = item.updatedAt > 0 && Date.now() - item.updatedAt < 5000;
-        return (<AnimatedEntrance index={index} distance={8}>
-          <TouchableScale onPress={() => {
-                setSelectedReduxSlice(item.name);
-            }} style={[
-                reduxTabStyles.card,
-                isRecentlyUpdated && reduxTabStyles.cardRecentlyUpdated,
-            ]}>
+import Pe,{useCallback as Q,useMemo as O,useRef as Le,useState as X}from"react";import{FlatList as Fe,Platform as We,Pressable as Y,StyleSheet as He,Text as C,TextInput as De,TouchableOpacity as _,View as T}from"react-native";import{useTranslation as Oe}from"../../i18n";import{useInspector as Ee}from"./InspectorContext";import Me from"../TouchableScale";import $e from"../AnimatedEntrance";import Ne from"../EmptyState";import Ue from"../EndOfListFooter";import Te from"../HighlightText";import{getSize as we,openInVSCode as Ge}from"../../helpers";import B from"../../styles";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import{getActionHistory as Ke,getReduxAutoRefresh as Ze,setReduxAutoRefresh as qe}from"../../customHooks/reduxLogger";import{TerminalIcon as Je,SearchIcon as Qe,ClearIcon as Xe,LayersIcon as Ye,ClockIcon as _e,ForwardChevronIcon as Tt,SortArrowIcon as Ct,BoltIcon as U,AtomIcon as St,ScreenIcon as At,ListenerIcon as Rt,DocIcon as Vt,LoadingSpinnerIcon as It,CircleAlertIcon as Bt,TextAaIcon as Pt,HeaderPauseIcon as Lt}from"../NetworkIcons";const Ce=E=>{switch(E){case"saga":return{label:"SAGA",renderIcon:(A,R=9)=><U color={A}size={R}/>,bg:e.purple100,text:e.brandPurple,border:e.purple200};case"thunk":return{label:"THUNK",renderIcon:(A,R=9)=><St color={A}size={R}/>,bg:e.amber100,text:e.amber800Warm,border:e.amber200};case"ui":return{label:"UI",renderIcon:(A,R=9)=><At color={A}size={R}/>,bg:e.sky100,text:e.sky600,border:e.sky400};case"listener":return{label:"LISTENER",renderIcon:(A,R=9)=><Rt color={A}size={R}/>,bg:e.teal100,text:e.teal700,border:e.teal400};default:return{label:"DIRECT",renderIcon:(A,R=9)=><U color={A}size={R}/>,bg:e.slate100,text:e.slate700,border:e.slate200}}},vt=Pe.memo(()=>{const{t:E}=Oe(),{reduxState:A,reduxLastActionMap:R,reduxSearch:k,setReduxSearch:G,setSelectedReduxSlice:K}=Ee(),Se=Le(null),[P,Ae]=X("latest"),[D,ze]=X(!Ze()),Re=Q(()=>{ze(r=>{const z=!r;return qe(!z),z})},[]),ke=O(()=>we(A),[A]),Z=O(()=>Ke(),[R]),M=O(()=>!A||typeof A!="object"?[]:Object.keys(A).map(z=>{const o=A[z],I=Array.isArray(o),$=o&&typeof o=="object";let H="Primitive",L=0;I?(L=o.length,H=`Array [${L}]`):$?(L=Object.keys(o).length,H=`Object {${L}}`):typeof o<"u"&&(L=1,H=typeof o);let j="live",N;$&&(o.loading===!0||o.isLoading===!0||o.status==="loading"||o.status==="pending"?(j="loading",N="Loading"):o.error||o.hasError||o.status==="error"||o.status==="failed"?(j="error",N=typeof o.error=="string"?o.error:"Error"):L===0&&(j="empty",N="Empty"));const V=R[z],Ie=V?.updatedAt||0,Be=Z.filter(v=>!v.affectedSlices||v.affectedSlices.length===0?!0:v.affectedSlices.includes(z)).length;let q;if(V){let v;if(V.payload!==void 0&&V.payload!==null)try{if(typeof V.payload=="object"){const J=Object.keys(V.payload);v=`{ ${J.slice(0,3).join(", ")}${J.length>3?"...":""} }`}else v=String(V.payload)}catch{}q={type:V.type,timestamp:V.timestamp,updatedAt:V.updatedAt,payloadPreview:v,originType:V.originType,callerFile:V.callerFile,callerLine:V.callerLine,callerCol:V.callerCol}}return{id:`slice-${z}`,name:z,keysCount:L,sizeStr:we(o),typeLabel:H,status:j,statusMessage:N,timelineCount:Be,lastAction:q,updatedAt:Ie}}),[A,R,Z]),F=O(()=>{let r=M;if(k&&k.trim().length>0){const z=k.trim().toLowerCase().split(/\s+/).filter(Boolean);r=r.filter(o=>{const I=A?A[o.name]:null,$=[o.name||"",o.lastAction?.type||"",o.lastAction?.payloadPreview||"",o.lastAction?.originType||"",o.status||"",o.statusMessage||"",I?typeof I=="string"?I:JSON.stringify(I):""].join(" ").toLowerCase();return z.every(H=>$.includes(H))})}return[...r].sort((z,o)=>P==="latest"&&o.updatedAt!==z.updatedAt?o.updatedAt-z.updatedAt:z.name.localeCompare(o.name))},[M,k,P,A]),W=O(()=>{const r=Object.values(R);return r.length===0?null:r.reduce((z,o)=>z?(o.updatedAt||0)>(z.updatedAt||0)?o:z:o,null)},[R]),Ve=Q(({item:r,index:z})=>{const o=r.updatedAt>0&&Date.now()-r.updatedAt<5e3;return<$e index={z}distance={8}>
+          <Me onPress={()=>{K(r.name)}}style={[t.card,o&&t.cardRecentlyUpdated]}>
             
-            <View style={reduxTabStyles.cardHeader}>
-              <View style={reduxTabStyles.sliceBadge}>
-                <Text style={reduxTabStyles.sliceBadgeText}>SLICE</Text>
-              </View>
+            <T style={t.cardHeader}>
+              <T style={t.sliceBadge}>
+                <C style={t.sliceBadgeText}>SLICE</C>
+              </T>
 
-              <HighlightText text={item.name} search={reduxSearch} style={reduxTabStyles.sliceName} highlightStyle={reduxTabStyles.highlight}/>
+              <Te text={r.name}search={k}style={t.sliceName}highlightStyle={t.highlight}/>
 
               
-              {item.status === 'loading' ? (<View style={reduxTabStyles.loadingPill}>
-                  <LoadingSpinnerIcon color={AppColors.amber800Warm} size={10}/>
-                  <Text style={reduxTabStyles.loadingPillText}>Loading</Text>
-                </View>) : item.status === 'error' ? (<View style={reduxTabStyles.errorPill}>
-                  <CircleAlertIcon color={AppColors.red600} size={10}/>
-                  <Text style={reduxTabStyles.errorPillText}>Error</Text>
-                </View>) : item.status === 'empty' ? (<View style={reduxTabStyles.emptyPill}>
-                  <Text style={reduxTabStyles.emptyPillText}>Empty</Text>
-                </View>) : (<View style={reduxTabStyles.livePill}>
-                  <View style={reduxTabStyles.liveDot}/>
-                  <Text style={reduxTabStyles.livePillText}>Live</Text>
-                </View>)}
+              {r.status==="loading"?<T style={t.loadingPill}>
+                  <It color={e.amber800Warm}size={10}/>
+                  <C style={t.loadingPillText}>Loading</C>
+                </T>:r.status==="error"?<T style={t.errorPill}>
+                  <Bt color={e.red600}size={10}/>
+                  <C style={t.errorPillText}>Error</C>
+                </T>:r.status==="empty"?<T style={t.emptyPill}>
+                  <C style={t.emptyPillText}>Empty</C>
+                </T>:<T style={t.livePill}>
+                  <T style={t.liveDot}/>
+                  <C style={t.livePillText}>Live</C>
+                </T>}
 
-              {item.lastAction?.timestamp && (<View style={reduxTabStyles.timePill}>
-                  <ClockIcon color={AppColors.purple} size={10}/>
-                  <Text style={reduxTabStyles.timeText}>
-                    {item.lastAction.timestamp}
-                  </Text>
-                </View>)}
+              {r.lastAction?.timestamp&&<T style={t.timePill}>
+                  <_e color={e.purple}size={10}/>
+                  <C style={t.timeText}>
+                    {r.lastAction.timestamp}
+                  </C>
+                </T>}
 
-              <ForwardChevronIcon color={AppColors.grayTextWeak} size={13}/>
-            </View>
+              <Tt color={e.grayTextWeak}size={13}/>
+            </T>
 
             
-            <View style={reduxTabStyles.statsRow}>
-              <View style={reduxTabStyles.pill}>
-                <LayersIcon color={AppColors.grayTextWeak} size={11}/>
-                <Text style={reduxTabStyles.pillValue}>{item.typeLabel}</Text>
-              </View>
-              <View style={reduxTabStyles.pill}>
-                <Text style={reduxTabStyles.pillLabel}>Size:</Text>
-                <Text style={reduxTabStyles.pillValue}>{item.sizeStr}</Text>
-              </View>
-              {item.timelineCount > 0 && (<View style={reduxTabStyles.pill}>
-                  <Text style={reduxTabStyles.pillLabel}>Actions:</Text>
-                  <Text style={reduxTabStyles.pillValue}>{item.timelineCount}</Text>
-                </View>)}
-            </View>
+            <T style={t.statsRow}>
+              <T style={t.pill}>
+                <Ye color={e.grayTextWeak}size={11}/>
+                <C style={t.pillValue}>{r.typeLabel}</C>
+              </T>
+              <T style={t.pill}>
+                <C style={t.pillLabel}>Size:</C>
+                <C style={t.pillValue}>{r.sizeStr}</C>
+              </T>
+              {r.timelineCount>0&&<T style={t.pill}>
+                  <C style={t.pillLabel}>Actions:</C>
+                  <C style={t.pillValue}>{r.timelineCount}</C>
+                </T>}
+            </T>
 
             
-            {item.lastAction && (<View style={reduxTabStyles.lastActionRow}>
-                <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, flex: 1, minWidth: 0, flexWrap: 'wrap' }}>
-                  <BoltIcon color={AppColors.brandPurple} size={12}/>
-                  <Text style={reduxTabStyles.lastActionLabel}>{t('redux.last', 'Last')}:</Text>
+            {r.lastAction&&<T style={t.lastActionRow}>
+                <T style={{flexDirection:"row",alignItems:"center",gap:5,flex:1,minWidth:0,flexWrap:"wrap"}}>
+                  <U color={e.brandPurple}size={12}/>
+                  <C style={t.lastActionLabel}>{E("redux.last","Last")}:</C>
 
                   
-                  {item.lastAction.originType && (() => {
-                    const origin = getOriginBadge(item.lastAction.originType);
-                    return (<View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 2.5,
-                            backgroundColor: origin.bg,
-                            paddingHorizontal: 4.5,
-                            paddingVertical: 1.5,
-                            borderRadius: 3.5,
-                            borderWidth: 1,
-                            borderColor: origin.border,
-                        }}>
-                        {origin.renderIcon(origin.text, 8.5)}
-                        <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 8,
-                            color: origin.text,
-                            letterSpacing: 0.3,
-                        }}>
-                          {origin.label}
-                        </Text>
-                      </View>);
-                })()}
+                  {r.lastAction.originType&&(()=>{const I=Ce(r.lastAction.originType);return<T style={{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:I.bg,paddingHorizontal:4.5,paddingVertical:1.5,borderRadius:3.5,borderWidth:1,borderColor:I.border}}>
+                        {I.renderIcon(I.text,8.5)}
+                        <C style={{fontFamily:S.interBold,fontSize:8,color:I.text,letterSpacing:.3}}>
+                          {I.label}
+                        </C>
+                      </T>})()}
 
-                  <HighlightText text={item.lastAction.type} search={reduxSearch} style={reduxTabStyles.lastActionValue} highlightStyle={reduxTabStyles.highlight} numberOfLines={1}/>
+                  <Te text={r.lastAction.type}search={k}style={t.lastActionValue}highlightStyle={t.highlight}numberOfLines={1}/>
 
                   
-                  {item.lastAction.callerFile && (<Pressable onPress={() => openInVSCode(item.lastAction.callerFile, item.lastAction.callerLine, item.lastAction.callerCol)} hitSlop={6} style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 2.5,
-                        backgroundColor: AppColors.sky100,
-                        paddingHorizontal: 4.5,
-                        paddingVertical: 1.5,
-                        borderRadius: 3,
-                        borderWidth: 0.5,
-                        borderColor: AppColors.sky400,
-                    }}>
-                      <DocIcon color={AppColors.sky600} size={9}/>
-                      <Text style={{
-                        fontFamily: AppFonts.interMedium,
-                        fontSize: 8.5,
-                        color: AppColors.sky600,
-                    }}>
-                        {item.lastAction.callerFile.split('/').pop()}:{item.lastAction.callerLine || 1}
-                      </Text>
-                    </Pressable>)}
+                  {r.lastAction.callerFile&&<Y onPress={()=>Ge(r.lastAction.callerFile,r.lastAction.callerLine,r.lastAction.callerCol)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",gap:2.5,backgroundColor:e.sky100,paddingHorizontal:4.5,paddingVertical:1.5,borderRadius:3,borderWidth:.5,borderColor:e.sky400}}>
+                      <Vt color={e.sky600}size={9}/>
+                      <C style={{fontFamily:S.interMedium,fontSize:8.5,color:e.sky600}}>
+                        {r.lastAction.callerFile.split("/").pop()}:{r.lastAction.callerLine||1}
+                      </C>
+                    </Y>}
 
-                  {item.lastAction.payloadPreview && (<Text style={reduxTabStyles.payloadPreviewText} numberOfLines={1}>
-                      {item.lastAction.payloadPreview}
-                    </Text>)}
-                </View>
-              </View>)}
-          </TouchableScale>
-        </AnimatedEntrance>);
-    }, [reduxSearch, setSelectedReduxSlice, t]);
-    if (!reduxState) {
-        return (<View style={styles.emptyContainer}>
-        <View style={styles.emptyIconWrap}>
-          <TerminalIcon color={AppColors.purple} size={32}/>
-        </View>
-        <Text style={styles.emptyTitle}>No Redux Store Connected</Text>
-        <Text style={styles.emptySub}>
-          Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.
-        </Text>
-      </View>);
-    }
-    return (<View style={{ flex: 1, backgroundColor: AppColors.grayBackground }}>
+                  {r.lastAction.payloadPreview&&<C style={t.payloadPreviewText}numberOfLines={1}>
+                      {r.lastAction.payloadPreview}
+                    </C>}
+                </T>
+              </T>}
+          </Me>
+        </$e>},[k,K,E]);return A?<T style={{flex:1,backgroundColor:e.grayBackground}}>
       
-      <View style={reduxTabStyles.overviewCard}>
-        <View style={reduxTabStyles.statCol}>
-          <Text style={reduxTabStyles.statHeading}>ACTIVE SLICES</Text>
-          <Text style={reduxTabStyles.statBigVal}>{sliceItems.length}</Text>
-        </View>
-        <View style={reduxTabStyles.statDivider}/>
-        <View style={reduxTabStyles.statCol}>
-          <Text style={reduxTabStyles.statHeading}>TOTAL STATE</Text>
-          <Text style={reduxTabStyles.statBigVal}>{totalStateSize}</Text>
-        </View>
-        <View style={reduxTabStyles.statDivider}/>
-        <View style={[reduxTabStyles.statCol, { flex: 1.6 }]}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-            <Text style={reduxTabStyles.statHeading}>LAST ACTION</Text>
-            {lastGlobalAction?.originType && (() => {
-            const origin = getOriginBadge(lastGlobalAction.originType);
-            return (<View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 2,
-                    backgroundColor: origin.bg,
-                    paddingHorizontal: 4,
-                    paddingVertical: 1,
-                    borderRadius: 3,
-                }}>
-                  {origin.renderIcon(origin.text, 8)}
-                  <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 7.5,
-                    color: origin.text,
-                }}>
-                    {origin.label}
-                  </Text>
-                </View>);
-        })()}
-          </View>
-          <Text style={reduxTabStyles.statLastAction} numberOfLines={1}>
-            {lastGlobalAction ? lastGlobalAction.type : 'Initial'}
-          </Text>
-          {lastGlobalAction?.timestamp && (<Text style={reduxTabStyles.statLastTime}>
-              {lastGlobalAction.timestamp}
-            </Text>)}
-        </View>
-      </View>
+      <T style={t.overviewCard}>
+        <T style={t.statCol}>
+          <C style={t.statHeading}>ACTIVE SLICES</C>
+          <C style={t.statBigVal}>{M.length}</C>
+        </T>
+        <T style={t.statDivider}/>
+        <T style={t.statCol}>
+          <C style={t.statHeading}>TOTAL STATE</C>
+          <C style={t.statBigVal}>{ke}</C>
+        </T>
+        <T style={t.statDivider}/>
+        <T style={[t.statCol,{flex:1.6}]}>
+          <T style={{flexDirection:"row",alignItems:"center",gap:4}}>
+            <C style={t.statHeading}>LAST ACTION</C>
+            {W?.originType&&(()=>{const r=Ce(W.originType);return<T style={{flexDirection:"row",alignItems:"center",gap:2,backgroundColor:r.bg,paddingHorizontal:4,paddingVertical:1,borderRadius:3}}>
+                  {r.renderIcon(r.text,8)}
+                  <C style={{fontFamily:S.interBold,fontSize:7.5,color:r.text}}>
+                    {r.label}
+                  </C>
+                </T>})()}
+          </T>
+          <C style={t.statLastAction}numberOfLines={1}>
+            {W?W.type:"Initial"}
+          </C>
+          {W?.timestamp&&<C style={t.statLastTime}>
+              {W.timestamp}
+            </C>}
+        </T>
+      </T>
 
       
-      <View style={reduxTabStyles.toolbarContainer}>
-        <View style={reduxTabStyles.searchRow}>
-          <View style={styles.searchContainer}>
-            <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-            <TextInput accessible={true} accessibilityRole="search" accessibilityLabel="Search Redux slices or actions" accessibilityHint="Type to filter state slices in real time" placeholder="Search Redux slices or actions..." placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {reduxSearch.length > 0 && (<View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-                <View style={{
-                backgroundColor: `${AppColors.purple}20`,
-                borderRadius: 10,
-                paddingHorizontal: 6,
-                paddingVertical: 1.5,
-            }}>
-                  <Text style={{
-                color: AppColors.purple,
-                fontSize: 9.5,
-                fontFamily: AppFonts.interBold,
-            }}>
-                    {filteredSlices.length}
-                  </Text>
-                </View>
-                <Pressable accessible={true} accessibilityRole="button" accessibilityLabel="Clear search input" onPress={() => setReduxSearch('')} hitSlop={10}>
-                  <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-                </Pressable>
-              </View>)}
-          </View>
+      <T style={t.toolbarContainer}>
+        <T style={t.searchRow}>
+          <T style={B.searchContainer}>
+            <Qe color={e.grayTextWeak}size={15}/>
+            <De accessible={!0}accessibilityRole="search"accessibilityLabel="Search Redux slices or actions"accessibilityHint="Type to filter state slices in real time"placeholder="Search Redux slices or actions..."placeholderTextColor={e.grayTextWeak}value={k}onChangeText={G}style={B.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+            {k.length>0&&<T style={{flexDirection:"row",alignItems:"center",gap:4}}>
+                <T style={{backgroundColor:`${e.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
+                  <C style={{color:e.purple,fontSize:9.5,fontFamily:S.interBold}}>
+                    {F.length}
+                  </C>
+                </T>
+                <Y accessible={!0}accessibilityRole="button"accessibilityLabel="Clear search input"onPress={()=>G("")}hitSlop={10}>
+                  <Xe color={e.grayTextWeak}size={14}/>
+                </Y>
+              </T>}
+          </T>
 
           
-          <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={isReduxPaused
-            ? 'Resume live Redux updates'
-            : 'Pause live Redux updates'} accessibilityHint="Toggles automatic recording of Redux state updates" style={[
-            styles.toolbarBtn,
-            isReduxPaused && {
-                backgroundColor: `${AppColors.darkOrange}1F`,
-                borderColor: AppColors.darkOrange,
-            },
-        ]} onPress={handleTogglePause} hitSlop={6}>
-            <HeaderPauseIcon isPaused={isReduxPaused} color={isReduxPaused
-            ? AppColors.darkOrange
-            : AppColors.grayTextStrong} size={16}/>
-          </TouchableOpacity>
+          <_ accessible={!0}accessibilityRole="button"accessibilityLabel={D?"Resume live Redux updates":"Pause live Redux updates"}accessibilityHint="Toggles automatic recording of Redux state updates"style={[B.toolbarBtn,D&&{backgroundColor:`${e.darkOrange}1F`,borderColor:e.darkOrange}]}onPress={Re}hitSlop={6}>
+            <Lt isPaused={D}color={D?e.darkOrange:e.grayTextStrong}size={16}/>
+          </_>
 
           
-          <TouchableOpacity accessible={true} accessibilityRole="button" accessibilityLabel={`Sort order: ${sortMode === 'latest'
-            ? 'Recently updated first'
-            : 'Alphabetical A to Z'}`} accessibilityHint="Switches sorting between recently updated and alphabetical" style={[
-            styles.toolbarBtn,
-            sortMode === 'latest' && { backgroundColor: `${AppColors.brandPurple}1F`, borderColor: AppColors.brandPurple },
-        ]} onPress={() => setSortMode(prev => (prev === 'latest' ? 'alpha' : 'latest'))} hitSlop={6}>
-            <SortArrowIcon color={sortMode === 'latest' ? AppColors.brandPurple : AppColors.grayTextStrong} size={16}/>
-          </TouchableOpacity>
-        </View>
+          <_ 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={[B.toolbarBtn,P==="latest"&&{backgroundColor:`${e.brandPurple}1F`,borderColor:e.brandPurple}]}onPress={()=>Ae(r=>r==="latest"?"alpha":"latest")}hitSlop={6}>
+            <Ct color={P==="latest"?e.brandPurple:e.grayTextStrong}size={16}/>
+          </_>
+        </T>
 
-        <View style={reduxTabStyles.headerSubRow}>
-          <Text style={reduxTabStyles.resultCount}>
-            Showing {filteredSlices.length} of {sliceItems.length} state slices
-          </Text>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            {isReduxPaused && (<View style={reduxTabStyles.pausedBannerPill}>
-                <Text style={reduxTabStyles.pausedBannerText}>PAUSED</Text>
-              </View>)}
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-              {sortMode === 'latest' ? (<BoltIcon color={AppColors.brandPurple} size={11}/>) : (<TextAaIcon color={AppColors.brandPurple} size={11}/>)}
-              <Text style={reduxTabStyles.sortLabel}>
-                {sortMode === 'latest' ? 'Newest Updates First' : 'Alphabetical (A-Z)'}
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
+        <T style={t.headerSubRow}>
+          <C style={t.resultCount}>
+            Showing {F.length} of {M.length} state slices
+          </C>
+          <T style={{flexDirection:"row",alignItems:"center",gap:8}}>
+            {D&&<T style={t.pausedBannerPill}>
+                <C style={t.pausedBannerText}>PAUSED</C>
+              </T>}
+            <T style={{flexDirection:"row",alignItems:"center",gap:4}}>
+              {P==="latest"?<U color={e.brandPurple}size={11}/>:<Pt color={e.brandPurple}size={11}/>}
+              <C style={t.sortLabel}>
+                {P==="latest"?"Newest Updates First":"Alphabetical (A-Z)"}
+              </C>
+            </T>
+          </T>
+        </T>
+      </T>
 
       
-      <FlatList ref={listRef} data={filteredSlices} keyExtractor={item => item.id} renderItem={renderSliceItem} initialNumToRender={12} maxToRenderPerBatch={8} windowSize={5} removeClippedSubviews={Platform.OS === 'android'} renderToHardwareTextureAndroid={true} ListEmptyComponent={<EmptyState isSearch={reduxSearch.trim().length > 0} searchQuery={reduxSearch} onClearSearch={() => setReduxSearch('')} customTitle={reduxSearch.trim().length > 0 ? 'No Matching Slices' : 'No Redux State Detected'} customSub={reduxSearch.trim().length > 0
-                ? `No Redux slices match "${reduxSearch}"`
-                : 'Attach the Redux store or dispatch actions to see state slices.'}/>} ListFooterComponent={filteredSlices.length > 0 ? (<EndOfListFooter count={filteredSlices.length} label="slices"/>) : null} contentContainerStyle={[
-            reduxTabStyles.listContent,
-            filteredSlices.length === 0 && { flexGrow: 1 },
-        ]} keyboardShouldPersistTaps="handled"/>
-    </View>);
-});
-const reduxTabStyles = StyleSheet.create({
-    overviewCard: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.white,
-        marginHorizontal: 12,
-        marginTop: 10,
-        borderRadius: 12,
-        padding: 12,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.03,
-        shadowRadius: 3,
-        elevation: 1,
-    },
-    statCol: {
-        flex: 1,
-    },
-    statDivider: {
-        width: 1,
-        height: 28,
-        backgroundColor: AppColors.dividerColor,
-        marginHorizontal: 8,
-    },
-    statHeading: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.grayTextWeak,
-        letterSpacing: 0.5,
-    },
-    statBigVal: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 14,
-        color: AppColors.primaryBlack,
-        marginTop: 2,
-    },
-    statLastAction: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.purple,
-        marginTop: 2,
-    },
-    statLastTime: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-    },
-    toolbarContainer: {
-        backgroundColor: AppColors.white,
-        borderBottomWidth: 1,
-        borderBottomColor: AppColors.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: AppFonts.interMedium,
-        fontSize: 11,
-        color: AppColors.grayTextWeak,
-    },
-    sortLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.brandPurple,
-    },
-    listContent: {
-        padding: 12,
-        paddingBottom: 36,
-    },
-    card: {
-        backgroundColor: AppColors.white,
-        borderRadius: 12,
-        padding: 12,
-        marginBottom: 10,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-        shadowColor: AppColors.primaryBlack,
-        shadowOffset: { width: 0, height: 1 },
-        shadowOpacity: 0.04,
-        shadowRadius: 4,
-        elevation: 2,
-    },
-    cardRecentlyUpdated: {
-        borderColor: `${AppColors.brandPurple}66`,
-        backgroundColor: AppColors.purpleTintBg,
-    },
-    cardHeader: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 8,
-        marginBottom: 8,
-    },
-    sliceBadge: {
-        backgroundColor: AppColors.violetSoftBg,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.violetSoftBorder,
-    },
-    sliceBadgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.purple700,
-        letterSpacing: 0.4,
-    },
-    sliceName: {
-        flex: 1,
-        fontFamily: AppFonts.interBold,
-        fontSize: 13.5,
-        color: AppColors.primaryBlack,
-    },
-    timePill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 3,
-        backgroundColor: `${AppColors.purple}14`,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: `${AppColors.purple}2E`,
-    },
-    timeText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.purple,
-    },
-    statsRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-        flexWrap: 'wrap',
-        marginBottom: 6,
-    },
-    pill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 7,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    pillLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-    },
-    pillValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10.5,
-        color: AppColors.primaryBlack,
-    },
-    livePill: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        backgroundColor: AppColors.emeraldBg,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.emeraldBorder,
-    },
-    liveDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: AppColors.emerald500,
-    },
-    livePillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 10,
-        color: AppColors.emerald700,
-    },
-    loadingPill: {
-        backgroundColor: AppColors.amber100,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.amber200,
-    },
-    loadingPillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.amber800Warm,
-    },
-    errorPill: {
-        backgroundColor: AppColors.red100,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.errorBorder,
-    },
-    errorPillText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.red600,
-    },
-    emptyPill: {
-        backgroundColor: AppColors.grayBackground,
-        paddingHorizontal: 6,
-        paddingVertical: 3,
-        borderRadius: 5,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    emptyPillText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 9.5,
-        color: AppColors.grayTextWeak,
-    },
-    lastActionRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 5,
-        backgroundColor: AppColors.grayBackground,
-        borderRadius: 6,
-        paddingHorizontal: 8,
-        paddingVertical: 5,
-        marginTop: 4,
-        borderWidth: 1,
-        borderColor: AppColors.dividerColor,
-    },
-    lastActionLabel: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10.5,
-        color: AppColors.grayTextWeak,
-    },
-    lastActionValue: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 11,
-        color: AppColors.primaryBlack,
-    },
-    payloadPreviewText: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10,
-        color: AppColors.grayTextWeak,
-        marginLeft: 4,
-    },
-    highlight: {
-        backgroundColor: AppColors.yellow200,
-        color: AppColors.yellow800,
-        fontFamily: AppFonts.interBold,
-    },
-    pausedBannerPill: {
-        backgroundColor: AppColors.amber100,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderColor: AppColors.amber200,
-    },
-    pausedBannerText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9,
-        color: AppColors.amber800Warm,
-        letterSpacing: 0.5,
-    },
-});
-export default ReduxTab;
+      <Fe ref={Se}data={F}keyExtractor={r=>r.id}renderItem={Ve}initialNumToRender={12}maxToRenderPerBatch={8}windowSize={5}removeClippedSubviews={We.OS==="android"}renderToHardwareTextureAndroid={!0}ListEmptyComponent={<Ne 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={F.length>0?<Ue count={F.length}label="slices"/>:null}contentContainerStyle={[t.listContent,F.length===0&&{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+    </T>:<T style={B.emptyContainer}>
+        <T style={B.emptyIconWrap}>
+          <Je color={e.purple}size={32}/>
+        </T>
+        <C style={B.emptyTitle}>No Redux Store Connected</C>
+        <C style={B.emptySub}>
+          Call connectReduxStore(store) or use inspectorReduxMiddleware at app initialization.
+        </C>
+      </T>}),t=He.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:S.interBold,fontSize:9,color:e.grayTextWeak,letterSpacing:.5},statBigVal:{fontFamily:S.interBold,fontSize:14,color:e.primaryBlack,marginTop:2},statLastAction:{fontFamily:S.interBold,fontSize:11,color:e.purple,marginTop:2},statLastTime:{fontFamily:S.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:S.interMedium,fontSize:11,color:e.grayTextWeak},sortLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.brandPurple},listContent:{padding:12,paddingBottom:36},card:{backgroundColor:e.white,borderRadius:12,padding:12,marginBottom:10,borderWidth:1,borderColor:e.dividerColor,shadowColor:e.primaryBlack,shadowOffset:{width:0,height:1},shadowOpacity:.04,shadowRadius:4,elevation:2},cardRecentlyUpdated:{borderColor:`${e.brandPurple}66`,backgroundColor:e.purpleTintBg},cardHeader:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},sliceBadge:{backgroundColor:e.violetSoftBg,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.violetSoftBorder},sliceBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:e.purple700,letterSpacing:.4},sliceName:{flex:1,fontFamily:S.interBold,fontSize:13.5,color:e.primaryBlack},timePill:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:`${e.purple}14`,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:`${e.purple}2E`},timeText:{fontFamily:S.interMedium,fontSize:10,color:e.purple},statsRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap",marginBottom:6},pill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.grayBackground,paddingHorizontal:7,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},pillLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.grayTextWeak},pillValue:{fontFamily:S.interBold,fontSize:10.5,color:e.primaryBlack},livePill:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.emeraldBg,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.emeraldBorder},liveDot:{width:6,height:6,borderRadius:3,backgroundColor:e.emerald500},livePillText:{fontFamily:S.interBold,fontSize:10,color:e.emerald700},loadingPill:{backgroundColor:e.amber100,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.amber200},loadingPillText:{fontFamily:S.interBold,fontSize:9.5,color:e.amber800Warm},errorPill:{backgroundColor:e.red100,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.errorBorder},errorPillText:{fontFamily:S.interBold,fontSize:9.5,color:e.red600},emptyPill:{backgroundColor:e.grayBackground,paddingHorizontal:6,paddingVertical:3,borderRadius:5,borderWidth:1,borderColor:e.dividerColor},emptyPillText:{fontFamily:S.interMedium,fontSize:9.5,color:e.grayTextWeak},lastActionRow:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:e.grayBackground,borderRadius:6,paddingHorizontal:8,paddingVertical:5,marginTop:4,borderWidth:1,borderColor:e.dividerColor},lastActionLabel:{fontFamily:S.interMedium,fontSize:10.5,color:e.grayTextWeak},lastActionValue:{fontFamily:S.interBold,fontSize:11,color:e.primaryBlack},payloadPreviewText:{flex:1,fontFamily:S.interRegular,fontSize:10,color:e.grayTextWeak,marginLeft:4},highlight:{backgroundColor:e.yellow200,color:e.yellow800,fontFamily:S.interBold},pausedBannerPill:{backgroundColor:e.amber100,paddingHorizontal:6,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.amber200},pausedBannerText:{fontFamily:S.interBold,fontSize:9,color:e.amber800Warm,letterSpacing:.5}});export default vt;