react-native-inapp-inspector 2.4.2 → 2.5.0

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

@@ -1,90 +1,172 @@
-import U,{useState as L,useMemo as N}from"react";import{Modal as G,View as C,Text as S,TextInput as E,ScrollView as A,StyleSheet as B,Pressable as _,Platform as q,Dimensions as J}from"react-native";import R from"../TouchableScale";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as T}from"../../styles/AppFonts";import{GlobeIcon as K,CheckIcon as Y,CloseWhite as P}from"../NetworkIcons";import{useTranslation as Q,SUPPORTED_LANGUAGES as X,setLanguage as Z,getLanguage as ee}from"../../i18n";import{loadSettings as te,saveSettings as oe}from"../../helpers/settingsStore";import{triggerNativeHaptic as D}from"../../native/NativeInspector";import{showToast as re}from"../../helpers/toast";export const COUNTRY_OPTIONS=[{id:"all",name:"All",flag:"\u{1F310}",badge:"25"},{id:"in",name:"India",flag:"\u{1F1EE}\u{1F1F3}",badge:"38% Vol",langCodes:["hi","ta","te","kn","ml","bn","mr","gu","pa"]},{id:"us",name:"United States",flag:"\u{1F1FA}\u{1F1F8}",badge:"24% Vol",langCodes:["en","es"]},{id:"gb",name:"United Kingdom",flag:"\u{1F1EC}\u{1F1E7}",badge:"15% Vol",langCodes:["en"]},{id:"de",name:"Germany",flag:"\u{1F1E9}\u{1F1EA}",badge:"9% Vol",langCodes:["de"]},{id:"jp",name:"Japan",flag:"\u{1F1EF}\u{1F1F5}",badge:"6% Vol",langCodes:["ja"]},{id:"ca",name:"Canada",flag:"\u{1F1E8}\u{1F1E6}",badge:"5% Vol",langCodes:["en","fr"]},{id:"global",name:"Global / ROW",flag:"\u{1F310}",badge:"3% Vol",langCodes:["it","id","tr","vi","nl","pl","pt","ru","ar","zh","ko"]}],LanguageSelectorModal=U.memo(({visible:j,onClose:V})=>{const{t:k}=Q(),[w,z]=L(""),[x,H]=L("all"),M=ee(),v=t.primaryLight!==t.white,I=N(()=>COUNTRY_OPTIONS.find(o=>o.id===x)||COUNTRY_OPTIONS[0],[x]),W=N(()=>X.filter(o=>{if(x!=="all"&&I?.langCodes&&!I.langCodes.includes(o.code))return!1;if(!w.trim())return!0;const b=w.trim().toLowerCase();return o.name.toLowerCase().includes(b)||o.nativeName.toLowerCase().includes(b)||o.code.toLowerCase().includes(b)}),[w,x,I]),O=async(o,b,$)=>{D("light"),Z(o);try{const F=await te();oe({...F,language:o})}catch{}V(),z(""),re(`${b} ${$}`)};return<G visible={j}transparent={!0}animationType="slide"onRequestClose={V}>
-      <C style={e.overlay}>
+import oe,{useState as M,useMemo as q}from"react";import{Modal as Ce,View as C,Text as B,TextInput as Se,ScrollView as J,StyleSheet as v,TouchableWithoutFeedback as Y,Platform as O,Dimensions as Te,DevSettings as G}from"react-native";import E from"react-native-linear-gradient";import V from"../TouchableScale";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as x}from"../../styles/AppFonts";import{GlobeIcon as Be,CheckIcon as Re,CloseWhite as U,SearchIcon as Ie,ResetIcon as Ve}from"../NetworkIcons";import{useTranslation as Le,SUPPORTED_LANGUAGES as Q,setLanguage as Fe,getLanguage as Ae}from"../../i18n";import{loadSettings as Pe,saveSettings as We}from"../../helpers/settingsStore";import{triggerNativeHaptic as N}from"../../native/NativeInspector";import{showToast as Ne}from"../../helpers/toast";export const COUNTRY_OPTIONS=[{id:"all",name:"All",flag:"\u{1F310}",badge:"25"},{id:"in",name:"India",flag:"\u{1F1EE}\u{1F1F3}",badge:"9",langCodes:["hi","ta","te","kn","ml","bn","mr","gu","pa"]},{id:"us",name:"United States",flag:"\u{1F1FA}\u{1F1F8}",badge:"2",langCodes:["en","es"]},{id:"gb",name:"United Kingdom",flag:"\u{1F1EC}\u{1F1E7}",badge:"1",langCodes:["en"]},{id:"de",name:"Germany",flag:"\u{1F1E9}\u{1F1EA}",badge:"1",langCodes:["de"]},{id:"jp",name:"Japan",flag:"\u{1F1EF}\u{1F1F5}",badge:"1",langCodes:["ja"]},{id:"ca",name:"Canada",flag:"\u{1F1E8}\u{1F1E6}",badge:"2",langCodes:["en","fr"]},{id:"global",name:"Global / Europe & Asia",flag:"\u{1F30D}",badge:"11",langCodes:["it","id","tr","vi","nl","pl","pt","ru","ar","zh","ko"]}];const _={en:"English (Default)",es:"Spanish",fr:"French",de:"German",zh:"Chinese (Simplified)",ja:"Japanese",ko:"Korean",pt:"Portuguese",ru:"Russian",hi:"Hindi",ta:"Tamil",te:"Telugu",kn:"Kannada",ml:"Malayalam",bn:"Bengali",mr:"Marathi",gu:"Gujarati",pa:"Punjabi",ar:"Arabic",it:"Italian",id:"Indonesian",tr:"Turkish",vi:"Vietnamese",nl:"Dutch",pl:"Polish"};export const LanguageSelectorModal=oe.memo(({visible:X,onClose:P})=>{const{t:k}=Le(),[L,j]=M(""),[F,Z]=M("all"),[R,D]=M(null),W=Ae(),A=e.primaryLight!==e.white,$=q(()=>COUNTRY_OPTIONS.find(o=>o.id===F)||COUNTRY_OPTIONS[0],[F]),K=q(()=>Q.filter(o=>{if(F!=="all"&&$?.langCodes&&!$.langCodes.includes(o.code))return!1;if(!L.trim())return!0;const T=L.trim().toLowerCase(),I=_[o.code]?.toLowerCase()||"";return o.name.toLowerCase().includes(T)||o.nativeName.toLowerCase().includes(T)||o.code.toLowerCase().includes(T)||I.includes(T)}),[L,F,$]),ee=(o,T,I)=>{o!==W&&(N("light"),D({code:o,flag:T,nativeName:I}))},te=async()=>{if(!R)return;N("medium"),Fe(R.code);try{const I=await Pe();await We({...I,language:R.code})}catch{}const{flag:o,nativeName:T}=R;D(null),P(),j(""),Ne(`\u{1F504} ${o} ${T}`),__DEV__&&G&&G.reload&&G.reload()},H=()=>{N("light"),D(null)};return<Ce visible={X}transparent={!0}animationType="slide"statusBarTranslucent={!0}onRequestClose={P}>
+      <C style={t.overlay}>
         
-        <_ style={e.backdrop}onPress={V}accessibilityRole="button"accessibilityLabel="Close bottom sheet"/>
+        <Y onPress={P}accessible={!0}accessibilityRole="button"accessibilityLabel="Close bottom sheet">
+          <C style={t.backdrop}/>
+        </Y>
 
         
-        <C style={[e.bottomSheet,{backgroundColor:v?t.npmDark:t.white}]}>
+        <C style={[t.bottomSheet,{backgroundColor:A?e.npmDark:e.white}]}>
           
-          <C style={e.handleBarWrap}>
-            <C style={[e.handleBar,{backgroundColor:v?"rgba(255,255,255,0.25)":"rgba(0,0,0,0.18)"}]}/>
+          <C style={t.handleBarWrap}>
+            <C style={[t.handleBar,{backgroundColor:A?"rgba(255,255,255,0.25)":"rgba(0,0,0,0.18)"}]}/>
           </C>
 
           
-          <C style={e.header}>
-            <C style={e.headerTitleRow}>
-              <C style={e.globeIconWrap}>
-                <K size={16}color={t.blue600}/>
-              </C>
+          <C style={t.header}>
+            <C style={t.headerTitleRow}>
+              <E colors={[e.indigo600,e.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.globeIconWrap}>
+                <Be size={17}color={e.white}/>
+              </E>
               <C>
-                <S style={e.titleText}>
-                  {k("settings.general.selectLanguage","Select Language")}
-                </S>
-                <S style={e.subTitleText}>
+                <C style={t.titleRow}>
+                  <B style={t.titleText}>
+                    {k("settings.general.selectLanguage","Select Language")}
+                  </B>
+                  <C style={t.countBadge}>
+                    <B style={t.countBadgeText}>25</B>
+                  </C>
+                </C>
+                <B style={t.subTitleText}>
                   {k("settings.general.languageDescription","Choose preferred display language")}
-                </S>
+                </B>
               </C>
             </C>
-            <R onPress={V}hitSlop={10}style={e.closeBtn}>
-              <P size={12}color={t.grayText}/>
-            </R>
+            <V onPress={P}hitSlop={12}accessible={!0}accessibilityRole="button"accessibilityLabel="Close language selector"style={[t.closeBtn,{backgroundColor:A?"rgba(255, 255, 255, 0.16)":"rgba(0, 0, 0, 0.08)",borderColor:A?"rgba(255, 255, 255, 0.30)":"rgba(0, 0, 0, 0.18)"}]}>
+              <U size={14}color={A?e.white:"#0F172A"}/>
+            </V>
           </C>
 
           
-          <C style={e.searchContainer}>
-            <E value={w}onChangeText={z}placeholder={k("common.search","Search language, country or code...")}placeholderTextColor={t.grayTextWeak}style={e.searchInput}autoCapitalize="none"autoCorrect={!1}clearButtonMode="while-editing"/>
-            {w.length>0&&<R onPress={()=>z("")}style={e.searchClearBtn}>
-                <P size={11}color={t.grayText}/>
-              </R>}
+          <C style={t.searchContainer}>
+            <Ie color={e.grayTextWeak}size={15}/>
+            <Se value={L}onChangeText={j}placeholder={k("common.search","Search language, country or code...")}placeholderTextColor={e.grayTextWeak}style={t.searchInput}autoCapitalize="none"autoCorrect={!1}clearButtonMode="never"/>
+            {L.length>0&&<V onPress={()=>j("")}hitSlop={8}style={t.searchClearBtn}>
+                <U size={11}color={e.grayText}/>
+              </V>}
           </C>
 
           
-          <C style={e.countryScrollWrap}>
-            <A horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.countryScrollContent}>
-              {COUNTRY_OPTIONS.map(o=>{const b=o.id===x;return<R key={o.id}onPress={()=>{D("light"),H(o.id)}}style={[e.countryChip,b&&e.countryChipActive]}>
-                    <S style={e.countryChipFlag}>{o.flag}</S>
-                    <S style={[e.countryChipText,b&&e.countryChipTextActive]}>
+          <C style={t.countryScrollWrap}>
+            <J horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={t.countryScrollContent}>
+              {COUNTRY_OPTIONS.map(o=>{const T=o.id===F;return<V key={o.id}onPress={()=>{N("light"),Z(o.id)}}style={[t.countryChip,T&&t.countryChipActive]}>
+                    <B style={t.countryChipFlag}>{o.flag}</B>
+                    <B style={[t.countryChipText,T&&t.countryChipTextActive]}>
                       {o.name}
-                    </S>
-                    {o.badge&&<C style={[e.countryChipBadge,b&&e.countryChipBadgeActive]}>
-                        <S style={[e.countryChipBadgeText,b&&e.countryChipBadgeTextActive]}>
+                    </B>
+                    {o.badge&&<C style={[t.countryChipBadge,T&&t.countryChipBadgeActive]}>
+                        <B style={[t.countryChipBadgeText,T&&t.countryChipBadgeTextActive]}>
                           {o.badge}
-                        </S>
+                        </B>
                       </C>}
-                  </R>})}
-            </A>
+                  </V>})}
+            </J>
           </C>
 
           
-          <A style={e.scrollList}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!0}keyboardShouldPersistTaps="handled">
-            {W.length===0?<C style={e.emptyStateWrap}>
-                <S style={e.emptyStateText}>
+          <J style={t.scrollList}contentContainerStyle={t.scrollContent}showsVerticalScrollIndicator={!0}keyboardShouldPersistTaps="handled">
+            {K.length===0?<C style={t.emptyStateWrap}>
+                <B style={t.emptyStateText}>
                   {k("common.noMatches","No languages match your search")}
-                </S>
-              </C>:W.map(o=>{const b=o.code===M;return<R key={o.code}onPress={()=>O(o.code,o.flag,o.nativeName)}style={[e.langRow,b&&e.langRowSelected]}>
-                    <C style={e.langRowLeft}>
-                      <S style={e.langFlag}>{o.flag}</S>
-                      <C style={e.langTextCol}>
-                        <C style={e.langTitleRow}>
-                          <S style={[e.langNativeName,b&&e.langNativeNameSelected]}>
+                </B>
+              </C>:K.map(o=>{const T=o.code===W,I=_[o.code]||o.name;return<V key={o.code}onPress={()=>ee(o.code,o.flag,o.nativeName)}style={[t.langRow,T&&t.langRowSelected]}>
+                    
+                    {T&&<C style={t.activeAccentBar}/>}
+
+                    <C style={t.langRowLeft}>
+                      <C style={[t.flagContainer,T&&t.flagContainerSelected]}>
+                        <B style={t.langFlag}>{o.flag}</B>
+                      </C>
+                      <C style={t.langTextCol}>
+                        <C style={t.langTitleRow}>
+                          <B style={[t.langNativeName,T&&t.langNativeNameSelected]}>
                             {o.nativeName}
-                          </S>
-                          <C style={e.codePill}>
-                            <S style={e.codePillText}>
+                          </B>
+                          <C style={[t.codePill,T&&t.codePillSelected]}>
+                            <B style={[t.codePillText,T&&t.codePillTextSelected]}>
                               {o.code.toUpperCase()}
-                            </S>
+                            </B>
                           </C>
                         </C>
-                        <S style={e.langEnglishName}>
-                          {o.name}
-                        </S>
+                        <B style={[t.langEnglishName,T&&t.langEnglishNameSelected]}>
+                          {I}
+                        </B>
                       </C>
                     </C>
-                    {b&&<C style={e.checkIconWrap}>
-                        <Y size={13}color={t.white}/>
-                      </C>}
-                  </R>})}
-          </A>
+
+                    {T?<E colors={[e.indigo600,e.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.checkIconWrap}>
+                        <Re size={12}color={e.white}/>
+                      </E>:<C style={t.uncheckPlaceholder}/>}
+                  </V>})}
+          </J>
         </C>
+
+        
+        {R!=null&&<C style={[v.absoluteFill,S.overlay]}>
+            <Y onPress={H}>
+              <C style={S.backdrop}/>
+            </Y>
+            <C style={S.card}>
+              
+              <V onPress={H}hitSlop={8}style={S.cornerCloseBtn}>
+                <U size={11}color={e.grayTextWeak}/>
+              </V>
+
+              
+              <C style={S.iconBadge}>
+                <B style={S.iconFlag}>{R.flag}</B>
+              </C>
+
+              
+              <B style={S.title}>
+                {k("language.confirmTitle","Change Language?")}
+              </B>
+              <B style={S.message}>
+                {k("language.confirmMessage",`Switch to ${R.nativeName} (${_[R.code]||R.nativeName})? The inspector will reload to apply the new language.`)}
+              </B>
+
+              
+              <C style={S.switchPreview}>
+                <C style={S.switchItem}>
+                  <B style={S.switchLabel}>
+                    {k("language.current","Current")}
+                  </B>
+                  <B style={S.switchValue}>
+                    {Q.find(o=>o.code===W)?.flag||"\u{1F310}"}{" "}
+                    {W.toUpperCase()}
+                  </B>
+                </C>
+                <C style={S.switchArrow}>
+                  <B style={S.switchArrowText}>→</B>
+                </C>
+                <C style={S.switchItem}>
+                  <B style={[S.switchLabel,{color:e.indigo600}]}>
+                    {k("language.new","New")}
+                  </B>
+                  <B style={[S.switchValue,{color:e.indigo600,fontFamily:x.interBold}]}>
+                    {R.flag} {R.code.toUpperCase()}
+                  </B>
+                </C>
+              </C>
+
+              
+              <C style={S.buttonRow}>
+                <V accessible={!0}accessibilityRole="button"accessibilityLabel={k("common.cancel","Cancel")}onPress={H}style={S.cancelBtn}>
+                  <B style={S.cancelBtnText}>
+                    {k("common.cancel","Cancel")}
+                  </B>
+                </V>
+
+                <V accessible={!0}accessibilityRole="button"accessibilityLabel={k("language.confirmApply","Apply & Reload")}onPress={te}style={S.confirmBtn}>
+                  <E colors={[e.indigo600,e.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={S.confirmBtnGradient}>
+                    <Ve size={13}color={e.white}/>
+                    <B style={S.confirmBtnText}>
+                      {k("language.confirmApply","Apply & Reload")}
+                    </B>
+                  </E>
+                </V>
+              </C>
+            </C>
+          </C>}
       </C>
-    </G>});const e=B.create({overlay:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.55)",justifyContent:"flex-end"},backdrop:{...B.absoluteFillObject},bottomSheet:{width:"100%",height:Math.min(Math.max(J.get("window").height*.7,480),580),borderTopLeftRadius:24,borderTopRightRadius:24,paddingTop:8,paddingBottom:q.OS==="ios"?28:16,shadowColor:t.black,shadowOpacity:.25,shadowRadius:16,shadowOffset:{width:0,height:-4},elevation:12},handleBarWrap:{alignItems:"center",paddingVertical:6},handleBar:{width:38,height:4.5,borderRadius:2.5},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:10,borderBottomWidth:B.hairlineWidth,borderBottomColor:t.grayBorderSecondary},headerTitleRow:{flexDirection:"row",alignItems:"center",gap:10},globeIconWrap:{width:30,height:30,borderRadius:8,backgroundColor:`${t.blue600}14`,alignItems:"center",justifyContent:"center"},titleText:{fontFamily:T.interBold,fontSize:15,color:t.primaryBlack},subTitleText:{fontFamily:T.interRegular,fontSize:11,color:t.grayText,marginTop:1},closeBtn:{width:28,height:28,borderRadius:14,backgroundColor:t.grayBackground,alignItems:"center",justifyContent:"center"},closeBtnText:{fontFamily:T.interBold,fontSize:12,color:t.grayText},searchContainer:{flexDirection:"row",alignItems:"center",marginHorizontal:14,marginTop:10,marginBottom:6,paddingHorizontal:10,height:38,borderRadius:10,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary},searchInput:{flex:1,height:"100%",fontSize:12.5,fontFamily:T.interRegular,color:t.primaryBlack,paddingVertical:0},searchClearBtn:{padding:4},searchClearText:{fontSize:12,color:t.grayText,fontFamily:T.interBold},countryScrollWrap:{borderBottomWidth:B.hairlineWidth,borderBottomColor:t.grayBorderSecondary,paddingVertical:6},countryScrollContent:{paddingHorizontal:14,gap:6,flexDirection:"row",alignItems:"center"},countryChip:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:6,borderRadius:16,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary,gap:5},countryChipActive:{backgroundColor:`${t.purple}14`,borderColor:`${t.purple}55`},countryChipFlag:{fontSize:13},countryChipText:{fontFamily:T.interMedium,fontSize:11.5,color:t.primaryBlack},countryChipTextActive:{fontFamily:T.interBold,color:t.purple},countryChipBadge:{paddingHorizontal:5,paddingVertical:1,borderRadius:8,backgroundColor:`${t.black}0A`},countryChipBadgeActive:{backgroundColor:`${t.purple}22`},countryChipBadgeText:{fontFamily:T.interSemiBold,fontSize:9.5,color:t.grayText},countryChipBadgeTextActive:{color:t.purple,fontFamily:T.interBold},scrollList:{flex:1},scrollContent:{paddingBottom:16},emptyStateWrap:{padding:30,alignItems:"center",justifyContent:"center"},emptyStateText:{fontFamily:T.interRegular,fontSize:12.5,color:t.grayText},langRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:12,borderBottomWidth:B.hairlineWidth,borderBottomColor:t.grayBorderSecondary},langRowSelected:{backgroundColor:`${t.purple}10`},langRowLeft:{flexDirection:"row",alignItems:"center",gap:12,flex:1},langFlag:{fontSize:20},langTextCol:{flex:1},langTitleRow:{flexDirection:"row",alignItems:"center",gap:6},langNativeName:{fontFamily:T.interSemiBold,fontSize:13.5,color:t.primaryBlack},langNativeNameSelected:{fontFamily:T.interBold,color:t.purple},codePill:{backgroundColor:`${t.purple}14`,paddingHorizontal:5,paddingVertical:1,borderRadius:4},codePillText:{fontSize:9.5,fontFamily:T.interBold,color:t.purple,letterSpacing:.5},langEnglishName:{fontFamily:T.interRegular,fontSize:11,color:t.grayText,marginTop:1},checkIconWrap:{width:22,height:22,borderRadius:11,backgroundColor:t.purple,alignItems:"center",justifyContent:"center"}});
+    </Ce>});const t=v.create({overlay:{flex:1,backgroundColor:"rgba(10, 15, 30, 0.60)",justifyContent:"flex-end"},backdrop:{...v.absoluteFillObject},bottomSheet:{width:"100%",height:Math.min(Math.max(Te.get("window").height*.74,520),620),borderTopLeftRadius:26,borderTopRightRadius:26,paddingTop:8,paddingBottom:O.OS==="ios"?28:16,shadowColor:e.black,shadowOpacity:.28,shadowRadius:20,shadowOffset:{width:0,height:-6},elevation:16},handleBarWrap:{alignItems:"center",paddingVertical:5},handleBar:{width:36,height:4,borderRadius:2},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:10,borderBottomWidth:v.hairlineWidth,borderBottomColor:e.grayBorderSecondary},headerTitleRow:{flexDirection:"row",alignItems:"center",gap:10},globeIconWrap:{width:34,height:34,borderRadius:10,alignItems:"center",justifyContent:"center",shadowColor:e.indigo600,shadowOffset:{width:0,height:2},shadowOpacity:.25,shadowRadius:4,elevation:3},titleRow:{flexDirection:"row",alignItems:"center",gap:6},titleText:{fontFamily:x.interBold,fontSize:15.5,color:e.primaryBlack,letterSpacing:-.2},countBadge:{backgroundColor:`${e.indigo600}18`,paddingHorizontal:6,paddingVertical:1,borderRadius:10},countBadgeText:{fontFamily:x.interBold,fontSize:10,color:e.indigo600},subTitleText:{fontFamily:x.interRegular,fontSize:11,color:e.grayText,marginTop:1},closeBtn:{width:30,height:30,borderRadius:15,backgroundColor:`${e.black}0D`,borderWidth:1,borderColor:`${e.black}1A`,alignItems:"center",justifyContent:"center"},searchContainer:{flexDirection:"row",alignItems:"center",marginHorizontal:14,marginTop:10,marginBottom:6,paddingHorizontal:10,height:40,borderRadius:12,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary,gap:8},searchInput:{flex:1,height:"100%",fontSize:12.5,fontFamily:x.interMedium,color:e.primaryBlack,paddingVertical:0},searchClearBtn:{width:20,height:20,borderRadius:10,backgroundColor:`${e.grayText}22`,alignItems:"center",justifyContent:"center"},countryScrollWrap:{borderBottomWidth:v.hairlineWidth,borderBottomColor:e.grayBorderSecondary,paddingVertical:7},countryScrollContent:{paddingHorizontal:14,gap:6,flexDirection:"row",alignItems:"center"},countryChip:{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:6,borderRadius:20,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary,gap:5},countryChipActive:{backgroundColor:`${e.brandPurple}14`,borderColor:`${e.brandPurple}55`},countryChipFlag:{fontSize:13},countryChipText:{fontFamily:x.interMedium,fontSize:11.5,color:e.primaryBlack},countryChipTextActive:{fontFamily:x.interBold,color:e.brandPurple},countryChipBadge:{paddingHorizontal:5.5,paddingVertical:1,borderRadius:8,backgroundColor:`${e.black}0A`},countryChipBadgeActive:{backgroundColor:`${e.brandPurple}22`},countryChipBadgeText:{fontFamily:x.interSemiBold,fontSize:9.5,color:e.grayText},countryChipBadgeTextActive:{color:e.brandPurple,fontFamily:x.interBold},scrollList:{flex:1},scrollContent:{paddingBottom:16},emptyStateWrap:{padding:36,alignItems:"center",justifyContent:"center"},emptyStateText:{fontFamily:x.interMedium,fontSize:13,color:e.grayText},langRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingVertical:11,borderBottomWidth:v.hairlineWidth,borderBottomColor:e.grayBorderSecondary,position:"relative"},langRowSelected:{backgroundColor:`${e.indigo600}0C`},activeAccentBar:{position:"absolute",left:0,top:4,bottom:4,width:3.5,borderTopRightRadius:3,borderBottomRightRadius:3,backgroundColor:e.indigo600},langRowLeft:{flexDirection:"row",alignItems:"center",gap:12,flex:1},flagContainer:{width:36,height:36,borderRadius:10,backgroundColor:e.grayBackground,alignItems:"center",justifyContent:"center",borderWidth:1,borderColor:e.grayBorderSecondary},flagContainerSelected:{borderColor:`${e.indigo600}44`,backgroundColor:`${e.indigo600}14`},langFlag:{fontSize:19},langTextCol:{flex:1},langTitleRow:{flexDirection:"row",alignItems:"center",gap:6},langNativeName:{fontFamily:x.interSemiBold,fontSize:14,color:e.primaryBlack},langNativeNameSelected:{fontFamily:x.interBold,color:e.indigo600},codePill:{backgroundColor:`${e.black}0A`,paddingHorizontal:5,paddingVertical:1,borderRadius:4},codePillSelected:{backgroundColor:`${e.indigo600}18`},codePillText:{fontSize:9.5,fontFamily:x.interBold,color:e.grayText,letterSpacing:.4},codePillTextSelected:{color:e.indigo600},langEnglishName:{fontFamily:x.interRegular,fontSize:11.5,color:e.grayText,marginTop:1.5},langEnglishNameSelected:{color:e.indigo600,fontFamily:x.interMedium},checkIconWrap:{width:24,height:24,borderRadius:12,alignItems:"center",justifyContent:"center",shadowColor:e.indigo600,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:3,elevation:3},uncheckPlaceholder:{width:24,height:24}}),S=v.create({overlay:{flex:1,backgroundColor:"rgba(10, 15, 30, 0.72)",justifyContent:"center",alignItems:"center",paddingHorizontal:24,zIndex:999999,elevation:999},backdrop:{...v.absoluteFillObject},card:{width:"100%",maxWidth:340,backgroundColor:e.white,borderRadius:22,paddingTop:24,paddingBottom:18,paddingHorizontal:20,alignItems:"center",borderWidth:1,borderColor:`${e.white}CC`,...O.select({ios:{shadowColor:e.indigo600,shadowOffset:{width:0,height:12},shadowOpacity:.28,shadowRadius:24},android:{elevation:12}})},cornerCloseBtn:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:e.graySurface,alignItems:"center",justifyContent:"center"},iconBadge:{width:58,height:58,borderRadius:29,borderWidth:1.5,borderColor:`${e.indigo600}33`,backgroundColor:`${e.indigo600}14`,alignItems:"center",justifyContent:"center",marginBottom:14},iconFlag:{fontSize:28},title:{fontFamily:x.interBold,fontSize:17,color:e.slate900,textAlign:"center",marginBottom:8,letterSpacing:-.2},message:{fontFamily:x.interRegular,fontSize:13,color:e.grayTextWeak,textAlign:"center",lineHeight:19,paddingHorizontal:4,marginBottom:16},switchPreview:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:10,marginBottom:20,paddingVertical:10,paddingHorizontal:16,borderRadius:12,backgroundColor:e.grayBackground,borderWidth:1,borderColor:e.grayBorderSecondary,width:"100%"},switchItem:{alignItems:"center",gap:3,flex:1},switchLabel:{fontFamily:x.interMedium,fontSize:10,color:e.grayText,textTransform:"uppercase",letterSpacing:.5},switchValue:{fontFamily:x.interSemiBold,fontSize:14,color:e.primaryBlack},switchArrow:{width:24,height:24,borderRadius:12,backgroundColor:`${e.indigo600}18`,alignItems:"center",justifyContent:"center"},switchArrowText:{fontFamily:x.interBold,fontSize:14,color:e.indigo600},buttonRow:{flexDirection:"row",alignItems:"center",gap:10,width:"100%"},cancelBtn:{flex:1,height:44,borderRadius:12,backgroundColor:e.graySurface,borderWidth:1,borderColor:e.grayBorderSecondary,alignItems:"center",justifyContent:"center"},cancelBtnText:{fontFamily:x.interSemiBold,fontSize:14,color:e.grayText},confirmBtn:{flex:1.15,height:44,borderRadius:12,overflow:"hidden",...O.select({ios:{shadowColor:e.indigo600,shadowOffset:{width:0,height:4},shadowOpacity:.35,shadowRadius:8},android:{elevation:4}})},confirmBtnGradient:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,borderRadius:12},confirmBtnText:{fontFamily:x.interBold,fontSize:13.5,color:e.white,letterSpacing:.2}});export default LanguageSelectorModal;

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

