react-native-inapp-inspector 2.3.24 → 2.4.0

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

@@ -1,5 +1,5 @@
-import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}from"../../i18n";import{Pressable as Q,ScrollView as Ne,StyleSheet as Re,Text as T,TextInput as He,View as C}from"react-native";import{useInspector as Pe}from"./InspectorContext";import X from"../HighlightText";import Ce from"../JsonViewer";import M from"../CopyButton";import Y from"../SegmentedTabs";import{ClearIcon as Ae,SearchIcon as Le,PrettyIcon as Me,RawIcon as Te,TableIcon as Ee,LayersIcon as Se,TerminalIcon as Oe,RequestIcon as Ue,InfoCircleIcon as Je,DocIcon as Ke,ExternalLinkIcon as Ge,FolderIcon as Qe}from"../NetworkIcons";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import z from"../../styles";import{getJsonContent as Xe,getSize as _,formatDateTime as ee,parseStackLine as Ve,openInVSCode as Ye}from"../../helpers";const Be=S=>{const D=Date.now()-S,E=Math.floor(D/1e3),$=Math.floor(E/60),P=Math.floor($/60),J=Math.floor(P/24);return E<60?`${E}s ago`:$<60?`${$}m ago`:P<24?`${P}h ago`:`${J}d ago`},Ze=De.memo(()=>{const{t:S}=Ie(),{selectedLog:r}=Pe(),[D,E]=L("output"),[$,P]=L(""),[J,ze]=L("raw"),W=A(()=>r?Xe(r.message):null,[r]),[N,re]=L("structured"),[K,ve]=L("caller"),[Z,We]=L("app"),O=A(()=>r?K==="error"&&r.errorStack?r.errorStack:r.stack||r.caller||"":"",[r,K]),F=A(()=>O?O.split(`
-`).map(t=>t.trim()).filter(t=>t.length>0).map((t,v)=>Ve(t,v===0)):[],[O]),R=A(()=>F.filter(t=>t.frameType==="app"||!t.isRuntimeNoise),[F]),oe=A(()=>Z==="app"&&R.length>0?R:F,[Z,R,F]),V=A(()=>r?R.length>0?R[0]:r.caller&&r.caller!=="Unknown"?Ve(r.caller,!0):F.length>0?F[0]:null:null,[r,R,F]);if(!r)return null;const H=e.primaryLight!==e.white,U=(()=>{const t=(r.type||"log").toLowerCase(),v=(r.sourceMethod||t).toLowerCase();return t==="error"||v==="error"?{border:e.red500,badgeBg:e.red100,badgeText:e.redErrorText,label:"ERROR",methodBorder:e.errorBorder,methodBg:e.red100,methodText:e.redErrorText}:t==="warn"||v==="warn"?{border:e.amber500,badgeBg:e.amber100,badgeText:e.amber800Warm,label:"WARN",methodBorder:e.amber200,methodBg:e.amber100,methodText:e.amber800Warm}:t==="debug"||v==="debug"?{border:e.violet500,badgeBg:e.purple100,badgeText:e.violet600,label:"DEBUG",methodBorder:e.purple200,methodBg:e.purple100,methodText:e.violet600}:t==="info"||v==="info"?{border:e.sky500,badgeBg:e.sky100,badgeText:e.sky600,label:"INFO",methodBorder:e.sky400,methodBg:e.sky100,methodText:e.sky600}:{border:e.indigo500,badgeBg:e.indigo50,badgeText:e.indigo600Alt,label:"LOG",methodBorder:e.indigo400,methodBg:e.indigo50,methodText:e.indigo600Alt}})(),le=r.rawArgs!=null&&r.rawArgs.length>1,$e=!!(r.stack&&r.stack.trim().length>0),Fe=[{key:"output",label:S("console.tabOutput"),icon:t=><Oe color={t?e.white:e.grayTextWeak}size={12}/>},...le?[{key:"arguments",label:S("console.tabArgs",{count:r.rawArgs?.length}),icon:t=><Ue color={t?e.white:e.grayTextWeak}size={12}/>}]:[],...$e?[{key:"stack",label:S("console.tabStack"),icon:t=><Se color={t?e.white:e.grayTextWeak}size={12}/>}]:[],{key:"metadata",label:S("console.tabMetadata"),icon:t=><Je color={t?e.white:e.grayTextWeak}size={12}/>}];return<C style={{flex:1}}>
+import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}from"../../i18n";import{Pressable as Q,ScrollView as Re,StyleSheet as Ne,Text as T,TextInput as He,View as C}from"react-native";import{useInspector as Pe}from"./InspectorContext";import X from"../HighlightText";import Ce from"../JsonViewer";import M from"../CopyButton";import Ae from"../ShareButton";import Y from"../SegmentedTabs";import{ClearIcon as Le,SearchIcon as Me,PrettyIcon as Ee,RawIcon as Te,TableIcon as Oe,LayersIcon as Se,TerminalIcon as Ue,RequestIcon as Je,InfoCircleIcon as Ke,DocIcon as Ge,ExternalLinkIcon as Qe,FolderIcon as Xe}from"../NetworkIcons";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import z from"../../styles";import{getJsonContent as Ye,getSize as _,formatDateTime as ee,parseStackLine as Ve,openInVSCode as Ze}from"../../helpers";import{shareLogReport as _e}from"../../helpers/shareFormatter";const Be=S=>{const D=Date.now()-S,E=Math.floor(D/1e3),$=Math.floor(E/60),P=Math.floor($/60),J=Math.floor(P/24);return E<60?`${E}s ago`:$<60?`${$}m ago`:P<24?`${P}h ago`:`${J}d ago`},et=De.memo(()=>{const{t:S}=Ie(),{selectedLog:r}=Pe(),[D,E]=L("output"),[$,P]=L(""),[J,ze]=L("raw"),W=A(()=>r?Ye(r.message):null,[r]),[R,re]=L("structured"),[K,ve]=L("caller"),[Z,We]=L("app"),O=A(()=>r?K==="error"&&r.errorStack?r.errorStack:r.stack||r.caller||"":"",[r,K]),F=A(()=>O?O.split(`
+`).map(t=>t.trim()).filter(t=>t.length>0).map((t,v)=>Ve(t,v===0)):[],[O]),N=A(()=>F.filter(t=>t.frameType==="app"||!t.isRuntimeNoise),[F]),oe=A(()=>Z==="app"&&N.length>0?N:F,[Z,N,F]),V=A(()=>r?N.length>0?N[0]:r.caller&&r.caller!=="Unknown"?Ve(r.caller,!0):F.length>0?F[0]:null:null,[r,N,F]);if(!r)return null;const H=e.primaryLight!==e.white,U=(()=>{const t=(r.type||"log").toLowerCase(),v=(r.sourceMethod||t).toLowerCase();return t==="error"||v==="error"?{border:e.red500,badgeBg:e.red100,badgeText:e.redErrorText,label:"ERROR",methodBorder:e.errorBorder,methodBg:e.red100,methodText:e.redErrorText}:t==="warn"||v==="warn"?{border:e.amber500,badgeBg:e.amber100,badgeText:e.amber800Warm,label:"WARN",methodBorder:e.amber200,methodBg:e.amber100,methodText:e.amber800Warm}:t==="debug"||v==="debug"?{border:e.violet500,badgeBg:e.purple100,badgeText:e.violet600,label:"DEBUG",methodBorder:e.purple200,methodBg:e.purple100,methodText:e.violet600}:t==="info"||v==="info"?{border:e.sky500,badgeBg:e.sky100,badgeText:e.sky600,label:"INFO",methodBorder:e.sky400,methodBg:e.sky100,methodText:e.sky600}:{border:e.indigo500,badgeBg:e.indigo50,badgeText:e.indigo600Alt,label:"LOG",methodBorder:e.indigo400,methodBg:e.indigo50,methodText:e.indigo600Alt}})(),le=r.rawArgs!=null&&r.rawArgs.length>1,$e=!!(r.stack&&r.stack.trim().length>0),Fe=[{key:"output",label:S("console.tabOutput"),icon:t=><Ue color={t?e.white:e.grayTextWeak}size={12}/>},...le?[{key:"arguments",label:S("console.tabArgs",{count:r.rawArgs?.length}),icon:t=><Je color={t?e.white:e.grayTextWeak}size={12}/>}]:[],...$e?[{key:"stack",label:S("console.tabStack"),icon:t=><Se color={t?e.white:e.grayTextWeak}size={12}/>}]:[],{key:"metadata",label:S("console.tabMetadata"),icon:t=><Ke color={t?e.white:e.grayTextWeak}size={12}/>}];return<C style={{flex:1}}>
       
       <C style={z.detailInfoBar}>
         <C style={{flexDirection:"column",gap:10}}>
@@ -45,7 +45,10 @@ import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}fr
             </C>
 
             
-            <M value={r.message}label={S("console.logMessage")}/>
+            <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
+              <Ae onShare={()=>_e(r)}/>
+              <M value={r.message}label={S("console.logMessage")}/>
+            </C>
           </C>
 
           
@@ -61,15 +64,15 @@ import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}fr
                 {V?.functionName&&V.functionName!=="<anonymous>"?`${V.functionName}()`:V?.fileName||S("console.consoleLog")}
               </T>
 
-              {V?.fileName&&<Q onPress={()=>Ye(V.rawFilePath||V.fullPath||V.fileName,V.lineNumber,V.columnNumber)}hitSlop={8}style={[z.metaChip,{backgroundColor:`${e.brandPurple}15`,borderColor:`${e.brandPurple}40`,paddingHorizontal:7,paddingVertical:2}]}>
+              {V?.fileName&&<Q onPress={()=>Ze(V.rawFilePath||V.fullPath||V.fileName,V.lineNumber,V.columnNumber)}hitSlop={8}style={[z.metaChip,{backgroundColor:`${e.brandPurple}15`,borderColor:`${e.brandPurple}40`,paddingHorizontal:7,paddingVertical:2}]}>
                   <C style={{flexDirection:"row",alignItems:"center",gap:4,flexShrink:1}}>
-                    <Ke color={e.brandPurple}size={10}/>
+                    <Ge color={e.brandPurple}size={10}/>
                     <T style={[z.metaChipText,{color:e.brandPurple,fontSize:10,fontFamily:B.interBold,flexShrink:1}]}>
                       {V.fileName}
                       {V.lineNumber?`:${V.lineNumber}`:""}
                       {V.columnNumber?`:${V.columnNumber}`:""}
                     </T>
-                    <Ge color={e.brandPurple}size={9}/>
+                    <Qe color={e.brandPurple}size={9}/>
                   </C>
                 </Q>}
             </C>
@@ -101,17 +104,17 @@ import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}fr
       {D!=="metadata"&&<C style={{paddingHorizontal:12,paddingTop:6,paddingBottom:4}}>
           <C style={[z.detailSearchRow,{marginBottom:0}]}>
             <C style={[z.detailSearchBox,{backgroundColor:H?`${e.brandPurple}10`:e.purpleShade50,borderWidth:1,borderColor:e.dividerColor}]}>
-              <Le color={e.grayTextWeak}size={15}/>
+              <Me color={e.grayTextWeak}size={15}/>
               <He placeholder="Search in log details..."placeholderTextColor={e.grayTextWeak}value={$}onChangeText={P}style={z.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
               {$.length>0&&<Q onPress={()=>P("")}hitSlop={10}style={{padding:6}}>
-                  <Ae color={e.grayTextWeak}size={13}/>
+                  <Le color={e.grayTextWeak}size={13}/>
                 </Q>}
             </C>
           </C>
         </C>}
 
       
-      <Ne style={{flex:1}}contentContainerStyle={{paddingHorizontal:12,paddingTop:6,paddingBottom:28,flexGrow:1}}showsVerticalScrollIndicator={!0}keyboardShouldPersistTaps="handled">
+      <Re style={{flex:1}}contentContainerStyle={{paddingHorizontal:12,paddingTop:6,paddingBottom:28,flexGrow:1}}showsVerticalScrollIndicator={!0}keyboardShouldPersistTaps="handled">
         
         {D==="output"&&<C style={[z.sectionContainer,{backgroundColor:H?`${e.purple}12`:e.purpleShade50,borderWidth:1,borderColor:e.dividerColor,borderRadius:12,overflow:"hidden",flex:1}]}>
             
@@ -123,7 +126,7 @@ import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}fr
                 <M value={r.message}label={S("console.logMessage")}/>
               </C>
 
-              {W&&<Y tabs={[{key:"pretty",label:S("network.jsonViewer.pretty"),icon:t=><Me color={t?e.white:e.grayTextWeak}size={12}/>},{key:"raw",label:S("network.jsonViewer.raw"),icon:t=><Te color={t?e.white:e.grayTextWeak}size={12}/>},{key:"table",label:S("network.jsonViewer.table"),icon:t=><Ee color={t?e.white:e.grayTextWeak}size={12}/>}]}activeKey={J}onChange={t=>ze(t)}/>}
+              {W&&<Y tabs={[{key:"pretty",label:S("network.jsonViewer.pretty"),icon:t=><Ee color={t?e.white:e.grayTextWeak}size={12}/>},{key:"raw",label:S("network.jsonViewer.raw"),icon:t=><Te color={t?e.white:e.grayTextWeak}size={12}/>},{key:"table",label:S("network.jsonViewer.table"),icon:t=><Oe color={t?e.white:e.grayTextWeak}size={12}/>}]}activeKey={J}onChange={t=>ze(t)}/>}
             </C>
 
             
@@ -176,16 +179,16 @@ import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}fr
 
                 <C style={{flexDirection:"row",alignItems:"center",gap:5}}>
                   <C style={{flexDirection:"row",backgroundColor:H?e.primaryLight:e.white,borderRadius:7,padding:2,borderWidth:1,borderColor:e.dividerColor}}>
-                    <Q onPress={()=>re("structured")}style={{flexDirection:"row",alignItems:"center",gap:3,paddingVertical:3.5,paddingHorizontal:7,borderRadius:5,backgroundColor:N==="structured"?e.brandPurple:"transparent"}}>
-                      <Se color={N==="structured"?e.white:e.grayTextWeak}size={11}/>
-                      <T style={{fontFamily:B.interBold,fontSize:10,color:N==="structured"?e.white:e.grayTextStrong}}>
+                    <Q onPress={()=>re("structured")}style={{flexDirection:"row",alignItems:"center",gap:3,paddingVertical:3.5,paddingHorizontal:7,borderRadius:5,backgroundColor:R==="structured"?e.brandPurple:"transparent"}}>
+                      <Se color={R==="structured"?e.white:e.grayTextWeak}size={11}/>
+                      <T style={{fontFamily:B.interBold,fontSize:10,color:R==="structured"?e.white:e.grayTextStrong}}>
                         {S("console.cardsView")}
                       </T>
                     </Q>
 
-                    <Q onPress={()=>re("raw")}style={{flexDirection:"row",alignItems:"center",gap:3,paddingVertical:3.5,paddingHorizontal:7,borderRadius:5,backgroundColor:N==="raw"?e.brandPurple:"transparent"}}>
-                      <Te color={N==="raw"?e.white:e.grayTextWeak}size={11}/>
-                      <T style={{fontFamily:B.interBold,fontSize:10,color:N==="raw"?e.white:e.grayTextStrong}}>
+                    <Q onPress={()=>re("raw")}style={{flexDirection:"row",alignItems:"center",gap:3,paddingVertical:3.5,paddingHorizontal:7,borderRadius:5,backgroundColor:R==="raw"?e.brandPurple:"transparent"}}>
+                      <Te color={R==="raw"?e.white:e.grayTextWeak}size={11}/>
+                      <T style={{fontFamily:B.interBold,fontSize:10,color:R==="raw"?e.white:e.grayTextStrong}}>
                         {S("console.rawTraceView")}
                       </T>
                     </Q>
@@ -199,11 +202,11 @@ import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}fr
               {r.errorStack&&<Y tabs={[{key:"caller",label:S("console.callOriginStack")},{key:"error",label:S("console.errorThrownStack")}]}activeKey={K}onChange={t=>ve(t)}/>}
 
               
