react-native-inapp-inspector 2.5.1 → 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

@@ -158,6 +158,8 @@ export declare const FilmIcon: ({ color, size, }: IconProps) => React.JSX.Elemen
 export declare const ScreencastIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const ListIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const GridIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const GridlinesIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const CameraRollIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const MinimizeWindowIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const BookOpenIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const WrenchIcon: ({ color, size, }: IconProps) => React.JSX.Element;
@@ -210,3 +212,20 @@ export declare const UndoIcon: ({ color, size }: IconProps) => React.JSX.Element
 export declare const ResizeIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const AspectRatioIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const GripVerticalIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const SaveIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const RedoIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const MoreDotsIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const SunAdjustIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const FlaskAiIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const DownloadExportIcon: ({ color, size }: IconProps) => React.JSX.Element;
+export declare const PixelateIcon: ({ color, size }: IconProps) => React.JSX.Element;
+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;

package/dist/esm/components/NetworkIcons.js

@@ -1,4 +1,4 @@
-import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as V,Polyline as C,Rect as B}from"react-native-svg";import{AppColors as p}from"../styles/AppColors";export const EmptyRadarIcon=({color:e=p.purple,size:t=32})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as H,Polyline as C,Rect as B}from"react-native-svg";import{AppColors as p}from"../styles/AppColors";export const EmptyRadarIcon=({color:e=p.purple,size:t=32})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <L d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"stroke={e}strokeWidth="1.5"strokeLinecap="round"strokeLinejoin="round"/>
       <M cx="12"cy="11"r="3"stroke={e}strokeWidth="1.5"/>
       <L d="M12 14v3"stroke={e}strokeWidth="1.5"strokeLinecap="round"/>
@@ -80,8 +80,8 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as
           <L d="M4 6h4M4 12h7M4 18h10"stroke={e}strokeWidth="2"strokeLinecap="round"/>
           <L d="M18 18V6m0 0l-3 3m3-3l3 3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
         </>}
