react-native-inapp-inspector 2.5.1 → 2.5.3

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

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

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

@@ -1,83 +1,83 @@
-import{useState as V,useEffect as He,useMemo as ae,useCallback as ne}from"react";import{Dimensions as je,FlatList as Ee,Image as Ce,RefreshControl as _e,Share as Te,StyleSheet as Ne,Text as T,TouchableOpacity as I,View as C}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as B}from"../../styles/AppFonts";import Se from"../TouchableScale";import Je from"../EmptyState";import{CheckIcon as Ie,CopyIcon as X,FilmIcon as P,GifIcon as Y,GridIcon as Qe,ImageIcon as O,ListIcon as Xe,PlayIcon as Be,ScreencastIcon as Ye,ShareIcon as Re,TrashIcon as Z}from"../NetworkIcons";import{MediaPreviewModal as Ze}from"./MediaPreviewModal";import{ScreenCapture as U}from"../../capture";import{copyImageOrMediaToClipboard as Ke,copyToClipboard as et,formatBytes as H}from"../../helpers";import{showToast as $}from"../../helpers/toast";import{useTranslation as tt}from"../../i18n";import{useInspector as ot}from"./InspectorContext";import{ConfirmationModal as Ct}from"./ConfirmationModal";export const MediaGalleryTab=()=>{const{t:r}=tt(),{refreshMediaCount:W,switchActiveTab:_}=ot(),[S,K]=V([]),[Ge,ee]=V(!1),[j,Me]=V("all"),[te,N]=V(null),[v,E]=V(new Set),[R,oe]=V("grid"),[A,F]=V({visible:!1,title:"",message:"",onConfirm:()=>{}}),M=ne(async()=>{try{const e=await U.getMediaList();K(e),W?.().catch(()=>{})}catch{K([])}},[W]);He(()=>{M()},[M]);const De=async()=>{ee(!0),await M(),ee(!1)},G=ae(()=>j==="all"?S:S.filter(e=>e.type===j),[S,j]),q=ae(()=>S.reduce((e,i)=>e+(i.sizeBytes||0),0),[S]),ie=ne(e=>{E(i=>{const l=new Set(i);return l.has(e)?l.delete(e):l.add(e),l})},[]),re=async e=>{await U.deleteMedia(e.uri),E(l=>{const a=new Set(l);return a.delete(e.id),a}),await M(),await W?.()===0&&_("apis"),$(r("mediaGallery.deleted"))},le=e=>{e?.uri&&Ke(e.uri,e.type==="image"?"Image":"Media")},Ve=()=>{const e=S.filter(l=>v.has(l.id));if(e.length===0)return;const i=e.map(l=>l.uri).join(`
-`);et(i,`${e.length} Media URIs`),$(`${e.length} file URIs copied to clipboard`)},We=async e=>{try{const i=e.uri.startsWith("file://")||e.uri.startsWith("content://")||e.uri.startsWith("http")?e.uri:`file://${e.uri}`;await Te.share({url:i,title:e.filename,message:e.filename})}catch{$(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ae=async()=>{const e=S.filter(i=>v.has(i.id));if(e.length!==0)try{const i=e[0],l=i.uri.startsWith("file://")||i.uri.startsWith("content://")||i.uri.startsWith("http")?i.uri:`file://${i.uri}`;await Te.share({url:l,title:i.filename,message:e.length===1?i.filename:`${e.length} items: ${e.map(a=>a.filename).join(", ")}`})}catch{$(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},$e=()=>{const e=v.size;e!==0&&F({visible:!0,title:r("mediaGallery.deleteSelectedTitle","Delete Selected Media"),message:r("mediaGallery.deleteSelectedMessage",{count:e,defaultValue:`Are you sure you want to permanently delete ${e} media items?`}),confirmText:r("mediaGallery.delete","Delete"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{F(a=>({...a,visible:!1}));const i=S.filter(a=>v.has(a.id));for(const a of i)await U.deleteMedia(a.uri);E(new Set),await M(),await W?.()===0&&_("apis"),$(r("mediaGallery.deletedCount",{count:i.length}))}})},Fe=()=>{F({visible:!0,title:r("mediaGallery.purgeTitle","Purge Gallery"),message:r("mediaGallery.purgeMessage",{count:S.length,size:H(q),defaultValue:`Are you sure you want to delete all ${S.length} media files (${H(q)})? This cannot be undone.`}),confirmText:r("common.clearAll","Clear All"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{F(e=>({...e,visible:!1})),await U.clearAllMedia(),E(new Set),await M(),await W?.(),_("apis"),$(r("mediaGallery.allPurged"))}})},Le=async e=>{await U.convertToGif(e.uri,{fps:12,width:480})&&(await M(),W?.().catch(()=>{}))},Pe=(e,i)=>{const l=i?t.sky400:t.slate400,a=12;switch(e){case"all":return<Ye size={a}color={l}/>;case"image":return<O size={a}color={l}/>;case"video":return<P size={a}color={l}/>;case"gif":return<Y size={a}color={l}/>}},Oe=({item:e})=>{if(!e)return null;const i=e.type==="video",l=e.type==="gif",a=i&&e.thumbnailUri||e.uri,D=!!(e.id&&v.has(e.id)),J=(e.format||(i?"mp4":l?"gif":"png")).toUpperCase(),Q=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",L=e.timestamp?new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):"";return<Se onPress={()=>N(e)}style={[o.card,D&&o.cardSelected]}>
+import{useState as $,useEffect as je,useMemo as ae,useCallback as ne}from"react";import{Dimensions as Ee,FlatList as Ne,Image as Ce,RefreshControl as _e,Share as Te,StyleSheet as qe,Text as S,TouchableOpacity as I,View as C}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as z}from"../../styles/AppFonts";import Se from"../TouchableScale";import Je from"../EmptyState";import{CameraRollIcon as Ie,CheckIcon as Be,CopyIcon as Q,FilmIcon as L,GifIcon as X,GridIcon as Qe,ImageIcon as U,ListIcon as Xe,PlayIcon as Re,ScreencastIcon as Ye,ShareIcon as Ge,TrashIcon as Y}from"../NetworkIcons";import{MediaPreviewModal as Ze}from"./MediaPreviewModal";import{ScreenCapture as A}from"../../capture";import{copyImageOrMediaToClipboard as Ke,copyToClipboard as et,formatBytes as H}from"../../helpers";import{showToast as M}from"../../helpers/toast";import{useTranslation as tt}from"../../i18n";import{useInspector as ot}from"./InspectorContext";import{ConfirmationModal as Ct}from"./ConfirmationModal";export const MediaGalleryTab=()=>{const{t:r}=tt(),{refreshMediaCount:D,switchActiveTab:N,previewMediaItem:Z,setPreviewMediaItem:j}=ot(),[x,K]=$([]),[Ve,ee]=$(!1),[v,Me]=$("all"),[B,E]=$(new Set),[R,te]=$("grid"),[P,F]=$({visible:!1,title:"",message:"",onConfirm:()=>{}}),oe=async()=>{try{const e=v==="image"?"image":v==="video"?"video":"any",i=await A.pickMedia({mediaType:e});i&&(await G(),D?.().catch(()=>{}),M(i.type==="video"?r("mediaGallery.importedVideo","Video imported from Camera Roll"):r("mediaGallery.importedPhoto","Photo imported from Camera Roll")),j(i))}catch{M(r("mediaGallery.importFailed","Failed to import media"))}},G=ne(async()=>{try{const e=await A.getMediaList();K(e),D?.().catch(()=>{})}catch{K([])}},[D]);je(()=>{G()},[G]);const De=async()=>{ee(!0),await G(),ee(!1)},V=ae(()=>v==="all"?x:x.filter(e=>e.type===v),[x,v]),_=ae(()=>x.reduce((e,i)=>e+(i.sizeBytes||0),0),[x]),ie=ne(e=>{E(i=>{const l=new Set(i);return l.has(e)?l.delete(e):l.add(e),l})},[]),re=async e=>{await A.deleteMedia(e.uri),E(l=>{const T=new Set(l);return T.delete(e.id),T}),await G(),await D?.()===0&&N("apis"),M(r("mediaGallery.deleted"))},le=e=>{e?.uri&&Ke(e.uri,e.type==="image"?"Image":"Media")},We=()=>{const e=x.filter(l=>B.has(l.id));if(e.length===0)return;const i=e.map(l=>l.uri).join(`
+`);et(i,`${e.length} Media URIs`),M(`${e.length} file URIs copied to clipboard`)},Pe=async e=>{try{const i=e.uri.startsWith("file://")||e.uri.startsWith("content://")||e.uri.startsWith("http")?e.uri:`file://${e.uri}`;await Te.share({url:i,title:e.filename,message:e.filename})}catch{M(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},$e=async()=>{const e=x.filter(i=>B.has(i.id));if(e.length!==0)try{const i=e[0],l=i.uri.startsWith("file://")||i.uri.startsWith("content://")||i.uri.startsWith("http")?i.uri:`file://${i.uri}`;await Te.share({url:l,title:i.filename,message:e.length===1?i.filename:`${e.length} items: ${e.map(T=>T.filename).join(", ")}`})}catch{M(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ae=()=>{const e=B.size;e!==0&&F({visible:!0,title:r("mediaGallery.deleteSelectedTitle","Delete Selected Media"),message:r("mediaGallery.deleteSelectedMessage",{count:e,defaultValue:`Are you sure you want to permanently delete ${e} media items?`}),confirmText:r("mediaGallery.delete","Delete"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{F(T=>({...T,visible:!1}));const i=x.filter(T=>B.has(T.id));for(const T of i)await A.deleteMedia(T.uri);E(new Set),await G(),await D?.()===0&&N("apis"),M(r("mediaGallery.deletedCount",{count:i.length}))}})},Fe=()=>{F({visible:!0,title:r("mediaGallery.purgeTitle","Purge Gallery"),message:r("mediaGallery.purgeMessage",{count:x.length,size:H(_),defaultValue:`Are you sure you want to delete all ${x.length} media files (${H(_)})? This cannot be undone.`}),confirmText:r("common.clearAll","Clear All"),cancelText:r("common.cancel","Cancel"),onConfirm:async()=>{F(e=>({...e,visible:!1})),await A.clearAllMedia(),E(new Set),await G(),await D?.(),N("apis"),M(r("mediaGallery.allPurged"))}})},Oe=async e=>{await A.convertToGif(e.uri,{fps:12,width:480})&&(await G(),D?.().catch(()=>{}))},Le=(e,i)=>{const l=i?t.sky400:t.slate400,T=12;switch(e){case"all":return<Ye size={T}color={l}/>;case"image":return<U size={T}color={l}/>;case"video":return<L size={T}color={l}/>;case"gif":return<X size={T}color={l}/>}},Ue=({item:e})=>{if(!e)return null;const i=e.type==="video",l=e.type==="gif",T=i&&e.thumbnailUri||e.uri,W=!!(e.id&&B.has(e.id)),q=(e.format||(i?"mp4":l?"gif":"png")).toUpperCase(),J=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",O=e.timestamp?new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):"";return<Se onPress={()=>j(e)}style={[o.card,W&&o.cardSelected]}>
         <C style={o.thumbnailContainer}>
-          {a?<Ce source={{uri:a}}style={o.thumbnail}resizeMode="cover"/>:<C style={o.thumbnailFallback}>
-              {i?<P size={26}color={t.sky400}/>:<O size={26}color={t.slate400}/>}
+          {T?<Ce source={{uri:T}}style={o.thumbnail}resizeMode="cover"/>:<C style={o.thumbnailFallback}>
+              {i?<L size={26}color={t.sky400}/>:<U size={26}color={t.slate400}/>}
             </C>}
 
           
-          <I onPress={()=>e.id&&ie(e.id)}style={[o.checkbox,D&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            {D&&<Ie size={12}color={t.white}/>}
+          <I onPress={()=>e.id&&ie(e.id)}style={[o.checkbox,W&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            {W&&<Be size={12}color={t.white}/>}
           </I>
 
           {i&&<C style={o.miniPlayCircle}>
-              <Be size={14}color={t.white}/>
+              <Re size={14}color={t.white}/>
             </C>}
           <C style={o.typeBadge}>
-            {i?<P size={11}color={t.sky400}/>:l?<Y size={11}color={t.warningAmber}/>:<O size={11}color={t.emerald500}/>}
-            <T style={o.typeBadgeText}>
-              {J}
-            </T>
+            {i?<L size={11}color={t.sky400}/>:l?<X size={11}color={t.warningAmber}/>:<U size={11}color={t.emerald500}/>}
+            <S style={o.typeBadgeText}>
+              {q}
+            </S>
           </C>
         </C>
 
         <C style={o.cardInfo}>
-          <T style={o.cardTitle}numberOfLines={1}>
-            {Q}
-          </T>
+          <S style={o.cardTitle}numberOfLines={1}>
+            {J}
+          </S>
           <C style={o.cardMetaRow}>
             <C style={{flexDirection:"row",alignItems:"center",gap:4,flex:1,minWidth:0}}>
-              <T style={o.cardMeta}numberOfLines={1}>
+              <S style={o.cardMeta}numberOfLines={1}>
                 {H(e.sizeBytes||0)}
-              </T>
-              {L?<>
-                  <T style={o.cardMetaDot}>•</T>
-                  <T style={o.cardMeta}numberOfLines={1}>
-                    {L}
-                  </T>
+              </S>
+              {O?<>
+                  <S style={o.cardMetaDot}>•</S>
+                  <S style={o.cardMeta}numberOfLines={1}>
+                    {O}
+                  </S>
                 </>:null}
             </C>
             <I onPress={()=>le(e)}style={o.gridCopyBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
-              <X size={11}color={t.slate400}/>
+              <Q size={11}color={t.slate400}/>
             </I>
           </C>
         </C>
-      </Se>},Ue=({item:e})=>{if(!e)return null;const i=e.type==="video",l=e.type==="gif",a=i&&e.thumbnailUri||e.uri,D=!!(e.id&&v.has(e.id)),J=(e.format||(i?"mp4":l?"gif":"png")).toUpperCase(),Q=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",L=e.timestamp?`${new Date(e.timestamp).toLocaleDateString([],{month:"short",day:"numeric"})} ${new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}`:"";return<Se onPress={()=>N(e)}style={[o.listRow,D&&o.listRowSelected]}>
+      </Se>},He=({item:e})=>{if(!e)return null;const i=e.type==="video",l=e.type==="gif",T=i&&e.thumbnailUri||e.uri,W=!!(e.id&&B.has(e.id)),q=(e.format||(i?"mp4":l?"gif":"png")).toUpperCase(),J=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",O=e.timestamp?`${new Date(e.timestamp).toLocaleDateString([],{month:"short",day:"numeric"})} ${new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}`:"";return<Se onPress={()=>j(e)}style={[o.listRow,W&&o.listRowSelected]}>
         
-        <I onPress={()=>e.id&&ie(e.id)}style={[o.listCheckbox,D&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-          {D&&<Ie size={12}color={t.white}/>}
+        <I onPress={()=>e.id&&ie(e.id)}style={[o.listCheckbox,W&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          {W&&<Be size={12}color={t.white}/>}
         </I>
 
         
         <C style={o.listThumbContainer}>
-          {a?<Ce source={{uri:a}}style={o.listThumb}resizeMode="cover"/>:<C style={o.listThumbFallback}>
-              {i?<P size={18}color={t.sky400}/>:<O size={18}color={t.slate400}/>}
+          {T?<Ce source={{uri:T}}style={o.listThumb}resizeMode="cover"/>:<C style={o.listThumbFallback}>
+              {i?<L size={18}color={t.sky400}/>:<U size={18}color={t.slate400}/>}
             </C>}
           {i&&<C style={o.listMiniPlay}>
-              <Be size={10}color={t.white}/>
+              <Re size={10}color={t.white}/>
             </C>}
         </C>
 
         
         <C style={o.listInfo}>
-          <T style={o.listTitle}numberOfLines={1}>
-            {Q}
-          </T>
+          <S style={o.listTitle}numberOfLines={1}>
+            {J}
+          </S>
           <C style={o.listMetaRow}>
             <C style={o.listBadge}>
-              {i?<P size={10}color={t.sky400}/>:l?<Y size={10}color={t.warningAmber}/>:<O size={10}color={t.emerald500}/>}
-              <T style={o.listBadgeText}>
-                {J}
-              </T>
+              {i?<L size={10}color={t.sky400}/>:l?<X size={10}color={t.warningAmber}/>:<U size={10}color={t.emerald500}/>}
+              <S style={o.listBadgeText}>
+                {q}
+              </S>
             </C>
-            <T style={o.cardMeta}>
+            <S style={o.cardMeta}>
               {H(e.sizeBytes||0)}
-            </T>
-            {L?<>
-                <T style={o.cardMetaDot}>•</T>
-                <T style={o.cardMeta}>
-                  {L}
-                </T>
+            </S>
+            {O?<>
+                <S style={o.cardMetaDot}>•</S>
+                <S style={o.cardMeta}>
+                  {O}
+                </S>
               </>:null}
           </C>
         </C>
@@ -85,86 +85,104 @@ import{useState as V,useEffect as He,useMemo as ae,useCallback as ne}from"react"
         
         <C style={o.listActionsRow}>
           <I onPress={()=>le(e)}style={o.listCopyBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            <X size={13}color={t.slate200}/>
+            <Q size={13}color={t.slate200}/>
           </I>
 
-          <I onPress={()=>We(e)}style={o.listShareBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            <Re size={13}color={t.sky400}/>
+          <I onPress={()=>Pe(e)}style={o.listShareBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            <Ge size={13}color={t.sky400}/>
           </I>
 
           <I onPress={()=>re(e)}style={o.listDeleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            <Z size={13}color={t.red500}/>
+            <Y size={13}color={t.red500}/>
           </I>
         </C>
       </Se>};return<C style={o.container}>
       
       <C style={o.filterBar}>
         <C style={o.chipGroup}>
-          {["all","image","video","gif"].map(e=>{const i=j===e,l=e==="all"?r("mediaGallery.all",{count:S.length}):r(e==="image"?"mediaGallery.photos":e==="video"?"mediaGallery.videos":"mediaGallery.gifs");return<I key={e}onPress={()=>Me(e)}style={[o.chip,i&&o.chipActive]}>
-                {Pe(e,i)}
-                <T style={[o.chipText,i&&o.chipTextActive]}>
+          {["all","image","video","gif"].map(e=>{const i=v===e,l=e==="all"?r("mediaGallery.all",{count:x.length}):r(e==="image"?"mediaGallery.photos":e==="video"?"mediaGallery.videos":"mediaGallery.gifs");return<I key={e}onPress={()=>Me(e)}style={[o.chip,i&&o.chipActive]}>
+                {Le(e,i)}
+                <S style={[o.chipText,i&&o.chipTextActive]}>
                   {l}
-                </T>
+                </S>
               </I>})}
         </C>
 
         
-        <C style={o.viewToggleContainer}>
-          <I onPress={()=>oe("grid")}style={[o.viewToggleBtn,R==="grid"&&o.viewToggleBtnActive]}>
-            <Qe size={13}color={R==="grid"?t.white:t.slate400}/>
-          </I>
-          <I onPress={()=>oe("list")}style={[o.viewToggleBtn,R==="list"&&o.viewToggleBtnActive]}>
-            <Xe size={13}color={R==="list"?t.white:t.slate400}/>
+        <C style={o.rightControls}>
+          <I onPress={oe}style={o.importBtn}accessibilityLabel="Open Camera Roll"hitSlop={{top:6,bottom:6,left:6,right:6}}>
+            <Ie size={12}color={t.sky400}/>
+            <S style={o.importBtnText}>
+              {v==="image"?"Photos":v==="video"?"Videos":"Import"}
+            </S>
           </I>
+
+          
+          <C style={o.viewToggleContainer}>
+            <I onPress={()=>te("grid")}style={[o.viewToggleBtn,R==="grid"&&o.viewToggleBtnActive]}>
+              <Qe size={13}color={R==="grid"?t.white:t.slate400}/>
+            </I>
+            <I onPress={()=>te("list")}style={[o.viewToggleBtn,R==="list"&&o.viewToggleBtnActive]}>
+              <Xe size={13}color={R==="list"?t.white:t.slate400}/>
+            </I>
+          </C>
         </C>
       </C>
 
       
-      {S.length>0&&<C style={o.subBar}>
+      {x.length>0&&<C style={o.subBar}>
           <C style={o.resultCountWrapper}>
-            <T style={[o.resultCountText,v.size>0&&o.resultCountTextSelected]}>
-              {v.size>0?r("mediaGallery.selectedOfResults",{selected:v.size,total:G.length,defaultValue:`Selected ${v.size} of ${G.length} results`}):G.length!==S.length?r("mediaGallery.showingFilteredResults",{count:G.length,total:S.length,defaultValue:`Showing ${G.length} of ${S.length} results`}):r("mediaGallery.showingResults",{count:G.length,defaultValue:`Showing ${G.length} results`})}
-            </T>
+            <S style={[o.resultCountText,B.size>0&&o.resultCountTextSelected]}>
+              {B.size>0?r("mediaGallery.selectedOfResults",{selected:B.size,total:V.length,defaultValue:`Selected ${B.size} of ${V.length} results`}):V.length!==x.length?r("mediaGallery.showingFilteredResults",{count:V.length,total:x.length,defaultValue:`Showing ${V.length} of ${x.length} results`}):r("mediaGallery.showingResults",{count:V.length,defaultValue:`Showing ${V.length} results`})}
+            </S>
           </C>
 
           <C style={o.actionsGroup}>
-            {v.size>0&&<>
-                <I onPress={Ve}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-                  <X size={12}color={t.slate200}/>
-                  <T style={o.copySelectedBtnText}>
+            {B.size>0&&<>
+                <I onPress={We}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <Q size={12}color={t.slate200}/>
+                  <S style={o.copySelectedBtnText}>
                     {r("mediaGallery.copyUri","Copy URI")}
-                  </T>
+                  </S>
                 </I>
 
-                <I onPress={Ae}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-                  <Re size={12}color={t.sky400}/>
-                  <T style={o.shareSelectedBtnText}>
+                <I onPress={$e}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <Ge size={12}color={t.sky400}/>
+                  <S style={o.shareSelectedBtnText}>
                     {r("mediaGallery.share","Share")}
-                  </T>
+                  </S>
                 </I>
 
-                <I onPress={$e}style={o.deleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-                  <Z size={13}color={t.red500}/>
-                  <T style={o.deleteBtnText}>
-                    {r("mediaGallery.deleteSelected",{count:v.size})}
-                  </T>
+                <I onPress={Ae}style={o.deleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <Y size={13}color={t.red500}/>
+                  <S style={o.deleteBtnText}>
+                    {r("mediaGallery.deleteSelected",{count:B.size})}
+                  </S>
                 </I>
               </>}
 
             <I onPress={Fe}style={o.clearBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-              <Z size={13}color={t.red500}/>
-              <T style={o.clearBtnText}>
-                {r("mediaGallery.purge",{size:H(q)})}
-              </T>
+              <Y size={13}color={t.red500}/>
+              <S style={o.clearBtnText}>
+                {r("mediaGallery.purge",{size:H(_)})}
+              </S>
             </I>
           </C>
         </C>}
 
       
-      <Ee key={R}data={G}keyExtractor={e=>e.id}renderItem={R==="grid"?Oe:Ue}numColumns={R==="grid"?2:1}columnWrapperStyle={R==="grid"?o.columnWrapper:void 0}style={{flex:1}}contentContainerStyle={[o.listContent,{flexGrow:1}]}nestedScrollEnabled={!0}keyboardShouldPersistTaps="handled"refreshControl={<_e refreshing={Ge}onRefresh={De}tintColor={t.sky400}/>}ListEmptyComponent={<Je customTitle={r("mediaGallery.noMediaTitle")}customSub={r("mediaGallery.noMediaDesc")}showReload={!1}/>}/>
+      <Ne key={R}data={V}keyExtractor={e=>e.id}renderItem={R==="grid"?Ue:He}numColumns={R==="grid"?2:1}columnWrapperStyle={R==="grid"?o.columnWrapper:void 0}style={{flex:1}}contentContainerStyle={[o.listContent,{flexGrow:1}]}nestedScrollEnabled={!0}keyboardShouldPersistTaps="handled"refreshControl={<_e refreshing={Ve}onRefresh={De}tintColor={t.sky400}/>}ListEmptyComponent={<C style={o.emptyContainer}>
+            <Je customTitle={v==="image"?"No Photos Found":v==="video"?"No Videos Found":r("mediaGallery.noMediaTitle")}customSub={v==="image"?"Take a screenshot or import photos from Camera Roll.":v==="video"?"Record a video or import videos from Camera Roll.":r("mediaGallery.noMediaDesc")}showReload={!1}/>
+            <I onPress={oe}style={o.emptyImportBtn}activeOpacity={.8}>
+              <Ie size={14}color={t.white}/>
+              <S style={o.emptyImportBtnText}>
+                {v==="image"?r("mediaGallery.importPhotos","Import Photos from Camera Roll"):v==="video"?r("mediaGallery.importVideos","Import Videos from Camera Roll"):r("mediaGallery.openCameraRoll","Open Camera Roll")}
+              </S>
+            </I>
+          </C>}/>
 
       
-      <Ze item={te}visible={!!te}onClose={()=>N(null)}onDelete={re}onConvertToGif={Le}/>
+      <Ze item={Z}visible={!!Z}onClose={()=>j(null)}onDelete={re}onConvertToGif={Oe}/>
 
-      <Ct visible={A.visible}title={A.title}message={A.message}confirmText={A.confirmText}cancelText={A.cancelText}isDestructive={!0}icon="trash"onConfirm={A.onConfirm}onCancel={()=>F(e=>({...e,visible:!1}))}/>
-    </C>};const{width:Tt}=je.get("window"),St=(Tt-36)/2,o=Ne.create({container:{flex:1,backgroundColor:t.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:t.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:t.whiteAlpha06,borderWidth:1,borderColor:t.whiteAlpha10},chipActive:{backgroundColor:`${t.sky400}2E`,borderColor:t.sky400},chipText:{fontFamily:B.interMedium,fontSize:11,color:t.slate400},chipTextActive:{fontFamily:B.interBold,color:t.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${t.slate900}99`,borderBottomWidth:1,borderBottomColor:t.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:B.interMedium,fontSize:11,color:t.slate400},resultCountTextSelected:{fontFamily:B.interSemiBold,color:t.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:t.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:t.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${t.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.red500}26`,borderWidth:1,borderColor:`${t.red500}80`},deleteBtnText:{fontFamily:B.interBold,fontSize:10.5,color:t.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.red500}1F`,borderWidth:1,borderColor:`${t.red500}4D`},clearBtnText:{fontFamily:B.interMedium,fontSize:10.5,color:t.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:St,backgroundColor:t.slate800,borderRadius:8,borderWidth:1,borderColor:t.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:t.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:t.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:t.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:t.violet600,borderColor:t.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${t.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:t.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:t.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:t.borderGlassMedium},typeBadgeText:{fontFamily:B.interBold,fontSize:9,color:t.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:B.interMedium,fontSize:11.5,color:t.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:B.interRegular,fontSize:10,color:t.slate400},cardMetaDot:{fontSize:10,color:t.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:t.slate800,borderRadius:8,borderWidth:1,borderColor:t.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:t.violet600,borderWidth:1.5,backgroundColor:`${t.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:t.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:t.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${t.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:B.interMedium,fontSize:12,color:t.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:t.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:t.borderGlassMedium},listBadgeText:{fontFamily:B.interBold,fontSize:8.5,color:t.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:t.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:t.whiteAlpha10,borderWidth:1,borderColor:t.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${t.sky400}18`,borderWidth:1,borderColor:`${t.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${t.red500}14`,borderWidth:1,borderColor:`${t.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:t.whiteAlpha10,borderWidth:1,borderColor:t.whiteAlpha20},copySelectedBtnText:{fontFamily:B.interSemiBold,fontSize:10.5,color:t.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.sky400}20`,borderWidth:1,borderColor:`${t.sky400}60`},shareSelectedBtnText:{fontFamily:B.interBold,fontSize:10.5,color:t.sky400}});
+      <Ct visible={P.visible}title={P.title}message={P.message}confirmText={P.confirmText}cancelText={P.cancelText}isDestructive={!0}icon="trash"onConfirm={P.onConfirm}onCancel={()=>F(e=>({...e,visible:!1}))}/>
+    </C>};const{width:Tt}=Ee.get("window"),St=(Tt-36)/2,o=qe.create({container:{flex:1,backgroundColor:t.slate850},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:9,borderBottomWidth:1,borderBottomColor:t.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:t.whiteAlpha06,borderWidth:1,borderColor:t.whiteAlpha10},chipActive:{backgroundColor:`${t.sky400}2E`,borderColor:t.sky400},chipText:{fontFamily:z.interMedium,fontSize:11,color:t.slate400},chipTextActive:{fontFamily:z.interBold,color:t.sky400},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:7,backgroundColor:`${t.slate900}99`,borderBottomWidth:1,borderBottomColor:t.borderGlassLight,gap:8},resultCountWrapper:{flexDirection:"row",alignItems:"center",flexShrink:1},resultCountText:{fontFamily:z.interMedium,fontSize:11,color:t.slate400},resultCountTextSelected:{fontFamily:z.interSemiBold,color:t.sky400},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},rightControls:{flexDirection:"row",alignItems:"center",gap:6},importBtn:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:`${t.sky500}1F`,borderColor:`${t.sky400}44`,borderWidth:1,paddingHorizontal:8,paddingVertical:4.5,borderRadius:6},importBtnText:{fontFamily:z.interSemiBold,fontSize:11,color:t.sky400},emptyContainer:{alignItems:"center",justifyContent:"center",paddingVertical:36},emptyImportBtn:{flexDirection:"row",alignItems:"center",gap:7,backgroundColor:t.sky500,paddingHorizontal:16,paddingVertical:10,borderRadius:8,marginTop:18,shadowColor:t.sky500,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:6,elevation:3},emptyImportBtnText:{fontFamily:z.interSemiBold,fontSize:13,color:t.white},viewToggleContainer:{flexDirection:"row",alignItems:"center",backgroundColor:t.whiteAlpha06,borderRadius:6,padding:2,borderWidth:1,borderColor:t.whiteAlpha10},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:4,alignItems:"center",justifyContent:"center"},viewToggleBtnActive:{backgroundColor:`${t.violet600}80`},deleteBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.red500}26`,borderWidth:1,borderColor:`${t.red500}80`},deleteBtnText:{fontFamily:z.interBold,fontSize:10.5,color:t.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.red500}1F`,borderWidth:1,borderColor:`${t.red500}4D`},clearBtnText:{fontFamily:z.interMedium,fontSize:10.5,color:t.red500},listContent:{padding:12,gap:10},columnWrapper:{gap:12},card:{width:St,backgroundColor:t.slate800,borderRadius:8,borderWidth:1,borderColor:t.borderGlassLight,overflow:"hidden"},cardSelected:{borderColor:t.violet600,borderWidth:1.5},thumbnailContainer:{width:"100%",height:110,backgroundColor:t.slate850,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:t.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:t.violet600,borderColor:t.violet600},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",width:32,height:32,marginTop:-16,marginLeft:-16,borderRadius:16,backgroundColor:`${t.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:2,shadowColor:t.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:t.badgeGlassDark,paddingHorizontal:5,paddingVertical:2,borderRadius:4,borderWidth:1,borderColor:t.borderGlassMedium},typeBadgeText:{fontFamily:z.interBold,fontSize:9,color:t.slate200},cardInfo:{padding:8,gap:3},cardTitle:{fontFamily:z.interMedium,fontSize:11.5,color:t.white},cardMetaRow:{flexDirection:"row",alignItems:"center",gap:4},cardMeta:{fontFamily:z.interRegular,fontSize:10,color:t.slate400},cardMetaDot:{fontSize:10,color:t.whiteAlpha30},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:t.slate800,borderRadius:8,borderWidth:1,borderColor:t.borderGlassLight,padding:8,gap:10},listRowSelected:{borderColor:t.violet600,borderWidth:1.5,backgroundColor:`${t.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:t.slate850,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",backgroundColor:t.slate900},listMiniPlay:{position:"absolute",top:"50%",left:"50%",width:20,height:20,marginTop:-10,marginLeft:-10,borderRadius:10,backgroundColor:`${t.sky400}D9`,alignItems:"center",justifyContent:"center",paddingLeft:1},listInfo:{flex:1,gap:4,minWidth:0},listTitle:{fontFamily:z.interMedium,fontSize:12,color:t.white},listMetaRow:{flexDirection:"row",alignItems:"center",gap:6,flexWrap:"wrap"},listBadge:{flexDirection:"row",alignItems:"center",gap:3,backgroundColor:t.badgeGlassDark,paddingHorizontal:4,paddingVertical:1.5,borderRadius:4,borderWidth:1,borderColor:t.borderGlassMedium},listBadgeText:{fontFamily:z.interBold,fontSize:8.5,color:t.slate200},gridCopyBtn:{padding:3,borderRadius:4,backgroundColor:t.whiteAlpha08},listActionsRow:{flexDirection:"row",alignItems:"center",gap:6},listCopyBtn:{padding:6,borderRadius:6,backgroundColor:t.whiteAlpha10,borderWidth:1,borderColor:t.whiteAlpha15},listShareBtn:{padding:6,borderRadius:6,backgroundColor:`${t.sky400}18`,borderWidth:1,borderColor:`${t.sky400}40`},listDeleteBtn:{padding:6,borderRadius:6,backgroundColor:`${t.red500}14`,borderWidth:1,borderColor:`${t.red500}33`},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:t.whiteAlpha10,borderWidth:1,borderColor:t.whiteAlpha20},copySelectedBtnText:{fontFamily:z.interSemiBold,fontSize:10.5,color:t.slate200},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,backgroundColor:`${t.sky400}20`,borderWidth:1,borderColor:`${t.sky400}60`},shareSelectedBtnText:{fontFamily:z.interBold,fontSize:10.5,color:t.sky400}});

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

@@ -1,25 +1,34 @@
 import React from 'react';
 import { CapturedMediaItem } from '../../capture';
-export type EditorTool = 'none' | 'crop' | 'resize' | 'draw' | 'shapes' | 'text' | 'blur';
-export type ShapeType = 'rect' | 'circle' | 'ellipse';
+export type EditorTool = 'none' | 'crop' | 'adjust' | 'draw' | 'text' | 'resize' | 'preview' | 'trim' | 'audio' | 'speed' | 'gif' | 'snapshot';
+export type DrawModeOption = 'brush' | 'highlighter' | 'arrow' | 'rect' | 'circle' | 'spotlight' | 'step' | 'redact' | 'pixelate';
+export type AdjustModeOption = 'brightness' | 'contrast' | 'saturation' | 'warmth' | 'exposure' | 'vignette';
+export type PhotoFilterPreset = 'none' | 'vibrant' | 'mono' | 'sepia' | 'vintage' | 'noir' | 'cool' | 'warm' | 'fade';
+export interface ImageAdjustments {
+    brightness: number;
+    contrast: number;
+    saturation: number;
+    warmth: number;
+    exposure: number;
+    vignette: number;
+}
 export type AspectRatioOption = 'free' | '1:1' | '4:3' | '16:9' | '9:16' | '3:2';
 export interface InkStroke {
     id: string;
+    type: DrawModeOption;
     points: Array<{
         x: number;
         y: number;
     }>;
     color: string;
     strokeWidth: number;
-}
-export interface ShapeItem {
-    id: string;
-    type: ShapeType;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    color: string;
+    rect?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    stepNumber?: number;
 }
 export interface TextItem {
     id: string;
@@ -29,13 +38,6 @@ export interface TextItem {
     color: string;
     bgColor: string;
 }
-export interface BlurBox {
-    id: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
 interface MediaPreviewModalProps {
     item: CapturedMediaItem | null;
     visible: boolean;