react-native-inapp-inspector 2.5.12 → 2.5.13

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

@@ -1,14 +1,14 @@
-import ot,{useState as $,useEffect as oe,useMemo as re,useCallback as X}from"react";import{Dimensions as rt,FlatList as Tt,Image as Pe,RefreshControl as Ct,Share as De,StyleSheet as wt,Text as C,TouchableOpacity as B,View as T}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import G from"../TouchableScale";import{CameraIcon as Fe,CameraRollIcon as We,CheckIcon as Ae,CloseWhite as St,CopyIcon as Te,FilmIcon as $e,GridIcon as Bt,ImageIcon as Ge,ListIcon as It,PlayIcon as He,ScreencastIcon as Oe,ShareIcon as Le,TrashIcon as Ce,VideoCameraIcon as Ue,WhiteBackNavigation as Rt}from"../NetworkIcons";import{MediaPreviewModal as Vt}from"./MediaPreviewModal";import{ScreenCapture as D,generateCaptureId as qe}from"../../capture";import{copyImageOrMediaToClipboard as Mt,copyToClipboard as Pt,formatBytes as E}from"../../helpers";import{triggerNativeHaptic as k}from"../../native/NativeInspector";import{showToast as I}from"../../helpers/toast";import{useTranslation as Dt}from"../../i18n";import{useInspector as Ft}from"./InspectorContext";import{ConfirmationModal as Wt}from"./ConfirmationModal";export const MediaGalleryTab=()=>{const{t:w}=Dt(),{refreshMediaCount:R,switchActiveTab:we,previewMediaItem:xe,setPreviewMediaItem:W}=Ft(),[z,Se]=$([]),[Ee,Be]=$(!1),[V,Ne]=$("all"),[M,N]=$(new Set),[A,ke]=$("grid"),[F,Y]=$(!1),[Ie,Z]=$(0),O=ot.useRef(null),[L,U]=$({visible:!1,title:"",message:"",onConfirm:()=>{}}),v=X(async()=>{try{const e=await D.getMediaList();Se(e),R?.().catch(()=>{})}catch{Se([])}},[R]);oe(()=>{v()},[v]),oe(()=>{D.isRecording().then(e=>Y(e)).catch(()=>{})},[]),oe(()=>(F?(Z(0),O.current=setInterval(()=>{Z(e=>e+1)},1e3)):(O.current&&(clearInterval(O.current),O.current=null),Z(0)),()=>{O.current&&clearInterval(O.current)}),[F]);const Ye=async()=>{Be(!0),await v(),Be(!1)},j=re(()=>{let e=0,r=0,x=0;return z.forEach(P=>{P.type==="image"?e++:P.type==="video"?r++:P.type==="gif"&&x++}),{all:z.length,image:e,video:r,gif:x}},[z]),_=re(()=>V==="all"?z:z.filter(e=>e.type===V),[z,V]),J=re(()=>z.reduce((e,r)=>e+(r.sizeBytes||0),0),[z]),ze=X(async()=>{try{k("light");const e=await D.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){k("success");const r=qe("screenshot",e.format||"png"),x={id:r,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||r,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};W(x),await v(),R?.().catch(()=>{}),I(w("header.screenshotCaptured","Screenshot captured & saved"))}else I(w("header.screenshotFailed","Failed to capture screenshot"))}catch{I(w("header.screenshotError","Error capturing screenshot"))}},[v,R,W,w]),K=X(async()=>{try{if(F){k("medium");const e=await D.stopRecording();if(Y(!1),e){k("success");const r=qe("video",e.format),x={id:r,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||r,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio};W(x),await v(),R?.().catch(()=>{}),I(w("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else k("medium"),await D.startRecording({fps:24,audioSource:"none"})?(Y(!0),I(w("header.recordingStarted","Screen recording started"))):I(w("header.recordingStartFailed","Failed to start screen recording"))}catch{I(w("header.recordingError","Screen recording error")),Y(!1)}},[F,v,R,W,w]),ve=async()=>{try{k("light");const e=V==="image"?"image":V==="video"?"video":"any",r=await D.pickMedia({mediaType:e});r&&(k("success"),await v(),R?.().catch(()=>{}),I(r.type==="video"?w("mediaGallery.importedVideo","Video imported from Camera Roll"):w("mediaGallery.importedPhoto","Photo imported from Camera Roll")),W(r))}catch{I(w("mediaGallery.importFailed","Failed to import media"))}},Re=X(e=>{k("light"),N(r=>{const x=new Set(r);return x.has(e)?x.delete(e):x.add(e),x})},[]),Ve=async e=>{k("medium"),await D.deleteMedia(e.uri),N(r=>{const x=new Set(r);return x.delete(e.id),x}),await v(),await R?.(),I(w("mediaGallery.deleted","Media deleted"))},Me=e=>{e?.uri&&(k("light"),Mt(e.uri,e.type==="image"?"Image":"Media"))},_e=()=>{const e=z.filter(x=>M.has(x.id));if(e.length===0)return;k("light");const r=e.map(x=>x.uri).join(`
-`);Pt(r,`${e.length} Media URIs`),I(`${e.length} file URIs copied to clipboard`)},Xe=async e=>{try{k("light");const r=e.uri.startsWith("file://")||e.uri.startsWith("content://")||e.uri.startsWith("http")?e.uri:`file://${e.uri}`;await De.share({url:r,title:e.filename,message:e.filename})}catch{I(w("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ze=async()=>{const e=z.filter(r=>M.has(r.id));if(e.length!==0)try{k("light");const r=e[0],x=r.uri.startsWith("file://")||r.uri.startsWith("content://")||r.uri.startsWith("http")?r.uri:`file://${r.uri}`;await De.share({url:x,title:r.filename,message:e.length===1?r.filename:`${e.length} items: ${e.map(P=>P.filename).join(", ")}`})}catch{I(w("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Je=()=>{const e=M.size;e!==0&&U({visible:!0,title:w("mediaGallery.deleteSelectedTitle","Delete Selected Media"),message:w("mediaGallery.deleteSelectedMessage",{count:e,defaultValue:`Are you sure you want to permanently delete ${e} media items?`}),confirmText:w("mediaGallery.delete","Delete"),cancelText:w("common.cancel","Cancel"),onConfirm:async()=>{U(x=>({...x,visible:!1}));const r=z.filter(x=>M.has(x.id));for(const x of r)await D.deleteMedia(x.uri);N(new Set),await v(),await R?.(),I(w("mediaGallery.deletedCount",{count:r.length,defaultValue:`Deleted ${r.length} items`}))}})},Ke=()=>{U({visible:!0,title:w("mediaGallery.purgeTitle","Purge Gallery"),message:w("mediaGallery.purgeMessage",{count:z.length,size:E(J),defaultValue:`Are you sure you want to delete all ${z.length} media files (${E(J)})? This cannot be undone.`}),confirmText:w("common.clearAll","Clear All"),cancelText:w("common.cancel","Cancel"),onConfirm:async()=>{U(e=>({...e,visible:!1})),await D.clearAllMedia(),N(new Set),await v(),await R?.(),I(w("mediaGallery.allPurged","All screencast files deleted"))}})},Qe=async e=>{await D.convertToGif(e.uri,{fps:12,width:480})&&(await v(),R?.().catch(()=>{}))},Q=e=>{const r=Math.floor(e/60),x=e%60;return`${r.toString().padStart(2,"0")}:${x.toString().padStart(2,"0")}`},et=({item:e})=>{if(!e)return null;const r=e.type==="video",x=e.type==="gif",P=r&&e.thumbnailUri||e.uri,H=!!(e.id&&M.has(e.id)),ee=(e.format||(r?"mp4":x?"gif":"png")).toUpperCase(),te=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",q=e.timestamp?new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):"";return<G onPress={()=>W(e)}style={[o.card,H&&o.cardSelected]}>
+import ot,{useState as H,useEffect as ie,useMemo as ae,useCallback as J}from"react";import{Dimensions as rt,FlatList as Tt,Image as Pe,RefreshControl as Ct,Share as De,StyleSheet as wt,Text as S,TouchableOpacity as I,View as T}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import O from"../TouchableScale";import{CameraIcon as Ae,CameraRollIcon as Fe,CheckIcon as We,CloseWhite as St,CopyIcon as Te,FilmIcon as $e,GridIcon as Bt,ImageIcon as Ge,ListIcon as It,PlayIcon as He,ScreencastIcon as Oe,ShareIcon as Le,TrashIcon as Ce,VideoCameraIcon as Ue,WhiteBackNavigation as Rt}from"../NetworkIcons";import{MediaPreviewModal as Vt}from"./MediaPreviewModal";import{ScreenCapture as F,generateCaptureId as qe}from"../../capture";import{copyImageOrMediaToClipboard as Mt,copyToClipboard as Pt,formatBytes as Y}from"../../helpers";import{triggerNativeHaptic as z}from"../../native/NativeInspector";import{showToast as v}from"../../helpers/toast";import{useTranslation as Dt}from"../../i18n";import{useInspector as At}from"./InspectorContext";import{ConfirmationModal as Ft}from"./ConfirmationModal";export const MediaGalleryTab=()=>{const{t:C}=Dt(),{refreshMediaCount:M,switchActiveTab:we,previewMediaItem:xe,setPreviewMediaItem:W}=At(),[R,Se]=H([]),[Ee,Be]=H(!1),[P,Ne]=H("all"),[D,_]=H(new Set),[G,ke]=H("grid"),[$,X]=H(!1),[Ie,K]=H(0),j=ot.useRef(null),[U,E]=H({visible:!1,title:"",message:"",onConfirm:()=>{}}),V=J(async()=>{try{const e=await F.getMediaList();Se(e),M?.().catch(()=>{})}catch{Se([])}},[M]);ie(()=>{V()},[V]),ie(()=>{F.isRecording().then(e=>X(e)).catch(()=>{})},[]),ie(()=>($?(K(0),j.current=setInterval(()=>{K(e=>e+1)},1e3)):(j.current&&(clearInterval(j.current),j.current=null),K(0)),()=>{j.current&&clearInterval(j.current)}),[$]);const Ye=async()=>{Be(!0),await V(),Be(!1)},q=ae(()=>{let e=0,r=0,B=0;return R.forEach(A=>{A.type==="image"?e++:A.type==="video"?r++:A.type==="gif"&&B++}),{all:R.length,image:e,video:r,gif:B}},[R]),Z=ae(()=>P==="all"?R:R.filter(e=>e.type===P),[R,P]),Q=ae(()=>R.reduce((e,r)=>e+(r.sizeBytes||0),0),[R]),ze=J(async()=>{try{z("light");const e=await F.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){z("success");const r=qe("screenshot",e.format||"png"),B={id:r,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||r,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};W(B),await V(),M?.().catch(()=>{}),v(C("header.screenshotCaptured","Screenshot captured & saved"))}else v(C("header.screenshotFailed","Failed to capture screenshot"))}catch{v(C("header.screenshotError","Error capturing screenshot"))}},[V,M,W,C]),ee=J(async()=>{try{if($){z("medium");const e=await F.stopRecording();if(X(!1),e){z("success");const r=qe("video",e.format),B={id:r,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||r,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio};W(B),await V(),M?.().catch(()=>{}),v(C("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else z("medium"),await F.startRecording({fps:24,audioSource:"none"})?(X(!0),v(C("header.recordingStarted","Screen recording started"))):v(C("header.recordingStartFailed","Failed to start screen recording"))}catch{v(C("header.recordingError","Screen recording error")),X(!1)}},[$,V,M,W,C]),ve=async()=>{try{z("light");const e=P==="image"?"image":P==="video"?"video":"any",r=await F.pickMedia({mediaType:e});r&&(z("success"),await V(),M?.().catch(()=>{}),v(r.type==="video"?C("mediaGallery.importedVideo","Video imported from Camera Roll"):C("mediaGallery.importedPhoto","Photo imported from Camera Roll")),W(r))}catch{v(C("mediaGallery.importFailed","Failed to import media"))}},Re=J(e=>{z("light"),_(r=>{const B=new Set(r);return B.has(e)?B.delete(e):B.add(e),B})},[]),Ve=async e=>{z("medium"),await F.deleteMedia(e.uri),_(r=>{const B=new Set(r);return B.delete(e.id),B}),await V(),await M?.(),v(C("mediaGallery.deleted","Media deleted"))},Me=e=>{e?.uri&&(z("light"),Mt(e.uri,e.type==="image"?"Image":"Media"))},_e=()=>{const e=R.filter(B=>D.has(B.id));if(e.length===0)return;z("light");const r=e.map(B=>B.uri).join(`
+`);Pt(r,`${e.length} Media URIs`),v(`${e.length} file URIs copied to clipboard`)},Xe=async e=>{try{z("light");const r=e.uri.startsWith("file://")||e.uri.startsWith("content://")||e.uri.startsWith("http")?e.uri:`file://${e.uri}`;await De.share({url:r,title:e.filename,message:e.filename})}catch{v(C("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Ze=async()=>{const e=R.filter(r=>D.has(r.id));if(e.length!==0)try{z("light");const r=e[0],B=r.uri.startsWith("file://")||r.uri.startsWith("content://")||r.uri.startsWith("http")?r.uri:`file://${r.uri}`;await De.share({url:B,title:r.filename,message:e.length===1?r.filename:`${e.length} items: ${e.map(A=>A.filename).join(", ")}`})}catch{v(C("mediaGallery.shareUnavailable","Sharing not available on this device"))}},Je=()=>{const e=D.size;e!==0&&E({visible:!0,title:C("mediaGallery.deleteSelectedTitle","Delete Selected Media"),message:C("mediaGallery.deleteSelectedMessage",{count:e,defaultValue:`Are you sure you want to permanently delete ${e} media items?`}),confirmText:C("mediaGallery.delete","Delete"),cancelText:C("common.cancel","Cancel"),onConfirm:async()=>{E(B=>({...B,visible:!1}));const r=R.filter(B=>D.has(B.id));for(const B of r)await F.deleteMedia(B.uri);_(new Set),await V(),await M?.(),v(C("mediaGallery.deletedCount",{count:r.length,defaultValue:`Deleted ${r.length} items`}))}})},Ke=()=>{E({visible:!0,title:C("mediaGallery.purgeTitle","Purge Gallery"),message:C("mediaGallery.purgeMessage",{count:R.length,size:Y(Q),defaultValue:`Are you sure you want to delete all ${R.length} media files (${Y(Q)})? This cannot be undone.`}),confirmText:C("common.clearAll","Clear All"),cancelText:C("common.cancel","Cancel"),onConfirm:async()=>{E(e=>({...e,visible:!1})),await F.clearAllMedia(),_(new Set),await V(),await M?.(),v(C("mediaGallery.allPurged","All screencast files deleted"))}})},Qe=async e=>{await F.convertToGif(e.uri,{fps:12,width:480})&&(await V(),M?.().catch(()=>{}))},te=e=>{const r=Math.floor(e/60),B=e%60;return`${r.toString().padStart(2,"0")}:${B.toString().padStart(2,"0")}`},et=({item:e})=>{if(!e)return null;const r=e.type==="video",B=e.type==="gif",A=r&&e.thumbnailUri||e.uri,L=!!(e.id&&D.has(e.id)),oe=(e.format||(r?"mp4":B?"gif":"png")).toUpperCase(),re=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",N=e.timestamp?new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"}):"";return<O onPress={()=>W(e)}style={[o.card,L&&o.cardSelected]}>
         <T style={o.thumbnailContainer}>
-          {P?<Pe source={{uri:P}}style={o.thumbnail}resizeMode="cover"/>:<T style={o.thumbnailFallback}>
+          {A?<Pe source={{uri:A}}style={o.thumbnail}resizeMode="cover"/>:<T style={o.thumbnailFallback}>
               {r?<$e size={28}color={t.sky500}/>:<Ge size={28}color={t.grayTextWeak}/>}
             </T>}
 
           
-          <B onPress={()=>e.id&&Re(e.id)}style={[o.checkbox,H&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-            {H&&<Ae size={11}color={t.white}/>}
-          </B>
+          <I onPress={()=>e.id&&Re(e.id)}style={[o.checkbox,L&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            {L&&<We size={11}color={t.white}/>}
+          </I>
 
           
           {r&&<T style={o.miniPlayCircle}>
@@ -16,50 +16,50 @@ import ot,{useState as $,useEffect as oe,useMemo as re,useCallback as X}from"rea
             </T>}
 
           
-          <T style={[o.typeBadge,{backgroundColor:r?"rgba(14, 165, 233, 0.88)":x?"rgba(245, 158, 11, 0.88)":"rgba(16, 185, 129, 0.88)"}]}>
-            <C style={o.typeBadgeText}>
-              {ee}
-            </C>
+          <T style={[o.typeBadge,{backgroundColor:r?"rgba(14, 165, 233, 0.88)":B?"rgba(245, 158, 11, 0.88)":"rgba(16, 185, 129, 0.88)"}]}>
+            <S style={o.typeBadgeText}>
+              {oe}
+            </S>
           </T>
 
           
           {r&&e.durationMs?<T style={o.durationBadge}>
-              <C style={o.durationBadgeText}>
-                {Q(Math.round(e.durationMs/1e3))}
-              </C>
+              <S style={o.durationBadgeText}>
+                {te(Math.round(e.durationMs/1e3))}
+              </S>
             </T>:null}
         </T>
 
         <T style={o.cardInfo}>
-          <C style={o.cardTitle}numberOfLines={1}>
-            {te}
-          </C>
+          <S style={o.cardTitle}numberOfLines={1}>
+            {re}
+          </S>
           <T style={o.cardMetaRow}>
             <T style={{flexDirection:"row",alignItems:"center",gap:4,flex:1,minWidth:0}}>
-              <C style={o.cardMeta}numberOfLines={1}>
-                {E(e.sizeBytes||0)}
-              </C>
-              {q?<>
-                  <C style={o.cardMetaDot}>•</C>
-                  <C style={o.cardMeta}numberOfLines={1}>
-                    {q}
-                  </C>
+              <S style={o.cardMeta}numberOfLines={1}>
+                {Y(e.sizeBytes||0)}
+              </S>
+              {N?<>
+                  <S style={o.cardMetaDot}>•</S>
+                  <S style={o.cardMeta}numberOfLines={1}>
+                    {N}
+                  </S>
                 </>:null}
             </T>
-            <B onPress={()=>Me(e)}style={o.gridCopyBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
+            <I onPress={()=>Me(e)}style={o.gridCopyBtn}hitSlop={{top:6,bottom:6,left:6,right:6}}>
               <Te size={11}color={t.grayText}/>
-            </B>
+            </I>
           </T>
         </T>
-      </G>},tt=({item:e})=>{if(!e)return null;const r=e.type==="video",x=e.type==="gif",P=r&&e.thumbnailUri||e.uri,H=!!(e.id&&M.has(e.id)),ee=(e.format||(r?"mp4":x?"gif":"png")).toUpperCase(),te=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",q=e.timestamp?`${new Date(e.timestamp).toLocaleDateString([],{month:"short",day:"numeric"})} ${new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}`:"";return<G onPress={()=>W(e)}style={[o.listRow,H&&o.listRowSelected]}>
+      </O>},tt=({item:e})=>{if(!e)return null;const r=e.type==="video",B=e.type==="gif",A=r&&e.thumbnailUri||e.uri,L=!!(e.id&&D.has(e.id)),oe=(e.format||(r?"mp4":B?"gif":"png")).toUpperCase(),re=e.filename||(e.uri?e.uri.split("/").pop():"")||"Capture",N=e.timestamp?`${new Date(e.timestamp).toLocaleDateString([],{month:"short",day:"numeric"})} ${new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}`:"";return<O onPress={()=>W(e)}style={[o.listRow,L&&o.listRowSelected]}>
         
-        <B onPress={()=>e.id&&Re(e.id)}style={[o.listCheckbox,H&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
-          {H&&<Ae size={11}color={t.white}/>}
-        </B>
+        <I onPress={()=>e.id&&Re(e.id)}style={[o.listCheckbox,L&&o.checkboxSelected]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          {L&&<We size={11}color={t.white}/>}
+        </I>
 
         
         <T style={o.listThumbContainer}>
-          {P?<Pe source={{uri:P}}style={o.listThumb}resizeMode="cover"/>:<T style={o.listThumbFallback}>
+          {A?<Pe source={{uri:A}}style={o.listThumb}resizeMode="cover"/>:<T style={o.listThumbFallback}>
               {r?<$e size={18}color={t.sky500}/>:<Ge size={18}color={t.grayTextWeak}/>}
             </T>}
           {r&&<T style={o.listMiniPlay}>
@@ -69,231 +69,231 @@ import ot,{useState as $,useEffect as oe,useMemo as re,useCallback as X}from"rea
 
         
         <T style={o.listInfo}>
-          <C style={o.listTitle}numberOfLines={1}>
-            {te}
-          </C>
+          <S style={o.listTitle}numberOfLines={1}>
+            {re}
+          </S>
           <T style={o.listMetaRow}>
-            <T style={[o.listBadge,{backgroundColor:r?`${t.sky500}18`:x?`${t.amber500}18`:`${t.green600}18`}]}>
-              <C style={[o.listBadgeText,{color:r?t.sky600:x?t.amber500:t.green600}]}>
-                {ee}
-              </C>
+            <T style={[o.listBadge,{backgroundColor:r?`${t.sky500}18`:B?`${t.amber500}18`:`${t.green600}18`}]}>
+              <S style={[o.listBadgeText,{color:r?t.sky600:B?t.amber500:t.green600}]}>
+                {oe}
+              </S>
             </T>
-            <C style={o.cardMeta}>
-              {E(e.sizeBytes||0)}
-            </C>
-            {q?<>
-                <C style={o.cardMetaDot}>•</C>
-                <C style={o.cardMeta}>
-                  {q}
-                </C>
+            <S style={o.cardMeta}>
+              {Y(e.sizeBytes||0)}
+            </S>
+            {N?<>
+                <S style={o.cardMetaDot}>•</S>
+                <S style={o.cardMeta}>
+                  {N}
+                </S>
               </>:null}
           </T>
         </T>
 
         
         <T style={o.listActionsRow}>
-          <B onPress={()=>Me(e)}style={o.listActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          <I onPress={()=>Me(e)}style={o.listActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
             <Te size={13}color={t.grayText}/>
-          </B>
+          </I>
 
-          <B onPress={()=>Xe(e)}style={o.listActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          <I onPress={()=>Xe(e)}style={o.listActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
             <Le size={13}color={t.sky600}/>
-          </B>
+          </I>
 
-          <B onPress={()=>Ve(e)}style={o.listActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+          <I onPress={()=>Ve(e)}style={o.listActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
             <Ce size={13}color={t.red500}/>
-          </B>
+          </I>
         </T>
-      </G>};return<T style={o.container}>
+      </O>};return<T style={o.container}>
       
       <T style={o.topHeaderBar}>
-        <B onPress={()=>we("apis")}style={o.backToTabBtn}accessibilityLabel="Back to Inspector"hitSlop={{top:8,bottom:8,left:8,right:8}}>
+        <I onPress={()=>we("apis")}style={o.backToTabBtn}accessibilityLabel="Back to Inspector"hitSlop={{top:8,bottom:8,left:8,right:8}}>
           <Rt size={14}color={t.purple}/>
-          <C style={o.backToTabText}>
-            {w("common.back","Back")}
-          </C>
-        </B>
+          <S style={o.backToTabText}>
+            {C("common.back","Back")}
+          </S>
+        </I>
 
         <T style={o.headerCenterTitle}>
           <Oe size={15}color={t.purple}/>
-          <C style={o.headerStudioTitle}>
-            {w("tabs.media","Screencast")}
-          </C>
-          {j.all>0&&<T style={o.headerBadge}>
-              <C style={o.headerBadgeText}>{j.all}</C>
+          <S style={o.headerStudioTitle}>
+            {C("tabs.media","Screencast")}
+          </S>
+          {q.all>0&&<T style={o.headerBadge}>
+              <S style={o.headerBadgeText}>{q.all}</S>
             </T>}
         </T>
 
-        <B onPress={()=>we("apis")}style={o.closeCircleBtn}accessibilityLabel="Close Screencast"hitSlop={{top:8,bottom:8,left:8,right:8}}>
+        <I onPress={()=>we("apis")}style={o.closeCircleBtn}accessibilityLabel="Close Screencast"hitSlop={{top:8,bottom:8,left:8,right:8}}>
           <St size={12}color={t.grayTextStrong}/>
-        </B>
+        </I>
       </T>
 
       
-      {F&&<T style={o.recordingBanner}>
+      {$&&<T style={o.recordingBanner}>
           <T style={o.recordingDot}/>
-          <C style={o.recordingBannerText}>
-            {w("header.recordingScreen","Screen Recording Active")} • {Q(Ie)}
-          </C>
-          <B onPress={K}style={o.stopRecordBtn}activeOpacity={.8}>
+          <S style={o.recordingBannerText}>
+            {C("header.recordingScreen","Screen Recording Active")} • {te(Ie)}
+          </S>
+          <I onPress={ee}style={o.stopRecordBtn}activeOpacity={.8}>
             <T style={o.stopSquare}/>
-            <C style={o.stopRecordBtnText}>Stop & Save</C>
-          </B>
+            <S style={o.stopRecordBtnText}>{C("media.stopAndSave","Stop & Save")}</S>
+          </I>
         </T>}
 
       
       <T style={o.quickActionsBar}>
-        <G onPress={ze}style={[o.quickBtn,{backgroundColor:`${t.purple}10`,borderColor:`${t.purple}30`}]}>
-          <Fe size={14}color={t.purple}/>
-          <C style={[o.quickBtnText,{color:t.purple}]}>
-            {w("header.screenshot","Screenshot")}
-          </C>
-        </G>
+        <O onPress={ze}style={[o.quickBtn,{backgroundColor:`${t.purple}10`,borderColor:`${t.purple}30`}]}>
+          <Ae size={14}color={t.purple}/>
+          <S style={[o.quickBtnText,{color:t.purple}]}>
+            {C("header.screenshot","Screenshot")}
+          </S>
+        </O>
 
-        <G onPress={K}style={[o.quickBtn,F?{backgroundColor:`${t.red500}18`,borderColor:t.red500}:{backgroundColor:`${t.sky600}10`,borderColor:`${t.sky600}30`}]}>
-          <Ue size={14}color={F?t.red500:t.sky600}/>
-          <C style={[o.quickBtnText,{color:F?t.red500:t.sky600}]}>
-            {F?`Stop (${Q(Ie)})`:w("header.videoRecord","Record Video")}
-          </C>
-        </G>
+        <O onPress={ee}style={[o.quickBtn,$?{backgroundColor:`${t.red500}18`,borderColor:t.red500}:{backgroundColor:`${t.sky600}10`,borderColor:`${t.sky600}30`}]}>
+          <Ue size={14}color={$?t.red500:t.sky600}/>
+          <S style={[o.quickBtnText,{color:$?t.red500:t.sky600}]}>
+            {$?`Stop (${te(Ie)})`:C("header.videoRecord","Record Video")}
+          </S>
+        </O>
 
-        <G onPress={ve}style={[o.quickBtn,{backgroundColor:`${t.emerald500}10`,borderColor:`${t.emerald500}30`}]}>
-          <We size={14}color={t.green600}/>
-          <C style={[o.quickBtnText,{color:t.green600}]}>
-            {w("common.import","Import")}
-          </C>
-        </G>
+        <O onPress={ve}style={[o.quickBtn,{backgroundColor:`${t.emerald500}10`,borderColor:`${t.emerald500}30`}]}>
+          <Fe size={14}color={t.green600}/>
+          <S style={[o.quickBtnText,{color:t.green600}]}>
+            {C("common.import","Import")}
+          </S>
+        </O>
       </T>
 
       
       <T style={o.filterBar}>
         <T style={o.chipGroup}>
-          {[{key:"all",label:w("common.all","All"),count:j.all},{key:"image",label:w("mediaGallery.photos","Photos"),count:j.image},{key:"video",label:w("mediaGallery.videos","Videos"),count:j.video},{key:"gif",label:w("mediaGallery.gifs","GIFs"),count:j.gif}].map(e=>{const r=V===e.key;return<B key={e.key}onPress={()=>{k("light"),Ne(e.key)}}style={[o.chip,r&&o.chipActive]}>
-                <C style={[o.chipText,r&&o.chipTextActive]}>
+          {[{key:"all",label:C("common.all","All"),count:q.all},{key:"image",label:C("mediaGallery.photos","Photos"),count:q.image},{key:"video",label:C("mediaGallery.videos","Videos"),count:q.video},{key:"gif",label:C("mediaGallery.gifs","GIFs"),count:q.gif}].map(e=>{const r=P===e.key;return<I key={e.key}onPress={()=>{z("light"),Ne(e.key)}}style={[o.chip,r&&o.chipActive]}>
+                <S style={[o.chipText,r&&o.chipTextActive]}>
                   {e.label}
-                </C>
+                </S>
                 <T style={[o.chipBadge,r&&o.chipBadgeActive]}>
-                  <C style={[o.chipBadgeText,r&&o.chipBadgeTextActive]}>
+                  <S style={[o.chipBadgeText,r&&o.chipBadgeTextActive]}>
                     {e.count}
-                  </C>
+                  </S>
                 </T>
-              </B>})}
+              </I>})}
         </T>
 
         
         <T style={o.viewToggleContainer}>
-          <B onPress={()=>{k("light"),ke("grid")}}style={[o.viewToggleBtn,A==="grid"&&o.viewToggleBtnActive]}>
-            <Bt size={13}color={A==="grid"?t.white:t.grayText}/>
-          </B>
-          <B onPress={()=>{k("light"),ke("list")}}style={[o.viewToggleBtn,A==="list"&&o.viewToggleBtnActive]}>
-            <It size={13}color={A==="list"?t.white:t.grayText}/>
-          </B>
+          <I onPress={()=>{z("light"),ke("grid")}}style={[o.viewToggleBtn,G==="grid"&&o.viewToggleBtnActive]}>
+            <Bt size={13}color={G==="grid"?t.white:t.grayText}/>
+          </I>
+          <I onPress={()=>{z("light"),ke("list")}}style={[o.viewToggleBtn,G==="list"&&o.viewToggleBtnActive]}>
+            <It size={13}color={G==="list"?t.white:t.grayText}/>
+          </I>
         </T>
       </T>
 
       
-      {z.length>0&&<T style={o.subBar}>
+      {R.length>0&&<T style={o.subBar}>
           <T style={o.resultCountWrapper}>
-            <C style={[o.resultCountText,M.size>0&&o.resultCountTextSelected]}>
-              {M.size>0?`${M.size} of ${_.length} selected`:`${_.length} ${_.length===1?"item":"items"} \u2022 ${E(J)}`}
-            </C>
+            <S style={[o.resultCountText,D.size>0&&o.resultCountTextSelected]}>
+              {D.size>0?`${D.size} of ${Z.length} selected`:`${Z.length} ${Z.length===1?"item":"items"} \u2022 ${Y(Q)}`}
+            </S>
           </T>
 
           <T style={o.actionsGroup}>
-            {M.size>0?<>
-                <B onPress={_e}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+            {D.size>0?<>
+                <I onPress={_e}style={o.copySelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
                   <Te size={11}color={t.grayTextStrong}/>
-                  <C style={o.copySelectedBtnText}>
+                  <S style={o.copySelectedBtnText}>
                     Copy
-                  </C>
-                </B>
+                  </S>
+                </I>
 
-                <B onPress={Ze}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <I onPress={Ze}style={o.shareSelectedBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
                   <Le size={11}color={t.sky600}/>
-                  <C style={o.shareSelectedBtnText}>
+                  <S style={o.shareSelectedBtnText}>
                     Share
-                  </C>
-                </B>
+                  </S>
+                </I>
 
-                <B onPress={Je}style={o.deleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <I onPress={Je}style={o.deleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
                   <Ce size={11}color={t.red500}/>
-                  <C style={o.deleteBtnText}>
-                    Delete ({M.size})
-                  </C>
-                </B>
-              </>:<B onPress={Ke}style={o.clearBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <S style={o.deleteBtnText}>
+                    Delete ({D.size})
+                  </S>
+                </I>
+              </>:<I onPress={Ke}style={o.clearBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
                 <Ce size={11}color={t.red500}/>
-                <C style={o.clearBtnText}>
+                <S style={o.clearBtnText}>
                   Purge All
-                </C>
-              </B>}
+                </S>
+              </I>}
           </T>
         </T>}
 
       
-      <Tt key={A}data={_}keyExtractor={e=>e.id}renderItem={A==="grid"?et:tt}numColumns={A==="grid"?2:1}columnWrapperStyle={A==="grid"?o.columnWrapper:void 0}style={{flex:1}}contentContainerStyle={[o.listContent,{flexGrow:1}]}nestedScrollEnabled={!0}keyboardShouldPersistTaps="handled"refreshControl={<Ct refreshing={Ee}onRefresh={Ye}tintColor={t.purple}/>}ListEmptyComponent={<T style={o.emptyHeroCard}>
+      <Tt key={G}data={Z}keyExtractor={e=>e.id}renderItem={G==="grid"?et:tt}numColumns={G==="grid"?2:1}columnWrapperStyle={G==="grid"?o.columnWrapper:void 0}style={{flex:1}}contentContainerStyle={[o.listContent,{flexGrow:1}]}nestedScrollEnabled={!0}keyboardShouldPersistTaps="handled"refreshControl={<Ct refreshing={Ee}onRefresh={Ye}tintColor={t.purple}/>}ListEmptyComponent={<T style={o.emptyHeroCard}>
             <T style={o.emptyIconCircle}>
               <Oe size={32}color={t.purple}/>
             </T>
 
-            <C style={o.emptyHeroTitle}>
-              {V==="image"?"No Screenshots Yet":V==="video"?"No Screen Recordings Yet":V==="gif"?"No Animated GIFs Yet":"Screencast & Media Studio"}
-            </C>
+            <S style={o.emptyHeroTitle}>
+              {P==="image"?"No Screenshots Yet":P==="video"?"No Screen Recordings Yet":P==="gif"?"No Animated GIFs Yet":"Screencast & Media Studio"}
+            </S>
 
-            <C style={o.emptyHeroSubtitle}>
-              {V==="image"?"Take a full-screen application snapshot or import photos from your device library.":V==="video"?"Record high-FPS screen videos with audio narration to reproduce and debug issues.":"Capture pixel-perfect screenshots, record 60fps screen videos, and export GIF animations with zero background overhead."}
-            </C>
+            <S style={o.emptyHeroSubtitle}>
+              {P==="image"?"Take a full-screen application snapshot or import photos from your device library.":P==="video"?"Record high-FPS screen videos with audio narration to reproduce and debug issues.":"Capture pixel-perfect screenshots, record 60fps screen videos, and export GIF animations with zero background overhead."}
+            </S>
 
             
             <T style={o.emptyActionsGrid}>
-              <G onPress={ze}style={o.emptyActionCard}>
+              <O onPress={ze}style={o.emptyActionCard}>
                 <T style={[o.actionCardIconBox,{backgroundColor:`${t.purple}14`}]}>
-                  <Fe size={18}color={t.purple}/>
+                  <Ae size={18}color={t.purple}/>
                 </T>
                 <T style={o.actionCardTextBox}>
-                  <C style={o.actionCardTitle}>Take Screenshot</C>
-                  <C style={o.actionCardDesc}>Full-window lossless PNG</C>
+                  <S style={o.actionCardTitle}>Take Screenshot</S>
+                  <S style={o.actionCardDesc}>Full-window lossless PNG</S>
                 </T>
-              </G>
+              </O>
 
-              <G onPress={K}style={o.emptyActionCard}>
+              <O onPress={ee}style={o.emptyActionCard}>
                 <T style={[o.actionCardIconBox,{backgroundColor:`${t.sky600}14`}]}>
                   <Ue size={18}color={t.sky600}/>
                 </T>
                 <T style={o.actionCardTextBox}>
-                  <C style={o.actionCardTitle}>Record Screen Video</C>
-                  <C style={o.actionCardDesc}>High-FPS MP4 with audio</C>
+                  <S style={o.actionCardTitle}>Record Screen Video</S>
+                  <S style={o.actionCardDesc}>High-FPS MP4 with audio</S>
                 </T>
-              </G>
+              </O>
 
-              <G onPress={ve}style={o.emptyActionCard}>
+              <O onPress={ve}style={o.emptyActionCard}>
                 <T style={[o.actionCardIconBox,{backgroundColor:`${t.emerald500}14`}]}>
-                  <We size={18}color={t.green600}/>
+                  <Fe size={18}color={t.green600}/>
                 </T>
                 <T style={o.actionCardTextBox}>
-                  <C style={o.actionCardTitle}>Import from Camera Roll</C>
-                  <C style={o.actionCardDesc}>Device photos & videos</C>
+                  <S style={o.actionCardTitle}>Import from Camera Roll</S>
+                  <S style={o.actionCardDesc}>Device photos & videos</S>
                 </T>
-              </G>
+              </O>
             </T>
 
             
             <T style={o.featurePillsRow}>
               <T style={o.featurePill}>
-                <C style={o.featurePillText}>⚡ Zero Overhead</C>
+                <S style={o.featurePillText}>{C("media.zeroOverhead","\u26A1 Zero Overhead")}</S>
               </T>
               <T style={o.featurePill}>
-                <C style={o.featurePillText}>✂️ Crop & Annotate</C>
+                <S style={o.featurePillText}>{C("media.cropAndAnnotate","\u2702\uFE0F Crop & Annotate")}</S>
               </T>
               <T style={o.featurePill}>
-                <C style={o.featurePillText}>🎞️ Convert to GIF</C>
+                <S style={o.featurePillText}>{C("media.convertToGif","\u{1F39E}\uFE0F Convert to GIF")}</S>
               </T>
             </T>
           </T>}/>
 
       
-      <Vt item={xe}visible={!!xe}onClose={()=>W(null)}onDelete={Ve}onConvertToGif={Qe}/>
+      <Vt item={xe}visible={!!xe}onClose={()=>W(null)}onDelete={Ve}onConvertToGif={Qe}onSave={e=>{W(e),V()}}/>
 
       
-      <Wt visible={L.visible}title={L.title}message={L.message}confirmText={L.confirmText}cancelText={L.cancelText}isDestructive={!0}icon="trash"onConfirm={L.onConfirm}onCancel={()=>U(e=>({...e,visible:!1}))}/>
-    </T>};const{width:At}=rt.get("window"),$t=(At-36)/2,o=wt.create({container:{flex:1,backgroundColor:t.grayBackground},topHeaderBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,backgroundColor:t.primaryLight,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary},backToTabBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingVertical:4,paddingHorizontal:8,borderRadius:8,backgroundColor:`${t.purple}12`},backToTabText:{fontFamily:S.interBold,fontSize:11.5,color:t.purple},headerCenterTitle:{flexDirection:"row",alignItems:"center",gap:6},headerStudioTitle:{fontFamily:S.interBold,fontSize:13.5,color:t.grayTextStrong},headerBadge:{backgroundColor:`${t.purple}1A`,paddingHorizontal:6,paddingVertical:1.5,borderRadius:10},headerBadgeText:{fontFamily:S.interBold,fontSize:9.5,color:t.purple},closeCircleBtn:{width:26,height:26,borderRadius:13,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"},recordingBanner:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:`${t.red500}15`,borderBottomWidth:1,borderBottomColor:`${t.red500}30`,paddingHorizontal:14,paddingVertical:8},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:t.red500,marginRight:6},recordingBannerText:{fontFamily:S.interBold,fontSize:12,color:t.red500,flex:1},stopRecordBtn:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:t.red500,paddingHorizontal:10,paddingVertical:4.5,borderRadius:6},stopSquare:{width:8,height:8,backgroundColor:t.white,borderRadius:1},stopRecordBtnText:{fontFamily:S.interBold,fontSize:11,color:t.white},quickActionsBar:{flexDirection:"row",alignItems:"center",gap:8,paddingHorizontal:12,paddingTop:10,paddingBottom:6},quickBtn:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:5,paddingVertical:7,paddingHorizontal:4,borderRadius:8,borderWidth:1},quickBtnText:{fontFamily:S.interBold,fontSize:11},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary,gap:8},chipGroup:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},chip:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4.5,borderRadius:8,backgroundColor:t.primaryLight,borderWidth:1,borderColor:t.grayBorderSecondary},chipActive:{backgroundColor:`${t.purple}14`,borderColor:t.purple},chipText:{fontFamily:S.interMedium,fontSize:11,color:t.grayText},chipTextActive:{fontFamily:S.interBold,color:t.purple},chipBadge:{backgroundColor:t.grayBackground,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6},chipBadgeActive:{backgroundColor:t.purple},chipBadgeText:{fontFamily:S.interBold,fontSize:9,color:t.grayTextWeak},chipBadgeTextActive:{color:t.white},viewToggleContainer:{flexDirection:"row",backgroundColor:t.primaryLight,borderRadius:8,borderWidth:1,borderColor:t.grayBorderSecondary,padding:2},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:6},viewToggleBtnActive:{backgroundColor:t.purple},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:6.5,backgroundColor:t.primaryLight,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary},resultCountWrapper:{flex:1},resultCountText:{fontFamily:S.interMedium,fontSize:11,color:t.grayTextWeak},resultCountTextSelected:{fontFamily:S.interBold,color:t.purple},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary},copySelectedBtnText:{fontFamily:S.interBold,fontSize:10,color:t.grayTextStrong},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:`${t.sky600}14`,borderWidth:1,borderColor:`${t.sky600}30`},shareSelectedBtnText:{fontFamily:S.interBold,fontSize:10,color:t.sky600},deleteBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:`${t.red500}14`,borderWidth:1,borderColor:`${t.red500}30`},deleteBtnText:{fontFamily:S.interBold,fontSize:10,color:t.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:`${t.red500}10`},clearBtnText:{fontFamily:S.interBold,fontSize:10,color:t.red500},listContent:{padding:12,paddingBottom:40},columnWrapper:{justifyContent:"space-between",marginBottom:10},card:{width:$t,backgroundColor:t.primaryLight,borderRadius:12,borderWidth:1,borderColor:t.grayBorderSecondary,overflow:"hidden",shadowColor:t.black,shadowOffset:{width:0,height:2},shadowOpacity:.04,shadowRadius:4,elevation:2},cardSelected:{borderColor:t.purple,borderWidth:2},thumbnailContainer:{width:"100%",height:110,backgroundColor:t.grayBackground,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{flex:1,alignItems:"center",justifyContent:"center"},checkbox:{position:"absolute",top:7,left:7,width:19,height:19,borderRadius:5,backgroundColor:"rgba(0, 0, 0, 0.45)",borderWidth:1.5,borderColor:t.white,alignItems:"center",justifyContent:"center",zIndex:5},checkboxSelected:{backgroundColor:t.purple,borderColor:t.purple},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",transform:[{translateX:-16},{translateY:-16}],width:32,height:32,borderRadius:16,backgroundColor:"rgba(0, 0, 0, 0.65)",alignItems:"center",justifyContent:"center"},typeBadge:{position:"absolute",top:7,right:7,paddingHorizontal:5,paddingVertical:2,borderRadius:4},typeBadgeText:{fontFamily:S.interBold,fontSize:8.5,color:t.white,letterSpacing:.3},durationBadge:{position:"absolute",bottom:6,right:6,backgroundColor:"rgba(0, 0, 0, 0.72)",paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},durationBadgeText:{fontFamily:S.interBold,fontSize:9,color:t.white},cardInfo:{padding:8,gap:4},cardTitle:{fontFamily:S.interSemiBold,fontSize:11,color:t.grayTextStrong},cardMetaRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},cardMeta:{fontFamily:S.interRegular,fontSize:10,color:t.grayTextWeak},cardMetaDot:{fontSize:9,color:t.grayTextWeak},gridCopyBtn:{padding:2},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:t.primaryLight,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,padding:8,marginBottom:8,gap:10},listRowSelected:{borderColor:t.purple,borderWidth:1.5},listCheckbox:{width:18,height:18,borderRadius:4,borderWidth:1.5,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"},listThumbContainer:{width:48,height:48,borderRadius:8,backgroundColor:t.grayBackground,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{flex:1,alignItems:"center",justifyContent:"center"},listMiniPlay:{position:"absolute",bottom:2,right:2,backgroundColor:"rgba(0, 0, 0, 0.65)",borderRadius:3,padding:1.5},listInfo:{flex:1,gap:3},listTitle:{fontFamily:S.interSemiBold,fontSize:12,color:t.grayTextStrong},listMetaRow:{flexDirection:"row",alignItems:"center",gap:5},listBadge:{paddingHorizontal:4.5,paddingVertical:1,borderRadius:4},listBadgeText:{fontFamily:S.interBold,fontSize:9,letterSpacing:.3},listActionsRow:{flexDirection:"row",alignItems:"center",gap:4},listActionBtn:{padding:5,borderRadius:6,backgroundColor:t.grayBackground},emptyHeroCard:{backgroundColor:t.primaryLight,borderRadius:16,borderWidth:1,borderColor:t.grayBorderSecondary,padding:20,alignItems:"center",marginTop:8,shadowColor:t.black,shadowOffset:{width:0,height:2},shadowOpacity:.03,shadowRadius:6,elevation:2},emptyIconCircle:{width:64,height:64,borderRadius:32,backgroundColor:`${t.purple}14`,borderWidth:1,borderColor:`${t.purple}25`,alignItems:"center",justifyContent:"center",marginBottom:12},emptyHeroTitle:{fontFamily:S.interBold,fontSize:16,color:t.grayTextStrong,textAlign:"center",marginBottom:6},emptyHeroSubtitle:{fontFamily:S.interRegular,fontSize:12,lineHeight:17,color:t.grayText,textAlign:"center",marginBottom:18,paddingHorizontal:8},emptyActionsGrid:{width:"100%",gap:8,marginBottom:16},emptyActionCard:{flexDirection:"row",alignItems:"center",backgroundColor:t.grayBackground,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,padding:10,gap:12},actionCardIconBox:{width:38,height:38,borderRadius:8,alignItems:"center",justifyContent:"center"},actionCardTextBox:{flex:1,gap:1.5},actionCardTitle:{fontFamily:S.interBold,fontSize:12.5,color:t.grayTextStrong},actionCardDesc:{fontFamily:S.interRegular,fontSize:10.5,color:t.grayTextWeak},featurePillsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,flexWrap:"wrap",paddingTop:4},featurePill:{backgroundColor:t.grayBackground,paddingHorizontal:8,paddingVertical:3.5,borderRadius:12,borderWidth:1,borderColor:t.grayBorderSecondary},featurePillText:{fontFamily:S.interMedium,fontSize:9.5,color:t.grayTextWeak}});
+      <Ft visible={U.visible}title={U.title}message={U.message}confirmText={U.confirmText}cancelText={U.cancelText}isDestructive={!0}icon="trash"onConfirm={U.onConfirm}onCancel={()=>E(e=>({...e,visible:!1}))}/>
+    </T>};const{width:Wt}=rt.get("window"),$t=(Wt-36)/2,o=wt.create({container:{flex:1,backgroundColor:t.grayBackground},topHeaderBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:10,backgroundColor:t.primaryLight,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary},backToTabBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingVertical:4,paddingHorizontal:8,borderRadius:8,backgroundColor:`${t.purple}12`},backToTabText:{fontFamily:k.interBold,fontSize:11.5,color:t.purple},headerCenterTitle:{flexDirection:"row",alignItems:"center",gap:6},headerStudioTitle:{fontFamily:k.interBold,fontSize:13.5,color:t.grayTextStrong},headerBadge:{backgroundColor:`${t.purple}1A`,paddingHorizontal:6,paddingVertical:1.5,borderRadius:10},headerBadgeText:{fontFamily:k.interBold,fontSize:9.5,color:t.purple},closeCircleBtn:{width:26,height:26,borderRadius:13,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"},recordingBanner:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:`${t.red500}15`,borderBottomWidth:1,borderBottomColor:`${t.red500}30`,paddingHorizontal:14,paddingVertical:8},recordingDot:{width:8,height:8,borderRadius:4,backgroundColor:t.red500,marginRight:6},recordingBannerText:{fontFamily:k.interBold,fontSize:12,color:t.red500,flex:1},stopRecordBtn:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:t.red500,paddingHorizontal:10,paddingVertical:4.5,borderRadius:6},stopSquare:{width:8,height:8,backgroundColor:t.white,borderRadius:1},stopRecordBtnText:{fontFamily:k.interBold,fontSize:11,color:t.white},quickActionsBar:{flexDirection:"row",alignItems:"center",gap:8,paddingHorizontal:12,paddingTop:10,paddingBottom:6},quickBtn:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:5,paddingVertical:7,paddingHorizontal:4,borderRadius:8,borderWidth:1},quickBtnText:{fontFamily:k.interBold,fontSize:11},filterBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:8,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary,gap:8},chipGroup:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1},chip:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4.5,borderRadius:8,backgroundColor:t.primaryLight,borderWidth:1,borderColor:t.grayBorderSecondary},chipActive:{backgroundColor:`${t.purple}14`,borderColor:t.purple},chipText:{fontFamily:k.interMedium,fontSize:11,color:t.grayText},chipTextActive:{fontFamily:k.interBold,color:t.purple},chipBadge:{backgroundColor:t.grayBackground,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6},chipBadgeActive:{backgroundColor:t.purple},chipBadgeText:{fontFamily:k.interBold,fontSize:9,color:t.grayTextWeak},chipBadgeTextActive:{color:t.white},viewToggleContainer:{flexDirection:"row",backgroundColor:t.primaryLight,borderRadius:8,borderWidth:1,borderColor:t.grayBorderSecondary,padding:2},viewToggleBtn:{paddingHorizontal:7,paddingVertical:4,borderRadius:6},viewToggleBtnActive:{backgroundColor:t.purple},subBar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingVertical:6.5,backgroundColor:t.primaryLight,borderBottomWidth:1,borderBottomColor:t.grayBorderSecondary},resultCountWrapper:{flex:1},resultCountText:{fontFamily:k.interMedium,fontSize:11,color:t.grayTextWeak},resultCountTextSelected:{fontFamily:k.interBold,color:t.purple},actionsGroup:{flexDirection:"row",alignItems:"center",gap:6},copySelectedBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:t.grayBackground,borderWidth:1,borderColor:t.grayBorderSecondary},copySelectedBtnText:{fontFamily:k.interBold,fontSize:10,color:t.grayTextStrong},shareSelectedBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:`${t.sky600}14`,borderWidth:1,borderColor:`${t.sky600}30`},shareSelectedBtnText:{fontFamily:k.interBold,fontSize:10,color:t.sky600},deleteBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:`${t.red500}14`,borderWidth:1,borderColor:`${t.red500}30`},deleteBtnText:{fontFamily:k.interBold,fontSize:10,color:t.red500},clearBtn:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:`${t.red500}10`},clearBtnText:{fontFamily:k.interBold,fontSize:10,color:t.red500},listContent:{padding:12,paddingBottom:40},columnWrapper:{justifyContent:"space-between",marginBottom:10},card:{width:$t,backgroundColor:t.primaryLight,borderRadius:12,borderWidth:1,borderColor:t.grayBorderSecondary,overflow:"hidden",shadowColor:t.black,shadowOffset:{width:0,height:2},shadowOpacity:.04,shadowRadius:4,elevation:2},cardSelected:{borderColor:t.purple,borderWidth:2},thumbnailContainer:{width:"100%",height:110,backgroundColor:t.grayBackground,position:"relative"},thumbnail:{width:"100%",height:"100%"},thumbnailFallback:{flex:1,alignItems:"center",justifyContent:"center"},checkbox:{position:"absolute",top:7,left:7,width:19,height:19,borderRadius:5,backgroundColor:"rgba(0, 0, 0, 0.45)",borderWidth:1.5,borderColor:t.white,alignItems:"center",justifyContent:"center",zIndex:5},checkboxSelected:{backgroundColor:t.purple,borderColor:t.purple},miniPlayCircle:{position:"absolute",top:"50%",left:"50%",transform:[{translateX:-16},{translateY:-16}],width:32,height:32,borderRadius:16,backgroundColor:"rgba(0, 0, 0, 0.65)",alignItems:"center",justifyContent:"center"},typeBadge:{position:"absolute",top:7,right:7,paddingHorizontal:5,paddingVertical:2,borderRadius:4},typeBadgeText:{fontFamily:k.interBold,fontSize:8.5,color:t.white,letterSpacing:.3},durationBadge:{position:"absolute",bottom:6,right:6,backgroundColor:"rgba(0, 0, 0, 0.72)",paddingHorizontal:5,paddingVertical:1.5,borderRadius:4},durationBadgeText:{fontFamily:k.interBold,fontSize:9,color:t.white},cardInfo:{padding:8,gap:4},cardTitle:{fontFamily:k.interSemiBold,fontSize:11,color:t.grayTextStrong},cardMetaRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between"},cardMeta:{fontFamily:k.interRegular,fontSize:10,color:t.grayTextWeak},cardMetaDot:{fontSize:9,color:t.grayTextWeak},gridCopyBtn:{padding:2},listRow:{flexDirection:"row",alignItems:"center",backgroundColor:t.primaryLight,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,padding:8,marginBottom:8,gap:10},listRowSelected:{borderColor:t.purple,borderWidth:1.5},listCheckbox:{width:18,height:18,borderRadius:4,borderWidth:1.5,borderColor:t.grayBorderSecondary,alignItems:"center",justifyContent:"center"},listThumbContainer:{width:48,height:48,borderRadius:8,backgroundColor:t.grayBackground,overflow:"hidden",position:"relative"},listThumb:{width:"100%",height:"100%"},listThumbFallback:{flex:1,alignItems:"center",justifyContent:"center"},listMiniPlay:{position:"absolute",bottom:2,right:2,backgroundColor:"rgba(0, 0, 0, 0.65)",borderRadius:3,padding:1.5},listInfo:{flex:1,gap:3},listTitle:{fontFamily:k.interSemiBold,fontSize:12,color:t.grayTextStrong},listMetaRow:{flexDirection:"row",alignItems:"center",gap:5},listBadge:{paddingHorizontal:4.5,paddingVertical:1,borderRadius:4},listBadgeText:{fontFamily:k.interBold,fontSize:9,letterSpacing:.3},listActionsRow:{flexDirection:"row",alignItems:"center",gap:4},listActionBtn:{padding:5,borderRadius:6,backgroundColor:t.grayBackground},emptyHeroCard:{backgroundColor:t.primaryLight,borderRadius:16,borderWidth:1,borderColor:t.grayBorderSecondary,padding:20,alignItems:"center",marginTop:8,shadowColor:t.black,shadowOffset:{width:0,height:2},shadowOpacity:.03,shadowRadius:6,elevation:2},emptyIconCircle:{width:64,height:64,borderRadius:32,backgroundColor:`${t.purple}14`,borderWidth:1,borderColor:`${t.purple}25`,alignItems:"center",justifyContent:"center",marginBottom:12},emptyHeroTitle:{fontFamily:k.interBold,fontSize:16,color:t.grayTextStrong,textAlign:"center",marginBottom:6},emptyHeroSubtitle:{fontFamily:k.interRegular,fontSize:12,lineHeight:17,color:t.grayText,textAlign:"center",marginBottom:18,paddingHorizontal:8},emptyActionsGrid:{width:"100%",gap:8,marginBottom:16},emptyActionCard:{flexDirection:"row",alignItems:"center",backgroundColor:t.grayBackground,borderRadius:10,borderWidth:1,borderColor:t.grayBorderSecondary,padding:10,gap:12},actionCardIconBox:{width:38,height:38,borderRadius:8,alignItems:"center",justifyContent:"center"},actionCardTextBox:{flex:1,gap:1.5},actionCardTitle:{fontFamily:k.interBold,fontSize:12.5,color:t.grayTextStrong},actionCardDesc:{fontFamily:k.interRegular,fontSize:10.5,color:t.grayTextWeak},featurePillsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,flexWrap:"wrap",paddingTop:4},featurePill:{backgroundColor:t.grayBackground,paddingHorizontal:8,paddingVertical:3.5,borderRadius:12,borderWidth:1,borderColor:t.grayBorderSecondary},featurePillText:{fontFamily:k.interMedium,fontSize:9.5,color:t.grayTextWeak}});

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

@@ -44,6 +44,7 @@ interface MediaPreviewModalProps {
     onClose: () => void;
     onDelete: (item: CapturedMediaItem) => void;
     onConvertToGif?: (item: CapturedMediaItem) => void;
+    onSave?: (savedItem: CapturedMediaItem) => void;
 }
 export declare const MediaPreviewModal: React.FC<MediaPreviewModalProps>;
 export {};