-              <Y tabs={[{key:"app",label:S("console.appCodeScope",{count:R.length})},{key:"all",label:S("console.allFramesScope",{count:F.length})}]}activeKey={Z}onChange={t=>We(t)}/>
+              <Y tabs={[{key:"app",label:S("console.appCodeScope",{count:N.length})},{key:"all",label:S("console.allFramesScope",{count:F.length})}]}activeKey={Z}onChange={t=>We(t)}/>
             </C>
 
             
-            {N==="structured"?<C style={{padding:12,gap:10}}>
+            {R==="structured"?<C style={{padding:12,gap:10}}>
                 {oe.length>0?oe.map((t,v)=>{const I=v===0,G=t.frameType==="app"?`${e.brandPurple}15`:t.frameType==="dependency"?`${e.amber500}18`:t.frameType==="native"?`${e.sky500}18`:e.grayBorderSecondary,q=t.frameType==="app"?e.brandPurple:t.frameType==="dependency"?e.amber700:t.frameType==="native"?e.sky500:e.grayTextWeak;return<C key={v}style={{backgroundColor:I?`${e.brandPurple}0A`:e.primaryLight,borderRadius:10,borderWidth:1,borderColor:I?`${e.brandPurple}35`:e.dividerColor,padding:11,gap:6}}>
                         
                         <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",gap:6}}>
@@ -243,7 +246,7 @@ import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}fr
                         
                         <C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:H?`${e.primaryBlack}25`:e.grayBackground,borderRadius:6,paddingHorizontal:8,paddingVertical:4.5,gap:6}}>
                           <C style={{flexDirection:"row",alignItems:"center",gap:5,flex:1}}>
-                            <Qe size={12}color={e.grayTextWeak}/>
+                            <Xe size={12}color={e.grayTextWeak}/>
                             <T selectable style={{fontFamily:B.interRegular,fontSize:9.5,color:e.grayTextStrong,flex:1}}numberOfLines={1}>
                               {t.fullPath}
                             </T>
@@ -289,5 +292,5 @@ import De,{useMemo as A,useState as L}from"react";import{useTranslation as Ie}fr
                 </C>)}
             </C>
           </C>}
