react-native-inapp-inspector 2.5.2 → 2.5.3

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

@@ -1,4 +1,4 @@
-import{useState as D,useEffect as F}from"react";import{Modal as G,View as C,Text as S,TouchableOpacity as O,StyleSheet as Y,Animated as T,Linking as J}from"react-native";import W,{Path as L}from"react-native-svg";import K from"../AppHeaderLogo";import{NpmIcon as Q}from"../NetworkIcons";import{LIB_VERSION as X}from"../../constants";import{copyToClipboard as Z}from"../../helpers";import{showToast as $}from"../../helpers/toast";import{AppFonts as N}from"../../styles/AppFonts";import{AppColors as e}from"../../styles/AppColors";import{t as B}from"../../i18n";const Ce=({size:o=14,color:r=e.grayTextWeak})=><W width={o}height={o}viewBox="0 0 24 24"fill="none">
+import{useState as D,useEffect as F}from"react";import{Modal as G,View as C,Text as S,TouchableOpacity as O,StyleSheet as Y,Animated as T,Linking as J}from"react-native";import W,{Path as L}from"react-native-svg";import K from"../AppHeaderLogo";import{NpmIcon as Q}from"../NetworkIcons";import{LIB_VERSION as X}from"../../constants";import{copyToClipboard as Z}from"../../helpers";import{showToast as $}from"../../helpers/toast";import{AppFonts as N}from"../../styles/AppFonts";import{AppColors as e}from"../../styles/AppColors";import{t as V}from"../../i18n";const Ce=({size:o=14,color:r=e.grayTextWeak})=><W width={o}height={o}viewBox="0 0 24 24"fill="none">
     <L d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <L d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={r}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
   </W>,P=({size:o=14,color:r=e.emerald500})=><W width={o}height={o}viewBox="0 0 24 24"fill="none">
