react-native-inapp-inspector 2.5.10 → 2.5.12

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

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