@@ -1,135 +1,142 @@
-import te,{useEffect as A,useRef as P}from"react";import{Animated as o,Modal as Se,Platform as G,Pressable as Be,StatusBar as Ce,StyleSheet as R,View as B}from"react-native";import{useInspector as Ve}from"./InspectorContext";import Ne from"../ErrorBoundary";import S from"../ModuleErrorBoundary";import Re from"./FabLauncher";import De from"./InspectorHeader";import Me from"./TabBar";import Ee from"./NetworkTab";import Te from"./NetworkDetail";import Ae from"./LogDetail";import Pe from"./ConsoleTab";import Le from"./AnalyticsTab";import Ie from"../AnalyticsDetail";import Oe from"./ReduxTab";import We from"./ReduxDetail";import Fe from"./CrashTab";import Ge from"./CrashDetail";import He from"./PushTab";import Ye from"./PushDetail";import Ue from"./SocketTab";import _e from"./SocketDetail";import $e from"./DeviceInfoTab";import Je from"./StorageTab";import Ke from"./DebuggingTab";import{MediaGalleryTab as Qe}from"./MediaGalleryTab";import Xe from"./SettingsPanel";import Ze from"./AboutModal";import{SupportPage as So}from"./SupportPage";import Bo from"./NpmUpdateToast";import Co from"./NpmStarPrompt";import Vo from"../Toast";import q from"../../styles";import{AppColors as C}from"../../styles/AppColors";import No from"./NavigationTracker";import{isLocalDebugEnvironment as Ro}from"../../helpers";const Do=()=>{const{visible:L,modalAnimationType:V,closeModal:N,modalHeightPercent:I,selected:H,selectedEvent:O,selectedLog:Y,selectedReduxSlice:_,selectedReduxAction:$,selectedCrash:z,selectedPush:W,setSelectedPush:j,selectedSocket:F,setSelectedSocket:J,settingsPage:D,isAboutOpen:M,setIsAboutOpen:K,isSupportOpen:v,setIsSupportOpen:Q,activeTab:e,isReady:X,enabled:Z,isDismissed:ee,hasNavigationContext:oe,setNavState:re}=Ve(),U=e==="apis"&&H!=null||e==="analytics"&&O!=null||e==="logs"&&Y!=null||e==="redux"&&(_!=null||$!=null)||e==="crash"&&z!=null||e==="push"&&W!=null||e==="socket"&&F!=null,E=P(new o.Value(0)).current;A(()=>{D!==null&&(E.setValue(0),o.spring(E,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D!==null]);const T=P(new o.Value(0)).current;A(()=>{M&&(T.setValue(0),o.spring(T,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[M]);const x=P(new o.Value(0)).current;return A(()=>{v&&(x.setValue(0),o.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[v]),<>
-      {(G.OS==="ios"||G.OS==="android")&&Z&&!ee&&!L&&<Re/>}
-      <Se visible={L}animationType={V}transparent statusBarTranslucent={!0}onRequestClose={N}>
-        <Ne onClose={N}>
-          <B style={q.modalBackdrop}>
-            <Be style={q.modalBackdropPressable}onPress={N}/>
-            <B style={[q.modalContentCard,{height:`${I}%`,borderTopLeftRadius:I>=100?0:20,borderTopRightRadius:I>=100?0:20,backgroundColor:"transparent"}]}>
+import ne,{useEffect as A,useRef as P}from"react";import{Animated as o,Modal as Se,Platform as z,Pressable as Be,StatusBar as Ce,StyleSheet as v,View as B}from"react-native";import{useInspector as Ve}from"./InspectorContext";import Me from"../ErrorBoundary";import S from"../ModuleErrorBoundary";import Ne from"./FabLauncher";import Re from"./InspectorHeader";import{SecondaryTelemetryStrip as De}from"./SecondaryTelemetryStrip";import Te from"./TabBar";import Ee from"./NetworkTab";import Ae from"./NetworkDetail";import Pe from"./LogDetail";import Le from"./ConsoleTab";import Ie from"./AnalyticsTab";import Oe from"../AnalyticsDetail";import We from"./ReduxTab";import Fe from"./ReduxDetail";import Ge from"./CrashTab";import He from"./CrashDetail";import Ye from"./PushTab";import Ue from"./PushDetail";import _e from"./SocketTab";import $e from"./SocketDetail";import Je from"./DeviceInfoTab";import Ke from"./StorageTab";import Qe from"./DebuggingTab";import{MediaGalleryTab as Xe}from"./MediaGalleryTab";import Ze from"./SettingsPanel";import So from"./AboutModal";import{SupportPage as Bo}from"./SupportPage";import{ConfirmationModal as Co}from"./ConfirmationModal";import{FloatingCaptureWidget as Vo}from"./FloatingCaptureWidget";import Mo from"./NpmUpdateToast";import No from"./NpmStarPrompt";import Ro from"../Toast";import G from"../../styles";import{AppColors as k}from"../../styles/AppColors";import Do from"./NavigationTracker";import{isLocalDebugEnvironment as To}from"../../helpers";const xo=()=>{const{visible:L,modalAnimationType:C,closeModal:V,modalHeightPercent:I,selected:q,selectedEvent:O,selectedLog:H,selectedReduxSlice:_,selectedReduxAction:$,selectedCrash:Y,selectedPush:W,setSelectedPush:j,selectedSocket:F,setSelectedSocket:J,settingsPage:N,isAboutOpen:R,setIsAboutOpen:K,isSupportOpen:D,setIsSupportOpen:Q,activeTab:e,isReady:X,enabled:Z,isDismissed:ee,hasNavigationContext:oe,setNavState:re,confirmModal:M,setConfirmModal:te,peekMode:ae,peekOpacity:ie}=Ve(),U=e==="apis"&&q!=null||e==="analytics"&&O!=null||e==="logs"&&H!=null||e==="redux"&&(_!=null||$!=null)||e==="crash"&&Y!=null||e==="push"&&W!=null||e==="socket"&&F!=null,T=P(new o.Value(0)).current;A(()=>{N!==null&&(T.setValue(0),o.spring(T,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[N!==null]);const x=P(new o.Value(0)).current;A(()=>{R&&(x.setValue(0),o.spring(x,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[R]);const E=P(new o.Value(0)).current;return A(()=>{D&&(E.setValue(0),o.spring(E,{toValue:1,friction:8,tension:65,useNativeDriver:!1}).start())},[D]),<>
+      {(z.OS==="ios"||z.OS==="android")&&Z&&!ee&&!L&&<Ne/>}
+      <Se visible={L}animationType={C}transparent statusBarTranslucent={!0}onRequestClose={V}>
+        <Me onClose={V}>
+          <B style={[G.modalBackdrop,{zIndex:999999,elevation:999999}]}>
+            <Be style={G.modalBackdropPressable}onPress={V}/>
+            <B style={[G.modalContentCard,{height:`${I}%`,borderTopLeftRadius:I>=100?0:20,borderTopRightRadius:I>=100?0:20,backgroundColor:k.contentBg||k.grayBackground,opacity:ae?Math.max(ie||.75,.7):1,zIndex:9999999,elevation:999999}]}>
               <Ce translucent backgroundColor="transparent"barStyle="light-content"/>
 
+              <Re/>
               <De/>
 
-              <B style={{flex:1,overflow:"hidden",backgroundColor:C.grayBackground}}>
+              <B style={{flex:1,overflow:"hidden",backgroundColor:k.grayBackground}}>
                 
-                <B style={{flex:1}}pointerEvents={U||D!==null||M||v?"none":"auto"}>
-                  <Me/>
+                <B style={{flex:1}}pointerEvents={U||N!==null||R||D?"none":"auto"}>
+                  <Te/>
                   {X?<B style={{flex:1}}>
                       {e==="apis"&&<S moduleName="Network API Monitor">
                           <Ee/>
                         </S>}
                       {e==="logs"&&<S moduleName="Console Logs Monitor">
-                          <Pe/>
+                          <Le/>
                         </S>}
                       {e==="analytics"&&<S moduleName="Analytics Event Tracker">
-                          <Le/>
+                          <Ie/>
                         </S>}
                       {e==="redux"&&<S moduleName="Redux State Inspector">
-                          <Oe/>
+                          <We/>
                         </S>}
                       {e==="crash"&&<S moduleName="Crash Reporter">
-                          <Fe/>
+                          <Ge/>
                         </S>}
                       {e==="push"&&<S moduleName="Push Notifications">
-                          <He/>
+                          <Ye/>
                         </S>}
                       {e==="socket"&&<S moduleName="WebSocket & Socket.IO">
-                          <Ue/>
+                          <_e/>
                         </S>}
                       {e==="device"&&<S moduleName="Device Diagnostics">
-                          <$e/>
+                          <Je/>
                         </S>}
                       {e==="storage"&&<S moduleName="Storage Inspector">
-                          <Je/>
+                          <Ke/>
                         </S>}
                       {e==="media"&&<S moduleName="Media Gallery">
-                          <Qe/>
+                          <Xe/>
                         </S>}
-                      {G.OS==="android"&&Ro()&&e==="debugging"&&<S moduleName="Debugging Utilities">
-                            <Ke/>
+                      {z.OS==="android"&&To()&&e==="debugging"&&<S moduleName="Debugging Utilities">
+                            <Qe/>
                           </S>}
-                    </B>:<Mo/>}
+                    </B>:<Eo/>}
                 </B>
 
                 
-                {U&&<B style={[R.absoluteFill,{backgroundColor:C.contentBg,zIndex:10}]}>
-                    {e==="apis"&&H!=null&&<S moduleName="Network Request Details">
-                        <Te/>
+                {U&&<B style={[v.absoluteFill,{backgroundColor:k.contentBg,zIndex:10}]}>
+                    {e==="apis"&&q!=null&&<S moduleName="Network Request Details">
+                        <Ae/>
                       </S>}
                     {e==="analytics"&&O!=null&&<S moduleName="Analytics Event Details">
-                        <Ie event={O}/>
+                        <Oe event={O}/>
                       </S>}
-                    {e==="logs"&&Y!=null&&<S moduleName="Console Log Details">
-                        <Ae/>
+                    {e==="logs"&&H!=null&&<S moduleName="Console Log Details">
+                        <Pe/>
                       </S>}
                     {e==="redux"&&<S moduleName="Redux Action & State Details">
-                        <We/>
+                        <Fe/>
                       </S>}
-                    {e==="crash"&&z!=null&&<S moduleName="Crash Log Details">
-                        <Ge/>
+                    {e==="crash"&&Y!=null&&<S moduleName="Crash Log Details">
+                        <He/>
                       </S>}
                     {e==="push"&&W!=null&&<S moduleName="Push Notification Details">
-                        <Ye item={W}onClose={()=>j(null)}/>
+                        <Ue item={W}onClose={()=>j(null)}/>
                       </S>}
                     {e==="socket"&&F!=null&&<S moduleName="WebSocket & Socket.IO Details">
-                        <_e item={F}onClose={()=>J(null)}/>
+                        <$e item={F}onClose={()=>J(null)}/>
                       </S>}
                   </B>}
 
                 
-                {D!==null&&<o.View style={[R.absoluteFill,{backgroundColor:C.grayBackground,opacity:E,transform:[{translateY:E.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {N!==null&&<o.View style={[v.absoluteFill,{backgroundColor:k.grayBackground,opacity:T,transform:[{translateY:T.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="Settings Panel">
-                      <Xe/>
+                      <Ze/>
                     </S>
                   </o.View>}
 
                 
-                {M&&<o.View style={[R.absoluteFill,{backgroundColor:C.primaryLight,opacity:T,transform:[{translateY:T.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {R&&<o.View style={[v.absoluteFill,{backgroundColor:k.primaryLight,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="About & Diagnostics">
-                      <Ze onClose={()=>K(!1)}/>
+                      <So onClose={()=>K(!1)}/>
                     </S>
                   </o.View>}
 
                 
-                {v&&<o.View style={[R.absoluteFill,{backgroundColor:C.primaryLight,opacity:x,transform:[{translateY:x.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
+                {D&&<o.View style={[v.absoluteFill,{backgroundColor:k.primaryLight,opacity:E,transform:[{translateY:E.interpolate({inputRange:[0,1],outputRange:[24,0]})}]}]}>
                     <S moduleName="Support & Community">
-                      <So onClose={()=>Q(!1)}/>
+                      <Bo onClose={()=>Q(!1)}/>
                     </S>
                   </o.View>}
               </B>
 
               
-              <Vo/>
+              <Ro/>
+
+              
+              <Mo/>
 
               
-              <Bo/>
+              <No/>
+
+              
+              <Vo/>
 
               
-              <Co/>
+              <Co visible={M.visible}title={M.title}message={M.message}confirmText={M.confirmText}cancelText={M.cancelText}isDestructive={!0}icon="trash"onConfirm={M.onConfirm}onCancel={()=>te(le=>({...le,visible:!1}))}/>
             </B>
           </B>
-        </Ne>
-      {oe&&<No onStateChange={re}/>}
+        </Me>
+      {oe&&<Do onStateChange={re}/>}
     </Se>
-    </>},Mo=te.memo(function(){const V=P(new o.Value(.35)).current;return A(()=>{const N=o.loop(o.sequence([o.timing(V,{toValue:.85,duration:750,useNativeDriver:!1}),o.timing(V,{toValue:.35,duration:750,useNativeDriver:!1})]));return N.start(),()=>N.stop()},[V]),<B style={r.container}>
+    </>},Eo=ne.memo(function(){const C=P(new o.Value(.35)).current;return A(()=>{const V=o.loop(o.sequence([o.timing(C,{toValue:.85,duration:750,useNativeDriver:!1}),o.timing(C,{toValue:.35,duration:750,useNativeDriver:!1})]));return V.start(),()=>V.stop()},[C]),<B style={r.container}>
       
       <B style={r.toolbarSkeleton}>
-        <o.View style={[r.searchBarSkeleton,{opacity:V}]}/>
+        <o.View style={[r.searchBarSkeleton,{opacity:C}]}/>
         <B style={r.actionButtonsRow}>
-          <o.View style={[r.iconButtonSkeleton,{opacity:V}]}/>
-          <o.View style={[r.iconButtonSkeleton,{opacity:V}]}/>
+          <o.View style={[r.iconButtonSkeleton,{opacity:C}]}/>
+          <o.View style={[r.iconButtonSkeleton,{opacity:C}]}/>
         </B>
       </B>
 
       
       <B style={r.chipStripSkeleton}>
-        <o.View style={[r.chipSkeleton,{width:48,opacity:V}]}/>
-        <o.View style={[r.chipSkeleton,{width:68,opacity:V}]}/>
-        <o.View style={[r.chipSkeleton,{width:76,opacity:V}]}/>
-        <o.View style={[r.chipSkeleton,{width:58,opacity:V}]}/>
+        <o.View style={[r.chipSkeleton,{width:48,opacity:C}]}/>
+        <o.View style={[r.chipSkeleton,{width:68,opacity:C}]}/>
+        <o.View style={[r.chipSkeleton,{width:76,opacity:C}]}/>
+        <o.View style={[r.chipSkeleton,{width:58,opacity:C}]}/>
       </B>
 
       
-      {[0,1,2,3].map(N=><o.View key={`skeleton_card_${N}`}style={[r.cardSkeleton,{opacity:V}]}>
+      {[0,1,2,3].map(V=><o.View key={`skeleton_card_${V}`}style={[r.cardSkeleton,{opacity:C}]}>
           <B style={r.cardTopRow}>
             <B style={r.badgeGroup}>
               <B style={r.statusBadgeSkeleton}/>
@@ -144,4 +151,4 @@ import te,{useEffect as A,useRef as P}from"react";import{Animated as o,Modal as
             <B style={r.metaPillSkeleton}/>
           </B>
         </o.View>)}
-    </B>}),r=R.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:C.graySurface,borderWidth:1,borderColor:C.dividerColor},cardSkeleton:{backgroundColor:C.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:C.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:C.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:C.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:C.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:C.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:C.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:C.graySurface}});export default Do;
+    </B>}),r=v.create({container:{flex:1,paddingHorizontal:12,paddingTop:8},toolbarSkeleton:{flexDirection:"row",alignItems:"center",gap:8,marginBottom:8},searchBarSkeleton:{flex:1,height:36,borderRadius:8,backgroundColor:k.graySurface,borderWidth:1,borderColor:k.dividerColor},actionButtonsRow:{flexDirection:"row",gap:6},iconButtonSkeleton:{width:36,height:36,borderRadius:8,backgroundColor:k.graySurface,borderWidth:1,borderColor:k.dividerColor},chipStripSkeleton:{flexDirection:"row",gap:6,marginBottom:10},chipSkeleton:{height:24,borderRadius:6,backgroundColor:k.graySurface,borderWidth:1,borderColor:k.dividerColor},cardSkeleton:{backgroundColor:k.primaryLight,borderRadius:10,padding:12,marginBottom:8,borderWidth:1,borderColor:k.dividerColor},cardTopRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:8},badgeGroup:{flexDirection:"row",alignItems:"center",gap:6},statusBadgeSkeleton:{width:38,height:18,borderRadius:4,backgroundColor:k.graySurface},methodBadgeSkeleton:{width:44,height:18,borderRadius:4,backgroundColor:k.graySurface},timeSkeleton:{width:48,height:12,borderRadius:4,backgroundColor:k.graySurface},urlLineLong:{height:13,borderRadius:4,backgroundColor:k.graySurface,marginBottom:5,width:"90%"},urlLineShort:{height:11,borderRadius:4,backgroundColor:k.graySurface,marginBottom:8,width:"55%"},cardBottomRow:{flexDirection:"row",gap:8,marginTop:2},metaPillSkeleton:{width:52,height:14,borderRadius:4,backgroundColor:k.graySurface}});export default xo;