@@ -13,7 +13,7 @@ import{useState as D,useEffect as F}from"react";import{Modal as G,View as C,Text
     <L d="M12 2l2.4 6.6L21 11l-6.6 2.4L12 20l-2.4-6.6L3 11l6.6-2.4L12 2z"fill={r}/>
   </W>,Ve=({size:o=14,color:r=e.slate400})=><W width={o}height={o}viewBox="0 0 24 24"fill="none">
     <L d="M5 12h14M12 5l7 7-7 7"stroke={r}strokeWidth="2.2"strokeLinecap="round"strokeLinejoin="round"/>
-  </W>;export const UpdateAvailableModal=({visible:o,latestVersion:r,onClose:_})=>{const[H,A]=D(!1),R=D(new T.Value(0))[0],I=D(new T.Value(.92))[0],M="npm install react-native-inapp-inspector@latest";if(typeof __DEV__>"u"||!__DEV__)return null;F(()=>{o&&(A(!1),T.parallel([T.timing(R,{toValue:1,duration:220,useNativeDriver:!0}),T.spring(I,{toValue:1,friction:8,tension:50,useNativeDriver:!0})]).start())},[o,R,I]);const z=()=>{T.parallel([T.timing(R,{toValue:0,duration:160,useNativeDriver:!0}),T.timing(I,{toValue:.92,duration:160,useNativeDriver:!0})]).start(()=>{_()})},E=()=>{Z(M,"Install Command"),A(!0),$(B("about.copiedInstallCommand","Copied npm install command to clipboard!")),setTimeout(()=>{A(!1)},2500)},U=()=>{J.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),z()};return o?<G transparent visible={o}animationType="none"statusBarTranslucent onRequestClose={z}>
+  </W>;export const UpdateAvailableModal=({visible:o,latestVersion:r,onClose:_})=>{const[H,A]=D(!1),R=D(new T.Value(0))[0],I=D(new T.Value(.92))[0],M="npm install react-native-inapp-inspector@latest";if(typeof __DEV__>"u"||!__DEV__)return null;F(()=>{o&&(A(!1),T.parallel([T.timing(R,{toValue:1,duration:220,useNativeDriver:!0}),T.spring(I,{toValue:1,friction:8,tension:50,useNativeDriver:!0})]).start())},[o,R,I]);const z=()=>{T.parallel([T.timing(R,{toValue:0,duration:160,useNativeDriver:!0}),T.timing(I,{toValue:.92,duration:160,useNativeDriver:!0})]).start(()=>{_()})},E=()=>{Z(M,"Install Command"),A(!0),$(V("about.copiedInstallCommand","Copied npm install command to clipboard!")),setTimeout(()=>{A(!1)},2500)},U=()=>{J.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),z()};return o?<G transparent visible={o}animationType="none"statusBarTranslucent onRequestClose={z}>
       <C style={t.overlay}>
         <T.View style={[t.card,{opacity:R,transform:[{scale:I}]}]}>
           
@@ -29,16 +29,16 @@ import{useState as D,useEffect as F}from"react";import{Modal as G,View as C,Text
                 <Le size={13}color={e.amber500}/>
               </C>
             </C>
-            <S style={t.title}>{B("header.updateAvailableTitle","Update Available")}</S>
+            <S style={t.title}>{V("header.updateAvailableTitle","Update Available")}</S>
             <S style={t.subtitle}>
-              {B("header.updateAvailableSubtitle","A new version of react-native-inapp-inspector is ready to install")}
+              {V("header.updateAvailableSubtitle","A new version of react-native-inapp-inspector is ready to install")}
             </S>
           </C>
 
           
           <C style={t.versionComparisonCard}>
             <C style={t.versionColumn}>
-              <S style={t.versionLabel}>INSTALLED</S>
+              <S style={t.versionLabel}>{V("modals.installed","INSTALLED")}</S>
               <C style={t.installedChip}>
                 <S style={t.installedText}>v{X}</S>
               </C>
@@ -49,7 +49,7 @@ import{useState as D,useEffect as F}from"react";import{Modal as G,View as C,Text
             </C>
 
             <C style={t.versionColumn}>
-              <S style={t.versionLabel}>LATEST</S>
+              <S style={t.versionLabel}>{V("modals.latest","LATEST")}</S>
               <C style={t.latestChip}>
                 <Q size={12}color={e.npmRed}/>
                 <S style={t.latestText}>v{r}</S>
@@ -60,10 +60,10 @@ import{useState as D,useEffect as F}from"react";import{Modal as G,View as C,Text
           
           <C style={t.codeSnippetBox}>
             <C style={t.codeSnippetHeader}>
-              <S style={t.codeSnippetLabel}>{B("header.upgradeCommand","UPGRADE COMMAND")}</S>
+              <S style={t.codeSnippetLabel}>{V("header.upgradeCommand","UPGRADE COMMAND")}</S>
               {H&&<C style={t.copiedIndicator}>
                   <P size={11}color={e.emerald500}/>
-                  <S style={t.copiedText}>{B("common.copied","Copied")}</S>
+                  <S style={t.copiedText}>{V("common.copied","Copied")}</S>
                 </C>}
             </C>
 
@@ -80,14 +80,14 @@ import{useState as D,useEffect as F}from"react";import{Modal as G,View as C,Text
           
           <C style={t.buttonRow}>
             <O activeOpacity={.7}onPress={z}style={t.secondaryButton}>
-              <S style={t.secondaryButtonText}>{B("common.later","Later")}</S>
+              <S style={t.secondaryButtonText}>{V("common.later","Later")}</S>
             </O>
 
             <O activeOpacity={.8}onPress={U}style={t.primaryButton}>
-              <S style={t.primaryButtonText}>{B("common.viewOnNpm","View on NPM")}</S>
+              <S style={t.primaryButtonText}>{V("common.viewOnNpm","View on NPM")}</S>
               <Se size={12}color={e.white}/>
             </O>
           </C>
         </T.View>
       </C>
-    </G>:null};const V={fontFamily:N.interRegular},t=Y.create({overlay:{flex:1,backgroundColor:e.overlayDark,justifyContent:"center",alignItems:"center",paddingHorizontal:20,zIndex:999999},card:{width:"100%",maxWidth:360,backgroundColor:e.primaryLight,borderRadius:24,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:20,paddingTop:22,paddingBottom:20,alignItems:"center",shadowColor:e.shadowColorString,shadowOffset:{width:0,height:18},shadowOpacity:.24,shadowRadius:36,elevation:24},topCloseButton:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:e.grayBackground,justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:e.dividerColor,zIndex:10},headerSection:{alignItems:"center",width:"100%",marginBottom:12},iconHaloRing:{width:66,height:66,borderRadius:20,backgroundColor:e.purple50,justifyContent:"center",alignItems:"center",borderWidth:1.5,borderColor:e.purple100,marginBottom:8,shadowColor:e.offerPurple,shadowOffset:{width:0,height:4},shadowOpacity:.16,shadowRadius:10,elevation:4},sparkleBadge:{position:"absolute",top:-4,right:-4,width:22,height:22,borderRadius:11,backgroundColor:e.paleYellow,justifyContent:"center",alignItems:"center",borderWidth:1.5,borderColor:e.white},title:{fontSize:17.5,fontWeight:"800",color:e.primaryBlack,letterSpacing:-.4,textAlign:"center",lineHeight:22,marginBottom:2,...V},subtitle:{fontSize:12,fontWeight:"500",color:e.grayTextWeak,textAlign:"center",lineHeight:16,paddingHorizontal:8,...V},versionComparisonCard:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.grayBackground,borderRadius:14,borderWidth:1,borderColor:e.dividerColor,paddingVertical:10,paddingHorizontal:14,marginBottom:12,width:"100%"},versionColumn:{alignItems:"center",gap:4},versionLabel:{fontSize:9.5,fontWeight:"700",color:e.slate400,letterSpacing:.6,...V},installedChip:{backgroundColor:e.grayBorderSecondary,paddingHorizontal:8,paddingVertical:3,borderRadius:6},installedText:{fontSize:12,fontWeight:"700",color:e.grayText,...V},arrowContainer:{paddingHorizontal:6},arrowText:{fontSize:14,color:e.slate400,fontWeight:"700"},latestChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.violetSoftBg,paddingHorizontal:8,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:e.violetSoftBorder},latestText:{fontSize:12,fontWeight:"800",color:e.offerPurple,...V},codeSnippetBox:{backgroundColor:e.slate900,borderRadius:12,padding:10,width:"100%",marginBottom:14,borderWidth:1,borderColor:e.slate800},codeSnippetHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6},codeSnippetLabel:{fontSize:9.5,fontWeight:"700",color:e.grayTextWeak,letterSpacing:.6,...V},copiedIndicator:{flexDirection:"row",alignItems:"center",gap:3},copiedText:{fontSize:9.5,fontWeight:"600",color:e.emerald500,...V},commandRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.slate800,borderRadius:8,paddingVertical:7,paddingHorizontal:9,gap:8},commandText:{flex:1,fontSize:11,fontFamily:N.interRegular,color:e.sky400},copyIconWrapper:{width:22,height:22,borderRadius:6,backgroundColor:e.slate700,justifyContent:"center",alignItems:"center"},buttonRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",gap:10,width:"100%"},secondaryButton:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:11,borderRadius:12,backgroundColor:e.graySurface,borderWidth:1,borderColor:e.dividerColor},secondaryButtonText:{fontSize:13,fontWeight:"600",color:e.grayText,...V},primaryButton:{flex:1.3,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:11,borderRadius:12,backgroundColor:e.offerPurple,shadowColor:e.offerPurple,shadowOffset:{width:0,height:3},shadowOpacity:.28,shadowRadius:6,elevation:4},primaryButtonText:{fontSize:13,fontWeight:"700",color:e.white,...V}});export default UpdateAvailableModal;
+    </G>:null};const B={fontFamily:N.interRegular},t=Y.create({overlay:{flex:1,backgroundColor:e.overlayDark,justifyContent:"center",alignItems:"center",paddingHorizontal:20,zIndex:999999},card:{width:"100%",maxWidth:360,backgroundColor:e.primaryLight,borderRadius:24,borderWidth:1,borderColor:e.dividerColor,paddingHorizontal:20,paddingTop:22,paddingBottom:20,alignItems:"center",shadowColor:e.shadowColorString,shadowOffset:{width:0,height:18},shadowOpacity:.24,shadowRadius:36,elevation:24},topCloseButton:{position:"absolute",top:14,right:14,width:28,height:28,borderRadius:14,backgroundColor:e.grayBackground,justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:e.dividerColor,zIndex:10},headerSection:{alignItems:"center",width:"100%",marginBottom:12},iconHaloRing:{width:66,height:66,borderRadius:20,backgroundColor:e.purple50,justifyContent:"center",alignItems:"center",borderWidth:1.5,borderColor:e.purple100,marginBottom:8,shadowColor:e.offerPurple,shadowOffset:{width:0,height:4},shadowOpacity:.16,shadowRadius:10,elevation:4},sparkleBadge:{position:"absolute",top:-4,right:-4,width:22,height:22,borderRadius:11,backgroundColor:e.paleYellow,justifyContent:"center",alignItems:"center",borderWidth:1.5,borderColor:e.white},title:{fontSize:17.5,fontWeight:"800",color:e.primaryBlack,letterSpacing:-.4,textAlign:"center",lineHeight:22,marginBottom:2,...B},subtitle:{fontSize:12,fontWeight:"500",color:e.grayTextWeak,textAlign:"center",lineHeight:16,paddingHorizontal:8,...B},versionComparisonCard:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.grayBackground,borderRadius:14,borderWidth:1,borderColor:e.dividerColor,paddingVertical:10,paddingHorizontal:14,marginBottom:12,width:"100%"},versionColumn:{alignItems:"center",gap:4},versionLabel:{fontSize:9.5,fontWeight:"700",color:e.slate400,letterSpacing:.6,...B},installedChip:{backgroundColor:e.grayBorderSecondary,paddingHorizontal:8,paddingVertical:3,borderRadius:6},installedText:{fontSize:12,fontWeight:"700",color:e.grayText,...B},arrowContainer:{paddingHorizontal:6},arrowText:{fontSize:14,color:e.slate400,fontWeight:"700"},latestChip:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:e.violetSoftBg,paddingHorizontal:8,paddingVertical:3,borderRadius:6,borderWidth:1,borderColor:e.violetSoftBorder},latestText:{fontSize:12,fontWeight:"800",color:e.offerPurple,...B},codeSnippetBox:{backgroundColor:e.slate900,borderRadius:12,padding:10,width:"100%",marginBottom:14,borderWidth:1,borderColor:e.slate800},codeSnippetHeader:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginBottom:6},codeSnippetLabel:{fontSize:9.5,fontWeight:"700",color:e.grayTextWeak,letterSpacing:.6,...B},copiedIndicator:{flexDirection:"row",alignItems:"center",gap:3},copiedText:{fontSize:9.5,fontWeight:"600",color:e.emerald500,...B},commandRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:e.slate800,borderRadius:8,paddingVertical:7,paddingHorizontal:9,gap:8},commandText:{flex:1,fontSize:11,fontFamily:N.interRegular,color:e.sky400},copyIconWrapper:{width:22,height:22,borderRadius:6,backgroundColor:e.slate700,justifyContent:"center",alignItems:"center"},buttonRow:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",gap:10,width:"100%"},secondaryButton:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:11,borderRadius:12,backgroundColor:e.graySurface,borderWidth:1,borderColor:e.dividerColor},secondaryButtonText:{fontSize:13,fontWeight:"600",color:e.grayText,...B},primaryButton:{flex:1.3,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:11,borderRadius:12,backgroundColor:e.offerPurple,shadowColor:e.offerPurple,shadowOffset:{width:0,height:3},shadowOpacity:.28,shadowRadius:6,elevation:4},primaryButtonText:{fontSize:13,fontWeight:"700",color:e.white,...B}});export default UpdateAvailableModal;