-    </W>,ChevronIcon=({color:e=p.grayTextWeak,size:t=14,direction:I="down"})=>{let m="M6 9l6 6 6-6";return I==="up"?m="M18 15l-6-6-6 6":I==="right"?m="M9 18l6-6-6-6":I==="left"&&(m="M15 18l-6-6 6-6"),<W width={t}height={t}viewBox="0 0 24 24"fill="none">
-      <L d={m}stroke={e}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+    </W>,ChevronIcon=({color:e=p.grayTextWeak,size:t=14,direction:I="down"})=>{let V="M6 9l6 6 6-6";return I==="up"?V="M18 15l-6-6-6 6":I==="right"?V="M9 18l6-6-6-6":I==="left"&&(V="M15 18l-6-6 6-6"),<W width={t}height={t}viewBox="0 0 24 24"fill="none">
+      <L d={V}stroke={e}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
     </W>},FilterIcon=({color:e=p.grayTextWeak,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
       <L d="M4 6h16M7 12h10M10 18h4"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     </W>,DownloadIcon=({color:e=p.primaryLight,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
@@ -500,6 +500,17 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as
     <B x="14"y="3"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
     <B x="14"y="14"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
     <B x="3"y="14"width="7"height="7"rx="1.5"stroke={e}strokeWidth="2"/>
+  </W>,GridlinesIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="3"width="18"height="18"rx="2"stroke={e}strokeWidth="1.8"/>
+    <S x1="9"y1="3"x2="9"y2="21"stroke={e}strokeWidth="1.4"strokeDasharray="3 2"/>
+    <S x1="15"y1="3"x2="15"y2="21"stroke={e}strokeWidth="1.4"strokeDasharray="3 2"/>
+    <S x1="3"y1="9"x2="21"y2="9"stroke={e}strokeWidth="1.4"strokeDasharray="3 2"/>
+    <S x1="3"y1="15"x2="21"y2="15"stroke={e}strokeWidth="1.4"strokeDasharray="3 2"/>
+  </W>,CameraRollIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="3"width="18"height="18"rx="3"stroke={e}strokeWidth="1.8"/>
+    <M cx="8.5"cy="8.5"r="1.8"fill={e}/>
+    <L d="M21 16l-5.5-5.5a1 1 0 0 0-1.4 0L4 20"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M14 14l2.5-2.5a1 1 0 0 1 1.4 0L21 14.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"strokeLinejoin="round"/>
   </W>,MinimizeWindowIcon=({color:e=p.white,size:t=14})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
     <L d="M4 14h6v6M20 10h-6V4M14 10l7-7M10 14l-7 7"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
   </W>,BookOpenIcon=({color:e=p.purple,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
@@ -603,7 +614,7 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as
     <S x1="14.47"y1="14.48"x2="20"y2="20"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <S x1="8.12"y1="8.12"x2="12"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
   </W>,VolumeXIcon=({color:e=p.white,size:t=18})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
-    <V points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <H points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <S x1="23"y1="9"x2="17"y2="15"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <S x1="17"y1="9"x2="23"y2="15"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
   </W>,MailIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
@@ -628,7 +639,7 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as
   </W>,ShapesIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
     <B x="3"y="3"width="8"height="8"rx="1.5"stroke={e}strokeWidth="2"/>
     <M cx="17.5"cy="17.5"r="4.5"stroke={e}strokeWidth="2"/>
-    <V points="18,3 22,11 14,11"stroke={e}strokeWidth="2"strokeLinejoin="round"/>
+    <H points="18,3 22,11 14,11"stroke={e}strokeWidth="2"strokeLinejoin="round"/>
   </W>,RectangleIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
     <B x="3"y="5"width="18"height="14"rx="2"stroke={e}strokeWidth="2"/>
   </W>,CircleIconOutline=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
@@ -670,4 +681,77 @@ import"react";import W,{Circle as M,Ellipse as T,Line as S,Path as L,Polygon as
     <M cx="15"cy="5"r="1.5"fill={e}/>
     <M cx="15"cy="12"r="1.5"fill={e}/>
     <M cx="15"cy="19"r="1.5"fill={e}/>
+  </W>,SaveIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <C points="17 21 17 13 7 13 7 21"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <C points="7 3 7 8 15 8"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,RedoIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M21 7v6h-6"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3L21 13"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,MoreDotsIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="2"fill={e}/>
+    <M cx="19"cy="12"r="2"fill={e}/>
+    <M cx="5"cy="12"r="2"fill={e}/>
+  </W>,SunAdjustIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="4"stroke={e}strokeWidth="2"/>
+    <S x1="12"y1="2"x2="12"y2="4"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="12"y1="20"x2="12"y2="22"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="4.22"y1="4.22"x2="5.64"y2="5.64"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="18.36"y1="18.36"x2="19.78"y2="19.78"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="2"y1="12"x2="4"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="20"y1="12"x2="22"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="4.22"y1="19.78"x2="5.64"y2="18.36"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="18.36"y1="5.64"x2="19.78"y2="4.22"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,FlaskAiIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M9 3h6M10 9h4M10 3v6l-4 8a2 2 0 0 0 1.8 3h8.4a2 2 0 0 0 1.8-3l-4-8V3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,DownloadExportIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <C points="7 10 12 15 17 10"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <S x1="12"y1="15"x2="12"y2="3"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,PixelateIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="3"width="7"height="7"rx="1"fill={e}opacity={.8}/>
+    <B x="14"y="3"width="7"height="7"rx="1"stroke={e}strokeWidth="1.5"/>
+    <B x="3"y="14"width="7"height="7"rx="1"stroke={e}strokeWidth="1.5"/>
+    <B x="14"y="14"width="7"height="7"rx="1"fill={e}opacity={.8}/>
+  </W>,HighlighterIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12 19l7-7 3 3-7 7-3-3z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M18 13l-1.5-7.5L2 2l3.5 14.5L13 18"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M2 22h8"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,ArrowRightIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <S x1="5"y1="12"x2="19"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <C points="12 5 19 12 12 19"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,EyeCompareIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <M cx="12"cy="12"r="3"stroke={e}strokeWidth="2"/>
+  </W>,BrightnessIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="4"stroke={e}strokeWidth="2"/>
+    <S x1="12"y1="1"x2="12"y2="3"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="12"y1="21"x2="12"y2="23"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="4.22"y1="4.22"x2="5.64"y2="5.64"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="18.36"y1="18.36"x2="19.78"y2="19.78"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="1"y1="12"x2="3"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="21"y1="12"x2="23"y2="12"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="4.22"y1="19.78"x2="5.64"y2="18.36"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+    <S x1="18.36"y1="5.64"x2="19.78"y2="4.22"stroke={e}strokeWidth="2"strokeLinecap="round"/>
+  </W>,ContrastIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <M cx="12"cy="12"r="9"stroke={e}strokeWidth="2"/>
+    <L d="M12 3a9 9 0 0 1 0 18z"fill={e}/>
+  </W>,SaturationIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+    <L d="M12 2.69v17.31a8 8 0 0 0 5.66-2.34"fill={e}opacity={.4}/>
+  </W>,WarmthIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M12 2c1 3.5 4 6 4 9a6 6 0 1 1-12 0c0-3 3-5.5 4-9 1 2 2 3 4 0z"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </W>,ExposureIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="3"y="3"width="18"height="18"rx="3"stroke={e}strokeWidth="2"/>
+    <S x1="3"y1="21"x2="21"y2="3"stroke={e}strokeWidth="2"/>
+    
+    <S x1="7.5"y1="5.5"x2="7.5"y2="9.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    <S x1="5.5"y1="7.5"x2="9.5"y2="7.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+    
+    <S x1="14.5"y1="16.5"x2="18.5"y2="16.5"stroke={e}strokeWidth="1.8"strokeLinecap="round"/>
+  </W>,VignetteIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <B x="2"y="4"width="20"height="16"rx="3"stroke={e}strokeWidth="2"/>
+    <T cx="12"cy="12"rx="6"ry="4.5"stroke={e}strokeWidth="1.8"strokeDasharray="2,2"/>
+  </W>,ArrowForwardIcon=({color:e=p.white,size:t=16})=><W width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <L d="M5 12h14M12 5l7 7-7 7"stroke={e}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
   </W>;

package/dist/esm/components/SourcePageCard.js

@@ -1,39 +1,39 @@
-import"react";import{View as V,Pressable as C,Text as S}from"react-native";import W,{Rect as O,Path as H}from"react-native-svg";import B from"./CopyButton";import R from"../customHooks/useAccordion";import{ChevronIcon as A}from"./NetworkIcons";import{AppColors as b}from"../styles/AppColors";import e from"../styles";const q=({routeInfo:P})=>{const f=R(!0),T=R(!1),j=P.params&&Object.keys(P.params).length>0;return<V style={e.sourcePageCard}>
-      <C onPress={f.toggleOpen}hitSlop={12}>
+import"react";import{View as V,Pressable as R,Text as S}from"react-native";import J,{Rect as B,Path as M}from"react-native-svg";import O from"./CopyButton";import A from"../customHooks/useAccordion";import{ChevronIcon as L}from"./NetworkIcons";import{useTranslation as N}from"../i18n";import{AppColors as b}from"../styles/AppColors";import e from"../styles";const K=({routeInfo:P})=>{const{t:C}=N(),f=A(!0),T=A(!1),W=P.params&&Object.keys(P.params).length>0;return<V style={e.sourcePageCard}>
+      <R onPress={f.toggleOpen}hitSlop={12}>
         <V style={e.sourcePageAccordionHeader}>
           <V style={e.sourcePageTop}>
             <V style={e.sourcePageIcon}>
-              <W width={14}height={14}viewBox="0 0 24 24"fill="none">
-                <O x="3"y="3"width="7"height="7"rx="1.5"stroke={b.purple}strokeWidth="2"/>
-                <O x="14"y="3"width="7"height="7"rx="1.5"stroke={b.purple}strokeWidth="2"/>
-                <O x="3"y="14"width="7"height="7"rx="1.5"stroke={b.purple}strokeWidth="2"/>
-                <H d="M14 17.5h7M17.5 14v7"stroke={b.purple}strokeWidth="2"strokeLinecap="round"/>
-              </W>
+              <J width={14}height={14}viewBox="0 0 24 24"fill="none">
+                <B x="3"y="3"width="7"height="7"rx="1.5"stroke={b.purple}strokeWidth="2"/>
+                <B x="14"y="3"width="7"height="7"rx="1.5"stroke={b.purple}strokeWidth="2"/>
+                <B x="3"y="14"width="7"height="7"rx="1.5"stroke={b.purple}strokeWidth="2"/>
+                <M d="M14 17.5h7M17.5 14v7"stroke={b.purple}strokeWidth="2"strokeLinecap="round"/>
+              </J>
             </V>
             <V style={{flex:1}}>
-              <S style={e.sourcePageLabel}>Source Page</S>
+              <S style={e.sourcePageLabel}>{C("errorBoundary.sourcePage","Source Page")}</S>
               <S style={e.sourcePageValue}numberOfLines={1}>
                 {P.path}
               </S>
             </V>
           </V>
           <V style={e.sourcePageHeaderRight}>
-            <B value={P.path}label="Source Path"/>
+            <O value={P.path}label="Source Path"/>
             <V style={e.iconSquareBtn}>
               <V style={f.chevronStyle}>
-                <A color={b.grayTextStrong}size={14}/>
+                <L color={b.grayTextStrong}size={14}/>
               </V>
             </V>
           </V>
         </V>
-      </C>
+      </R>
 
       {f.isOpen&&<V>
-          {j&&<V style={e.sourceParamsBox}>
-              <C onPress={T.toggleOpen}hitSlop={10}>
+          {W&&<V style={e.sourceParamsBox}>
+              <R onPress={T.toggleOpen}hitSlop={10}>
                 <V style={e.paramsAccordionHeader}>
                   <V style={e.paramsAccordionLeft}>
-                    <S style={e.sourceParamsLabel}>Parameters</S>
+                    <S style={e.sourceParamsLabel}>{C("errorBoundary.parameters","Parameters")}</S>
                     <V style={e.headerCountBadge}>
                       <S style={e.headerCountText}>
                         {Object.keys(P.params).length}
@@ -41,27 +41,27 @@ import"react";import{View as V,Pressable as C,Text as S}from"react-native";impor
                     </V>
                   </V>
                   <V style={e.paramsAccordionRight}>
-                    <B value={P.params}label="Parameters"/>
+                    <O value={P.params}label="Parameters"/>
                     <V style={e.iconSquareBtn}>
                       <V style={T.chevronStyle}>
-                        <A color={b.grayTextStrong}size={14}/>
+                        <L color={b.grayTextStrong}size={14}/>
                       </V>
                     </V>
                   </V>
                 </V>
-              </C>
+              </R>
 
               {T.isOpen&&<V style={e.paramsBody}>
-                  {Object.entries(P.params).map(([k,x],v,L)=><V key={k}style={[e.paramRow,v<L.length-1?e.paramRowBorder:null]}>
+                  {Object.entries(P.params).map(([k,x],H,q)=><V key={k}style={[e.paramRow,H<q.length-1?e.paramRowBorder:null]}>
                       <S style={e.paramKey}>{k}</S>
                       <V style={e.paramValueRow}>
                         <S selectable style={e.paramValue}>
                           {typeof x=="object"?JSON.stringify(x):String(x)}
                         </S>
-                        <B value={typeof x=="object"?JSON.stringify(x):String(x)}label={k}/>
+                        <O value={typeof x=="object"?JSON.stringify(x):String(x)}label={k}/>
                       </V>
                     </V>)}
                 </V>}
             </V>}
         </V>}
-    </V>};export default q;
+    </V>};export default K;

package/dist/esm/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.5.1";
+export declare const LIB_VERSION = "2.5.3";

package/dist/esm/constants/version.js

@@ -1 +1 @@
-export const LIB_VERSION="2.5.1";
+export const LIB_VERSION="2.5.3";