-      </Ne>
-    </C>}),te=Re.create({metaDot:{fontSize:10,color:e.grayTextWeak,opacity:.7},tabsHeaderWrap:{paddingHorizontal:12,paddingTop:8,paddingBottom:4}});export default Ze;
+      </Re>
+    </C>}),te=Ne.create({metaDot:{fontSize:10,color:e.grayTextWeak,opacity:.7},tabsHeaderWrap:{paddingHorizontal:12,paddingTop:8,paddingBottom:4}});export default et;

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

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

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

@@ -162,4 +162,4 @@ import{useState as W,useEffect as He,useMemo as te,useCallback as oe}from"react"
 
       
       <Ze item={Q}visible={!!Q}onClose={()=>j(null)}onDelete={K}onConvertToGif={Pe}/>
-    </C>};const{width:it}=je.get("window"),rt=(it-36)/2,o=Ne.create({container:{flex:1,backgroundColor:e.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},chipGroup:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},chip:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6,backgroundColor:e.whiteAlpha06,borderWidth:1,borderColor:e.whiteAlpha10},chipActive:{backgroundColor:`${e.sky400}2E`,borderColor:e.sky400},chipText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},chipTextActive:{fontFamily:B.interBold,color:e.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${e.slate900}99`,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},resultCountTextSelected:{fontFamily:B.interSemiBold,color:e.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:e.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${e.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}26`,borderWidth:1,borderColor:`${e.red500}80`},deleteBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}1F`,borderWidth:1,borderColor:`${e.red500}4D`},clearBtnText:{fontFamily:B.interMedium,fontSize:10.5,color:e.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:rt,backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:e.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:e.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},checkbox:{position:"absolute",top:6,left:6,width:22,height:22,borderRadius:5,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center",zIndex:10},checkboxSelected:{backgroundColor:e.violet600,borderColor:e.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:"#000",shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},typeBadge:{position:"absolute",top:6,right:6,flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},typeBadgeText:{fontFamily:B.interBold,fontSize:9,color:e.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:B.interMedium,fontSize:11.5,color:e.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:B.interRegular,fontSize:10,color:e.slate400},cardMetaDot:{fontSize:10,color:e.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:e.violet600,borderWidth:1.5,backgroundColor:`${e.violet600}14`},listCheckbox:{width:20,height:20,borderRadius:4,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center"},listThumbContainer:{width:46,height:46,borderRadius:6,backgroundColor:e.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:B.interMedium,fontSize:12,color:e.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},listBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:e.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${e.red500}14`,borderWidth:1,borderColor:`${e.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha20},copySelectedBtnText:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`},shareSelectedBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.sky400}});
+    </C>};const{width:it}=je.get("window"),rt=(it-36)/2,o=Ne.create({container:{flex:1,backgroundColor:e.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},chipGroup:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},chip:{flexDirection:"row",alignItems:"center",gap:4.5,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6,backgroundColor:e.whiteAlpha06,borderWidth:1,borderColor:e.whiteAlpha10},chipActive:{backgroundColor:`${e.sky400}2E`,borderColor:e.sky400},chipText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},chipTextActive:{fontFamily:B.interBold,color:e.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${e.slate900}99`,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:B.interMedium,fontSize:11,color:e.slate400},resultCountTextSelected:{fontFamily:B.interSemiBold,color:e.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:e.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${e.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}26`,borderWidth:1,borderColor:`${e.red500}80`},deleteBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.red500}1F`,borderWidth:1,borderColor:`${e.red500}4D`},clearBtnText:{fontFamily:B.interMedium,fontSize:10.5,color:e.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:rt,backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:e.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:e.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},checkbox:{position:"absolute",top:6,left:6,width:22,height:22,borderRadius:5,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center",zIndex:10},checkboxSelected:{backgroundColor:e.violet600,borderColor:e.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:e.black,shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},typeBadge:{position:"absolute",top:6,right:6,flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},typeBadgeText:{fontFamily:B.interBold,fontSize:9,color:e.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:B.interMedium,fontSize:11.5,color:e.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:B.interRegular,fontSize:10,color:e.slate400},cardMetaDot:{fontSize:10,color:e.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:e.slate800,borderRadius:8,borderWidth:1,borderColor:e.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:e.violet600,borderWidth:1.5,backgroundColor:`${e.violet600}14`},listCheckbox:{width:20,height:20,borderRadius:4,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.65)",backgroundColor:"rgba(15, 23, 42, 0.65)",alignItems:"center",justifyContent:"center"},listThumbContainer:{width:46,height:46,borderRadius:6,backgroundColor:e.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:e.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${e.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:B.interMedium,fontSize:12,color:e.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:e.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:e.borderGlassMedium},listBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:e.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:e.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${e.red500}14`,borderWidth:1,borderColor:`${e.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:e.whiteAlpha10,borderWidth:1,borderColor:e.whiteAlpha20},copySelectedBtnText:{fontFamily:B.interSemiBold,fontSize:10.5,color:e.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`},shareSelectedBtnText:{fontFamily:B.interBold,fontSize:10.5,color:e.sky400}});

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

