react-native-inapp-inspector 2.4.1 → 2.5.0

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

@@ -1,166 +1,372 @@
-import{useState as z}from"react";import{Alert as Ve,Image as _,Modal as Me,Platform as V,Share as ee,StyleSheet as oe,Text as T,TouchableOpacity as A,View as C}from"react-native";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as S}from"../../styles/AppFonts";import R from"../TouchableScale";import{ChevronDownIcon as De,CopyIcon as L,ExpandCollapseIcon as We,FilmIcon as E,GifIcon as H,ImageIcon as Le,PauseIcon as Ee,PlayIcon as Ce,RepeatIcon as He,ShareIcon as Te,TrashIcon as Ue}from"../NetworkIcons";import{ScreenCapture as Ne}from"../../capture";import{copyImageOrMediaToClipboard as qe,formatBytes as Se}from"../../helpers";import{showToast as G}from"../../helpers/toast";import{useTranslation as Je}from"../../i18n";export const MediaPreviewModal=({item:t,visible:ve,onClose:M,onDelete:Ie,onConvertToGif:D})=>{const{t:r}=Je(),[U,N]=z(!1),[Ae,q]=z(!1),[P,Pe]=z(!1),[J,K]=z(!1),[Q,ze]=z("1.0x"),[$,Be]=z(!0),[W,Re]=z(.4);if(!t)return null;const O=()=>{t?.uri&&qe(t.uri,t.type==="image"?"Image":"Media")},X=async()=>{try{K(!0),await Ne.playVideo(t.uri)}catch{G(r("mediaGallery.playError","Unable to play video"))}finally{K(!1)}},$e=()=>{Ve.alert(r("mediaGallery.deleteTitle"),r("mediaGallery.deleteMessage",{filename:t.filename}),[{text:r("common.cancel"),style:"cancel"},{text:r("mediaGallery.delete"),style:"destructive",onPress:()=>{Ie(t),M()}}])},Fe=async()=>{if(D){N(!0);try{await D(t),G(r("mediaGallery.convertedSuccess"))}catch{G(r("mediaGallery.convertFailed"))}finally{N(!1)}}},Y=async()=>{try{const v=t.uri.startsWith("file://")||t.uri.startsWith("content://")||t.uri.startsWith("http")?t.uri:`file://${t.uri}`,Oe=V.select({ios:{url:v,title:t.filename},default:{title:t.filename,message:t.filename,url:v}});(await ee.share(Oe)).action===ee.sharedAction&&G(r("mediaGallery.shareSuccess","Shared successfully"))}catch(v){v?.message!=="User did not share"&&G(r("mediaGallery.shareUnavailable","Sharing not available on this device"))}},I=t.type==="video",F=t.type==="gif",B=t.durationMs?(t.durationMs/1e3).toFixed(1):null,Ge=B?`00:${Number(B)<10?"0":""}${B}`:"00:05.0",Z=!0;return<Me visible={ve}transparent={!0}animationType="fade"onRequestClose={M}>
-      <C style={o.overlay}>
+import fo,{useRef as J,useState as R}from"react";import{Dimensions as ge,Image as Tt,Modal as Ct,PanResponder as kt,Platform as je,SafeAreaView as To,ScrollView as Be,Share as St,StatusBar as Ue,StyleSheet as ee,Text as S,TextInput as Co,TouchableOpacity as A,View as T}from"react-native";import So from"react-native-linear-gradient";import Bt,{G as Bo,Line as Re,Path as Rt,Rect as Ro}from"react-native-svg";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as F}from"../../styles/AppFonts";import G from"../TouchableScale";import{ConfirmationModal as Mo}from"./ConfirmationModal";import{BlurIcon as Po,CircleIconOutline as Io,CloseWhite as Me,CopyIcon as Mt,CropIcon as Ao,EllipseIconOutline as Fo,FilmIcon as Xe,GifIcon as Ye,ImageIcon as $o,PenIcon as Vo,PlayIcon as Pt,RectangleIcon as Do,ResizeIcon as Oo,RotateIcon as It,ScissorsIcon as Wo,ShapesIcon as Lo,ShareIcon as Ho,TrashIcon as Go,TypeIcon as Eo,UndoIcon as Uo,VolumeXIcon as Xo,ZoomInIcon as Yo,ZoomOutIcon as Zo}from"../NetworkIcons";import{ScreenCapture as No}from"../../capture";import{MediaEditor as be}from"../../editor";import{copyImageOrMediaToClipboard as _o,formatBytes as Ze}from"../../helpers";import{showToast as E}from"../../helpers/toast";import{useTranslation as qo}from"../../i18n";import{triggerNativeHaptic as $}from"../../native/NativeInspector";const At=["#EF4444","#F59E0B","#38BDF8","#10B981","#A855F7","#FFFFFF","#0F172A"];export const MediaPreviewModal=({item:k,visible:Ne,onClose:Pe,onDelete:Ft,onConvertToGif:pe})=>{const{t:z}=qo(),[_e,qe]=R(!1),[ie,Y]=R(!1),[$t,re]=R(null),[Vt,ae]=R(k?.width),[Dt,le]=R(k?.height),[Ot,ne]=R(k?.sizeBytes),[Wt,Ie]=R(k?.durationMs),[Lt,Ae]=R(!1),[Ht,Ke]=R(!1),[Gt,Fe]=R(!1),[v,Z]=R("none"),[Je,me]=R(1),[se,Qe]=R(0),[$e,Et]=R("free"),[r,H]=R({x:.1,y:.15,width:.8,height:.7}),[N,et]=R("#EF4444"),[fe,jt]=R(4),[ye,we]=R([]),[Ve,xe]=R(null),[Ko,Ut]=R("rect"),[Xt,De]=R([]),[Yt,Te]=R([]),[Zt,ue]=R(!1),[tt,ot]=R(null),[Ce,ke]=R(""),[Nt,Oe]=R([]),Jo=J(null),[it,rt]=R({width:ge.get("window").width-16,height:ge.get("window").height*.72,pageX:0,pageY:0}),te=J(v);te.current=v;const at=J(N);at.current=N;const lt=J(fe);lt.current=fe;const nt=J(r);nt.current=r;const We=J(it);We.current=it;const _t=J(kt.create({onStartShouldSetPanResponder:()=>te.current==="draw",onMoveShouldSetPanResponder:()=>te.current==="draw",onPanResponderGrant:t=>{const{locationX:i,locationY:C}=t.nativeEvent;xe([{x:i,y:C}])},onPanResponderMove:t=>{const{locationX:i,locationY:C}=t.nativeEvent;xe(O=>O?[...O,{x:i,y:C}]:[{x:i,y:C}])},onPanResponderRelease:()=>{xe(t=>(t&&t.length>1&&we(i=>[...i,{id:`stroke_${Date.now()}_${Math.random()}`,points:t,color:at.current,strokeWidth:lt.current}]),null))}})).current,Se=J({mode:"none",startX:0,startY:0,origBox:{x:.08,y:.1,width:.84,height:.75}}),qt=J(kt.create({onStartShouldSetPanResponder:()=>te.current==="crop",onStartShouldSetPanResponderCapture:()=>te.current==="crop",onMoveShouldSetPanResponder:()=>te.current==="crop",onMoveShouldSetPanResponderCapture:()=>te.current==="crop",onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderGrant:t=>{const i=We.current,C=i.width>50?i.width:ge.get("window").width-16,O=i.height>50?i.height:ge.get("window").height*.72,{locationX:he,locationY:_}=t.nativeEvent,V=Math.max(0,Math.min(1,he/C)),I=Math.max(0,Math.min(1,_/O)),X=nt.current,q=X.x,Q=X.y,M=X.x+X.width,P=X.y+X.height,W=Math.max(.08,40/C),L=Math.max(.08,40/O);let B="none";Math.abs(V-q)<=W&&Math.abs(I-Q)<=L?B="tl":Math.abs(V-M)<=W&&Math.abs(I-Q)<=L?B="tr":Math.abs(V-q)<=W&&Math.abs(I-P)<=L?B="bl":Math.abs(V-M)<=W&&Math.abs(I-P)<=L?B="br":Math.abs(I-Q)<=L&&V>=q&&V<=M?B="top":Math.abs(I-P)<=L&&V>=q&&V<=M?B="bottom":Math.abs(V-q)<=W&&I>=Q&&I<=P?B="left":Math.abs(V-M)<=W&&I>=Q&&I<=P?B="right":V>=q&&V<=M&&I>=Q&&I<=P?B="center":B="new",Se.current={mode:B,startX:V,startY:I,origBox:{...X}}},onPanResponderMove:(t,i)=>{const C=We.current,O=C.width>0?C.width:ge.get("window").width-16,he=C.height>0?C.height:ge.get("window").height*.7;if(!O||!he)return;const _=i.dx/O,V=i.dy/he,{mode:I,startX:X,startY:q,origBox:Q}=Se.current,{x:M,y:P,width:W,height:L}=Q;if(I==="center"){const B=Math.max(0,Math.min(1-W,M+_)),j=Math.max(0,Math.min(1-L,P+V));H(Ee=>({...Ee,x:B,y:j}))}else if(I==="new"){const B=Math.max(0,Math.min(1,X+_)),j=Math.max(0,Math.min(1,q+V)),Ee=Math.min(X,B),bo=Math.min(q,j),po=Math.max(.04,Math.abs(B-X)),mo=Math.max(.04,Math.abs(j-q));H({x:Ee,y:bo,width:po,height:mo})}else if(I==="tl"){const B=Math.max(0,Math.min(M+W-.04,M+_)),j=Math.max(0,Math.min(P+L-.04,P+V));H({x:B,y:j,width:W-(B-M),height:L-(j-P)})}else if(I==="tr"){const B=Math.max(0,Math.min(P+L-.04,P+V)),j=Math.max(.04,Math.min(1-M,W+_));H({x:M,y:B,width:j,height:L-(B-P)})}else if(I==="bl"){const B=Math.max(0,Math.min(M+W-.04,M+_)),j=Math.max(.04,Math.min(1-P,L+V));H({x:B,y:P,width:W-(B-M),height:j})}else if(I==="br"){const B=Math.max(.04,Math.min(1-M,W+_)),j=Math.max(.04,Math.min(1-P,L+V));H({x:M,y:P,width:B,height:j})}else if(I==="top"){const B=Math.max(0,Math.min(P+L-.04,P+V));H({x:M,y:B,width:W,height:L-(B-P)})}else if(I==="bottom"){const B=Math.max(.04,Math.min(1-P,L+V));H({x:M,y:P,width:W,height:B})}else if(I==="left"){const B=Math.max(0,Math.min(M+W-.04,M+_));H({x:B,y:P,width:W-(B-M),height:L})}else if(I==="right"){const B=Math.max(.04,Math.min(1-M,W+_));H({x:M,y:P,width:B,height:L})}},onPanResponderRelease:()=>{Se.current.mode="none"},onPanResponderTerminate:()=>{Se.current.mode="none"}})).current;if(fo.useEffect(()=>{k?.uri&&(re(k.uri),ae(k.width),le(k.height),ne(k.sizeBytes),Ie(k.durationMs),Ae(!1),Qe(0),me(1),Z("none"),we([]),xe(null),De([]),Te([]),Oe([]),H({x:.08,y:.1,width:.84,height:.75}))},[k?.uri,k?.width,k?.height,k?.sizeBytes,k?.durationMs]),!k||!Ne)return null;const D=$t||k.uri,de=Vt??k.width,ce=Dt??k.height,st=Ot??k.sizeBytes,Le=Wt??k.durationMs,K=k.type==="video",dt=k.type==="gif",U=k.type==="image",Kt=se===90||se===270?de&&ce?Math.min(ce/de,de/ce,.75):.72:1,Jt=()=>{$("light"),me(t=>Math.min(4,parseFloat((t+.25).toFixed(2))))},Qt=()=>{$("light"),me(t=>Math.max(1,parseFloat((t-.25).toFixed(2))))},eo=()=>{$("medium"),me(1)},to=async()=>{if(!D||!U)return;$("light");const t=(se+90)%360;if(Qe(t),E(z("mediaGallery.rotatedSuccess",`Rotated ${t}\xB0`)),!ie){Y(!0);try{const i=await be.editPhoto({uri:D,rotation:90});i?.uri&&(re(i.uri),i.width&&ae(i.width),i.height&&le(i.height),i.size&&ne(i.size))}catch{}finally{Y(!1)}}},oo=()=>{$("light"),we(t=>t.slice(0,-1))},io=()=>{$("medium"),we([])},ro=t=>{$("light"),Z("crop"),Et(t),H(t==="1:1"?{x:.15,y:.2,width:.7,height:.7}:t==="4:3"?{x:.1,y:.2,width:.8,height:.6}:t==="16:9"?{x:.05,y:.25,width:.9,height:.506}:t==="9:16"?{x:.25,y:.1,width:.5,height:.888}:t==="3:2"?{x:.1,y:.2,width:.8,height:.533}:{x:.08,y:.1,width:.84,height:.75})},ao=async()=>{if(!(!D||!U)){$("medium"),Y(!0);try{const t=await be.cropToDefect(D,{x:r.x,y:r.y,width:r.width,height:r.height,isNormalized:!0});t?.uri&&(re(t.uri),t.width&&ae(t.width),t.height&&le(t.height),t.size&&ne(t.size),E(z("mediaGallery.croppedSuccess","Image Cropped")),Z("none"))}catch{E(z("mediaGallery.cropFailed","Crop failed"))}finally{Y(!1)}}},He=t=>{$("light"),Ut(t);const i={id:`shape_${Date.now()}`,type:t,x:.25,y:.35,width:t==="circle"?.4:.5,height:t==="circle"?.4:.25,color:N};De(C=>[...C,i]),E(z("mediaGallery.shapeAdded",`${t.toUpperCase()} Added`))},lo=()=>{$("light");const t={id:`blur_${Date.now()}`,x:.12,y:.35,width:.76,height:.12};Oe(i=>[...i,t]),E(z("mediaGallery.blurAdded","Blur Mask Added"))},ct=t=>{$("light"),t?(ot(t),ke(t.text)):(ot(null),ke("")),ue(!0)},no=()=>{if(!Ce.trim()){ue(!1);return}if(tt)Te(t=>t.map(i=>i.id===tt.id?{...i,text:Ce.trim(),color:N}:i));else{const t={id:`text_${Date.now()}`,text:Ce.trim(),x:.2,y:.4,color:o.white,bgColor:N==="#FFFFFF"?"#0F172A":N};Te(i=>[...i,t])}ue(!1),ke(""),E(z("mediaGallery.textAdded","Text Added"))},so=async t=>{if(!(!D||!U||ie)){$("medium"),Y(!0);try{const i=await be.editPhoto({uri:D,quality:.85,crop:{x:0,y:0,width:1,height:1,isNormalized:!0}});if(i?.uri){re(i.uri);const C=Math.round((de||1080)*t),O=Math.round((ce||1920)*t);ae(C),le(O),i.size&&ne(Math.round(i.size*t*t)),E(z("mediaGallery.resizedSuccess",`Resized to ${Math.round(t*100)}% (${C}\xD7${O})`)),Z("none")}}catch{E(z("mediaGallery.resizeFailed","Resize failed"))}finally{Y(!1)}}},Ge=()=>{D&&($("light"),_o(D,U?"Image":"Media"))},co=async()=>{try{$("light");const t=D.startsWith("file://")||D.startsWith("content://")||D.startsWith("http")?D:`file://${D}`,i=je.select({ios:{url:t,title:k.filename},default:{title:k.filename,message:k.filename,url:t}});(await St.share(i)).action===St.sharedAction&&E(z("mediaGallery.shareSuccess","Shared successfully"))}catch(t){t?.message!=="User did not share"&&E(z("mediaGallery.shareUnavailable","Sharing not available on this device"))}},ho=()=>{$("medium"),Fe(!0)},ht=async()=>{if(pe){qe(!0);try{await pe(k),E(z("mediaGallery.convertedSuccess","Converted to GIF!"))}catch{E(z("mediaGallery.convertFailed","Conversion failed"))}finally{qe(!1)}}},gt=async()=>{try{Ke(!0),await No.playVideo(D)}catch{E(z("mediaGallery.playError","Unable to play video"))}finally{Ke(!1)}},go=async()=>{if(!(!D||!K||ie)){Y(!0),$("light");try{const i=Math.min(Le||1e4,5e3),C=await be.trimReproClip(D,0,i,{quality:"medium"});C?.uri&&(re(C.uri),C.width&&ae(C.width),C.height&&le(C.height),C.size&&ne(C.size),C.durationMs&&Ie(C.durationMs),E(z("mediaGallery.trimmedSuccess","Trimmed to 5s Repro Clip")))}catch{E(z("mediaGallery.trimFailed","Trim failed"))}finally{Y(!1)}}},yo=async()=>{if(!(!D||!K||ie)){Y(!0),$("light");try{const t=await be.muteVideo(D);t?.uri&&(re(t.uri),t.width&&ae(t.width),t.height&&le(t.height),t.size&&ne(t.size),t.durationMs&&Ie(t.durationMs),E(z("mediaGallery.mutedSuccess","Audio Stripped")))}catch{E(z("mediaGallery.muteFailed","Mute failed"))}finally{Y(!1)}}},oe=Le?(Le/1e3).toFixed(1):null,uo=oe?`00:${Number(oe)<10?"0":""}${oe}`:null;return<Ct visible={Ne}transparent={!0}animationType="fade"statusBarTranslucent={!0}onRequestClose={Pe}>
+      <Ue translucent backgroundColor="transparent"barStyle="light-content"/>
+      <T style={e.overlay}>
         
-        <C style={o.header}>
-          <A activeOpacity={.8}onPress={O}style={o.headerLeft}>
-            <C style={[o.badge,{borderColor:I?`${e.sky400}80`:F?`${e.warningAmber}80`:`${e.emerald500}80`,backgroundColor:I?`${e.sky400}20`:F?`${e.warningAmber}20`:`${e.emerald500}20`}]}>
-              {I?<E size={13}color={e.sky400}/>:F?<H size={13}color={e.warningAmber}/>:<Le size={13}color={e.emerald500}/>}
-              <T style={[o.badgeText,{color:I?e.sky400:F?e.warningAmber:e.emerald500}]}>
-                {t.format.toUpperCase()}
+        <T style={e.header}>
+          <So colors={[o.indigo600,o.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={ee.absoluteFill}pointerEvents="none"/>
+          <T style={e.headerInner}>
+            <A activeOpacity={.8}onPress={Ge}style={e.headerLeft}>
+              <T style={e.badge}>
+                {K?<Xe size={11}color={o.white}/>:dt?<Ye size={11}color={o.white}/>:<$o size={11}color={o.white}/>}
+                <S style={e.badgeText}>
+                  {(k.format||(K?"mp4":dt?"gif":"png")).toUpperCase()}
+                </S>
               </T>
-            </C>
-            <C style={{flex:1,minWidth:0}}>
-              <T style={o.title}numberOfLines={1}>
-                {t.filename}
+              <T style={e.headerTextCol}>
+                <S style={e.title}numberOfLines={1}>
+                  {k.filename||(k.uri?k.uri.split("/").pop():"")||"Capture"}
+                </S>
+                <S style={e.subtitle}numberOfLines={1}>
+                  {Ze(st||0)}
+                  {k.timestamp?` \u2022 ${new Date(k.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}`:""}
+                </S>
               </T>
-              <T style={o.subtitle}>
-                {Se(t.sizeBytes)} • {new Date(t.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}
-              </T>
-            </C>
-          </A>
+            </A>
 
-          
-          <C style={o.headerRight}>
-            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.copyUri","Copy URI")}onPress={O}style={o.headerActionBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <L size={14}color={e.slate200}/>
-            </R>
+            
+            <T style={e.headerRight}>
+              {K&&pe&&<G accessible={!0}accessibilityRole="button"accessibilityLabel={z("mediaGallery.convertToGif","Convert to GIF")}onPress={ht}disabled={_e}style={[e.headerActionBtn,{backgroundColor:`${o.warningAmber}33`,borderColor:`${o.warningAmber}66`}]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <Ye size={13}color={o.warningAmber}/>
+                </G>}
 
-            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.share","Share")}onPress={Y}style={[o.headerActionBtn,{backgroundColor:`${e.sky400}20`,borderColor:`${e.sky400}60`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <Te size={14}color={e.sky400}/>
-            </R>
+              <G accessible={!0}accessibilityRole="button"accessibilityLabel={z("mediaGallery.copyUri","Copy URI")}onPress={Ge}style={e.headerActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <Mt size={13}color={o.white}/>
+              </G>
 
-            <R accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.delete")}onPress={$e}style={o.headerDeleteBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <Ue size={14}color={e.red500}/>
-            </R>
+              <G accessible={!0}accessibilityRole="button"accessibilityLabel={z("mediaGallery.share","Share")}onPress={co}style={e.headerActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <Ho size={13}color={o.white}/>
+              </G>
 
-            <A accessible={!0}accessibilityRole="button"accessibilityLabel={P?r("mediaGallery.collapse","Exit Fullscreen"):r("mediaGallery.expand","Expand Fullscreen")}onPress={()=>Pe(!P)}style={[o.headerIconBtn,P&&{backgroundColor:`${e.sky400}30`,borderColor:`${e.sky400}70`}]}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <We size={14}isExpanded={P}color={P?e.sky400:e.white}/>
-            </A>
+              <G accessible={!0}accessibilityRole="button"accessibilityLabel={z("mediaGallery.delete","Delete")}onPress={ho}style={e.headerDeleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <Go size={13}color={o.white}/>
+              </G>
 
-            <A accessible={!0}accessibilityRole="button"accessibilityLabel={r("mediaGallery.minimize","Minimize")}onPress={M}style={o.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <De size={15}color={e.white}/>
-            </A>
-          </C>
-        </C>
+              <A accessible={!0}accessibilityRole="button"accessibilityLabel={z("common.close","Close")}onPress={Pe}style={e.headerCloseBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <Me size={12}/>
+              </A>
+            </T>
+          </T>
+        </T>
 
         
-        <C style={[o.stage,P&&o.stageExpanded,!Z&&{paddingBottom:V.OS==="ios"?34:16}]}>
-          <A activeOpacity={I?.9:1}onPress={I?X:void 0}style={[o.previewCard,P&&o.previewCardExpanded]}>
-            {I?t.thumbnailUri&&!Ae?<>
-                  <_ source={{uri:t.thumbnailUri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>
-                  <C style={o.videoImageOverlay}/>
-                </>:<C style={o.videoFallbackBackdrop}>
-                  <C style={o.videoFallbackGlow}/>
-                  <E size={44}color={e.sky400}/>
-                  <T style={o.videoFallbackSubtitle}>
-                    {t.width&&t.height?`${t.width} \xD7 ${t.height}`:"HD Video"} • MP4
-                  </T>
-                </C>:<_ source={{uri:t.uri}}style={o.image}resizeMode="contain"onError={()=>q(!0)}/>}
+        <To style={e.stageSafe}>
+          <T style={e.stage}>
+            <T onLayout={t=>{const{width:i,height:C}=t.nativeEvent.layout;i>20&&C>20&&rt(O=>({...O,width:i,height:C}))}}style={e.previewCard}>
+              {K?k.thumbnailUri&&!Lt?<>
+                    <Tt source={{uri:k.thumbnailUri}}style={e.image}resizeMode="contain"onError={()=>Ae(!0)}/>
+                    <T style={e.videoImageOverlay}/>
+                  </>:<T style={e.videoFallbackBackdrop}>
+                    <T style={e.videoFallbackGlow}/>
+                    <Xe size={52}color={o.sky400}/>
+                    <S style={e.videoFallbackTitle}>
+                      {k.width&&k.height?`${k.width} \xD7 ${k.height}`:"HD Video Recording"}
+                    </S>
+                    <S style={e.videoFallbackSubtitle}>
+                      {oe?`${oe}s duration`:"MP4 Video"} • {Ze(k.sizeBytes)}
+                    </S>
+                  </T>:<T onLayout={t=>{const{width:i,height:C}=t.nativeEvent.layout;i>20&&C>20&&rt(O=>({...O,width:i,height:C}))}}style={[e.canvasContainer,{transform:[{scale:Je*Kt},{rotate:`${se}deg`}]}]}{...v==="draw"?_t.panHandlers:{}}>
+                  <Tt key={D}source={{uri:D}}style={e.image}resizeMode="contain"onError={()=>Ae(!0)}/>
 
-            
-            {I&&<C style={o.centerPlayOverlay}>
-                <C style={o.centerPlayCircle}>
-                  <Ce size={28}color={e.white}/>
-                </C>
-                <T style={o.centerPlayText}>
-                  {r("mediaGallery.playVideo","Play Video")}
-                </T>
-              </C>}
+                  
+                  <Bt style={ee.absoluteFill}pointerEvents={v==="draw"?"auto":"none"}>
+                    <Bo>
+                      {ye.map(t=>{if(t.points.length<2)return null;const i=t.points.reduce((C,O,he)=>he===0?`M ${O.x} ${O.y}`:`${C} L ${O.x} ${O.y}`,"");return<Rt key={t.id}d={i}stroke={t.color}strokeWidth={t.strokeWidth}strokeLinecap="round"strokeLinejoin="round"fill="none"/>})}
+                      {Ve&&Ve.length>1&&<Rt d={Ve.reduce((t,i,C)=>C===0?`M ${i.x} ${i.y}`:`${t} L ${i.x} ${i.y}`,"")}stroke={N}strokeWidth={fe}strokeLinecap="round"strokeLinejoin="round"fill="none"/>}
+                    </Bo>
+                  </Bt>
 
-            
-            {I&&<C style={o.videoBadgeOverlay}>
-                <C style={o.playPill}>
-                  <E size={12}color={e.sky400}/>
-                  <T style={o.playPillText}>
-                    {B?`${B}s`:"VIDEO"}
-                  </T>
-                </C>
-              </C>}
+                  
+                  {Xt.map(t=><T key={t.id}style={[e.shapeItem,{left:`${t.x*100}%`,top:`${t.y*100}%`,width:`${t.width*100}%`,height:`${t.height*100}%`,borderColor:t.color,borderRadius:t.type==="circle"?999:t.type==="ellipse"?36:8}]}>
+                      <A style={e.shapeDeleteBadge}onPress={()=>{$("light"),De(i=>i.filter(C=>C.id!==t.id))}}>
+                        <Me size={8}/>
+                      </A>
+                    </T>)}
 
-            
-            {F&&<C style={o.videoBadgeOverlay}>
-                <C style={[o.playPill,{backgroundColor:`${e.warningAmber}CC`}]}>
-                  <H size={12}color={e.white}/>
-                  <T style={o.playPillText}>ANIMATED GIF</T>
-                </C>
-              </C>}
+                  
+                  {Nt.map(t=><T key={t.id}style={[e.blurItem,{left:`${t.x*100}%`,top:`${t.y*100}%`,width:`${t.width*100}%`,height:`${t.height*100}%`}]}>
+                      <S style={e.blurItemText}>PRIVACY MASK</S>
+                      <A style={e.shapeDeleteBadge}onPress={()=>{$("light"),Oe(i=>i.filter(C=>C.id!==t.id))}}>
+                        <Me size={8}/>
+                      </A>
+                    </T>)}
 
-            
-            <A activeOpacity={.8}onPress={O}style={o.floatingMetaBadge}>
-              <L size={11}color={e.sky400}/>
-              <T style={o.floatingMetaText}>
-                {t.width&&t.height?`${t.width} \xD7 ${t.height}  \u2022  `:""}
-                {Se(t.sizeBytes)}
-              </T>
-            </A>
-          </A>
-        </C>
+                  
+                  {Yt.map(t=><A key={t.id}activeOpacity={.85}onPress={()=>ct(t)}style={[e.textAnnotationPill,{left:`${t.x*100}%`,top:`${t.y*100}%`,backgroundColor:t.bgColor}]}>
+                      <S style={[e.textAnnotationText,{color:t.color}]}>
+                        {t.text}
+                      </S>
+                      <A style={e.textDeleteBtn}onPress={()=>{$("light"),Te(i=>i.filter(C=>C.id!==t.id))}}>
+                        <Me size={8}/>
+                      </A>
+                    </A>)}
 
-        
-        {I&&<C style={o.videoControlsPanel}>
-            
-            <C style={o.progressSection}>
-              <T style={o.timeLabel}>
-                00:0{Math.floor(W*(Number(B)||5))}
-              </T>
-              <A activeOpacity={.8}onPress={()=>Re(v=>v>=.9?.1:v+.3)}style={o.progressTrack}>
-                <C style={[o.progressFill,{width:`${Math.max(10,Math.min(100,W*100))}%`}]}/>
-                <C style={[o.scrubberThumb,{left:`${Math.max(8,Math.min(96,W*100))}%`}]}/>
-              </A>
-              <T style={o.timeLabel}>{Ge}</T>
-            </C>
+                  
+                  {v==="crop"&&<T style={e.cropOverlayMask}{...qt.panHandlers}>
+                      
+                      <T pointerEvents="none"style={[e.cropDimMask,{top:0,left:0,right:0,height:`${r.y*100}%`}]}/>
+                      
+                      <T pointerEvents="none"style={[e.cropDimMask,{top:`${(r.y+r.height)*100}%`,left:0,right:0,bottom:0}]}/>
+                      
+                      <T pointerEvents="none"style={[e.cropDimMask,{top:`${r.y*100}%`,left:0,width:`${r.x*100}%`,height:`${r.height*100}%`}]}/>
+                      
+                      <T pointerEvents="none"style={[e.cropDimMask,{top:`${r.y*100}%`,left:`${(r.x+r.width)*100}%`,right:0,height:`${r.height*100}%`}]}/>
+
+                      
+                      <Bt style={ee.absoluteFill}pointerEvents="none">
+                        <Ro x={`${r.x*100}%`}y={`${r.y*100}%`}width={`${r.width*100}%`}height={`${r.height*100}%`}stroke="#FFFFFF"strokeWidth="2.5"strokeDasharray="8, 5"fill="rgba(56, 189, 248, 0.10)"/>
+                        <Re x1={`${r.x*100}%`}y1={`${(r.y+r.height*.333)*100}%`}x2={`${(r.x+r.width)*100}%`}y2={`${(r.y+r.height*.333)*100}%`}stroke="rgba(255, 255, 255, 0.55)"strokeWidth="1.2"strokeDasharray="4, 4"/>
+                        <Re x1={`${r.x*100}%`}y1={`${(r.y+r.height*.666)*100}%`}x2={`${(r.x+r.width)*100}%`}y2={`${(r.y+r.height*.666)*100}%`}stroke="rgba(255, 255, 255, 0.55)"strokeWidth="1.2"strokeDasharray="4, 4"/>
+                        <Re x1={`${(r.x+r.width*.333)*100}%`}y1={`${r.y*100}%`}x2={`${(r.x+r.width*.333)*100}%`}y2={`${(r.y+r.height)*100}%`}stroke="rgba(255, 255, 255, 0.55)"strokeWidth="1.2"strokeDasharray="4, 4"/>
+                        <Re x1={`${(r.x+r.width*.666)*100}%`}y1={`${r.y*100}%`}x2={`${(r.x+r.width*.666)*100}%`}y2={`${(r.y+r.height)*100}%`}stroke="rgba(255, 255, 255, 0.55)"strokeWidth="1.2"strokeDasharray="4, 4"/>
+                      </Bt>
+
+                      
+                      <T pointerEvents="none"style={[e.cropBoxFrame,{left:`${r.x*100}%`,top:`${r.y*100}%`,width:`${r.width*100}%`,height:`${r.height*100}%`}]}>
+                        
+                        <T style={[e.cropCornerBracket,e.bracketTL]}/>
+                        <T style={[e.cropCornerBracket,e.bracketTR]}/>
+                        <T style={[e.cropCornerBracket,e.bracketBL]}/>
+                        <T style={[e.cropCornerBracket,e.bracketBR]}/>
+
+                        
+                        <T style={e.cropEdgeBarTop}/>
+                        <T style={e.cropEdgeBarBottom}/>
+                        <T style={e.cropEdgeBarLeft}/>
+                        <T style={e.cropEdgeBarRight}/>
+
+                        
+                        <T style={e.cropCenterPill}>
+                          <S style={e.cropCenterPillText}>
+                            {$e.toUpperCase()} • {Math.round(r.width*100)}% × {Math.round(r.height*100)}%
+                          </S>
+                        </T>
+                      </T>
+                    </T>}
+                </T>}
 
-            
-            <C style={o.controlsRow}>
               
-              <A onPress={X}style={o.controlActionPill}>
-                {J?<Ee size={14}color={e.sky400}/>:<Ce size={14}color={e.sky400}/>}
-                <T style={[o.controlActionText,{color:e.sky400}]}>
-                  {J?r("mediaGallery.pause","Pause"):r("mediaGallery.play","Play")}
-                </T>
-              </A>
+              {K&&<A activeOpacity={.9}onPress={gt}style={e.centerPlayContainer}>
+                  <T style={e.centerPlayGlow}/>
+                  <T style={e.centerPlayCircle}>
+                    <Pt size={28}color={o.white}/>
+                  </T>
+                  <T style={e.centerPlayPill}>
+                    <S style={e.centerPlayText}>
+                      {Ht?z("mediaGallery.playing","Playing Video..."):z("mediaGallery.playVideo","Play Video")}
+                    </S>
+                  </T>
+                </A>}
 
               
-              <C style={o.speedGroup}>
-                {["1.0x","1.5x","2.0x"].map(v=><A key={v}onPress={()=>ze(v)}style={[o.speedBtn,Q===v&&o.speedBtnActive]}>
-                    <T style={[o.speedText,Q===v&&o.speedTextActive]}>
-                      {v}
-                    </T>
-                  </A>)}
-              </C>
+              {K&&<T style={e.topLeftBadgeOverlay}pointerEvents="none">
+                  <T style={e.metaPill}>
+                    <Xe size={11}color={o.sky400}/>
+                    <S style={e.metaPillText}>
+                      {uo||(oe?`${oe}s`:"VIDEO")}
+                    </S>
+                  </T>
+                </T>}
 
               
-              <A onPress={()=>Be(!$)}style={[o.loopPill,$&&o.loopPillActive]}>
-                <He size={12}color={$?e.sky400:e.whiteAlpha60}/>
-                <T style={[o.loopText,$&&o.loopTextActive]}>
-                  {$?"Loop: ON":"Loop: OFF"}
+              {U&&se>0&&<T style={e.topLeftBadgeOverlay}pointerEvents="none">
+                  <T style={[e.metaPill,{backgroundColor:"rgba(99, 102, 241, 0.90)"}]}>
+                    <It size={11}color={o.white}/>
+                    <S style={e.metaPillText}>{se}°</S>
+                  </T>
+                </T>}
+
+              
+              <A activeOpacity={.8}onPress={Ge}style={e.bottomRightBadgeOverlay}>
+                <T style={e.metaPill}>
+                  <Mt size={10}color={o.sky400}/>
+                  <S style={e.metaPillText}>
+                    {de&&ce?`${de} \xD7 ${ce} \u2022 `:""}
+                    {Ze(st)}
+                  </S>
                 </T>
               </A>
-            </C>
-          </C>}
 
-        
-        {Z&&<C style={o.footer}>
-            <R onPress={O}style={[o.actionBtn,{backgroundColor:e.whiteAlpha08,borderColor:e.whiteAlpha15}]}>
-              <L size={14}color={e.slate200}/>
-              <T style={[o.actionText,{color:e.slate200}]}>
-                {r("mediaGallery.copyUri","Copy URI")}
-              </T>
-            </R>
+              
+              {U&&<T style={e.floatingZoomBar}>
+                  <G onPress={Jt}style={e.zoomBtn}accessibilityLabel="Zoom In">
+                    <Yo size={15}color={o.white}/>
+                  </G>
+
+                  <A onPress={eo}activeOpacity={.8}style={e.zoomLevelBadge}>
+                    <S style={e.zoomLevelText}>
+                      {Math.round(Je*100)}%
+                    </S>
+                  </A>
 
-            {D&&I&&<R onPress={Fe}disabled={U}style={[o.actionBtn,{backgroundColor:`${e.warningAmber}22`,borderColor:`${e.warningAmber}70`}]}>
-                <H size={15}color={e.warningAmber}/>
-                <T style={[o.actionText,{color:e.warningAmber}]}>
-                  {r(U?"mediaGallery.converting":"mediaGallery.convertToGif")}
+                  <G onPress={Qt}style={e.zoomBtn}accessibilityLabel="Zoom Out">
+                    <Zo size={15}color={o.white}/>
+                  </G>
+                </T>}
+            </T>
+
+            
+            {U&&v==="crop"&&<T style={e.cropSubToolBar}>
+                
+                <T style={e.cropActionHeaderRow}>
+                  <S style={e.cropHeaderTitle}>Drag box or corners to crop</S>
+                  <T style={e.cropActionButtons}>
+                    <A onPress={()=>Z("none")}style={e.cancelActionBtn}>
+                      <S style={e.cancelActionText}>Cancel</S>
+                    </A>
+                    <A onPress={ao}style={e.applyActionBtn}>
+                      <S style={e.applyActionText}>Apply Crop</S>
+                    </A>
+                  </T>
                 </T>
-              </R>}
 
-            <R onPress={Y}style={[o.actionBtn,{backgroundColor:`${e.sky400}22`,borderColor:`${e.sky400}70`}]}>
-              <Te size={14}color={e.sky400}/>
-              <T style={[o.actionText,{color:e.sky400,fontFamily:S.interSemiBold}]}>
-                {r("mediaGallery.share","Share")}
-              </T>
-            </R>
-          </C>}
-      </C>
-    </Me>};const o=oe.create({overlay:{flex:1,backgroundColor:e.mediaModalBg,justifyContent:"space-between"},header:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:V.OS==="ios"?52:20,paddingBottom:14,borderBottomWidth:1,borderBottomColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,minWidth:0,marginRight:10},headerRight:{flexDirection:"row",alignItems:"center",gap:8},badge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:4,borderRadius:6,borderWidth:1},badgeText:{fontFamily:S.interBold,fontSize:10.5,letterSpacing:.4},title:{fontFamily:S.interSemiBold,fontSize:13.5,color:e.white},subtitle:{fontFamily:S.interRegular,fontSize:11,color:e.whiteAlpha60,marginTop:1},headerActionBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},headerShareBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.sky400}20`,borderWidth:1,borderColor:`${e.sky400}60`,alignItems:"center",justifyContent:"center"},headerDeleteBtn:{width:32,height:32,borderRadius:16,backgroundColor:`${e.red500}20`,borderWidth:1,borderColor:`${e.red500}60`,alignItems:"center",justifyContent:"center"},headerIconBtn:{width:32,height:32,borderRadius:16,backgroundColor:e.whiteAlpha12,borderWidth:1,borderColor:e.whiteAlpha20,alignItems:"center",justifyContent:"center"},stage:{flex:1,alignItems:"center",justifyContent:"center",paddingHorizontal:10,paddingTop:10,paddingBottom:10},stageExpanded:{paddingHorizontal:0,paddingTop:0,paddingBottom:0},previewCard:{flex:1,width:"100%",borderRadius:14,overflow:"hidden",backgroundColor:e.mediaDarkTile,borderWidth:1,borderColor:e.borderGlassLight,alignItems:"center",justifyContent:"center",position:"relative"},previewCardExpanded:{borderRadius:0,borderWidth:0},image:{width:"100%",height:"100%"},videoImageOverlay:{...oe.absoluteFillObject,backgroundColor:"rgba(5, 7, 13, 0.25)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:e.mediaPlayerBg,alignItems:"center",justifyContent:"center",gap:8},videoFallbackGlow:{position:"absolute",width:140,height:140,borderRadius:70,backgroundColor:`${e.sky400}18`},videoFallbackTitle:{fontFamily:S.interSemiBold,fontSize:15,color:e.white,marginTop:8},videoFallbackSubtitle:{fontFamily:S.interRegular,fontSize:12,color:e.whiteAlpha60},centerPlayOverlay:{position:"absolute",alignItems:"center",justifyContent:"center",gap:8},centerPlayCircle:{width:64,height:64,borderRadius:32,backgroundColor:`${e.sky400}E0`,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:e.sky400,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:8},centerPlayText:{fontFamily:S.interSemiBold,fontSize:13,color:e.white,letterSpacing:.3,textShadowColor:"rgba(0,0,0,0.7)",textShadowOffset:{width:0,height:1},textShadowRadius:3},videoBadgeOverlay:{position:"absolute",bottom:12,left:12},playPill:{flexDirection:"row",alignItems:"center",gap:6,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:5,borderRadius:16,borderWidth:1,borderColor:e.whiteAlpha20},playPillText:{fontFamily:S.interSemiBold,fontSize:11,color:e.white,letterSpacing:.3},floatingMetaBadge:{position:"absolute",bottom:10,backgroundColor:`${e.slate900}D9`,paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,borderWidth:1,borderColor:e.whiteAlpha15,alignItems:"center",justifyContent:"center"},floatingMetaText:{fontFamily:S.interMedium,fontSize:10.5,color:e.slate200,letterSpacing:.2},videoControlsPanel:{paddingHorizontal:16,paddingTop:8,paddingBottom:6,backgroundColor:e.headerGlassDark,borderTopWidth:1,borderTopColor:e.borderGlassLight,gap:8},progressSection:{flexDirection:"row",alignItems:"center",gap:10},timeLabel:{fontFamily:S.interMedium,fontSize:11,color:e.whiteAlpha60,minWidth:42},progressTrack:{flex:1,height:6,borderRadius:3,backgroundColor:e.whiteAlpha15,justifyContent:"center",position:"relative"},progressFill:{height:"100%",borderRadius:3,backgroundColor:e.sky400},scrubberThumb:{position:"absolute",width:12,height:12,borderRadius:6,backgroundColor:e.white,borderWidth:2,borderColor:e.sky400,top:-3,marginLeft:-6},controlsRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:2},controlActionPill:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:10,paddingVertical:5,borderRadius:6,backgroundColor:`${e.sky400}18`,borderWidth:1,borderColor:`${e.sky400}50`},controlActionText:{fontFamily:S.interSemiBold,fontSize:11.5},speedGroup:{flexDirection:"row",alignItems:"center",backgroundColor:e.whiteAlpha08,borderRadius:6,borderWidth:1,borderColor:e.whiteAlpha12,padding:2,gap:2},speedBtn:{paddingHorizontal:7,paddingVertical:3,borderRadius:4},speedBtnActive:{backgroundColor:`${e.sky400}30`},speedText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},speedTextActive:{color:e.sky400,fontFamily:S.interBold},loopPill:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:5,borderRadius:6,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha12},loopPillActive:{backgroundColor:`${e.sky400}18`,borderColor:`${e.sky400}50`},loopText:{fontFamily:S.interMedium,fontSize:10.5,color:e.whiteAlpha60},loopTextActive:{color:e.sky400,fontFamily:S.interSemiBold},footer:{flexDirection:"row",alignItems:"center",justifyContent:"center",flexWrap:"wrap",gap:8,paddingHorizontal:16,paddingTop:8,paddingBottom:V.OS==="ios"?34:16,borderTopWidth:1,borderTopColor:e.borderGlassLight,backgroundColor:e.headerGlassDark},actionBtn:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:16,paddingVertical:9,borderRadius:8,backgroundColor:e.whiteAlpha08,borderWidth:1,borderColor:e.whiteAlpha15},actionText:{fontFamily:S.interMedium,fontSize:12,color:e.white}});
+                
+                <Be horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.subToolScroll}>
+                  {["free","1:1","4:3","16:9","9:16","3:2"].map(t=><A key={t}onPress={()=>ro(t)}style={[e.ratioChip,$e===t&&e.ratioChipActive]}>
+                      <S style={[e.ratioChipText,$e===t&&e.ratioChipTextActive]}>
+                        {t.toUpperCase()}
+                      </S>
+                    </A>)}
+                </Be>
+              </T>}
+
+            {U&&v==="resize"&&<T style={e.subToolBar}>
+                <Be horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.subToolScroll}>
+                  {[{label:"75% HD",scale:.75},{label:"50% Half",scale:.5},{label:"25% Mini",scale:.25}].map(t=><A key={t.label}onPress={()=>so(t.scale)}style={e.ratioChip}>
+                      <S style={e.ratioChipText}>{t.label}</S>
+                    </A>)}
+                  <A onPress={()=>Z("none")}style={e.cancelActionBtn}>
+                    <S style={e.cancelActionText}>Done</S>
+                  </A>
+                </Be>
+              </T>}
+
+            {U&&v==="draw"&&<T style={e.subToolBar}>
+                <Be horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.subToolScroll}>
+                  {At.map(t=><A key={t}onPress={()=>{$("light"),et(t)}}style={[e.colorDot,{backgroundColor:t},N===t&&e.colorDotActive]}/>)}
+                  <T style={e.subDivider}/>
+                  {[2,4,8].map(t=><A key={t}onPress={()=>{$("light"),jt(t)}}style={[e.strokeWidthBtn,fe===t&&e.strokeWidthBtnActive]}>
+                      <T style={[e.strokeDot,{width:t+2,height:t+2,backgroundColor:N}]}/>
+                    </A>)}
+                  <A onPress={oo}disabled={ye.length===0}style={[e.actionPillBtn,ye.length===0&&{opacity:.4}]}>
+                    <Uo size={13}color={o.white}/>
+                    <S style={e.actionPillText}>Undo</S>
+                  </A>
+                  <A onPress={io}disabled={ye.length===0}style={[e.actionPillBtn,ye.length===0&&{opacity:.4}]}>
+                    <S style={e.actionPillText}>Clear</S>
+                  </A>
+                </Be>
+              </T>}
+
+            {U&&v==="shapes"&&<T style={e.subToolBar}>
+                <Be horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={e.subToolScroll}>
+                  <A onPress={()=>He("rect")}style={e.shapeOptionBtn}>
+                    <Do size={14}color={o.sky400}/>
+                    <S style={e.shapeOptionText}>Rectangle</S>
+                  </A>
+                  <A onPress={()=>He("circle")}style={e.shapeOptionBtn}>
+                    <Io size={14}color={o.amber400}/>
+                    <S style={e.shapeOptionText}>Circle</S>
+                  </A>
+                  <A onPress={()=>He("ellipse")}style={e.shapeOptionBtn}>
+                    <Fo size={14}color={o.violet600}/>
+                    <S style={e.shapeOptionText}>Ellipse</S>
+                  </A>
+                  <T style={e.subDivider}/>
+                  {At.slice(0,4).map(t=><A key={t}onPress={()=>{$("light"),et(t)}}style={[e.colorDot,{backgroundColor:t},N===t&&e.colorDotActive]}/>)}
+                </Be>
+              </T>}
+
+            
+            <T style={e.bottomTesterDock}>
+              {U&&<>
+                  <G onPress={()=>Z(v==="crop"?"none":"crop")}style={[e.dockToolBtn,v==="crop"&&e.dockToolBtnActive]}>
+                    <Ao size={16}color={v==="crop"?o.white:o.sky400}/>
+                    <S style={[e.dockToolLabel,v==="crop"&&{color:o.white}]}>
+                      Crop
+                    </S>
+                  </G>
+
+                  <G onPress={()=>Z(v==="resize"?"none":"resize")}style={[e.dockToolBtn,v==="resize"&&e.dockToolBtnActive]}>
+                    <Oo size={16}color={v==="resize"?o.white:o.emerald400}/>
+                    <S style={[e.dockToolLabel,v==="resize"&&{color:o.white}]}>
+                      Resize
+                    </S>
+                  </G>
+
+                  <G onPress={()=>Z(v==="draw"?"none":"draw")}style={[e.dockToolBtn,v==="draw"&&e.dockToolBtnActive]}>
+                    <Vo size={16}color={v==="draw"?o.white:o.rose400}/>
+                    <S style={[e.dockToolLabel,v==="draw"&&{color:o.white}]}>
+                      Draw
+                    </S>
+                  </G>
+
+                  <G onPress={()=>Z(v==="shapes"?"none":"shapes")}style={[e.dockToolBtn,v==="shapes"&&e.dockToolBtnActive]}>
+                    <Lo size={16}color={v==="shapes"?o.white:o.amber400}/>
+                    <S style={[e.dockToolLabel,v==="shapes"&&{color:o.white}]}>
+                      Shapes
+                    </S>
+                  </G>
+
+                  <G onPress={()=>ct()}style={e.dockToolBtn}>
+                    <Eo size={16}color={o.indigo400}/>
+                    <S style={e.dockToolLabel}>Text</S>
+                  </G>
+
+                  <G onPress={lo}style={e.dockToolBtn}>
+                    <Po size={16}color={o.sky300}/>
+                    <S style={e.dockToolLabel}>Blur</S>
+                  </G>
+
+                  <G onPress={to}style={e.dockToolBtn}>
+                    <It size={16}color={o.violet600}/>
+                    <S style={e.dockToolLabel}>Rotate</S>
+                  </G>
+                </>}
+
+              {K&&<>
+                  <G onPress={go}disabled={ie}style={e.dockToolBtn}>
+                    <Wo size={16}color={o.sky400}/>
+                    <S style={e.dockToolLabel}>{z("media.trim5s","Trim 5s")}</S>
+                  </G>
+
+                  <G onPress={yo}disabled={ie}style={e.dockToolBtn}>
+                    <Xo size={16}color={o.amber400}/>
+                    <S style={e.dockToolLabel}>{z("media.muteAudio","Mute Audio")}</S>
+                  </G>
+
+                  {pe&&<G onPress={ht}disabled={_e}style={e.dockToolBtn}>
+                      <Ye size={16}color={o.violet600}/>
+                      <S style={e.dockToolLabel}>{z("media.toGif","To GIF")}</S>
+                    </G>}
+
+                  <G onPress={gt}style={[e.dockToolBtn,e.dockPrimaryBtn]}>
+                    <Pt size={16}color={o.white}/>
+                    <S style={[e.dockToolLabel,{color:o.white}]}>{z("media.play","Play")}</S>
+                  </G>
+                </>}
+            </T>
+          </T>
+        </To>
+      </T>
+
+      
+      <Ct visible={Zt}transparent={!0}animationType="fade"onRequestClose={()=>ue(!1)}>
+        <T style={e.modalBackdrop}>
+          <T style={e.textModalCard}>
+            <S style={e.textModalTitle}>Add Text Note / Callout</S>
+            <Co style={e.textModalInput}placeholder="e.g. Defect: Button overlap"placeholderTextColor="rgba(255,255,255,0.4)"value={Ce}onChangeText={ke}autoFocus={!0}multiline={!0}/>
+            <T style={e.textModalActions}>
+              <A onPress={()=>ue(!1)}style={e.modalCancelBtn}>
+                <S style={e.modalCancelText}>Cancel</S>
+              </A>
+              <A onPress={no}style={e.modalConfirmBtn}>
+                <S style={e.modalConfirmText}>Place Text</S>
+              </A>
+            </T>
+          </T>
+        </T>
+      </Ct>
+
+      
+      <Mo visible={Gt}title={z("mediaGallery.deleteTitle","Delete Media?")}message={z("mediaGallery.deleteMessage",{filename:k.filename})}confirmText={z("mediaGallery.delete","Delete")}cancelText={z("common.cancel","Cancel")}isDestructive={!0}icon="trash"onConfirm={()=>{Fe(!1),Ft(k),Pe()}}onCancel={()=>Fe(!1)}/>
+    </Ct>};const e=ee.create({overlay:{flex:1,backgroundColor:o.slate900},header:{width:"100%",zIndex:10,borderBottomWidth:ee.hairlineWidth,borderBottomColor:"rgba(255, 255, 255, 0.25)"},headerInner:{width:"100%",flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:14,paddingTop:je.OS==="ios"?52:Ue.currentHeight?Ue.currentHeight+8:18,paddingBottom:12,minHeight:je.OS==="ios"?94:64},headerLeft:{flexDirection:"row",alignItems:"center",gap:8,flex:1,minWidth:0,marginRight:6},headerTextCol:{flex:1,minWidth:0},headerRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},badge:{flexDirection:"row",alignItems:"center",gap:3.5,paddingHorizontal:6,paddingVertical:3,borderRadius:5,backgroundColor:"rgba(255, 255, 255, 0.22)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.38)"},badgeText:{fontFamily:F.interBold,fontSize:9.5,letterSpacing:.4,color:o.white},title:{fontFamily:F.interSemiBold,fontSize:12.5,color:o.white,letterSpacing:-.1},subtitle:{fontFamily:F.interRegular,fontSize:10.5,color:"rgba(255, 255, 255, 0.7)",marginTop:1},headerActionBtn:{width:30,height:30,borderRadius:7,backgroundColor:"rgba(255, 255, 255, 0.22)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.38)",alignItems:"center",justifyContent:"center"},headerDeleteBtn:{width:30,height:30,borderRadius:7,backgroundColor:"rgba(239, 68, 68, 0.35)",borderWidth:1,borderColor:"rgba(252, 165, 165, 0.55)",alignItems:"center",justifyContent:"center"},headerCloseBtn:{width:30,height:30,borderRadius:7,backgroundColor:"rgba(244, 63, 94, 0.28)",borderWidth:1,borderColor:"rgba(251, 113, 133, 0.48)",alignItems:"center",justifyContent:"center"},stageSafe:{flex:1,width:"100%"},stage:{flex:1,width:"100%",alignItems:"center",justifyContent:"center",padding:8},previewCard:{flex:1,width:"100%",borderRadius:14,overflow:"hidden",backgroundColor:"#090D1A",alignItems:"center",justifyContent:"center",position:"relative"},canvasContainer:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",position:"relative"},image:{width:"100%",height:"100%"},videoImageOverlay:{...ee.absoluteFillObject,backgroundColor:"rgba(10, 13, 20, 0.28)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:o.slate900,alignItems:"center",justifyContent:"center",padding:24},videoFallbackGlow:{position:"absolute",width:150,height:150,borderRadius:75,backgroundColor:"rgba(56, 189, 248, 0.08)"},videoFallbackTitle:{fontFamily:F.interSemiBold,fontSize:15,color:o.white,marginTop:12},videoFallbackSubtitle:{fontFamily:F.interRegular,fontSize:12,color:"rgba(255, 255, 255, 0.6)",marginTop:4},centerPlayContainer:{position:"absolute",alignItems:"center",justifyContent:"center",gap:8},centerPlayGlow:{position:"absolute",width:80,height:80,borderRadius:40,backgroundColor:"rgba(56, 189, 248, 0.22)"},centerPlayCircle:{width:62,height:62,borderRadius:31,backgroundColor:o.sky500,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:o.sky500,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:8},centerPlayPill:{backgroundColor:"rgba(15, 23, 42, 0.90)",paddingHorizontal:12,paddingVertical:4,borderRadius:12,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)"},centerPlayText:{fontFamily:F.interBold,fontSize:11.5,color:o.white,letterSpacing:.3},topLeftBadgeOverlay:{position:"absolute",top:12,left:12},bottomRightBadgeOverlay:{position:"absolute",bottom:12,right:12},metaPill:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:"rgba(15, 23, 42, 0.90)",paddingHorizontal:10,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)"},metaPillText:{fontFamily:F.interSemiBold,fontSize:11,color:o.white,letterSpacing:.2},floatingZoomBar:{position:"absolute",right:12,top:"35%",backgroundColor:"rgba(15, 23, 42, 0.92)",borderRadius:20,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.18)",paddingVertical:6,paddingHorizontal:4,alignItems:"center",gap:6,shadowColor:o.black,shadowOffset:{width:0,height:4},shadowOpacity:.45,shadowRadius:8,elevation:10},zoomBtn:{width:28,height:28,borderRadius:14,backgroundColor:"rgba(255, 255, 255, 0.12)",alignItems:"center",justifyContent:"center"},zoomLevelBadge:{paddingHorizontal:4,paddingVertical:2},zoomLevelText:{fontFamily:F.interBold,fontSize:9.5,color:o.sky400,letterSpacing:.2},subToolBar:{width:"100%",backgroundColor:"rgba(15, 23, 42, 0.96)",borderRadius:12,paddingVertical:6,paddingHorizontal:8,marginTop:6,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.12)"},subToolScroll:{flexDirection:"row",alignItems:"center",gap:8},ratioChip:{paddingHorizontal:10,paddingVertical:5,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.08)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.14)"},ratioChipActive:{backgroundColor:o.indigo600,borderColor:o.indigo400},ratioChipText:{fontFamily:F.interSemiBold,fontSize:10.5,color:"rgba(255, 255, 255, 0.8)"},ratioChipTextActive:{color:o.white,fontFamily:F.interBold},applyActionBtn:{backgroundColor:o.emerald600,paddingHorizontal:12,paddingVertical:5,borderRadius:8},applyActionText:{fontFamily:F.interBold,fontSize:11,color:o.white},cancelActionBtn:{backgroundColor:"rgba(255, 255, 255, 0.12)",paddingHorizontal:10,paddingVertical:5,borderRadius:8},cancelActionText:{fontFamily:F.interSemiBold,fontSize:11,color:"rgba(255, 255, 255, 0.8)"},colorDot:{width:22,height:22,borderRadius:11,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.3)"},colorDotActive:{borderColor:o.white,transform:[{scale:1.25}]},subDivider:{width:1,height:18,backgroundColor:"rgba(255, 255, 255, 0.15)",marginHorizontal:4},strokeWidthBtn:{width:24,height:24,borderRadius:12,backgroundColor:"rgba(255, 255, 255, 0.08)",alignItems:"center",justifyContent:"center"},strokeWidthBtnActive:{backgroundColor:"rgba(255, 255, 255, 0.25)"},strokeDot:{borderRadius:99},actionPillBtn:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:8,paddingVertical:5,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.10)"},actionPillText:{fontFamily:F.interSemiBold,fontSize:10,color:o.white},shapeOptionBtn:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:9,paddingVertical:5,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.08)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.12)"},shapeOptionText:{fontFamily:F.interSemiBold,fontSize:10.5,color:o.white},shapeItem:{position:"absolute",borderWidth:2.5,borderStyle:"solid"},shapeDeleteBadge:{position:"absolute",top:-8,right:-8,width:16,height:16,borderRadius:8,backgroundColor:o.rose500,alignItems:"center",justifyContent:"center"},blurItem:{position:"absolute",backgroundColor:"rgba(15, 23, 42, 0.95)",borderWidth:1.5,borderColor:"rgba(56, 189, 248, 0.7)",borderRadius:6,alignItems:"center",justifyContent:"center"},blurItemText:{fontFamily:F.interBold,fontSize:9,color:o.sky300,letterSpacing:.6},textAnnotationPill:{position:"absolute",flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.35)",shadowColor:o.black,shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},textAnnotationText:{fontFamily:F.interBold,fontSize:11},textDeleteBtn:{width:14,height:14,borderRadius:7,backgroundColor:"rgba(0, 0, 0, 0.45)",alignItems:"center",justifyContent:"center"},cropSubToolBar:{width:"100%",backgroundColor:"rgba(15, 23, 42, 0.96)",borderRadius:12,paddingVertical:8,paddingHorizontal:10,marginTop:6,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.12)",gap:8},cropActionHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",width:"100%",paddingBottom:4,borderBottomWidth:ee.hairlineWidth,borderBottomColor:"rgba(255, 255, 255, 0.12)"},cropHeaderTitle:{fontFamily:F.interSemiBold,fontSize:10.5,color:"rgba(255, 255, 255, 0.65)"},cropActionButtons:{flexDirection:"row",alignItems:"center",gap:8},cropOverlayMask:{...ee.absoluteFillObject,zIndex:100,elevation:100},cropDimMask:{position:"absolute",backgroundColor:"rgba(0, 0, 0, 0.58)"},cropBoxFrame:{position:"absolute",borderWidth:2,borderStyle:"dashed",borderColor:o.white,backgroundColor:"rgba(56, 189, 248, 0.08)",shadowColor:o.black,shadowOffset:{width:0,height:0},shadowOpacity:.8,shadowRadius:4},cropGridH:{position:"absolute",left:0,right:0,height:1,borderTopWidth:1,borderStyle:"dashed",borderColor:"rgba(255, 255, 255, 0.45)"},cropGridV:{position:"absolute",top:0,bottom:0,width:1,borderLeftWidth:1,borderStyle:"dashed",borderColor:"rgba(255, 255, 255, 0.45)"},cropHandleTouchArea:{position:"absolute",width:38,height:38,alignItems:"center",justifyContent:"center",zIndex:10},handleAreaTL:{top:-19,left:-19},handleAreaTR:{top:-19,right:-19},handleAreaBL:{bottom:-19,left:-19},handleAreaBR:{bottom:-19,right:-19},cropCornerBracket:{position:"absolute",width:14,height:14,borderColor:o.white,backgroundColor:o.sky500,borderRadius:2,borderWidth:2,shadowColor:o.black,shadowOffset:{width:0,height:2},shadowOpacity:.6,shadowRadius:3,elevation:4},bracketTL:{top:-7,left:-7},bracketTR:{top:-7,right:-7},bracketBL:{bottom:-7,left:-7},bracketBR:{bottom:-7,right:-7},cropEdgeBarTop:{position:"absolute",top:-3,left:"35%",right:"35%",height:6,backgroundColor:o.white,borderRadius:3},cropEdgeBarBottom:{position:"absolute",bottom:-3,left:"35%",right:"35%",height:6,backgroundColor:o.white,borderRadius:3},cropEdgeBarLeft:{position:"absolute",left:-3,top:"35%",bottom:"35%",width:6,backgroundColor:o.white,borderRadius:3},cropEdgeBarRight:{position:"absolute",right:-3,top:"35%",bottom:"35%",width:6,backgroundColor:o.white,borderRadius:3},cropCenterPill:{position:"absolute",top:6,alignSelf:"center",backgroundColor:"rgba(14, 165, 233, 0.92)",paddingHorizontal:8,paddingVertical:2.5,borderRadius:6,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.25)"},cropCenterPillText:{fontFamily:F.interBold,fontSize:9,color:o.white,letterSpacing:.4},bottomTesterDock:{flexDirection:"row",alignItems:"center",justifyContent:"space-around",width:"100%",paddingVertical:10,paddingHorizontal:6,marginTop:6,backgroundColor:"rgba(15, 23, 42, 0.94)",borderRadius:14,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.14)",gap:4},dockToolBtn:{flex:1,alignItems:"center",justifyContent:"center",paddingVertical:6,paddingHorizontal:2,borderRadius:10,backgroundColor:"rgba(255, 255, 255, 0.06)",gap:3},dockToolBtnActive:{backgroundColor:o.indigo600,borderColor:o.indigo400,borderWidth:1},dockPrimaryBtn:{backgroundColor:o.indigo600},dockToolLabel:{fontFamily:F.interSemiBold,fontSize:9.5,color:"rgba(255, 255, 255, 0.85)",letterSpacing:.1},modalBackdrop:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.70)",alignItems:"center",justifyContent:"center",padding:20},textModalCard:{width:"100%",maxWidth:360,backgroundColor:"#0F172A",borderRadius:16,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.18)",padding:16,gap:12},textModalTitle:{fontFamily:F.interBold,fontSize:14,color:o.white},textModalInput:{minHeight:80,backgroundColor:"rgba(255, 255, 255, 0.08)",borderRadius:10,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)",padding:12,fontFamily:F.interRegular,fontSize:13,color:o.white,textAlignVertical:"top"},textModalActions:{flexDirection:"row",alignItems:"center",justifyContent:"flex-end",gap:10},modalCancelBtn:{paddingHorizontal:14,paddingVertical:8,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.1)"},modalCancelText:{fontFamily:F.interSemiBold,fontSize:12,color:"rgba(255, 255, 255, 0.7)"},modalConfirmBtn:{paddingHorizontal:16,paddingVertical:8,borderRadius:8,backgroundColor:o.indigo600},modalConfirmText:{fontFamily:F.interBold,fontSize:12,color:o.white}});