react-native-inapp-inspector 2.4.1 → 2.4.2

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

@@ -1,11 +1,11 @@
-import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}from"react";import{View as T,Text as C,ScrollView as Te,StyleSheet as Pe,NativeModules as He,TouchableOpacity as G,ActivityIndicator as Ce,Animated as Z}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import $e from"../QRCodeView";import Se from"../TouchableScale";import{showToast as J}from"../../helpers/toast";import{triggerNativeHaptic as P}from"../../native/NativeInspector";import{InfoCircleIcon as Ne,CheckIcon as Be,BoltIcon as Re,CircleXIcon as Ie,SparkleIcon as Ee,AndroidIcon as Ge,RepeatIcon as Ue,WrenchIcon as _e}from"../NetworkIcons";import Ke,{Path as Qe}from"react-native-svg";const Xe=({color:I=e.purple,size:N=13})=><Ke width={N}height={N}viewBox="0 0 24 24"fill="none">
-    <Qe d="M4 17l6-6-6-6M12 19h8"stroke={I}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </Ke>;export const DebuggingTab=()=>{const I=We(()=>{const k=He.SourceCode?.scriptURL||"";let V="localhost",S=8081;try{if(k.includes("://")){const v=k.split("://")[1].split("/")[0];if(v.includes(":")){const A=v.split(":");V=A[0];const W=parseInt(A[1],10);isNaN(W)||(S=W)}else V=v}}catch{}return{host:V,port:S,scriptURL:k}},[]),[N,Ve]=M(()=>I.host&&I.host!=="localhost"&&I.host!=="127.0.0.1"&&I.host!=="10.0.2.2"?I.host:"192.168.1.2"),[H,ze]=M(I.port||8083),[De,Y]=M("app-debug.apk"),[q,ee]=M(null),[F,oe]=M("assembleRelease"),[L,ve]=M(!0),[R,U]=M({status:"idle",scheme:"assembleRelease",clean:!0,progress:0,currentTask:"",error:null,apkName:null,apkSize:null}),D=X(null),K=X(new Z.Value(0)).current,[Q,Ae]=M(!0),te=X(null);_(()=>{Z.timing(K,{toValue:Math.max(0,Math.min(100,R.progress)),duration:350,useNativeDriver:!1}).start()},[R.progress,K]),_(()=>{R.logs&&R.logs.length>0&&setTimeout(()=>{te.current?.scrollToEnd({animated:!0})},50)},[R.logs]);const E=re(async()=>{const k=Array.from(new Set([I.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([I.port,8083,8081,8082].filter(Boolean)));for(const S of k)for(const O of V)try{const v=new AbortController,A=setTimeout(()=>v.abort(),1200),W=await fetch(`http://${S}:${O}/__inapp_inspector/apk-info`,{signal:v.signal});if(clearTimeout(A),W.ok){const z=await W.json();z.hostIp&&z.hostIp!=="127.0.0.1"&&z.hostIp!=="localhost"&&z.hostIp!=="10.0.2.2"&&Ve(z.hostIp),z.port&&ze(z.port),z.apkName&&Y(z.apkName),z.apkSize&&ee((z.apkSize/(1024*1024)).toFixed(1));return}}catch{}},[I.host,I.port]);_(()=>{E()},[E]),_(()=>()=>{D.current&&clearInterval(D.current)},[]);const Fe=re(()=>{D.current&&clearInterval(D.current);const k=I.host||"10.0.2.2";D.current=setInterval(async()=>{try{const V=await fetch(`http://${k}:${H}/__inapp_inspector/build-status`);if(V.ok){const S=await V.json();U(S),S.status==="completed"?(D.current&&clearInterval(D.current),P("success"),J("\u2713 APK Build Generated Successfully!"),S.apkSize&&ee((S.apkSize/(1024*1024)).toFixed(1)),S.apkName&&Y(S.apkName),E()):S.status==="failed"&&(D.current&&clearInterval(D.current),P("error"),J("\u2715 Build Failed: "+(S.error||"Gradle error")))}}catch{}},1e3)},[I.host,H,E]),Oe=async()=>{P("medium"),U({status:"running",scheme:F,clean:L,progress:5,currentTask:L?"Cleaning build cache...":"Initializing build...",error:null,apkName:null,apkSize:null});const k=Array.from(new Set([I.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([H,8083,8081,8082].filter(Boolean)));let S=!1;for(const O of k)for(const v of V)try{const A=new AbortController,W=setTimeout(()=>A.abort(),2e3),z=await fetch(`http://${O}:${v}/__inapp_inspector/build-apk?scheme=${F}&clean=${L}`,{signal:A.signal});if(clearTimeout(W),z.ok){S=!0,Fe();return}}catch{}S||U(O=>({...O,status:"failed",error:"Cannot reach build server. Ensure npm start or npm run serve-apk is running on host."}))},Me=async()=>{P("warning"),D.current&&clearInterval(D.current);const k=Array.from(new Set([I.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([H,8083,8081,8082].filter(Boolean)));for(const S of k)for(const O of V)try{const v=new AbortController,A=setTimeout(()=>v.abort(),1500);await fetch(`http://${S}:${O}/__inapp_inspector/stop-build`,{signal:v.signal}),clearTimeout(A)}catch{}U(S=>({...S,status:"idle",currentTask:"Build cancelled by user",logs:[...S.logs||[],"\u{1F6D1} Build cancelled by user."]})),J("Build cancelled")},Le=`http://${N}:${H}/${De.replace(/^\/+/,"")}`,$=R.status==="running";return<Te style={o.scrollArea}contentContainerStyle={o.scrollContent}showsVerticalScrollIndicator={!1}>
+import{useState as M,useEffect as _,useMemo as We,useCallback as ie,useRef as X}from"react";import{View as T,Text as C,ScrollView as Te,StyleSheet as Pe,NativeModules as He,TouchableOpacity as G,ActivityIndicator as Ce,Animated as Z}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import{useTranslation as $e}from"../../i18n";import Ne from"../QRCodeView";import Se from"../TouchableScale";import{showToast as J}from"../../helpers/toast";import{triggerNativeHaptic as H}from"../../native/NativeInspector";import{InfoCircleIcon as Ee,CheckIcon as Be,BoltIcon as Re,CircleXIcon as Ie,SparkleIcon as Ge,AndroidIcon as Ue,RepeatIcon as _e,WrenchIcon as Ke}from"../NetworkIcons";import Qe,{Path as Xe}from"react-native-svg";const Ze=({color:L=e.purple,size:R=13})=><Qe width={R}height={R}viewBox="0 0 24 24"fill="none">
+    <Xe d="M4 17l6-6-6-6M12 19h8"stroke={L}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
+  </Qe>;export const DebuggingTab=()=>{const{t:L}=$e(),R=We(()=>{const k=He.SourceCode?.scriptURL||"";let V="localhost",S=8081;try{if(k.includes("://")){const v=k.split("://")[1].split("/")[0];if(v.includes(":")){const A=v.split(":");V=A[0];const P=parseInt(A[1],10);isNaN(P)||(S=P)}else V=v}}catch{}return{host:V,port:S,scriptURL:k}},[]),[Y,Ve]=M(()=>R.host&&R.host!=="localhost"&&R.host!=="127.0.0.1"&&R.host!=="10.0.2.2"?R.host:"192.168.1.2"),[$,ze]=M(R.port||8083),[De,ee]=M("app-debug.apk"),[q,oe]=M(null),[F,te]=M("assembleRelease"),[W,ve]=M(!0),[I,U]=M({status:"idle",scheme:"assembleRelease",clean:!0,progress:0,currentTask:"",error:null,apkName:null,apkSize:null}),D=X(null),K=X(new Z.Value(0)).current,[Q,Ae]=M(!0),re=X(null);_(()=>{Z.timing(K,{toValue:Math.max(0,Math.min(100,I.progress)),duration:350,useNativeDriver:!1}).start()},[I.progress,K]),_(()=>{I.logs&&I.logs.length>0&&setTimeout(()=>{re.current?.scrollToEnd({animated:!0})},50)},[I.logs]);const E=ie(async()=>{const k=Array.from(new Set([R.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([R.port,8083,8081,8082].filter(Boolean)));for(const S of k)for(const O of V)try{const v=new AbortController,A=setTimeout(()=>v.abort(),1200),P=await fetch(`http://${S}:${O}/__inapp_inspector/apk-info`,{signal:v.signal});if(clearTimeout(A),P.ok){const z=await P.json();z.hostIp&&z.hostIp!=="127.0.0.1"&&z.hostIp!=="localhost"&&z.hostIp!=="10.0.2.2"&&Ve(z.hostIp),z.port&&ze(z.port),z.apkName&&ee(z.apkName),z.apkSize&&oe((z.apkSize/(1024*1024)).toFixed(1));return}}catch{}},[R.host,R.port]);_(()=>{E()},[E]),_(()=>()=>{D.current&&clearInterval(D.current)},[]);const Fe=ie(()=>{D.current&&clearInterval(D.current);const k=R.host||"10.0.2.2";D.current=setInterval(async()=>{try{const V=await fetch(`http://${k}:${$}/__inapp_inspector/build-status`);if(V.ok){const S=await V.json();U(S),S.status==="completed"?(D.current&&clearInterval(D.current),H("success"),J(L("debugging.buildSuccess","APK Build Generated Successfully!")),S.apkSize&&oe((S.apkSize/(1024*1024)).toFixed(1)),S.apkName&&ee(S.apkName),E()):S.status==="failed"&&(D.current&&clearInterval(D.current),H("error"),J(L("debugging.buildFailed",{error:S.error||"Gradle error"})))}}catch{}},1e3)},[R.host,$,E]),Oe=async()=>{H("medium"),U({status:"running",scheme:F,clean:W,progress:5,currentTask:W?"Cleaning build cache...":"Initializing build...",error:null,apkName:null,apkSize:null});const k=Array.from(new Set([R.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([$,8083,8081,8082].filter(Boolean)));let S=!1;for(const O of k)for(const v of V)try{const A=new AbortController,P=setTimeout(()=>A.abort(),2e3),z=await fetch(`http://${O}:${v}/__inapp_inspector/build-apk?scheme=${F}&clean=${W}`,{signal:A.signal});if(clearTimeout(P),z.ok){S=!0,Fe();return}}catch{}S||U(O=>({...O,status:"failed",error:"Cannot reach build server. Ensure npm start or npm run serve-apk is running on host."}))},Me=async()=>{H("warning"),D.current&&clearInterval(D.current);const k=Array.from(new Set([R.host,"10.0.2.2","localhost","127.0.0.1"].filter(Boolean))),V=Array.from(new Set([$,8083,8081,8082].filter(Boolean)));for(const S of k)for(const O of V)try{const v=new AbortController,A=setTimeout(()=>v.abort(),1500);await fetch(`http://${S}:${O}/__inapp_inspector/stop-build`,{signal:v.signal}),clearTimeout(A)}catch{}U(S=>({...S,status:"idle",currentTask:L("debugging.buildCancelled","Build cancelled by user"),logs:[...S.logs||[],`[Build] ${L("debugging.buildCancelled","Build cancelled by user")}.`]})),J(L("debugging.buildCancelled","Build cancelled"))},Le=`http://${Y}:${$}/${De.replace(/^\/+/,"")}`,N=I.status==="running";return<Te style={o.scrollArea}contentContainerStyle={o.scrollContent}showsVerticalScrollIndicator={!1}>
       
       <T style={o.heroCard}>
         <T style={o.heroHeader}>
           <T style={o.heroIconWrap}>
-            <Ge size={20}color={e.white}/>
+            <Ue size={20}color={e.white}/>
           </T>
           <T style={{flex:1,minWidth:0}}>
             <C style={o.heroTitle}numberOfLines={1}>
@@ -26,13 +26,13 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
           <T style={o.heroMetricItem}>
             <C style={o.heroMetricLabel}>HOST IP</C>
             <C style={o.heroMetricValue}numberOfLines={1}>
-              {N}
+              {Y}
             </C>
           </T>
           <T style={o.heroMetricDivider}/>
           <T style={o.heroMetricItem}>
             <C style={o.heroMetricLabel}>PORT</C>
-            <C style={o.heroMetricValue}>{H}</C>
+            <C style={o.heroMetricValue}>{$}</C>
           </T>
           <T style={o.heroMetricDivider}/>
           <T style={o.heroMetricItem}>
@@ -56,7 +56,7 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
         <T style={o.sectionHeaderRow}>
           <C style={o.sectionTitle}>QR CODE & DIRECT DOWNLOAD</C>
           <G activeOpacity={.7}onPress={E}style={o.refreshBtn}>
-            <Ue size={12}color={e.purple}/>
+            <_e size={12}color={e.purple}/>
             <C style={o.refreshBtnText}>Refresh</C>
           </G>
         </T>
@@ -64,7 +64,7 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
         
         <T style={o.qrCenteredWrapper}>
           <T style={o.qrInnerFrame}>
-            <$e value={Le}size={235}color={e.primaryBlack}backgroundColor={e.white}/>
+            <Ne value={Le}size={235}color={e.primaryBlack}backgroundColor={e.white}/>
           </T>
         </T>
       </T>
@@ -76,7 +76,7 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
             <Re size={13}color={e.purple}/>
             <C style={o.sectionTitle}>BUILD GENERATOR (GRADLE)</C>
           </T>
-          {R.status==="completed"&&<T style={o.completedBadge}>
+          {I.status==="completed"&&<T style={o.completedBadge}>
               <Be size={10}color={e.emerald500}/>
               <C style={o.completedBadgeText}>100% Ready</C>
             </T>}
@@ -84,7 +84,7 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
 
         
         <T style={o.subTabStrip}>
-          <G disabled={$}activeOpacity={.7}onPress={()=>{P("light"),oe("assembleRelease")}}style={[o.subTabItem,F==="assembleRelease"&&o.subTabItemActive]}>
+          <G disabled={N}activeOpacity={.7}onPress={()=>{H("light"),te("assembleRelease")}}style={[o.subTabItem,F==="assembleRelease"&&o.subTabItemActive]}>
             <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
               <Re size={12}color={F==="assembleRelease"?e.white:e.grayText}/>
               <C style={[o.subTabText,F==="assembleRelease"&&o.subTabTextActive]}>
@@ -93,9 +93,9 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
             </T>
           </G>
 
-          <G disabled={$}activeOpacity={.7}onPress={()=>{P("light"),oe("assembleDebug")}}style={[o.subTabItem,F==="assembleDebug"&&o.subTabItemActive]}>
+          <G disabled={N}activeOpacity={.7}onPress={()=>{H("light"),te("assembleDebug")}}style={[o.subTabItem,F==="assembleDebug"&&o.subTabItemActive]}>
             <T style={{flexDirection:"row",alignItems:"center",gap:5}}>
-              <_e size={12}color={F==="assembleDebug"?e.white:e.grayText}/>
+              <Ke size={12}color={F==="assembleDebug"?e.white:e.grayText}/>
               <C style={[o.subTabText,F==="assembleDebug"&&o.subTabTextActive]}>
                 Debug (assembleDebug)
               </C>
@@ -104,9 +104,9 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
         </T>
 
         
-        <G disabled={$}activeOpacity={.7}onPress={()=>{P("light"),ve(!L)}}style={o.cleanRow}>
-          <T style={[o.checkboxBox,L&&o.checkboxBoxActive]}>
-            {L&&<Be size={11}color={e.white}/>}
+        <G disabled={N}activeOpacity={.7}onPress={()=>{H("light"),ve(!W)}}style={o.cleanRow}>
+          <T style={[o.checkboxBox,W&&o.checkboxBoxActive]}>
+            {W&&<Be size={11}color={e.white}/>}
           </T>
           <C style={o.cleanLabel}>
             Clean build cache <C style={o.cleanCode}>(./gradlew clean)</C>
@@ -114,16 +114,16 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
         </G>
 
         
-        {$&&<T style={o.progressContainer}>
+        {N&&<T style={o.progressContainer}>
             <T style={o.progressTopRow}>
               <T style={o.progressTaskGroup}>
                 <Ce size="small"color={e.purple}/>
                 <C style={o.progressTaskText}numberOfLines={1}>
-                  {R.currentTask||"Executing Gradle tasks..."}
+                  {I.currentTask||"Executing Gradle tasks..."}
                 </C>
               </T>
               <C style={o.progressPercentageText}>
-                {R.progress}%
+                {I.progress}%
               </C>
             </T>
 
@@ -134,18 +134,18 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
           </T>}
 
         
-        {R.status==="failed"&&<T style={o.errorContainer}>
+        {I.status==="failed"&&<T style={o.errorContainer}>
             <Ie size={13}color={e.errorColor}/>
             <C style={o.errorText}numberOfLines={2}>
-              {R.error||"Build execution failed."}
+              {I.error||"Build execution failed."}
             </C>
           </T>}
 
         
-        {(R.logs&&R.logs.length>0||$)&&<T style={o.consoleContainer}>
+        {(I.logs&&I.logs.length>0||N)&&<T style={o.consoleContainer}>
             <T style={o.consoleHeaderRow}>
               <T style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                <Xe color={e.sky400}size={12}/>
+                <Ze color={e.sky400}size={12}/>
                 <C style={o.consoleHeaderTitle}>GRADLE VERBOSE OUTPUT</C>
               </T>
               <G activeOpacity={.7}onPress={()=>Ae(!Q)}style={o.consoleToggleBtn}>
@@ -155,8 +155,8 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
               </G>
             </T>
 
-            {Q&&<Te ref={te}style={o.consoleLogBox}contentContainerStyle={o.consoleLogContent}nestedScrollEnabled showsVerticalScrollIndicator>
-                {R.logs&&R.logs.length>0?R.logs.map((k,V)=>{let S=e.slate400;return k.startsWith("> Task :")?S=e.sky400:k.includes("BUILD SUCCESSFUL")?S=e.buildSuccessGreen:k.includes("FAILURE")||k.includes("error:")?S=e.buildFailureRed:k.includes("UP-TO-DATE")&&(S=e.purple400),<C key={V}style={[o.consoleLogLine,{color:S}]}>
+            {Q&&<Te ref={re}style={o.consoleLogBox}contentContainerStyle={o.consoleLogContent}nestedScrollEnabled showsVerticalScrollIndicator>
+                {I.logs&&I.logs.length>0?I.logs.map((k,V)=>{let S=e.slate400;return k.startsWith("> Task :")?S=e.sky400:k.includes("BUILD SUCCESSFUL")?S=e.buildSuccessGreen:k.includes("FAILURE")||k.includes("error:")?S=e.buildFailureRed:k.includes("UP-TO-DATE")&&(S=e.purple400),<C key={V}style={[o.consoleLogLine,{color:S}]}>
                         {k}
                       </C>}):<C style={o.consoleLogPlaceholder}>
                     Waiting for Gradle daemon output...
@@ -165,11 +165,11 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
           </T>}
 
         
-        {$?<T style={o.buildingActionsRow}>
+        {N?<T style={o.buildingActionsRow}>
             <T style={o.buildingStatusPill}>
               <Ce size="small"color={e.purple}/>
               <C style={o.buildingStatusPillText}numberOfLines={1}>
-                Building ({R.progress}%)
+                Building ({I.progress}%)
               </C>
             </T>
 
@@ -179,9 +179,9 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
             </Se>
           </T>:<Se onPress={Oe}style={o.generateBtn}>
             <T style={o.ctaContentRow}>
-              <Ee size={14}color={e.white}/>
+              <Ge size={14}color={e.white}/>
               <C style={o.generateBtnText}>
-                {L?"Clean & Generate Build":"Generate Build"}
+                {W?"Clean & Generate Build":"Generate Build"}
               </C>
             </T>
           </Se>}
@@ -189,7 +189,7 @@ import{useState as M,useEffect as _,useMemo as We,useCallback as re,useRef as X}
 
       
       <T style={o.footerNoteRow}>
-        <Ne size={13}color={e.grayTextWeak}/>
+        <Ee size={13}color={e.grayTextWeak}/>
         <C style={o.footerNoteText}>
           Ensure both Android devices are connected to the same Wi-Fi network.
         </C>

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

@@ -1,84 +1,76 @@
-import{useCallback as W,useEffect as H,useRef as M,useState as k}from"react";import{Animated as v,PanResponder as le,Platform as X,StyleSheet as ce,Text as A,TouchableOpacity as Se,useWindowDimensions as xe,View as S}from"react-native";import _ from"react-native-linear-gradient";import{useInspector as Re}from"./InspectorContext";import $ from"../TouchableScale";import Ce from"../AppHeaderLogo";import Te from"../BrandCircleIcon";import{AndroidIcon as Ie,AppleIcon as Ve,CameraIcon as Pe,CloseWhite as Be,MaximizeIcon as Me,NpmIcon as Ae,VideoCameraIcon as $e}from"../NetworkIcons";import{ScreenCapture as z}from"../../capture";import{triggerNativeHaptic as x}from"../../native/NativeInspector";import{showToast as C}from"../../helpers/toast";import{getAppName as Ee,getAppVersionAndBuild as Le}from"../../helpers";import{LIB_VERSION as Oe}from"../../constants";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as G}from"../../styles/AppFonts";import D from"../../styles";import{useTranslation as We}from"../../i18n";import{MediaPreviewModal as De}from"./MediaPreviewModal";const Fe=()=>{const{setVisible:P,isMinimized:Y,setIsMinimized:E,appIcon:J,fabPan:K,fabPanResponder:Q,fabDraggedRef:U,pulseAnim:Z,fabShineAnim:N,refreshMediaCount:T}=Re(),{width:ee}=xe(),{t:o}=We(),[te]=k(()=>Le().formatted),[a,L]=k(!1),[re,F]=k(0),I=M(null),[j,B]=k(null),n=M(new v.ValueXY({x:0,y:0})).current,O=M({x:0,y:0});H(()=>{const e=n.x.addListener(V=>O.current.x=V.value),r=n.y.addListener(V=>O.current.y=V.value);return()=>{n.x.removeListener(e),n.y.removeListener(r)}},[n]);const R=M(!1),ie=M(le.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,r)=>Math.abs(r.dx)>4||Math.abs(r.dy)>4,onPanResponderGrant:()=>{R.current=!0,n.setOffset({x:O.current.x,y:O.current.y}),n.setValue({x:0,y:0})},onPanResponderMove:v.event([null,{dx:n.x,dy:n.y}],{useNativeDriver:!1}),onPanResponderRelease:()=>{n.flattenOffset(),setTimeout(()=>{R.current=!1},50)},onPanResponderTerminate:()=>{n.flattenOffset(),R.current=!1}})).current;H(()=>{z.isRecording().then(e=>{L(!!e)}).catch(()=>{})},[]),H(()=>(a?(F(0),I.current=setInterval(()=>{F(e=>e+1)},1e3)):(I.current&&(clearInterval(I.current),I.current=null),F(0)),()=>{I.current&&clearInterval(I.current)}),[a]);const oe=W(async()=>{if(!R.current)try{x("light");const e=await z.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){x("success");const r={id:`screenshot_${e.timestamp}.png`,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`screenshot_${e.timestamp}.png`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};B(r),T?.().catch(()=>{}),C(o("header.screenshotCaptured","Screenshot captured"))}else C(o("header.screenshotFailed","Failed to capture screenshot"))}catch{C(o("header.screenshotError","Error capturing screenshot"))}},[T,o]),ne=W(async()=>{if(!R.current)try{if(a){x("medium");const e=await z.stopRecording();if(L(!1),e){x("success");const r={id:`video_${e.timestamp}.${e.format}`,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`video_${e.timestamp}.${e.format}`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio};B(r),T?.().catch(()=>{}),C(o("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else x("medium"),await z.startRecording({fps:24,audioSource:"none"})?(L(!0),C(o("header.recordingStarted","Recording started"))):C(o("header.recordingStartFailed","Failed to start recording"))}catch{C(o("header.recordingError","Error during screen recording")),L(!1)}},[a,T,o]),q=W(()=>{R.current||(x("light"),E?.(!1),P(!0))},[E,P]),ae=W(()=>{R.current||(x("light"),E?.(!1),P(!1))},[E,P]),se=e=>{const r=Math.floor(e/60),V=e%60;return`${r}:${V<10?"0":""}${V}`};return<>
+import{useCallback as A,useEffect as E,useRef as I,useState as $}from"react";import{Animated as z,PanResponder as ce,Platform as q,StyleSheet as le,Text as P,TouchableOpacity as Se,useWindowDimensions as xe,View as S}from"react-native";import Re from"react-native-linear-gradient";import{useInspector as ve}from"./InspectorContext";import R from"../TouchableScale";import U from"../AppHeaderLogo";import{AndroidIcon as Ce,AppleIcon as Te,CameraIcon as Ie,CloseWhite as X,MaximizeIcon as Pe,NpmIcon as Be,VideoCameraIcon as Ve}from"../NetworkIcons";import{ScreenCapture as v}from"../../capture";import{triggerNativeHaptic as a}from"../../native/NativeInspector";import{showToast as c}from"../../helpers/toast";import{getAppName as Me,getAppVersionAndBuild as Ae}from"../../helpers";import{LIB_VERSION as $e}from"../../constants";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as O}from"../../styles/AppFonts";import W from"../../styles";import{useTranslation as De}from"../../i18n";import{MediaPreviewModal as Le}from"./MediaPreviewModal";const Ee=()=>{const{setVisible:C,isMinimized:Y,setIsMinimized:B,dismissInspector:J,appIcon:F,fabPan:K,fabPanResponder:Q,fabDraggedRef:Z,pulseAnim:ee,fabShineAnim:Oe,refreshMediaCount:d,captureFps:k,captureScale:H,captureBitrate:D,captureMaxDurationSeconds:_,captureAudioMode:G}=ve(),{width:We}=xe(),{t:o}=De(),[te]=$(()=>Ae().formatted),[s,V]=$(!1),[re,L]=$(0),p=I(null),[N,T]=$(null),n=I(new z.ValueXY({x:0,y:0})).current,M=I({x:0,y:0});E(()=>{const e=n.x.addListener(m=>M.current.x=m.value),t=n.y.addListener(m=>M.current.y=m.value);return()=>{n.x.removeListener(e),n.y.removeListener(t)}},[n]);const l=I(!1),ie=I(ce.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,t)=>Math.abs(t.dx)>4||Math.abs(t.dy)>4,onPanResponderGrant:()=>{l.current=!0,n.setOffset({x:M.current.x,y:M.current.y}),n.setValue({x:0,y:0})},onPanResponderMove:z.event([null,{dx:n.x,dy:n.y}],{useNativeDriver:!1}),onPanResponderRelease:()=>{n.flattenOffset(),setTimeout(()=>{l.current=!1},50)},onPanResponderTerminate:()=>{n.flattenOffset(),l.current=!1}})).current;E(()=>{v.isRecording().then(e=>{V(!!e)}).catch(()=>{})},[]),E(()=>(s?(L(0),p.current=setInterval(()=>{L(e=>e+1)},1e3)):(p.current&&(clearInterval(p.current),p.current=null),L(0)),()=>{p.current&&clearInterval(p.current)}),[s]);const oe=A(async()=>{if(!l.current)try{a("light");const e=await v.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){a("success");const t={id:`screenshot_${e.timestamp}.png`,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`screenshot_${e.timestamp}.png`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};T(t),d?.().catch(()=>{}),c(o("header.screenshotCaptured","Screenshot captured"))}else c(o("header.screenshotFailed","Failed to capture screenshot"))}catch{c(o("header.screenshotError","Error capturing screenshot"))}},[d,o]),ne=A(async()=>{if(!l.current)try{if(s){a("medium");const e=await v.stopRecording();if(V(!1),e){a("success");const t={id:`video_${e.timestamp}.${e.format}`,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`video_${e.timestamp}.${e.format}`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio,thumbnailUri:e.thumbnailUri};T(t),d?.().catch(()=>{}),c(o("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else a("medium"),await v.startRecording({fps:k,scale:H,audioSource:G,bitrate:D>0?D:void 0,maxDurationSeconds:_})?(V(!0),c(o("header.recordingStarted","Recording started"))):c(o("header.recordingStartFailed","Failed to start recording"))}catch{c(o("header.recordingError","Error during screen recording")),V(!1)}},[s,k,H,D,_,G,d,o]),j=A(()=>{l.current||(a("light"),B?.(!1),C(!0))},[B,C]),ae=A(()=>{l.current||(a("light"),B?.(!1),C(!1))},[B,C]),se=e=>{const t=Math.floor(e/60),m=e%60;return`${t}:${m<10?"0":""}${m}`};return<>
       
-      {Y?<v.View style={[t.playerContainer,{transform:n.getTranslateTransform()}]}{...ie.panHandlers}>
+      {Y?<z.View style={[r.playerContainer,{transform:n.getTranslateTransform()}]}{...ie.panHandlers}>
           
-          <_ colors={[i.indigo600,i.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.gradientBg}pointerEvents="none"/>
+          <Re colors={[i.indigo600,i.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={r.gradientBg}pointerEvents="none"/>
 
           
-          <S pointerEvents="none"style={t.playerShineClip}>
-            <v.View style={[t.playerShineStreak,{transform:[{translateX:N.interpolate({inputRange:[0,1],outputRange:[-80,ee+80]})},{rotate:"28deg"}]}]}>
-              <_ colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0)"]}locations={[0,.22,.44,.5,.56,.78,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
-            </v.View>
-          </S>
-
-          
-          <Se activeOpacity={.75}onPress={q}style={t.brandSection}accessibilityRole="button"accessibilityLabel={o("mediaGallery.expand","Expand Inspector")}>
-            <Ce size={36}customIcon={J}/>
-            <S style={t.titleWrapper}>
-              <A style={t.appTitle}numberOfLines={1}>
-                {Ee()}
-              </A>
-              <S style={t.versionRow}>
+          <Se activeOpacity={.75}onPress={j}style={r.brandSection}accessibilityRole="button"accessibilityLabel={o("mediaGallery.expand","Expand Inspector")}>
+            <U size={36}customIcon={F}shape="circle"/>
+            <S style={r.titleWrapper}>
+              <P style={r.appTitle}numberOfLines={1}>
+                {Me()}
+              </P>
+              <S style={r.versionRow}>
                 
-                <S style={t.versionChip}>
-                  {X.OS==="ios"?<Ve color={`${i.white}E6`}size={9}/>:<Ie color={`${i.white}E6`}size={9}/>}
-                  <A style={t.versionChipText}numberOfLines={1}>
+                <S style={r.versionChip}>
+                  {q.OS==="ios"?<Te color={`${i.white}E6`}size={9}/>:<Ce color={`${i.white}E6`}size={9}/>}
+                  <P style={r.versionChipText}numberOfLines={1}>
                     {te}
-                  </A>
+                  </P>
                 </S>
 
                 
-                <S style={t.versionChip}>
-                  <Ae size={9}color={i.npmRedLight}/>
-                  <A style={t.versionChipText}numberOfLines={1}>
-                    v{Oe}
-                  </A>
+                <S style={r.versionChip}>
+                  <Be size={9}color={i.npmRedLight}/>
+                  <P style={r.versionChipText}numberOfLines={1}>
+                    v{$e}
+                  </P>
                 </S>
               </S>
             </S>
           </Se>
 
           
-          <S style={t.actionsRow}>
+          <S style={r.actionsRow}>
             
-            <$ onPress={oe}hitSlop={{top:6,bottom:6,left:4,right:4}}style={t.actionBtn}>
-              <Pe size={12}color={i.white}/>
-              <A style={t.actionText}>
+            <R onPress={oe}hitSlop={{top:6,bottom:6,left:4,right:4}}style={r.actionBtn}>
+              <Ie size={12}color={i.white}/>
+              <P style={r.actionText}>
                 {o("header.photo","Photo")}
-              </A>
-            </$>
+              </P>
+            </R>
 
             
-            <$ onPress={ne}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[t.actionBtn,a&&t.recordingBtnActive]}>
-              {a?<S style={t.recordingDot}/>:<$e size={12}color={i.white}/>}
-              <A style={[t.actionText,a&&{color:i.red300}]}>
-                {a?`${o("header.rec","REC")} ${se(re)}`:o("header.record","Record")}
-              </A>
-            </$>
+            <R onPress={ne}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[r.actionBtn,s&&r.recordingBtnActive]}>
+              {s?<S style={r.recordingDot}/>:<Ve size={12}color={i.white}/>}
+              <P style={[r.actionText,s&&{color:i.red300}]}>
+                {s?`${o("header.rec","REC")} ${se(re)}`:o("header.record","Record")}
+              </P>
+            </R>
 
             
-            <$ onPress={q}hitSlop={{top:6,bottom:6,left:4,right:4}}accessibilityRole="button"accessibilityLabel={o("common.expand","Expand")}style={t.actionBtnSquare}>
-              <Me size={12}color={i.white}/>
-            </$>
+            <R onPress={j}hitSlop={{top:6,bottom:6,left:4,right:4}}accessibilityRole="button"accessibilityLabel={o("common.expand","Expand")}style={r.actionBtnSquare}>
+              <Pe size={12}color={i.white}/>
+            </R>
 
             
-            <$ onPress={ae}hitSlop={{top:6,bottom:6,left:4,right:6}}accessibilityRole="button"accessibilityLabel={o("common.close","Close")}style={t.actionBtnSquare}>
-              <Be size={10}color={i.white}/>
-            </$>
+            <R onPress={ae}hitSlop={{top:6,bottom:6,left:4,right:6}}accessibilityRole="button"accessibilityLabel={o("common.close","Close")}style={r.actionBtnSquare}>
+              <X size={10}color={i.white}/>
+            </R>
           </S>
-        </v.View>:<v.View style={[D.fabWrapper,{transform:K.getTranslateTransform()}]}{...Q.panHandlers}>
-          <$ style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{U.current||(x("light"),P(!0))}}hitSlop={10}>
-            <v.View style={[D.fabPulseRing,{transform:[{scale:Z}]}]}/>
-            <Te size={62}/>
-            
-            <S pointerEvents="none"style={D.fabShineClip}>
-              <v.View style={[D.fabShineStreak,{transform:[{translateX:N.interpolate({inputRange:[0,1],outputRange:[-48,96]})},{rotate:"25deg"}]}]}>
-                <_ colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0.95)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0)"]}locations={[0,.25,.5,.75,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
-              </v.View>
-            </S>
-          </$>
-        </v.View>}
+        </z.View>:<z.View style={[W.fabWrapper,{transform:K.getTranslateTransform()}]}{...Q.panHandlers}>
+            <R style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{Z.current||(a("light"),C(!0))}}hitSlop={10}>
+              <z.View style={[W.fabPulseRing,{transform:[{scale:ee}]}]}/>
+              <U size={68}customIcon={F}shape="circle"/>
+            </R>
+
+          
+          <R accessible={!0}accessibilityRole="button"accessibilityLabel={o("common.close","Close")}onPress={()=>{a("medium"),J(),c(o("common.inspectorDismissed","In-App Inspector closed for this session"))}}hitSlop={8}style={W.fabCloseBadge}>
+            <X size={9.5}/>
+          </R>
+        </z.View>}
 
       
-      <De item={j}visible={!!j}onClose={()=>B(null)}onDelete={async e=>{await z.deleteMedia(e.uri),T?.().catch(()=>{}),B(null)}}onConvertToGif={async e=>{const r=await z.convertToGif(e.uri,{fps:12,width:480});r&&(T?.().catch(()=>{}),B({id:`anim_${r.timestamp}.gif`,type:"gif",format:"gif",uri:r.uri,filename:r.uri.split("/").pop()||`anim_${r.timestamp}.gif`,sizeBytes:r.sizeBytes,timestamp:r.timestamp,durationMs:r.durationMs}))}}/>
-    </>},t=ce.create({playerContainer:{position:"absolute",bottom:X.OS==="ios"?34:18,left:12,right:12,minHeight:58,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:16,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.28)",paddingHorizontal:12,paddingVertical:7,gap:8,zIndex:99999,elevation:25,shadowColor:i.indigo600,shadowOffset:{width:0,height:8},shadowOpacity:.45,shadowRadius:14,overflow:"hidden"},gradientBg:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16},playerShineClip:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16,overflow:"hidden"},playerShineStreak:{position:"absolute",top:-60,width:75,height:200},brandSection:{flexDirection:"row",alignItems:"center",gap:9,flex:1,minWidth:0,paddingVertical:2},titleWrapper:{flex:1,minWidth:0,justifyContent:"center",gap:2},appTitle:{fontFamily:G.interBold,fontSize:13.5,color:i.white,letterSpacing:-.2},versionRow:{flexDirection:"row",alignItems:"center",gap:4,minWidth:0},versionChip:{flexDirection:"row",alignItems:"center",backgroundColor:`${i.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${i.white}2E`,flexShrink:1,minWidth:0},versionChipText:{fontFamily:G.interMedium,fontSize:8.5,color:`${i.white}EB`,letterSpacing:.1},actionsRow:{flexDirection:"row",alignItems:"center",gap:4.5,flexShrink:0},actionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"rgba(255, 255, 255, 0.22)",paddingHorizontal:8,paddingVertical:5.5,borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},actionBtnSquare:{alignItems:"center",justifyContent:"center",width:27,height:27,backgroundColor:"rgba(255, 255, 255, 0.22)",borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},recordingBtnActive:{backgroundColor:"rgba(239, 68, 68, 0.32)",borderColor:i.red500},recordingDot:{width:6,height:6,borderRadius:3,backgroundColor:i.red500},actionText:{fontFamily:G.interSemiBold,fontSize:10.5,color:i.white}});export default Fe;
+      <Le item={N}visible={!!N}onClose={()=>T(null)}onDelete={async e=>{await v.deleteMedia(e.uri),d?.().catch(()=>{}),T(null)}}onConvertToGif={async e=>{const t=await v.convertToGif(e.uri,{fps:12,width:480});t&&(d?.().catch(()=>{}),T({id:`anim_${t.timestamp}.gif`,type:"gif",format:"gif",uri:t.uri,filename:t.uri.split("/").pop()||`anim_${t.timestamp}.gif`,sizeBytes:t.sizeBytes,timestamp:t.timestamp,durationMs:t.durationMs}))}}/>
+    </>},r=le.create({playerContainer:{position:"absolute",bottom:q.OS==="ios"?34:18,left:12,right:12,minHeight:58,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:16,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.28)",paddingHorizontal:12,paddingVertical:7,gap:8,zIndex:99999,elevation:25,shadowColor:i.indigo600,shadowOffset:{width:0,height:8},shadowOpacity:.45,shadowRadius:14,overflow:"hidden"},gradientBg:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16},playerShineClip:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16,overflow:"hidden"},playerShineStreak:{position:"absolute",top:-60,width:75,height:200},brandSection:{flexDirection:"row",alignItems:"center",gap:9,flex:1,minWidth:0,paddingVertical:2},titleWrapper:{flex:1,minWidth:0,justifyContent:"center",gap:2},appTitle:{fontFamily:O.interBold,fontSize:13.5,color:i.white,letterSpacing:-.2},versionRow:{flexDirection:"row",alignItems:"center",gap:4,minWidth:0},versionChip:{flexDirection:"row",alignItems:"center",backgroundColor:`${i.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${i.white}2E`,flexShrink:1,minWidth:0},versionChipText:{fontFamily:O.interMedium,fontSize:8.5,color:`${i.white}EB`,letterSpacing:.1},actionsRow:{flexDirection:"row",alignItems:"center",gap:4.5,flexShrink:0},actionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"rgba(255, 255, 255, 0.22)",paddingHorizontal:8,paddingVertical:5.5,borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},actionBtnSquare:{alignItems:"center",justifyContent:"center",width:27,height:27,backgroundColor:"rgba(255, 255, 255, 0.22)",borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},recordingBtnActive:{backgroundColor:"rgba(239, 68, 68, 0.32)",borderColor:i.red500},recordingDot:{width:6,height:6,borderRadius:3,backgroundColor:i.red500},actionText:{fontFamily:O.interSemiBold,fontSize:10.5,color:i.white}});export default Ee;

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

@@ -1,13 +1,13 @@
-import{useState as R}from"react";import{StyleSheet as S,Text as I,View as T,Pressable as B}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{WarningTriangleIcon as W,ClearIcon as E}from"../NetworkIcons";export const FeatureUnderDevNotice=({featureName:w,compact:V=!1})=>{const[z,D]=R(!1);return z?null:<T style={[e.container,V&&e.containerCompact]}>
+import{useState as z}from"react";import{StyleSheet as R,Text as I,View as T,Pressable as S}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{WarningTriangleIcon as B,ClearIcon as W}from"../NetworkIcons";import{t as A}from"../../i18n";export const FeatureUnderDevNotice=({featureName:w,compact:D=!1})=>{const[V,v]=z(!1);return V?null:<T style={[e.container,D&&e.containerCompact]}>
       <T style={e.contentRow}>
         <T style={e.badgeWrap}>
-          <W color={t.warningIconGold}size={12}/>
-          <I style={e.badgeText}>IN ACTIVE DEVELOPMENT</I>
+          <B color={t.warningIconGold}size={12}/>
+          <I style={e.badgeText}>{A("common.inActiveDevelopment","IN ACTIVE DEVELOPMENT")}</I>
         </T>
 
-        <B onPress={()=>D(!0)}hitSlop={8}style={e.dismissBtn}accessible={!0}accessibilityRole="button"accessibilityLabel="Dismiss notice">
-          <E color={t.grayTextWeak}size={11}/>
-        </B>
+        <S onPress={()=>v(!0)}hitSlop={8}style={e.dismissBtn}accessible={!0}accessibilityRole="button"accessibilityLabel="Dismiss notice">
+          <W color={t.grayTextWeak}size={11}/>
+        </S>
       </T>
 
       <I style={e.messageText}>
@@ -15,4 +15,4 @@ import{useState as R}from"react";import{StyleSheet as S,Text as I,View as T,Pres
         development. Results and metrics may vary in accuracy. We are continuously
         improving this feature for upcoming releases.
       </I>
-    </T>};const e=S.create({container:{marginHorizontal:12,marginTop:8,marginBottom:6,paddingHorizontal:12,paddingVertical:9,borderRadius:8,backgroundColor:`${t.warningIconGold}12`,borderWidth:1,borderColor:`${t.warningIconGold}30`},containerCompact:{marginTop:4,marginBottom:4,paddingVertical:7,paddingHorizontal:10},contentRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},badgeWrap:{flexDirection:"row",alignItems:"center",gap:4.5},badgeText:{fontFamily:C.interBold,fontSize:9.5,color:t.warningIconGold,letterSpacing:.4},dismissBtn:{padding:2},messageText:{fontFamily:C.interRegular,fontSize:10.5,color:t.grayText,lineHeight:15}});export default FeatureUnderDevNotice;
+    </T>};const e=R.create({container:{marginHorizontal:12,marginTop:8,marginBottom:6,paddingHorizontal:12,paddingVertical:9,borderRadius:8,backgroundColor:`${t.warningIconGold}12`,borderWidth:1,borderColor:`${t.warningIconGold}30`},containerCompact:{marginTop:4,marginBottom:4,paddingVertical:7,paddingHorizontal:10},contentRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},badgeWrap:{flexDirection:"row",alignItems:"center",gap:4.5},badgeText:{fontFamily:C.interBold,fontSize:9.5,color:t.warningIconGold,letterSpacing:.4},dismissBtn:{padding:2},messageText:{fontFamily:C.interRegular,fontSize:10.5,color:t.grayText,lineHeight:15}});export default FeatureUnderDevNotice;

package/dist/esm/components/Inspector/LanguageSelectorModal.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface CountryOption {
+    id: string;
+    name: string;
+    flag: string;
+    badge?: string;
+    langCodes?: string[];
+}
+export declare const COUNTRY_OPTIONS: CountryOption[];
+interface LanguageSelectorModalProps {
+    visible: boolean;
+    onClose: () => void;
+}
+export declare const LanguageSelectorModal: React.MemoExoticComponent<({ visible, onClose }: LanguageSelectorModalProps) => React.JSX.Element>;
+export {};

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

@@ -0,0 +1,90 @@
+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}>
+        
+        <_ style={e.backdrop}onPress={V}accessibilityRole="button"accessibilityLabel="Close bottom sheet"/>
+
+        
+        <C style={[e.bottomSheet,{backgroundColor:v?t.npmDark:t.white}]}>
+          
+          <C style={e.handleBarWrap}>
+            <C style={[e.handleBar,{backgroundColor:v?"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>
+                <S style={e.titleText}>
+                  {k("settings.general.selectLanguage","Select Language")}
+                </S>
+                <S style={e.subTitleText}>
+                  {k("settings.general.languageDescription","Choose preferred display language")}
+                </S>
+              </C>
+            </C>
+            <R onPress={V}hitSlop={10}style={e.closeBtn}>
+              <P size={12}color={t.grayText}/>
+            </R>
+          </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>
+
+          
+          <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]}>
+                      {o.name}
+                    </S>
+                    {o.badge&&<C style={[e.countryChipBadge,b&&e.countryChipBadgeActive]}>
+                        <S style={[e.countryChipBadgeText,b&&e.countryChipBadgeTextActive]}>
+                          {o.badge}
+                        </S>
+                      </C>}
+                  </R>})}
+            </A>
+          </C>
+
+          
+          <A style={e.scrollList}contentContainerStyle={e.scrollContent}showsVerticalScrollIndicator={!0}keyboardShouldPersistTaps="handled">
+            {W.length===0?<C style={e.emptyStateWrap}>
+                <S style={e.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]}>
+                            {o.nativeName}
+                          </S>
+                          <C style={e.codePill}>
+                            <S style={e.codePillText}>
+                              {o.code.toUpperCase()}
+                            </S>
+                          </C>
+                        </C>
+                        <S style={e.langEnglishName}>
+                          {o.name}
+                        </S>
+                      </C>
+                    </C>
+                    {b&&<C style={e.checkIconWrap}>
+                        <Y size={13}color={t.white}/>
+                      </C>}
+                  </R>})}
+          </A>
+        </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"}});