@@ -1,11 +1,11 @@
-import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platform as V,Share as ee,StyleSheet as oe,Text as T,TouchableOpacity as I,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import R from"../TouchableScale";import{ChevronDownIcon as Me,CopyIcon as L,ExpandCollapseIcon as We,FilmIcon as E,GifIcon as H,ImageIcon as Le,PauseIcon as Ee,PlayIcon as Ce,RepeatIcon as He,ShareIcon as Te,TrashIcon as Ue}from"../NetworkIcons";import{ScreenCapture as Ne}from"../../capture";import{copyImageOrMediaToClipboard as qe,formatBytes as Se}from"../../helpers";import{showToast as G}from"../../helpers/toast";import{useTranslation as Je}from"../../i18n";export const MediaPreviewModal=({item:t,visible:ve,onClose:D,onDelete:Ae,onConvertToGif:M})=>{const{t:r}=Je(),[U,N]=P(!1),[Ie,q]=P(!1),[z,ze]=P(!1),[J,K]=P(!1),[Q,Pe]=P("1.0x"),[$,Be]=P(!0),[W,Re]=P(.4);if(!t)return null;const O=()=>{t?.uri&&qe(t.uri,t.type==="image"?"Image":"Media")},X=async()=>{try{K(!0),await Ne.playVideo(t.uri)}catch{G(r("mediaGallery.playError","Unable to play video"))}finally{K(!1)}},$e=()=>{Ve.alert(r("mediaGallery.deleteTitle"),r("mediaGallery.deleteMessage",{filename:t.filename}),[{text:r("common.cancel"),style:"cancel"},{text:r("mediaGallery.delete"),style:"destructive",onPress:()=>{Ae(t),D()}}])},Fe=async()=>{if(M){N(!0);try{await M(t),G(r("mediaGallery.convertedSuccess"))}catch{G(r("mediaGallery.convertFailed"))}finally{N(!1)}}},Y=async()=>{try{const v=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`,Oe=V.select({ios:{url:v,title:t.filename},default:{title:t.filename,message:t.filename,url:v}});(await ee.share(Oe)).action===ee.sharedAction&&G(r("mediaGallery.shareSuccess","Shared successfully"))}catch(v){v?.message!=="User did not share"&&G(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},A=t.type==="video",F=t.type==="gif",B=t.durationMs?(t.durationMs/1e3).toFixed(1):null,Ge=B?`00:${Number(B)<10?"0":""}${B}`:"00:05.0",Z=!0;return<De visible={ve}transparent={!0}animationType="fade"onRequestClose={D}>
+import{useState as z}from"react";import{Alert as Ve,Image as _,Modal as Me,Platform as V,Share as ee,StyleSheet as oe,Text as T,TouchableOpacity as A,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import R from"../TouchableScale";import{ChevronDownIcon as De,CopyIcon as L,ExpandCollapseIcon as We,FilmIcon as E,GifIcon as H,ImageIcon as Le,PauseIcon as Ee,PlayIcon as Ce,RepeatIcon as He,ShareIcon as Te,TrashIcon as Ue}from"../NetworkIcons";import{ScreenCapture as Ne}from"../../capture";import{copyImageOrMediaToClipboard as qe,formatBytes as Se}from"../../helpers";import{showToast as G}from"../../helpers/toast";import{useTranslation as Je}from"../../i18n";export const MediaPreviewModal=({item:t,visible:ve,onClose:M,onDelete:Ie,onConvertToGif:D})=>{const{t:r}=Je(),[U,N]=z(!1),[Ae,q]=z(!1),[P,Pe]=z(!1),[J,K]=z(!1),[Q,ze]=z("1.0x"),[$,Be]=z(!0),[W,Re]=z(.4);if(!t)return null;const O=()=>{t?.uri&&qe(t.uri,t.type==="image"?"Image":"Media")},X=async()=>{try{K(!0),await Ne.playVideo(t.uri)}catch{G(r("mediaGallery.playError","Unable to play video"))}finally{K(!1)}},$e=()=>{Ve.alert(r("mediaGallery.deleteTitle"),r("mediaGallery.deleteMessage",{filename:t.filename}),[{text:r("common.cancel"),style:"cancel"},{text:r("mediaGallery.delete"),style:"destructive",onPress:()=>{Ie(t),M()}}])},Fe=async()=>{if(D){N(!0);try{await D(t),G(r("mediaGallery.convertedSuccess"))}catch{G(r("mediaGallery.convertFailed"))}finally{N(!1)}}},Y=async()=>{try{const v=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`,Oe=V.select({ios:{url:v,title:t.filename},default:{title:t.filename,message:t.filename,url:v}});(await ee.share(Oe)).action===ee.sharedAction&&G(r("mediaGallery.shareSuccess","Shared successfully"))}catch(v){v?.message!=="User did not share"&&G(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},I=t.type==="video",F=t.type==="gif",B=t.durationMs?(t.durationMs/1e3).toFixed(1):null,Ge=B?`00:${Number(B)<10?"0":""}${B}`:"00:05.0",Z=!0;return<Me visible={ve}transparent={!0}animationType="fade"onRequestClose={M}>
       <C style={o.overlay}>
         
         <C style={o.header}>
-          <I activeOpacity={.8}onPress={O}style={o.headerLeft}>
-            <C style={[o.badge,{borderColor:A?`${e.sky400}80`:F?`${e.warningAmber}80`:`${e.emerald500}80`,backgroundColor:A?`${e.sky400}20`:F?`${e.warningAmber}20`:`${e.emerald500}20`}]}>
-              {A?<E size={13}color={e.sky400}/>:F?<H size={13}color={e.warningAmber}/>:<Le size={13}color={e.emerald500}/>}
-              <T style={[o.badgeText,{color:A?e.sky400:F?e.warningAmber:e.emerald500}]}>
+          <A activeOpacity={.8}onPress={O}style={o.headerLeft}>
+            <C style={[o.badge,{borderColor:I?`${e.sky400}80`:F?`${e.warningAmber}80`:`${e.emerald500}80`,backgroundColor:I?`${e.sky400}20`:F?`${e.warningAmber}20`:`${e.emerald500}20`}]}>
+              {I?<E size={13}color={e.sky400}/>:F?<H size={13}color={e.warningAmber}/>:<Le size={13}color={e.emerald500}/>}
+              <T style={[o.badgeText,{color:I?e.sky400:F?e.warningAmber:e.emerald500}]}>
                 {t.format.toUpperCase()}
               </T>
             </C>
@@ -17,7 +17,7 @@ import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platf
                 {Se(t.sizeBytes)} • {new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}
               </T>
             </C>
-          </I>
+          </A>
 
           
           <C style={o.headerRight}>
@@ -33,20 +33,20 @@ import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platf
               <Ue size={14}color={e.red500}/>
             </R>
 
-            <I accessible={!0}accessibilityRole="button"accessibilityLabel={z?r("mediaGallery.collapse","Exit Fullscreen"):r("mediaGallery.expand","Expand Fullscreen")}onPress={()=>ze(!z)}style={[o.headerIconBtn,z&&{backgroundColor:`${e.sky400}30`,borderColor:`${e.sky400}70`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <We size={14}isExpanded={z}color={z?e.sky400:e.white}/>
-            </I>
+            <A accessible={!0}accessibilityRole="button"accessibilityLabel={P?r("mediaGallery.collapse","Exit Fullscreen"):r("mediaGallery.expand","Expand Fullscreen")}onPress={()=>Pe(!P)}style={[o.headerIconBtn,P&&{backgroundColor:`${e.sky400}30`,borderColor:`${e.sky400}70`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <We size={14}isExpanded={P}color={P?e.sky400:e.white}/>
+            </A>
 
-            <I accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.minimize","Minimize")}onPress={D}style={o.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <Me size={15}color={e.white}/>
-            </I>
+            <A accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.minimize","Minimize")}onPress={M}style={o.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+              <De size={15}color={e.white}/>
+            </A>
           </C>
         </C>
 
         
-        <C style={[o.stage,z&&o.stageExpanded,!Z&&{paddingBottom:V.OS==="ios"?34:16}]}>
-          <I activeOpacity={A?.9:1}onPress={A?X:void 0}style={[o.previewCard,z&&o.previewCardExpanded]}>
-            {A?t.thumbnailUri&&!Ie?<>
+        <C style={[o.stage,P&&o.stageExpanded,!Z&&{paddingBottom:V.OS==="ios"?34:16}]}>
+          <A activeOpacity={I?.9:1}onPress={I?X:void 0}style={[o.previewCard,P&&o.previewCardExpanded]}>
+            {I?t.thumbnailUri&&!Ae?<>
                   <_ source={{uri:t.thumbnailUri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>
                   <C style={o.videoImageOverlay}/>
                 </>:<C style={o.videoFallbackBackdrop}>
@@ -58,7 +58,7 @@ import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platf
                 </C>:<_ source={{uri:t.uri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>}
 
             
-            {A&&<C style={o.centerPlayOverlay}>
+            {I&&<C style={o.centerPlayOverlay}>
                 <C style={o.centerPlayCircle}>
                   <Ce size={28}color={e.white}/>
                 </C>
@@ -68,7 +68,7 @@ import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platf
               </C>}
 
             
-            {A&&<C style={o.videoBadgeOverlay}>
+            {I&&<C style={o.videoBadgeOverlay}>
                 <C style={o.playPill}>
                   <E size={12}color={e.sky400}/>
                   <T style={o.playPillText}>
@@ -86,56 +86,56 @@ import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platf
               </C>}
 
             
-            <I activeOpacity={.8}onPress={O}style={o.floatingMetaBadge}>
+            <A activeOpacity={.8}onPress={O}style={o.floatingMetaBadge}>
               <L size={11}color={e.sky400}/>
               <T style={o.floatingMetaText}>
                 {t.width&&t.height?`${t.width} \xD7 ${t.height}  \u2022  `:""}
                 {Se(t.sizeBytes)}
               </T>
-            </I>
-          </I>
+            </A>
+          </A>
         </C>
 
         
-        {A&&<C style={o.videoControlsPanel}>
+        {I&&<C style={o.videoControlsPanel}>
             
             <C style={o.progressSection}>
               <T style={o.timeLabel}>
                 00:0{Math.floor(W*(Number(B)||5))}
               </T>
-              <I activeOpacity={.8}onPress={()=>Re(v=>v>=.9?.1:v+.3)}style={o.progressTrack}>
+              <A activeOpacity={.8}onPress={()=>Re(v=>v>=.9?.1:v+.3)}style={o.progressTrack}>
                 <C style={[o.progressFill,{width:`${Math.max(10,Math.min(100,W*100))}%`}]}/>
                 <C style={[o.scrubberThumb,{left:`${Math.max(8,Math.min(96,W*100))}%`}]}/>
-              </I>
+              </A>
               <T style={o.timeLabel}>{Ge}</T>
             </C>
 
             
             <C style={o.controlsRow}>
               
-              <I onPress={X}style={o.controlActionPill}>
+              <A onPress={X}style={o.controlActionPill}>
                 {J?<Ee size={14}color={e.sky400}/>:<Ce size={14}color={e.sky400}/>}
                 <T style={[o.controlActionText,{color:e.sky400}]}>
                   {J?r("mediaGallery.pause","Pause"):r("mediaGallery.play","Play")}
                 </T>
-              </I>
+              </A>
 
               
               <C style={o.speedGroup}>
-                {["1.0x","1.5x","2.0x"].map(v=><I key={v}onPress={()=>Pe(v)}style={[o.speedBtn,Q===v&&o.speedBtnActive]}>
+                {["1.0x","1.5x","2.0x"].map(v=><A key={v}onPress={()=>ze(v)}style={[o.speedBtn,Q===v&&o.speedBtnActive]}>
                     <T style={[o.speedText,Q===v&&o.speedTextActive]}>
                       {v}
                     </T>
-                  </I>)}
+                  </A>)}
               </C>
 
               
-              <I onPress={()=>Be(!$)}style={[o.loopPill,$&&o.loopPillActive]}>
+              <A onPress={()=>Be(!$)}style={[o.loopPill,$&&o.loopPillActive]}>
                 <He size={12}color={$?e.sky400:e.whiteAlpha60}/>
                 <T style={[o.loopText,$&&o.loopTextActive]}>
                   {$?"Loop: ON":"Loop: OFF"}
                 </T>
-              </I>
+              </A>
             </C>
           </C>}
 
@@ -148,7 +148,7 @@ import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platf
               </T>
             </R>
 
-            {M&&A&&<R onPress={Fe}disabled={U}style={[o.actionBtn,{backgroundColor:`${e.warningAmber}22`,borderColor:`${e.warningAmber}70`}]}>
+            {D&&I&&<R onPress={Fe}disabled={U}style={[o.actionBtn,{backgroundColor:`${e.warningAmber}22`,borderColor:`${e.warningAmber}70`}]}>
                 <H size={15}color={e.warningAmber}/>
                 <T style={[o.actionText,{color:e.warningAmber}]}>
                   {r(U?"mediaGallery.converting":"mediaGallery.convertToGif")}
@@ -163,4 +163,4 @@ import{useState as P}from"react";import{Alert as Ve,Image as _,Modal as De,Platf
             </R>
           </C>}
       </C>
-    </De>};const o=oe.create({overlay:{flex:1,backgroundColor:"#090D16FA",justifyContent:"space-between"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:V.OS==="ios"?52:20,paddingBottom:14,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,minWidth:0,marginRight:10},headerRight:{flexDirection:"row",alignItems:"center",gap:8},badge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1},badgeText:{fontFamily:S.interBold,fontSize:10.5,letterSpacing:.4},title:{fontFamily:S.interSemiBold,fontSize:13.5,color:e.white},subtitle:{fontFamily:S.interRegular,fontSize:11,color:e.whiteAlpha60,marginTop:1},headerActionBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},headerShareBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`,alignItems:"center",justifyContent:"center"},headerDeleteBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.red500}20`,borderWidth:1,borderColor:`${e.red500}60`,alignItems:"center",justifyContent:"center"},headerIconBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},stage:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:10,paddingTop:10,paddingBottom:10},stageExpanded:{paddingHorizontal:0,paddingTop:0,paddingBottom:0},previewCard:{flex:1,width:"100%",borderRadius:14,overflow:"hidden",backgroundColor:"#05070D",borderWidth:1,borderColor:e.borderGlassLight,alignItems:"center",justifyContent:"center",position:"relative"},previewCardExpanded:{borderRadius:0,borderWidth:0},image:{width:"100%",height:"100%"},videoImageOverlay:{...oe.absoluteFillObject,backgroundColor:"rgba(5, 7, 13, 0.25)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:"#070C18",alignItems:"center",justifyContent:"center",gap:8},videoFallbackGlow:{position:"absolute",width:140,height:140,borderRadius:70,backgroundColor:`${e.sky400}18`},videoFallbackTitle:{fontFamily:S.interSemiBold,fontSize:15,color:e.white,marginTop:8},videoFallbackSubtitle:{fontFamily:S.interRegular,fontSize:12,color:e.whiteAlpha60},centerPlayOverlay:{position:"absolute",alignItems:"center",justifyContent:"center",gap:8},centerPlayCircle:{width:64,height:64,borderRadius:32,backgroundColor:`${e.sky400}E0`,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:e.sky400,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:8},centerPlayText:{fontFamily:S.interSemiBold,fontSize:13,color:e.white,letterSpacing:.3,textShadowColor:"rgba(0,0,0,0.7)",textShadowOffset:{width:0,height:1},textShadowRadius:3},videoBadgeOverlay:{position:"absolute",bottom:12,left:12},playPill:{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:5,borderRadius:16,borderWidth:1,borderColor:e.whiteAlpha20},playPillText:{fontFamily:S.interSemiBold,fontSize:11,color:e.white,letterSpacing:.3},floatingMetaBadge:{position:"absolute",bottom:10,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,borderWidth:1,borderColor:e.whiteAlpha15,alignItems:"center",justifyContent:"center"},floatingMetaText:{fontFamily:S.interMedium,fontSize:10.5,color:e.slate200,letterSpacing:.2},videoControlsPanel:{paddingHorizontal:16,paddingTop:8,paddingBottom:6,backgroundColor:e.headerGlassDark,borderTopWidth:1,borderTopColor:e.borderGlassLight,gap:8},progressSection:{flexDirection:"row",alignItems:"center",gap:10},timeLabel:{fontFamily:S.interMedium,fontSize:11,color:e.whiteAlpha60,minWidth:42},progressTrack:{flex:1,height:6,borderRadius:3,backgroundColor:e.whiteAlpha15,justifyContent:"center",position:"relative"},progressFill:{height:"100%",borderRadius:3,backgroundColor:e.sky400},scrubberThumb:{position:"absolute",width:12,height:12,borderRadius:6,backgroundColor:e.white,borderWidth:2,borderColor:e.sky400,top:-3,marginLeft:-6},controlsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:2},controlActionPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}50`},controlActionText:{fontFamily:S.interSemiBold,fontSize:11.5},speedGroup:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha08,borderRadius:6,borderWidth:1,borderColor:e.whiteAlpha12,padding:2,gap:2},speedBtn:{paddingHorizontal:7,paddingVertical:3,borderRadius:4},speedBtnActive:{backgroundColor:`${e.sky400}30`},speedText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},speedTextActive:{color:e.sky400,fontFamily:S.interBold},loopPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:5,borderRadius:6,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha12},loopPillActive:{backgroundColor:`${e.sky400}18`,borderColor:`${e.sky400}50`},loopText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},loopTextActive:{color:e.sky400,fontFamily:S.interSemiBold},footer:{flexDirection:"row",alignItems:"center",justifyContent:"center",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:8,paddingBottom:V.OS==="ios"?34:16,borderTopWidth:1,borderTopColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},actionBtn:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:16,paddingVertical:9,borderRadius:8,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha15},actionText:{fontFamily:S.interMedium,fontSize:12,color:e.white}});
+    </Me>};const o=oe.create({overlay:{flex:1,backgroundColor:e.mediaModalBg,justifyContent:"space-between"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:V.OS==="ios"?52:20,paddingBottom:14,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,minWidth:0,marginRight:10},headerRight:{flexDirection:"row",alignItems:"center",gap:8},badge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1},badgeText:{fontFamily:S.interBold,fontSize:10.5,letterSpacing:.4},title:{fontFamily:S.interSemiBold,fontSize:13.5,color:e.white},subtitle:{fontFamily:S.interRegular,fontSize:11,color:e.whiteAlpha60,marginTop:1},headerActionBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},headerShareBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`,alignItems:"center",justifyContent:"center"},headerDeleteBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.red500}20`,borderWidth:1,borderColor:`${e.red500}60`,alignItems:"center",justifyContent:"center"},headerIconBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},stage:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:10,paddingTop:10,paddingBottom:10},stageExpanded:{paddingHorizontal:0,paddingTop:0,paddingBottom:0},previewCard:{flex:1,width:"100%",borderRadius:14,overflow:"hidden",backgroundColor:e.mediaDarkTile,borderWidth:1,borderColor:e.borderGlassLight,alignItems:"center",justifyContent:"center",position:"relative"},previewCardExpanded:{borderRadius:0,borderWidth:0},image:{width:"100%",height:"100%"},videoImageOverlay:{...oe.absoluteFillObject,backgroundColor:"rgba(5, 7, 13, 0.25)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:e.mediaPlayerBg,alignItems:"center",justifyContent:"center",gap:8},videoFallbackGlow:{position:"absolute",width:140,height:140,borderRadius:70,backgroundColor:`${e.sky400}18`},videoFallbackTitle:{fontFamily:S.interSemiBold,fontSize:15,color:e.white,marginTop:8},videoFallbackSubtitle:{fontFamily:S.interRegular,fontSize:12,color:e.whiteAlpha60},centerPlayOverlay:{position:"absolute",alignItems:"center",justifyContent:"center",gap:8},centerPlayCircle:{width:64,height:64,borderRadius:32,backgroundColor:`${e.sky400}E0`,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:e.sky400,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:8},centerPlayText:{fontFamily:S.interSemiBold,fontSize:13,color:e.white,letterSpacing:.3,textShadowColor:"rgba(0,0,0,0.7)",textShadowOffset:{width:0,height:1},textShadowRadius:3},videoBadgeOverlay:{position:"absolute",bottom:12,left:12},playPill:{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:5,borderRadius:16,borderWidth:1,borderColor:e.whiteAlpha20},playPillText:{fontFamily:S.interSemiBold,fontSize:11,color:e.white,letterSpacing:.3},floatingMetaBadge:{position:"absolute",bottom:10,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,borderWidth:1,borderColor:e.whiteAlpha15,alignItems:"center",justifyContent:"center"},floatingMetaText:{fontFamily:S.interMedium,fontSize:10.5,color:e.slate200,letterSpacing:.2},videoControlsPanel:{paddingHorizontal:16,paddingTop:8,paddingBottom:6,backgroundColor:e.headerGlassDark,borderTopWidth:1,borderTopColor:e.borderGlassLight,gap:8},progressSection:{flexDirection:"row",alignItems:"center",gap:10},timeLabel:{fontFamily:S.interMedium,fontSize:11,color:e.whiteAlpha60,minWidth:42},progressTrack:{flex:1,height:6,borderRadius:3,backgroundColor:e.whiteAlpha15,justifyContent:"center",position:"relative"},progressFill:{height:"100%",borderRadius:3,backgroundColor:e.sky400},scrubberThumb:{position:"absolute",width:12,height:12,borderRadius:6,backgroundColor:e.white,borderWidth:2,borderColor:e.sky400,top:-3,marginLeft:-6},controlsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:2},controlActionPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}50`},controlActionText:{fontFamily:S.interSemiBold,fontSize:11.5},speedGroup:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha08,borderRadius:6,borderWidth:1,borderColor:e.whiteAlpha12,padding:2,gap:2},speedBtn:{paddingHorizontal:7,paddingVertical:3,borderRadius:4},speedBtnActive:{backgroundColor:`${e.sky400}30`},speedText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},speedTextActive:{color:e.sky400,fontFamily:S.interBold},loopPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:5,borderRadius:6,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha12},loopPillActive:{backgroundColor:`${e.sky400}18`,borderColor:`${e.sky400}50`},loopText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},loopTextActive:{color:e.sky400,fontFamily:S.interSemiBold},footer:{flexDirection:"row",alignItems:"center",justifyContent:"center",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:8,paddingBottom:V.OS==="ios"?34:16,borderTopWidth:1,borderTopColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},actionBtn:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:16,paddingVertical:9,borderRadius:8,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha15},actionText:{fontFamily:S.interMedium,fontSize:12,color:e.white}});