package/dist/esm/components/MetaAccordion.js

@@ -1,4 +1,4 @@
-import{useState as oe}from"react";import{useTranslation as le}from"../i18n";import{View as T,Pressable as Te,Text as V}from"react-native";import{DURATION_FAST_MS as J,DURATION_SLOW_MS as K}from"../constants";import ue from"../customHooks/useAccordion";import{getDurationColor as D,handleOpenExternalLink as be}from"../helpers";import{ChevronIcon as Ve,CalendarIcon as Se,StatusIcon as Re,ClockIcon as Ce,SizeIcon as Le,TerminalIcon as Ie,GlobeIcon as Q}from"./NetworkIcons";import U from"./TouchableScale";import De from"./CopyButton";import{AppColors as h}from"../styles/AppColors";import{AppFonts as C}from"../styles/AppFonts";import e from"../styles";const Fe=({status:B,statusColor:M,duration:S,size:P,triggeredAt:E,method:j,contentType:_,url:z})=>{const{t:R}=le(),[G,X]=oe(!1),{isOpen:Y,toggleOpen:Z,chevronStyle:ee}=ue(!0),I=B===0||B==null,te=L=>{if(!L)return"\u2014";try{const $=L.indexOf("//");let F=L,v="";$!==-1&&(v=L.substring(0,$+2),F=L.substring($+2));const A=F.indexOf("/");let N=F,W="";A!==-1&&(N=F.substring(0,A),W=F.substring(A));const O=W.indexOf("?");let q=W,H="";return O!==-1&&(q=W.substring(0,O),H=W.substring(O)),<V style={{lineHeight:16}}>
+import{useState as oe}from"react";import{useTranslation as le}from"../i18n";import{View as T,Pressable as Te,Text as V}from"react-native";import{DURATION_FAST_MS as J,DURATION_SLOW_MS as K}from"../constants";import ue from"../customHooks/useAccordion";import{getDurationColor as D,handleOpenExternalLink as be}from"../helpers";import{ChevronIcon as Ve,CalendarIcon as Se,StatusIcon as Re,ClockIcon as Ce,SizeIcon as Le,TerminalIcon as Ie,GlobeIcon as Q}from"./NetworkIcons";import U from"./TouchableScale";import De from"./CopyButton";import{AppColors as h}from"../styles/AppColors";import{AppFonts as C}from"../styles/AppFonts";import e from"../styles";const Fe=({status:W,statusColor:M,duration:R,size:P,triggeredAt:E,method:j,contentType:_,url:z})=>{const{t:S}=le(),[G,X]=oe(!1),{isOpen:Y,toggleOpen:Z,chevronStyle:ee}=ue(!0),I=W===0||W==null,te=L=>{if(!L)return"\u2014";try{const $=L.indexOf("//");let F=L,v="";$!==-1&&(v=L.substring(0,$+2),F=L.substring($+2));const A=F.indexOf("/");let N=F,B="";A!==-1&&(N=F.substring(0,A),B=F.substring(A));const O=B.indexOf("?");let q=B,H="";return O!==-1&&(q=B.substring(0,O),H=B.substring(O)),<V style={{lineHeight:16}}>
           {v?<V style={{color:h.slate400,fontFamily:C.interRegular}}>{v}</V>:null}
           <V style={{color:h.purple,fontFamily:C.interBold}}>{N}</V>
           <V style={{color:h.slate700,fontFamily:C.interMedium}}>{q}</V>
@@ -6,9 +6,9 @@ import{useState as oe}from"react";import{useTranslation as le}from"../i18n";impo
         </V>}catch{return L}};return<T style={e.metaContainer}>
       <Te onPress={Z}hitSlop={12}>
         <T style={e.metaHeader}>
-          <V style={e.metaTitle}>Metadata</V>
+          <V style={e.metaTitle}>{S("errorBoundary.metadata","Metadata")}</V>
           <T style={{flexDirection:"row",alignItems:"center",gap:8}}>
-            <De value={{status:B??0,duration:S!=null?`${S} ms`:"\u2014",size:P||"\u2014",triggeredAt:E||"",method:j||"GET",contentType:_||"application/json",url:z||""}}label="Metadata"/>
+            <De value={{status:W??0,duration:R!=null?`${R} ms`:"\u2014",size:P||"\u2014",triggeredAt:E||"",method:j||"GET",contentType:_||"application/json",url:z||""}}label="Metadata"/>
             <T style={ee}>
               <Ve color={h.grayTextWeak}size={14}/>
             </T>
@@ -20,7 +20,7 @@ import{useState as oe}from"react";import{useTranslation as le}from"../i18n";impo
           <T style={e.metaRow}>
             <T style={e.metaLabelRow}>
               <Se color={h.grayTextWeak}size={14}/>
-              <V style={e.metaLabel}>{R("network.triggeredAt")}</V>
+              <V style={e.metaLabel}>{S("network.triggeredAt")}</V>
             </T>
             <V style={[e.metaValue,{color:h.purple,fontSize:12}]}>
               {E}
@@ -31,7 +31,7 @@ import{useState as oe}from"react";import{useTranslation as le}from"../i18n";impo
           <T style={e.metaRow}>
             <T style={e.metaLabelRow}>
               <Ie color={h.grayTextWeak}size={14}/>
-              <V style={e.metaLabel}>{R("network.methodHeader")}</V>
+              <V style={e.metaLabel}>{S("network.methodHeader")}</V>
             </T>
             <T style={[e.statusChip,{borderColor:`${h.brandPurple}40`,backgroundColor:`${h.brandPurple}14`}]}>
               <V style={[e.statusText,{color:h.purple,fontFamily:C.interBold}]}>
@@ -44,11 +44,11 @@ import{useState as oe}from"react";import{useTranslation as le}from"../i18n";impo
           <T style={e.metaRow}>
             <T style={e.metaLabelRow}>
               <Re color={h.grayTextWeak}/>
-              <V style={e.metaLabel}>{R("network.statusHeader")}</V>
+              <V style={e.metaLabel}>{S("network.statusHeader")}</V>
             </T>
             <T style={[e.statusChip,{borderColor:I?`${h.errorColor}40`:`${M}40`,backgroundColor:I?`${h.errorColor}15`:`${M}15`}]}>
               <V style={[e.statusText,{color:I?h.errorColor:M}]}>
-                {I?R("network.failedNetworkError"):String(B)}
+                {I?S("network.failedNetworkError"):String(W)}
               </V>
             </T>
           </T>
@@ -57,7 +57,7 @@ import{useState as oe}from"react";import{useTranslation as le}from"../i18n";impo
           <T style={e.metaRow}>
             <T style={e.metaLabelRow}>
               <Q color={h.grayTextWeak}size={14}/>
-              <V style={e.metaLabel}>{R("network.contentType")}</V>
+              <V style={e.metaLabel}>{S("network.contentType")}</V>
             </T>
             <V style={e.metaValue}>
               {_||"application/json"}
@@ -68,41 +68,41 @@ import{useState as oe}from"react";import{useTranslation as le}from"../i18n";impo
           <T style={e.metaRow}>
             <T style={e.metaLabelRow}>
               <Ce color={h.grayTextWeak}size={14}/>
-              <V style={e.metaLabel}>{R("network.durationHeader")}</V>
+              <V style={e.metaLabel}>{S("network.durationHeader")}</V>
             </T>
             <T style={e.metaValueRow}>
-              {S!=null&&!I&&<T style={[e.perfBadge,{backgroundColor:`${D(S)}15`,borderColor:`${D(S)}40`}]}>
-                  <V style={[e.perfBadgeText,{color:D(S)}]}>
-                    {S<J?R("network.perf.fast"):S<K?R("network.perf.moderate"):R("network.perf.slow")}
+              {R!=null&&!I&&<T style={[e.perfBadge,{backgroundColor:`${D(R)}15`,borderColor:`${D(R)}40`}]}>
+                  <V style={[e.perfBadgeText,{color:D(R)}]}>
+                    {R<J?S("network.perf.fast"):R<K?S("network.perf.moderate"):S("network.perf.slow")}
                   </V>
                 </T>}
               <V style={e.metaValue}>
-                {S!=null?`${S} ms`:"\u2014"}
+                {R!=null?`${R} ms`:"\u2014"}
               </V>
             </T>
           </T>
 
           
-          {S!=null&&!I&&<T style={{paddingVertical:8,gap:6}}>
+          {R!=null&&!I&&<T style={{paddingVertical:8,gap:6}}>
               <T style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center"}}>
                 <V style={{fontFamily:C.interBold,fontSize:11,color:h.primaryBlack}}>
-                  {R("network.timingWaterfall")}
+                  {S("network.timingWaterfall")}
                 </V>
-                <V style={{fontFamily:C.interMedium,fontSize:10.5,color:D(S)}}>
-                  {S<J?R("network.perf.fast"):S<K?R("network.perf.moderate"):R("network.perf.slow")}
+                <V style={{fontFamily:C.interMedium,fontSize:10.5,color:D(R)}}>
+                  {R<J?S("network.perf.fast"):R<K?S("network.perf.moderate"):S("network.perf.slow")}
                 </V>
               </T>
 
               <T style={{height:6,backgroundColor:h.grayBorderSecondary,borderRadius:3,overflow:"hidden"}}>
-                <T style={{height:"100%",width:`${Math.min(100,Math.max(8,S/1200*100))}%`,backgroundColor:D(S),borderRadius:3}}/>
+                <T style={{height:"100%",width:`${Math.min(100,Math.max(8,R/1200*100))}%`,backgroundColor:D(R),borderRadius:3}}/>
               </T>
 
               <T style={{flexDirection:"row",justifyContent:"space-between",alignItems:"center",marginTop:1}}>
                 <V style={{fontFamily:C.interRegular,fontSize:9.5,color:h.grayTextWeak}}>
                   0 ms
                 </V>
-                <V style={{fontFamily:C.interBold,fontSize:10,color:D(S)}}>
-                  {S} ms
+                <V style={{fontFamily:C.interBold,fontSize:10,color:D(R)}}>
+                  {R} ms
                 </V>
                 <V style={{fontFamily:C.interRegular,fontSize:9.5,color:h.grayTextWeak}}>
                   1,200+ ms
@@ -114,7 +114,7 @@ import{useState as oe}from"react";import{useTranslation as le}from"../i18n";impo
           <T style={e.metaRow}>
             <T style={e.metaLabelRow}>
               <Le color={h.grayTextWeak}/>
-              <V style={e.metaLabel}>{R("network.sizeHeader")}</V>
+              <V style={e.metaLabel}>{S("network.sizeHeader")}</V>
             </T>
             <V style={e.metaValue}>{P}</V>
           </T>
@@ -124,19 +124,19 @@ import{useState as oe}from"react";import{useTranslation as le}from"../i18n";impo
             <T style={{flexDirection:"row",justifyContent:"space-between",width:"100%",alignItems:"center"}}>
               <T style={e.metaLabelRow}>
                 <Q color={h.grayTextWeak}size={14}/>
-                <V style={e.metaLabel}>{R("network.fullUrl")}</V>
+                <V style={e.metaLabel}>{S("network.fullUrl")}</V>
               </T>
               
               <T style={{flexDirection:"row",alignItems:"center",gap:10}}>
                 {z&&z.length>50&&<U onPress={()=>X(L=>!L)}hitSlop={8}>
                     <V style={{fontFamily:C.interBold,fontSize:10.5,color:h.purple}}>
-                      {R(G?"network.showLess":"network.showMore")}
+                      {S(G?"network.showLess":"network.showMore")}
                     </V>
                   </U>}
                 
                 {z&&<U onPress={()=>be(z)}hitSlop={8}>
                     <V style={{fontFamily:C.interBold,fontSize:10.5,color:h.purple,textDecorationLine:"underline"}}>
-                      {R("network.open")}
+                      {S("network.open")}
                     </V>
                   </U>}
               </T>

package/dist/esm/components/ModuleErrorBoundary.js

@@ -1,33 +1,33 @@
-import{Component as I}from"react";import{StyleSheet as O,Text as T,View as C,TouchableOpacity as E,Platform as k}from"react-native";import{AppFonts as S}from"../styles/AppFonts";import{AppColors as e}from"../styles/AppColors";import{copyToClipboard as V}from"../helpers";import{WarningTriangleIcon as D,RefreshCcwIcon as B,CopyIcon as F}from"./NetworkIcons";import{handleInterceptedCrash as W}from"../customHooks/crashHandler";import{CrashType as M}from"../types/enums";export class ModuleErrorBoundary extends I{constructor(){super(...arguments),this.state={hasError:!1,error:null,copied:!1},this.handleRetry=()=>{this.setState({hasError:!1,error:null,copied:!1}),this.props.onRetry&&this.props.onRetry()},this.handleCopy=()=>{if(!this.state.error)return;const t=`[Module Error: ${this.props.moduleName||"Micro-Feature"}]
+import{Component as V}from"react";import{StyleSheet as D,Text as T,View as C,TouchableOpacity as I,Platform as B}from"react-native";import{AppFonts as S}from"../styles/AppFonts";import{AppColors as e}from"../styles/AppColors";import{copyToClipboard as F}from"../helpers";import{WarningTriangleIcon as M,RefreshCcwIcon as W,CopyIcon as A}from"./NetworkIcons";import{handleInterceptedCrash as v}from"../customHooks/crashHandler";import{CrashType as N}from"../types/enums";import{t as E}from"../i18n";export class ModuleErrorBoundary extends V{constructor(){super(...arguments),this.state={hasError:!1,error:null,copied:!1},this.handleRetry=()=>{this.setState({hasError:!1,error:null,copied:!1}),this.props.onRetry&&this.props.onRetry()},this.handleCopy=()=>{if(!this.state.error)return;const r=`[Module Error: ${this.props.moduleName||"Micro-Feature"}]
 Message: ${this.state.error.message}
-Stack: ${this.state.error.stack||"N/A"}`;V(t),this.setState({copied:!0}),setTimeout(()=>{this.setState({copied:!1})},2e3)}}static getDerivedStateFromError(t){return{hasError:!0,error:t}}componentDidCatch(t,R){try{W(t,t?.stack,!1,M.Js,R.componentStack||void 0)}catch{}this.props.onError&&this.props.onError(t,R)}render(){if(this.state.hasError&&this.state.error){const{fallback:t,moduleName:R="UI Module",containerStyle:z}=this.props;return typeof t=="function"?t(this.state.error,this.handleRetry):t||<C style={[r.card,z]}>
-          <C style={r.headerRow}>
-            <C style={r.titleRow}>
-              <D color={e.red600}size={16}/>
-              <T style={r.moduleName}numberOfLines={1}>
+Stack: ${this.state.error.stack||"N/A"}`;F(r),this.setState({copied:!0}),setTimeout(()=>{this.setState({copied:!1})},2e3)}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,R){try{v(r,r?.stack,!1,N.Js,R.componentStack||void 0)}catch{}this.props.onError&&this.props.onError(r,R)}render(){if(this.state.hasError&&this.state.error){const{fallback:r,moduleName:R="UI Module",containerStyle:O}=this.props;return typeof r=="function"?r(this.state.error,this.handleRetry):r||<C style={[t.card,O]}>
+          <C style={t.headerRow}>
+            <C style={t.titleRow}>
+              <M color={e.red600}size={16}/>
+              <T style={t.moduleName}numberOfLines={1}>
                 {R}
               </T>
             </C>
-            <C style={r.badge}>
-              <T style={r.badgeText}>FAULT ISOLATED</T>
+            <C style={t.badge}>
+              <T style={t.badgeText}>{E("errorBoundary.faultIsolated","FAULT ISOLATED")}</T>
             </C>
           </C>
 
-          <T style={r.message}numberOfLines={2}>
+          <T style={t.message}numberOfLines={2}>
             {this.state.error.message||"An unexpected rendering error occurred in this module."}
           </T>
 
-          <C style={r.actionsRow}>
-            <E style={r.retryButton}onPress={this.handleRetry}activeOpacity={.7}>
-              <B color={e.white}size={12}/>
-              <T style={r.retryText}>Retry Module</T>
-            </E>
+          <C style={t.actionsRow}>
+            <I style={t.retryButton}onPress={this.handleRetry}activeOpacity={.7}>
+              <W color={e.white}size={12}/>
+              <T style={t.retryText}>{E("errorBoundary.retryModule","Retry Module")}</T>
+            </I>
 
-            <E style={r.copyButton}onPress={this.handleCopy}activeOpacity={.7}>
-              <F color={e.slate600}size={12}/>
-              <T style={r.copyText}>
-                {this.state.copied?"Copied":"Copy Error"}
+            <I style={t.copyButton}onPress={this.handleCopy}activeOpacity={.7}>
+              <A color={e.slate600}size={12}/>
+              <T style={t.copyText}>
+                {this.state.copied?E("common.copied","Copied"):E("common.copy","Copy Error")}
               </T>
-            </E>
+            </I>
           </C>
-        </C>}return this.props.children}}export default ModuleErrorBoundary;const r=O.create({card:{backgroundColor:e.red50,borderColor:`${e.red500}33`,borderWidth:1.2,borderRadius:16,padding:14,marginVertical:6,gap:10,...k?.select?k.select({ios:{shadowColor:e.red600,shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:6},android:{elevation:2}}):{elevation:2}},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},titleRow:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},moduleName:{fontSize:12.5,fontWeight:"800",color:e.redErrorText,fontFamily:S.interBold,flexShrink:1},badge:{backgroundColor:e.red100,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${e.red500}4D`},badgeText:{fontSize:8.5,fontWeight:"800",color:e.rose700,letterSpacing:.4},message:{fontSize:11.5,color:e.redErrorText,lineHeight:16,fontFamily:S.interRegular},actionsRow:{flexDirection:"row",alignItems:"center",gap:8,marginTop:2},retryButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:e.red600,paddingVertical:7,paddingHorizontal:12,borderRadius:9},retryText:{fontSize:11,fontWeight:"700",color:e.white,fontFamily:S.interBold},copyButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,backgroundColor:e.graySurface,paddingVertical:7,paddingHorizontal:12,borderRadius:9,borderWidth:1,borderColor:e.grayBorderSecondary},copyText:{fontSize:11,fontWeight:"600",color:e.grayText,fontFamily:S.interMedium}});
+        </C>}return this.props.children}}export default ModuleErrorBoundary;const t=D.create({card:{backgroundColor:e.red50,borderColor:`${e.red500}33`,borderWidth:1.2,borderRadius:16,padding:14,marginVertical:6,gap:10,...B?.select?B.select({ios:{shadowColor:e.red600,shadowOffset:{width:0,height:2},shadowOpacity:.06,shadowRadius:6},android:{elevation:2}}):{elevation:2}},headerRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6},titleRow:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},moduleName:{fontSize:12.5,fontWeight:"800",color:e.redErrorText,fontFamily:S.interBold,flexShrink:1},badge:{backgroundColor:e.red100,paddingHorizontal:6,paddingVertical:2,borderRadius:6,borderWidth:1,borderColor:`${e.red500}4D`},badgeText:{fontSize:8.5,fontWeight:"800",color:e.rose700,letterSpacing:.4},message:{fontSize:11.5,color:e.redErrorText,lineHeight:16,fontFamily:S.interRegular},actionsRow:{flexDirection:"row",alignItems:"center",gap:8,marginTop:2},retryButton:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,backgroundColor:e.red600,paddingVertical:7,paddingHorizontal:12,borderRadius:9},retryText:{fontSize:11,fontWeight:"700",color:e.white,fontFamily:S.interBold},copyButton:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:4,backgroundColor:e.graySurface,paddingVertical:7,paddingHorizontal:12,borderRadius:9,borderWidth:1,borderColor:e.grayBorderSecondary},copyText:{fontSize:11,fontWeight:"600",color:e.grayText,fontFamily:S.interMedium}});

package/dist/esm/components/NetworkIcons.d.ts

@@ -222,3 +222,10 @@ export declare const PixelateIcon: ({ color, size }: IconProps) => React.JSX.Ele
 export declare const HighlighterIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const ArrowRightIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const EyeCompareIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const BrightnessIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ContrastIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const SaturationIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const WarmthIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ExposureIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const VignetteIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const ArrowForwardIcon: ({ color, size }: IconProps) => React.JSX.Element;