react-native-inapp-inspector 2.5.0 → 2.5.2

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

@@ -1,372 +1,812 @@
-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}>
+import Ao,{useCallback as Je,useContext as pr,useEffect as hi,useMemo as oo,useRef as V,useState as O}from"react";import{Animated as Gt,Dimensions as ci,Image as Co,Modal as Ci,PanResponder as Lt,Platform as io,Pressable as Oo,ScrollView as Ti,Share as Mi,StatusBar as Fi,StyleSheet as L,Text as F,TextInput as Cr,TouchableOpacity as P,useWindowDimensions as Tr,View as C}from"react-native";import Mr from"react-native-linear-gradient";import Fr,{Circle as Si,Ellipse as To,G as Ct,Line as $t,Path as Mo,Polygon as Ri,Rect as Nt,Text as Pi}from"react-native-svg";import{AppColors as M}from"../../styles/AppColors";import{AppFonts as E}from"../../styles/AppFonts";import Bt from"../TouchableScale";import{InspectorContext as kr}from"./InspectorContext";import{ConfirmationModal as Sr}from"./ConfirmationModal";import{ArrowRightIcon as Rr,CameraRollIcon as Fo,CheckIcon as Pr,CloseWhite as Bi,CropIcon as Ii,EyeCompareIcon as Br,EyeIcon as Ai,FilmIcon as Ir,GifIcon as Do,GridlinesIcon as Wo,HighlighterIcon as Ar,MaximizeIcon as Or,MoreDotsIcon as Dr,PauseIcon as Oi,PenIcon as Vo,PixelateIcon as Wr,PlayIcon as Ho,RedactIcon as Vr,RedoIcon as Hr,ResetIcon as Di,RotateIcon as Er,SaveIcon as Gr,ScissorsIcon as Wi,ShareIcon as Lr,SunAdjustIcon as Vi,TrashIcon as $r,TypeIcon as Hi,UndoIcon as Ei,VolumeXIcon as So,WhiteBackNavigation as Nr,ZapIcon as Eo,ZoomInIcon as Ur,ZoomOutIcon as Xr}from"../NetworkIcons";import{ScreenCapture as Yr}from"../../capture";import{MediaEditor as Tt}from"../../editor";import{formatBytes as Gi}from"../../helpers";import{showToast as H}from"../../helpers/toast";import{useTranslation as _r}from"../../i18n";import{triggerNativeHaptic as R}from"../../native/NativeInspector";const Li=["#EF4444","#F59E0B","#38BDF8","#10B981","#A855F7","#FFFFFF","#0F172A"],Zr=({textItem:r,canvasWidth:Ae,canvasHeight:Me,scale:It,onUpdate:Mt,onDelete:z,onEdit:Oe})=>{const K=V(new Gt.ValueXY({x:0,y:0})).current,Ye=V(r);Ye.current=r;const _e=V(Ae);_e.current=Ae;const De=V(Me);De.current=Me;const Le=V(It);Le.current=It;const pe=V(Mt);pe.current=Mt;const _=V(!1),N=V(Lt.create({onStartShouldSetPanResponder:()=>!0,onStartShouldSetPanResponderCapture:()=>!1,onMoveShouldSetPanResponder:(ce,$)=>Math.abs($.dx)>3||Math.abs($.dy)>3,onMoveShouldSetPanResponderCapture:()=>!1,onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderGrant:()=>{_.current=!1,K.setValue({x:0,y:0})},onPanResponderMove:(ce,$)=>{(Math.abs($.dx)>3||Math.abs($.dy)>3)&&(_.current=!0),K.setValue({x:$.dx,y:$.dy})},onPanResponderRelease:(ce,$)=>{if(!_.current){Oe(Ye.current),K.setValue({x:0,y:0});return}const ae=(_e.current||300)*(Le.current||1),se=(De.current||500)*(Le.current||1),le=$.dx/ae,ge=$.dy/se,oe=Ye.current,et=Math.max(0,Math.min(.85,oe.x+le)),Ze=Math.max(0,Math.min(.92,oe.y+ge));K.setValue({x:0,y:0}),pe.current(oe.id,{x:et,y:Ze})},onPanResponderTerminate:()=>{K.setValue({x:0,y:0}),_.current=!1}})).current;return<Gt.View{...N.panHandlers}style={[t.textAnnotationPill,{left:`${r.x*100}%`,top:`${r.y*100}%`,backgroundColor:r.bgColor,transform:K.getTranslateTransform()}]}>
+      <F style={[t.textAnnotationText,{color:r.color}]}pointerEvents="none">
+        {r.text}
+      </F>
+      <P style={t.textDeleteBtn}onPress={()=>z(r.id)}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+        <Bi size={8}/>
+      </P>
+    </Gt.View>},Qr=({cropBox:r,imageWidth:Ae,imageHeight:Me,imageOffsetX:It,imageOffsetY:Mt,scale:z,onUpdateCropBox:Oe,onApplyCrop:K,onCancelCrop:Ye})=>{const _e=Math.max(0,Math.min(.9,isFinite(r?.x)?r.x:.08)),De=Math.max(0,Math.min(.9,isFinite(r?.y)?r.y:.12)),Le=Math.max(.1,Math.min(1-_e,isFinite(r?.width)?r.width:.84)),pe=Math.max(.1,Math.min(1-De,isFinite(r?.height)?r.height:.76)),_=It+_e*Ae,N=Mt+De*Me,ce=Le*Ae,$=pe*Me,ae=V({x:_e,y:De,width:Le,height:pe});ae.current={x:_e,y:De,width:Le,height:pe};const se=V(Ae);se.current=Ae;const le=V(Me);le.current=Me;const ge=V(z);ge.current=z;const oe=V(Oe);oe.current=Oe;const et=V({origBox:{x:.08,y:.12,width:.84,height:.76}}),Ze=V(Lt.create({onStartShouldSetPanResponder:()=>!0,onMoveShouldSetPanResponder:(de,je)=>Math.abs(je.dx)>3||Math.abs(je.dy)>3,onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderGrant:()=>{et.current.origBox={...ae.current}},onPanResponderMove:(de,je)=>{const Ne=se.current*(ge.current||1),qe=le.current*(ge.current||1);if(!Ne||!qe)return;const{x:B,y:U,width:ie,height:ye}=et.current.origBox,X=Math.max(0,Math.min(1-ie,B+je.dx/Ne)),ve=Math.max(0,Math.min(1-ye,U+je.dy/qe));oe.current({x:X,y:ve,width:ie,height:ye})},onPanResponderRelease:()=>{}})).current,$e=de=>Lt.create({onStartShouldSetPanResponder:()=>!0,onMoveShouldSetPanResponder:(je,Ne)=>Math.abs(Ne.dx)>2||Math.abs(Ne.dy)>2,onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderGrant:()=>{et.current.origBox={...ae.current}},onPanResponderMove:(je,Ne)=>{const qe=se.current*(ge.current||1),B=le.current*(ge.current||1);if(!qe||!B)return;const U=Ne.dx/qe,ie=Ne.dy/B,{x:ye,y:X,width:ve,height:be}=et.current.origBox,tt=.1;let We=ye,vt=X,Pe=ve,At=be;(de==="tl"||de==="left"||de==="bl")&&(We=Math.max(0,Math.min(ye+ve-tt,ye+U)),Pe=ve-(We-ye)),(de==="tr"||de==="right"||de==="br")&&(Pe=Math.max(tt,Math.min(1-ye,ve+U))),(de==="tl"||de==="top"||de==="tr")&&(vt=Math.max(0,Math.min(X+be-tt,X+ie)),At=be-(vt-X)),(de==="bl"||de==="bottom"||de==="br")&&(At=Math.max(tt,Math.min(1-X,be+ie))),oe.current({x:We,y:vt,width:Pe,height:At})},onPanResponderRelease:()=>{}}),Re=V({tl:$e("tl"),tr:$e("tr"),bl:$e("bl"),br:$e("br"),top:$e("top"),bottom:$e("bottom"),left:$e("left"),right:$e("right")}).current;return Ae<20||Me<20?null:<C style={L.absoluteFill}pointerEvents="box-none">
+      
+      <C style={L.absoluteFill}pointerEvents="none">
+        
+        <C style={{position:"absolute",top:0,left:0,right:0,height:N,backgroundColor:"rgba(0,0,0,0.6)"}}/>
+        
+        <C style={{position:"absolute",top:N+$,left:0,right:0,bottom:0,backgroundColor:"rgba(0,0,0,0.6)"}}/>
         
-        <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>
-              <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>
-            </A>
+        <C style={{position:"absolute",top:N,left:0,width:_,height:$,backgroundColor:"rgba(0,0,0,0.6)"}}/>
+        
+        <C style={{position:"absolute",top:N,left:_+ce,right:0,height:$,backgroundColor:"rgba(0,0,0,0.6)"}}/>
+      </C>
 
-            
-            <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>}
-
-              <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>
-
-              <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>
-
-              <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={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={{position:"absolute",left:_,top:N,width:ce,height:$,borderWidth:2,borderColor:"#00E5FF",backgroundColor:"transparent",zIndex:200}}pointerEvents="box-none">
 
         
-        <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)}/>
+        <C pointerEvents="none"style={{position:"absolute",left:0,right:0,top:"33.33%",height:1,backgroundColor:"rgba(0,229,255,0.35)"}}/>
+        <C pointerEvents="none"style={{position:"absolute",left:0,right:0,top:"66.66%",height:1,backgroundColor:"rgba(0,229,255,0.35)"}}/>
+        <C pointerEvents="none"style={{position:"absolute",top:0,bottom:0,left:"33.33%",width:1,backgroundColor:"rgba(0,229,255,0.35)"}}/>
+        <C pointerEvents="none"style={{position:"absolute",top:0,bottom:0,left:"66.66%",width:1,backgroundColor:"rgba(0,229,255,0.35)"}}/>
 
-                  
-                  <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>
+        
+        <C style={L.absoluteFill}{...Ze.panHandlers}/>
 
-                  
-                  {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>)}
+        
+        <C pointerEvents="none"style={{position:"absolute",top:-2,left:-2,width:22,height:22,borderTopWidth:4,borderLeftWidth:4,borderColor:"#00E5FF"}}/>
+        <C pointerEvents="none"style={{position:"absolute",top:-2,right:-2,width:22,height:22,borderTopWidth:4,borderRightWidth:4,borderColor:"#00E5FF"}}/>
+        <C pointerEvents="none"style={{position:"absolute",bottom:-2,left:-2,width:22,height:22,borderBottomWidth:4,borderLeftWidth:4,borderColor:"#00E5FF"}}/>
+        <C pointerEvents="none"style={{position:"absolute",bottom:-2,right:-2,width:22,height:22,borderBottomWidth:4,borderRightWidth:4,borderColor:"#00E5FF"}}/>
 
-                  
-                  {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>)}
+        
+        <C pointerEvents="none"style={{position:"absolute",top:-3,left:"50%",marginLeft:-16,width:32,height:5,backgroundColor:"#00E5FF",borderRadius:3}}/>
+        <C pointerEvents="none"style={{position:"absolute",bottom:-3,left:"50%",marginLeft:-16,width:32,height:5,backgroundColor:"#00E5FF",borderRadius:3}}/>
+        <C pointerEvents="none"style={{position:"absolute",left:-3,top:"50%",marginTop:-16,width:5,height:32,backgroundColor:"#00E5FF",borderRadius:3}}/>
+        <C pointerEvents="none"style={{position:"absolute",right:-3,top:"50%",marginTop:-16,width:5,height:32,backgroundColor:"#00E5FF",borderRadius:3}}/>
 
+        
+        <C style={{position:"absolute",top:-22,left:-22,width:44,height:44,zIndex:30}}{...Re.tl.panHandlers}/>
+        <C style={{position:"absolute",top:-22,right:-22,width:44,height:44,zIndex:30}}{...Re.tr.panHandlers}/>
+        <C style={{position:"absolute",bottom:-22,left:-22,width:44,height:44,zIndex:30}}{...Re.bl.panHandlers}/>
+        <C style={{position:"absolute",bottom:-22,right:-22,width:44,height:44,zIndex:30}}{...Re.br.panHandlers}/>
+
+        
+        <C style={{position:"absolute",top:-20,left:"25%",right:"25%",height:40,zIndex:25}}{...Re.top.panHandlers}/>
+        <C style={{position:"absolute",bottom:-20,left:"25%",right:"25%",height:40,zIndex:25}}{...Re.bottom.panHandlers}/>
+        <C style={{position:"absolute",left:-20,top:"25%",bottom:"25%",width:40,zIndex:25}}{...Re.left.panHandlers}/>
+        <C style={{position:"absolute",right:-20,top:"25%",bottom:"25%",width:40,zIndex:25}}{...Re.right.panHandlers}/>
+      </C>
+
+      
+      {Ye&&<P activeOpacity={.8}onPress={()=>{R("light"),Ye()}}style={t.cropCancelBtn}accessibilityLabel="Cancel Crop">
+          <Bi size={14}color={M.white}/>
+        </P>}
+
+      
+      {K&&<P activeOpacity={.8}onPress={()=>{R("medium"),K()}}style={t.cropConfirmBtn}accessibilityLabel="Apply Crop Selection">
+          <Pr size={18}color={M.white}/>
+        </P>}
+    </C>};export const MediaPreviewModal=({item:r,visible:Ae,onClose:Me,onDelete:It,onConvertToGif:Mt})=>{const{t:z}=_r(),Oe=pr(kr),K=Oe?.modalHeightPercent??90,{width:Ye}=Tr(),_e=oo(()=>io.OS==="ios"?K>=98?Ye>=390?50:44:0:io.OS==="android"&&K>=98?Fi.currentHeight||24:0,[K,Ye]),[De,Le]=O(!1),[pe,_]=O(!1),[N,ce]=O(null),[$,ae]=O(r?.width),[se,le]=O(r?.height),[ge,oe]=O(r?.sizeBytes),[et,Ze]=O(r?.durationMs),[$e,Re]=O(!1),[de,je]=O(!1),[Ne,qe]=O(!1),[B,U]=O("none"),[ie,ye]=O(1),[X,ve]=O(0),[be,tt]=O([]),[We,vt]=O([]),[Pe,At]=O(!1),[$i,ot]=O(!1),[I,Ue]=O("brush"),[Ro,ji]=O(24),[Fe,Ni]=O("brightness"),[Z,Ut]=O("none"),[xe,Ot]=O(!1),[ue,Dt]=O(!1),[D,Ft]=O({brightness:0,contrast:0,saturation:0,warmth:0,exposure:0,vignette:0}),[fe,Xt]=O(!1),[we,Yt]=O(!1),[re,it]=O(0),[he,rt]=O(r?.durationMs||1e4),[Qe,ro]=O("end"),[me,_t]=O(!1),[Xe,no]=O(100),[Ve,ao]=O(1),[Zt,Go]=O(12),[Po,Ui]=O(480),[Lo,$o]=O([]),[Kr,jo]=O(!1),[Jr,Xi]=O(0),[zo,qt]=O("free"),[Qt,kt]=O({x:.08,y:.12,width:.84,height:.76}),[Ce,No]=O("#EF4444"),[ze,Yi]=O(4),[J,He]=O([]),[W,Kt]=O(null),[Te,Ee]=O([]),[_i,Jt]=O(!1),[Uo,Xo]=O(null),[so,lo]=O(""),[ho,Zi]=O({x:.3,y:.4}),te=Je(()=>{vt([]),tt(e=>[...e,{uri:N||r?.uri||null,inkPaths:[...J],texts:[...Te],adjustments:{...D},filterPreset:Z,showWatermark:xe,showGridlines:ue,rotationAngle:X,flipH:fe,flipV:we,width:$,height:se,sizeBytes:ge}])},[N,r?.uri,J,Te,D,Z,xe,ue,X,fe,we,$,se,ge]),Yo=V(te);Yo.current=te;const en=V(null),[nt,_o]=O({width:ci.get("window").width-16,height:ci.get("window").height*.72,pageX:0,pageY:0}),Ge=V(B);Ge.current=B;const co=V(I);co.current=I;const Wt=V(Ce);Wt.current=Ce;const Vt=V(ze);Vt.current=ze;const qi=V(Lt.create({onStartShouldSetPanResponder:()=>Ge.current==="draw",onMoveShouldSetPanResponder:()=>Ge.current==="draw",onPanResponderGrant:e=>{Yo.current();const{locationX:o,locationY:i}=e.nativeEvent;Kt([{x:o,y:i}])},onPanResponderMove:e=>{const{locationX:o,locationY:i}=e.nativeEvent,T=co.current;Kt(T==="brush"||T==="highlighter"?k=>k?[...k,{x:o,y:i}]:[{x:o,y:i}]:k=>[k&&k.length>0?k[0]:{x:o,y:i},{x:o,y:i}])},onPanResponderRelease:()=>{Kt(e=>{if(e&&e.length>0){const o=co.current,i=e[0],T=e[e.length-1]||i;if((o==="brush"||o==="highlighter")&&e.length>1)He(k=>[...k,{id:`stroke_${Date.now()}_${Math.random()}`,type:o,points:e,color:Wt.current,strokeWidth:Vt.current}]);else if(o==="arrow"&&e.length>1)Math.hypot(T.x-i.x,T.y-i.y)>6&&He(S=>[...S,{id:`stroke_${Date.now()}_${Math.random()}`,type:"arrow",points:[i,T],color:Wt.current,strokeWidth:Vt.current}]);else if(o==="circle"||o==="spotlight")Math.hypot(T.x-i.x,T.y-i.y)>6&&He(S=>[...S,{id:`stroke_${Date.now()}_${Math.random()}`,type:o,points:[i,T],color:Wt.current,strokeWidth:Vt.current}]);else if(o==="step"){const k=J.filter(S=>S.type==="step").length;He(S=>[...S,{id:`stroke_${Date.now()}_${Math.random()}`,type:"step",points:[i],color:Wt.current,strokeWidth:Vt.current,stepNumber:k+1}])}else if(o==="rect"||o==="redact"||o==="pixelate"){const k=Math.min(i.x,T.x),S=Math.min(i.y,T.y),A=Math.abs(T.x-i.x),j=Math.abs(T.y-i.y);A>4&&j>4&&He(q=>[...q,{id:`stroke_${Date.now()}_${Math.random()}`,type:o,points:[i,T],rect:{x:k,y:S,width:A,height:j},color:Wt.current,strokeWidth:Vt.current}])}}return null})}})).current,Ht=(e,o,i)=>{const T=o&&o>0?o:1e3,k=i&&i>0?i:1e3,S=T/k;if(e==="free")return{x:parseFloat(((1-.84)/2).toFixed(4)),y:parseFloat(((1-.76)/2).toFixed(4)),width:.84,height:.76};let A=1;e==="1:1"?A=1:e==="4:3"?A=4/3:e==="16:9"?A=16/9:e==="9:16"?A=9/16:e==="3:2"&&(A=3/2);const j=A/S;let q=.88,Q=.88;if(j>=1){if(q=.88,Q=.88/j,Q>.88){const Et=.88/Q;q*=Et,Q=.88}}else if(Q=.88,q=.88*j,q>.88){const Et=.88/q;Q*=Et,q=.88}q=Math.max(.1,Math.min(.96,parseFloat(q.toFixed(4)))),Q=Math.max(.1,Math.min(.96,parseFloat(Q.toFixed(4))));const Ke=parseFloat(((1-q)/2).toFixed(4)),Pt=parseFloat(((1-Q)/2).toFixed(4));return{x:Ke,y:Pt,width:q,height:Q}};Ao.useEffect(()=>{r?.uri&&(ce(r.uri),ae(r.width),le(r.height),oe(r.sizeBytes),Ze(r.durationMs),Re(!1),ye(1),U("none"),He([]),Kt(null),Ee([]),kt(Ht("free",r.width,r.height)),it(0),rt(r.durationMs||1e4),ro("end"),_t(!1),no(100),ao(1),Xi(0))},[r?.uri,r?.width,r?.height,r?.sizeBytes,r?.durationMs]),Ao.useEffect(()=>{if(r?.type==="video"&&r?.uri){let e=!0;return jo(!0),Tt.generateFilmstrip({uri:r.uri,count:10,targetWidth:120,targetHeight:120}).then(o=>{e&&o?.thumbnails&&$o(o.thumbnails)}).catch(()=>{}).finally(()=>{e&&jo(!1)}),()=>{e=!1}}else $o([])},[r?.type,r?.uri]),Ao.useEffect(()=>{if(N||r?.uri){const e=N||r?.uri;e&&r?.type==="image"&&(!$||!se)&&Co.getSize(e,(o,i)=>{o>0&&i>0&&(ae(o),le(i))},()=>{})}},[N,r?.uri,r?.type,$,se]);const Be=oo(()=>{const e=nt.width,o=nt.height;if(!e||!o)return{width:e,height:o};const i=$??r?.width,T=se??r?.height;if(!i||!T||i<=0||T<=0)return{width:e,height:o};const k=i/T,S=e/o;let A=e,j=o;return k>S?(A=e,j=e/k):(j=o,A=o*k),{width:Math.max(20,Math.floor(A)),height:Math.max(20,Math.floor(j))}},[nt.width,nt.height,$,se,r?.width,r?.height]),Y=N||r?.uri,ke=$??r?.width,Se=se??r?.height,Zo=ge??r?.sizeBytes,ne=et??r?.durationMs,G=r?.type==="video",tn=r?.type==="gif",ee=r?.type==="image",Ie=V(new Gt.ValueXY({x:0,y:0})).current,at=V({x:0,y:0}),eo=V({x:0,y:0});hi(()=>{const e=Ie.x.addListener(i=>at.current.x=i.value),o=Ie.y.addListener(i=>at.current.y=i.value);return()=>{Ie.x.removeListener(e),Ie.y.removeListener(o)}},[Ie]);const st=V(ie);st.current=ie;const St=V(Be);St.current=Be;const Rt=V(nt);Rt.current=nt;const qo=Je(()=>{const e=st.current;if(e<=1)return{maxX:0,maxY:0};const o=St.current.width,i=St.current.height,T=Rt.current.width,k=Rt.current.height,S=Math.max(0,(o*e-T)/2/e),A=Math.max(0,(i*e-k)/2/e);return{maxX:S,maxY:A}},[]),Qo=Je((e,o)=>{const{maxX:i,maxY:T}=qo();return{x:Math.max(-i,Math.min(i,e)),y:Math.max(-T,Math.min(T,o))}},[qo]),Qi=V(Lt.create({onStartShouldSetPanResponder:()=>st.current>1,onMoveShouldSetPanResponder:(e,o)=>st.current>1&&(Math.abs(o.dx)>4||Math.abs(o.dy)>4),onMoveShouldSetPanResponderCapture:(e,o)=>st.current>1&&(Math.abs(o.dx)>6||Math.abs(o.dy)>6),onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderGrant:()=>{eo.current={...at.current}},onPanResponderMove:(e,o)=>{const i=st.current,T=eo.current.x+o.dx/i,k=eo.current.y+o.dy/i,{maxX:S,maxY:A}=(()=>{const Q=st.current;if(Q<=1)return{maxX:0,maxY:0};const Ke=St.current.width,Pt=St.current.height,Et=Rt.current.width,di=Rt.current.height;return{maxX:Math.max(0,(Ke*Q-Et)/2/Q),maxY:Math.max(0,(Pt*Q-di)/2/Q)}})(),j=Math.max(-S,Math.min(S,T)),q=Math.max(-A,Math.min(A,k));Ie.setValue({x:j,y:q})},onPanResponderRelease:()=>{const{maxX:e,maxY:o}=(()=>{const k=st.current;if(k<=1)return{maxX:0,maxY:0};const S=St.current.width,A=St.current.height,j=Rt.current.width,q=Rt.current.height;return{maxX:Math.max(0,(S*k-j)/2/k),maxY:Math.max(0,(A*k-q)/2/k)}})(),i=at.current,T={x:Math.max(-e,Math.min(e,i.x)),y:Math.max(-o,Math.min(o,i.y))};(T.x!==i.x||T.y!==i.y)&&Gt.spring(Ie,{toValue:T,friction:7,tension:60,useNativeDriver:!1}).start()},onPanResponderTerminate:()=>{}})).current;hi(()=>{if(ie<=1)Ie.setValue({x:0,y:0}),eo.current={x:0,y:0};else{const e=Qo(at.current.x,at.current.y);(e.x!==at.current.x||e.y!==at.current.y)&&Gt.spring(Ie,{toValue:e,friction:7,tension:60,useNativeDriver:!1}).start()}},[ie,Ie,Qo]);const Ki=()=>{R("light"),ye(e=>Math.min(4,parseFloat((e+.25).toFixed(2))))},Ji=()=>{R("light"),ye(e=>Math.max(1,parseFloat((e-.25).toFixed(2))))},Ko=()=>{R("medium"),ye(1),Ie.setValue({x:0,y:0}),eo.current={x:0,y:0}},Jo=V(240),ei=Je(e=>{const o=Math.max(50,Jo.current),i=Math.max(0,Math.min(1,e/o));if(Ge.current==="draw"){const T=co.current;if(T==="brush"||T==="highlighter"||T==="arrow"||T==="rect"||T==="circle"||T==="spotlight"||T==="step"){const k=Math.round(2+i*22);Yi(k)}else if(T==="pixelate"){const k=Math.round(4+i*36);ji(k)}}else if(Ge.current==="adjust")if(Fe==="vignette"){const T=Math.round(i*100);Ft(k=>({...k,vignette:T}))}else{const T=Math.round(i*100-50);Ft(k=>({...k,[Fe]:T}))}else if(Ge.current==="crop"){const T=Math.round(i*360);ve(T)}else if(Ge.current==="trim"){const k=Math.round(i*(ne||1e4));Qe==="start"?it(Math.min(he-500,k)):rt(Math.max(re+500,k))}else if(Ge.current==="audio"){const T=Math.round(i*100);no(T),_t(T===0)}else if(Ge.current==="speed"){const T=parseFloat((.5+i*1.5).toFixed(2));ao(T)}else if(Ge.current==="gif"){const T=Math.round(6+i*18);Go(T)}else if(Ge.current==="none"){const T=parseFloat((1+i*3).toFixed(2));ye(T)}},[Fe,ne,Qe,re,he]),er=V(Lt.create({onStartShouldSetPanResponder:()=>!0,onStartShouldSetPanResponderCapture:()=>!0,onMoveShouldSetPanResponder:()=>!0,onMoveShouldSetPanResponderCapture:()=>!0,onPanResponderGrant:e=>{R("light"),ei(e.nativeEvent.locationX)},onPanResponderMove:e=>{ei(e.nativeEvent.locationX)},onPanResponderRelease:()=>{R("light")}})).current,ti=oo(()=>{if(B==="draw"){if(I==="brush"||I==="highlighter"||I==="arrow"||I==="rect"||I==="circle"||I==="spotlight"||I==="step")return Math.min(100,Math.max(0,(ze-2)/22*100));if(I==="pixelate")return Math.min(100,Math.max(0,(Ro-4)/36*100));if(I==="redact")return 100}return B==="adjust"?Fe==="vignette"?Math.min(100,Math.max(0,D.vignette)):Math.min(100,Math.max(0,D[Fe]+50)):B==="crop"?Math.min(100,Math.max(0,X/360*100)):B==="trim"?Math.min(100,Math.max(0,(Qe==="start"?re:he)/(ne||1e4)*100)):B==="audio"?me?0:Xe:B==="speed"?Math.min(100,Math.max(0,(Ve-.5)/1.5*100)):B==="gif"?Math.min(100,Math.max(0,(Zt-6)/18*100)):B==="none"?Math.min(100,Math.max(0,(ie-1)/3*100)):50},[B,I,ze,Ro,Fe,D,X,ie,ne,Qe,re,he,me,Xe,Ve,Zt]),oi=Je(()=>{if(be.length===0)return;R("light");const e=be[be.length-1];vt(o=>[...o,{uri:N||r?.uri||null,inkPaths:[...J],texts:[...Te],adjustments:{...D},filterPreset:Z,showWatermark:xe,rotationAngle:X,flipH:fe,flipV:we,width:$,height:se,sizeBytes:ge}]),tt(o=>o.slice(0,o.length-1)),e&&(ce(e.uri),He(e.inkPaths),Ee(e.texts),e.adjustments&&Ft(e.adjustments),e.filterPreset&&Ut(e.filterPreset),e.showWatermark!==void 0&&Ot(e.showWatermark),e.showGridlines!==void 0&&Dt(e.showGridlines),e.rotationAngle!==void 0&&ve(e.rotationAngle),e.flipH!==void 0&&Xt(e.flipH),e.flipV!==void 0&&Yt(e.flipV),e.width&&ae(e.width),e.height&&le(e.height),e.sizeBytes&&oe(e.sizeBytes),H(z("mediaGallery.undone","Action Undone")))},[be,N,r?.uri,J,Te,D,Z,xe,ue,X,fe,we,$,se,ge,z]),tr=Je(()=>{if(We.length===0)return;R("light");const e=We[We.length-1];tt(o=>[...o,{uri:N||r?.uri||null,inkPaths:[...J],texts:[...Te],adjustments:{...D},filterPreset:Z,showWatermark:xe,showGridlines:ue,rotationAngle:X,flipH:fe,flipV:we,width:$,height:se,sizeBytes:ge}]),vt(o=>o.slice(0,o.length-1)),e&&(ce(e.uri),He(e.inkPaths),Ee(e.texts),e.adjustments&&Ft(e.adjustments),e.filterPreset&&Ut(e.filterPreset),e.showWatermark!==void 0&&Ot(e.showWatermark),e.showGridlines!==void 0&&Dt(e.showGridlines),e.rotationAngle!==void 0&&ve(e.rotationAngle),e.flipH!==void 0&&Xt(e.flipH),e.flipV!==void 0&&Yt(e.flipV),e.width&&ae(e.width),e.height&&le(e.height),e.sizeBytes&&oe(e.sizeBytes),H(z("mediaGallery.redone","Action Redone")))},[We,N,r?.uri,J,Te,D,Z,xe,ue,X,fe,we,$,se,ge,z]),or=Je(()=>{r&&(R("medium"),te(),ce(r.uri),He([]),Ee([]),Ft({brightness:0,contrast:0,saturation:0,warmth:0,exposure:0,vignette:0}),Ut("none"),Ot(!1),Dt(!1),ve(0),Xt(!1),Yt(!1),ae(r.width),le(r.height),oe(r.sizeBytes),Ze(r.durationMs),ye(1),U("none"),it(0),rt(r.durationMs||1e4),ro("end"),_t(!1),no(100),ao(1),H(z("mediaGallery.resetSuccess",r.type==="video"?"Reset to original video":"Reset to original image")))},[r,te,z]),ii=Je(async()=>{if(!(!r||!Y)){if(R("medium"),_(!0),G){try{const e=ne||r.durationMs||1e4,o=await Tt.trimVideo({uri:Y,startTimeMs:re,endTimeMs:he<e?he:void 0,muteAudio:me||Xe===0,quality:"high"});o?.uri?(ce(o.uri),o.width&&ae(o.width),o.height&&le(o.height),o.size&&oe(o.size),o.durationMs&&Ze(o.durationMs),H(z("mediaGallery.videoSaved","Video Saved Successfully")),Oe?.refreshMediaCount?.().catch(()=>{})):H(z("mediaGallery.videoSaved","Video Saved"))}catch{H(z("mediaGallery.saveFailed","Failed to save video"))}finally{_(!1)}return}try{const e=Math.max(1,ke||1e3),o=Math.max(1,Se||1e3),i=J.filter(S=>(S.type==="redact"||S.type==="pixelate")&&S.rect).map(S=>{const A=S.rect;return{x:A.x/e,y:A.y/o,width:A.width/e,height:A.height/o,style:S.type==="pixelate"?"blur":"blackout",isNormalized:!0}}),T=[...Te.map(S=>({x:S.x,y:S.y,width:.22,height:.06,color:S.bgColor||"#EF4444",label:S.text,isNormalized:!0})),...J.filter(S=>S.type==="rect"||S.type==="arrow"||S.type==="circle").map(S=>{const A=S.points[0]||{x:0,y:0},j=S.points[S.points.length-1]||A,q=Math.min(A.x,j.x),Q=Math.min(A.y,j.y),Ke=Math.max(10,Math.abs(j.x-A.x)),Pt=Math.max(10,Math.abs(j.y-A.y));return{x:q/e,y:Q/o,width:Ke/e,height:Pt/o,color:S.color||"#EF4444",isNormalized:!0}})],k=await Tt.editPhoto({uri:Y,rotation:X!==0?X:void 0,flipHorizontal:fe,flipVertical:we,adjustments:{brightness:D.brightness/50,contrast:1+D.contrast/50,saturation:1+D.saturation/50,temperature:D.warmth/50,vignette:D.vignette/100},filterPreset:Z!=="none"?Z:void 0,redactions:i.length>0?i:void 0,annotations:T.length>0?T:void 0,format:r.format==="png"?"png":"jpeg",quality:.92});k?.uri?(ce(k.uri),k.width&&ae(k.width),k.height&&le(k.height),k.size&&oe(k.size),He([]),Ee([]),Ft({brightness:0,contrast:0,saturation:0,warmth:0,exposure:0,vignette:0}),ve(0),Xt(!1),Yt(!1),H(z("mediaGallery.savedSuccess","Image Saved Successfully")),Oe?.refreshMediaCount?.().catch(()=>{})):H(z("mediaGallery.savedSuccess","Image Saved"))}catch{H(z("mediaGallery.saveFailed","Failed to save image"))}finally{_(!1)}}},[r,Y,G,ne,re,he,me,Xe,ke,Se,X,fe,we,D,Z,J,Te,Oe,z]),ri=Je(async()=>{if(!(!r||!Y||!G||pe)){R("medium"),_(!0);try{const e=await Tt.generateFilmstrip({uri:Y,count:1,targetWidth:ke||1080,targetHeight:Se||1920});e?.thumbnails&&e.thumbnails.length>0?(H(z("mediaGallery.snapshotSaved","Frame Snapshot Saved (PNG)")),Oe?.refreshMediaCount?.().catch(()=>{})):H(z("mediaGallery.snapshotFailed","Failed to snapshot frame"))}catch{H(z("mediaGallery.snapshotFailed","Failed to snapshot frame"))}finally{_(!1)}}},[r,Y,G,pe,ke,Se,Oe,z]),ir=oo(()=>{if(!G||!r)return!1;const e=r.durationMs||1e4,o=re>0||he<e,i=me||Xe<100,T=Ve!==1,k=N!=null&&N!==r.uri;return o||i||T||k},[G,r,re,he,me,Xe,Ve,N]),ni=oo(()=>{if(!r)return!1;const e=N!=null&&N!==r.uri,o=J.length>0,i=Te.length>0,T=be.length>0,k=D.brightness!==0||D.contrast!==0||D.saturation!==0||D.warmth!==0||D.exposure!==0||D.vignette!==0;return e||o||i||T||k||(X!==0||fe||we)||Z!=="none"||xe||ue},[N,r,J.length,Te.length,be.length,D,X,fe,we,Z,xe,ue]),rr=()=>{R("light"),oi()},nr=()=>{R("medium"),te(),He([])},on=e=>{R("light"),U("crop"),qt(e),kt(Ht(e,ke,Se))},ai=async()=>{if(!(!Y||!ee)){R("medium"),te(),_(!0);try{const e=await Tt.cropToDefect(Y,{x:Qt.x,y:Qt.y,width:Qt.width,height:Qt.height,isNormalized:!0});e?.uri?(ce(e.uri),e.width&&ae(e.width),e.height&&le(e.height),e.size&&oe(e.size),kt(Ht("free",e.width,e.height)),qt("free"),H(z("mediaGallery.croppedSuccess","Image Cropped")),U("none")):H(z("mediaGallery.cropFailed","Crop failed"))}catch{H(z("mediaGallery.cropFailed","Crop failed"))}finally{_(!1)}}},Bo=e=>{R("light"),e?(Xo(e),lo(e.text)):(Xo(null),lo("")),Jt(!0)},ar=e=>{R("light"),te(),Ee(o=>o.filter(i=>i.id!==e))},sr=()=>{if(!so.trim()){Jt(!1);return}if(te(),Uo)Ee(e=>e.map(o=>o.id===Uo.id?{...o,text:so.trim(),color:Ce}:o));else{const e={id:`text_${Date.now()}`,text:so.trim(),x:ho.x,y:ho.y,color:M.white,bgColor:Ce==="#FFFFFF"?"#0F172A":Ce};Ee(o=>[...o,e])}Jt(!1),lo(""),H(z("mediaGallery.textAdded","Text Added"))},rn=async e=>{if(!(!Y||!ee||pe)){R("medium"),te(),_(!0);try{const o=await Tt.editPhoto({uri:Y,quality:.85,crop:{x:0,y:0,width:1,height:1,isNormalized:!0}});if(o?.uri){ce(o.uri);const i=Math.round((ke||1080)*e),T=Math.round((Se||1920)*e);ae(i),le(T),o.size&&oe(Math.round(o.size*e*e)),H(z("mediaGallery.resizedSuccess",`Resized to ${Math.round(e*100)}% (${i}\xD7${T})`)),U("none")}}catch{H(z("mediaGallery.resizeFailed","Resize failed"))}finally{_(!1)}}},lr=async()=>{try{R("light");const e=Y.startsWith("file://")||Y.startsWith("content://")||Y.startsWith("http")?Y:`file://${Y}`,o=io.select({ios:{url:e,title:r.filename},default:{title:r.filename,message:r.filename,url:e}});(await Mi.share(o)).action===Mi.sharedAction&&H(z("mediaGallery.shareSuccess","Shared successfully"))}catch(e){e?.message!=="User did not share"&&H(z("mediaGallery.shareUnavailable","Sharing not available on this device"))}},dr=()=>{R("medium"),qe(!0)},si=async()=>{if(Mt){Le(!0);try{await Mt(r),H(z("mediaGallery.convertedSuccess","Converted to GIF!"))}catch{H(z("mediaGallery.convertFailed","Conversion failed"))}finally{Le(!1)}}},Io=async()=>{try{je(!0),await Yr.playVideo(Y)}catch{H(z("mediaGallery.playError","Unable to play video"))}finally{je(!1)}},nn=async()=>{if(!(!Y||!G||pe)){_(!0),R("light");try{const o=Math.min(ne||1e4,5e3),i=await Tt.trimReproClip(Y,0,o,{quality:"medium"});i?.uri&&(ce(i.uri),i.width&&ae(i.width),i.height&&le(i.height),i.size&&oe(i.size),i.durationMs&&Ze(i.durationMs),H(z("mediaGallery.trimmedSuccess","Trimmed to 5s Repro Clip")))}catch{H(z("mediaGallery.trimFailed","Trim failed"))}finally{_(!1)}}},hr=async()=>{if(!(!Y||!G||pe)){_(!0),R("light");try{const e=await Tt.muteVideo(Y);e?.uri&&(ce(e.uri),e.width&&ae(e.width),e.height&&le(e.height),e.size&&oe(e.size),e.durationMs&&Ze(e.durationMs),H(z("mediaGallery.mutedSuccess","Audio Stripped")))}catch{H(z("mediaGallery.muteFailed","Mute failed"))}finally{_(!1)}}},to=ne?(ne/1e3).toFixed(1):null,li=to?`00:${Number(to)<10?"0":""}${to}`:null,cr=[{key:"none",label:z("mediaGallery.preview","Preview"),themeColor:M.brandPurple,icon:e=><Ai size={16}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>},{key:"crop",label:"Crop",themeColor:M.sky600,icon:e=><Ii size={16}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>},{key:"adjust",label:"Adjust",themeColor:M.amber500,icon:e=><Vi size={16}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>},{key:"draw",label:"Markup",themeColor:M.sky400,icon:e=><Vo size={16}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>},{key:"text",label:"Text",themeColor:M.violet600,icon:e=><Hi size={16}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>}],ur=[{key:"none",label:z("mediaGallery.preview","Player"),themeColor:M.brandPurple,icon:e=><Ai size={14}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>},{key:"trim",label:z("media.trim","Trim"),themeColor:M.sky600,icon:e=><Wi size={14}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>,hasBadge:re>0||he<(ne||1e4)},{key:"audio",label:z("media.audio","Audio"),themeColor:M.amber600,icon:e=><So size={14}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>,hasBadge:me||Xe<100},{key:"speed",label:z("media.speed","Speed"),themeColor:M.violet600,icon:e=><Eo size={14}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>,hasBadge:Ve!==1},{key:"gif",label:z("media.toGif","To GIF"),themeColor:M.emerald500,icon:e=><Do size={14}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>},{key:"snapshot",label:z("media.snapshot","Snapshot"),themeColor:M.pink500,icon:e=><Fo size={14}color={e?"#38BDF8":"rgba(255,255,255,0.55)"}/>}];return!r||!Ae?null:<Ci visible={Ae}transparent={!0}animationType="fade"statusBarTranslucent={!0}onRequestClose={Me}>
+      <C style={t.modalBackdrop}>
+        <Oo style={t.modalBackdropPressable}onPress={Me}/>
+        <C style={[t.modalContentCard,{height:`${K}%`,borderTopLeftRadius:K>=100?0:20,borderTopRightRadius:K>=100?0:20}]}>
+          <Fi translucent backgroundColor="transparent"barStyle="light-content"/>
+          
+          <C style={[t.header,{paddingTop:_e,borderTopLeftRadius:K>=100?0:20,borderTopRightRadius:K>=100?0:20}]}>
+            <Mr colors={[M.indigo600,M.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={[L.absoluteFill,{borderTopLeftRadius:K>=100?0:20,borderTopRightRadius:K>=100?0:20}]}pointerEvents="none"/>
+            <C style={t.headerInner}>
+              
+              <C style={t.headerLeft}>
+                <Bt accessible={!0}accessibilityRole="button"accessibilityLabel={z("common.back","Back")}onPress={Me}hitSlop={15}style={t.headerBackBtn}>
+                  <Nr size={17}/>
+                </Bt>
+                <C style={t.headerTextCol}>
+                  <C style={t.headerTitleRow}>
+                    <F style={t.title}numberOfLines={1}>
+                      {r.filename||(ee?"debug_session.png":"recording.mp4")}
+                    </F>
+                    <C style={t.formatBadge}>
+                      <F style={t.formatBadgeText}>
+                        {(r.filename?.split(".").pop()||(ee?"PNG":G?"MP4":"GIF")).toUpperCase()}
+                      </F>
+                    </C>
+                  </C>
+                  <C style={t.headerSubtitleRow}>
+                    <F style={t.subtitleDim}numberOfLines={1}>
+                      {ke&&Se?`${ke} \xD7 ${Se}`:ee?"1320 \xD7 2868":"1080 \xD7 1920"}
+                    </F>
+                    {Zo?<>
+                        <F style={t.subtitleDot}>•</F>
+                        <F style={t.subtitleSize}>
+                          {Gi(Zo)}
+                        </F>
+                      </>:<>
+                        <F style={t.subtitleDot}>•</F>
+                        <F style={t.subtitleSize}>774 KB</F>
+                      </>}
+                  </C>
+                </C>
+              </C>
+
+              
+              <C style={t.headerRight}>
+                
+                {ee&&<C style={t.undoRedoGroup}>
+                    <P accessible={!0}accessibilityRole="button"accessibilityLabel={z("common.undo","Undo")}onPress={oi}disabled={be.length===0}style={[t.undoHalfBtn,be.length===0&&t.actionDisabled]}hitSlop={{top:8,bottom:8,left:6,right:4}}>
+                      <Ei size={14}color={be.length>0?M.white:"rgba(255, 255, 255, 0.35)"}/>
+                    </P>
+                    <C style={t.undoDivider}/>
+                    <P accessible={!0}accessibilityRole="button"accessibilityLabel="Redo"onPress={tr}disabled={We.length===0}style={[t.redoHalfBtn,We.length===0&&t.actionDisabled]}hitSlop={{top:8,bottom:8,left:4,right:6}}>
+                      <Hr size={14}color={We.length>0?M.white:"rgba(255, 255, 255, 0.35)"}/>
+                    </P>
+                  </C>}
+
+                
+                <Bt accessible={!0}accessibilityRole="button"accessibilityLabel="More Options"onPress={()=>{R("light"),ot(e=>!e)}}style={t.headerMoreBtn}hitSlop={{top:8,bottom:8,left:6,right:6}}>
+                  <Dr size={16}color={M.white}/>
+                </Bt>
+
+                
+                <Bt accessible={!0}accessibilityRole="button"accessibilityLabel={z("common.save","Save")}onPress={ii}disabled={pe}style={[t.headerSaveBtn,pe&&{opacity:.6}]}hitSlop={{top:8,bottom:8,left:6,right:6}}>
+                  <Gr size={14}color={M.white}/>
+                  <F style={t.headerSaveText}>{z("common.save","Save")}</F>
+                </Bt>
+              </C>
+            </C>
+          </C>
+
+          
+          {$i&&<C style={t.moreMenuDropdown}>
+              {(ee&&ni||G&&ir)&&<P onPress={()=>{ot(!1),or()}}style={t.moreMenuItem}>
+                  <Di size={14}color={M.sky400}/>
+                  <F style={t.moreMenuItemText}>
+                    {z("common.reset","Reset to Original")}
+                  </F>
+                </P>}
+              {ee&&<P onPress={()=>{R("light"),Dt(e=>!e),ot(!1)}}style={t.moreMenuItem}>
+                  <Wo size={14}color={ue?M.sky400:M.white}/>
+                  <F style={t.moreMenuItemText}>
+                    {ue?z("mediaGallery.hideGridlines","Hide Instagram Grid (3\xD73)"):z("mediaGallery.showGridlines","Show Instagram Grid (3\xD73)")}
+                  </F>
+                </P>}
+              {ee&&<P onPress={()=>{R("light"),te(),Ot(e=>!e),ot(!1)}}style={t.moreMenuItem}>
+                  <F style={t.moreMenuItemIconText}>🛡</F>
+                  <F style={t.moreMenuItemText}>
+                    {xe?z("mediaGallery.hideWatermark","Hide QA Watermark"):z("mediaGallery.showWatermark","Show QA Watermark")}
+                  </F>
+                </P>}
+              {G&&<P onPress={()=>{ot(!1),si()}}style={t.moreMenuItem}>
+                  <Do size={14}color={M.violet600}/>
+                  <F style={t.moreMenuItemText}>
+                    {z("mediaGallery.exportGif","Export as Animated GIF")}
+                  </F>
+                </P>}
+              {G&&<P onPress={()=>{ot(!1),ri()}}style={t.moreMenuItem}>
+                  <Fo size={14}color={M.sky400}/>
+                  <F style={t.moreMenuItemText}>
+                    {z("mediaGallery.snapshotFrame","Snapshot Frame (PNG)")}
+                  </F>
+                </P>}
+              <P onPress={()=>{ot(!1),lr()}}style={t.moreMenuItem}>
+                <Lr size={14}color={M.white}/>
+                <F style={t.moreMenuItemText}>
+                  {z("mediaGallery.share",G?"Share Video":"Share Image")}
+                </F>
+              </P>
+              <P onPress={()=>{ot(!1),dr()}}style={[t.moreMenuItem,t.moreMenuItemDestructive]}>
+                <$r size={14}color={M.rose500}/>
+                <F style={[t.moreMenuItemText,{color:M.rose500}]}>
+                  {z("mediaGallery.delete","Delete Media")}
+                </F>
+              </P>
+            </C>}
+
+        
+        <C style={t.stageWrapper}>
+          <C onLayout={e=>{const{width:o,height:i}=e.nativeEvent.layout;o>20&&i>20&&_o(T=>({...T,width:o,height:i}))}}style={t.previewCard}>
+            {G?r.thumbnailUri&&!$e?<>
+                  <Co source={{uri:r.thumbnailUri}}style={t.image}resizeMode="contain"onError={()=>Re(!0)}/>
+                  <C style={t.videoImageOverlay}/>
+                </>:<C style={t.videoFallbackBackdrop}>
+                  <C style={t.videoFallbackGlow}/>
+                  <Ir size={52}color={M.sky400}/>
+                  <F style={t.videoFallbackTitle}>
+                    {r.width&&r.height?`${r.width} \xD7 ${r.height}`:"HD Video Recording"}
+                  </F>
+                  <F style={t.videoFallbackSubtitle}>
+                    {to?`${to}s duration`:"MP4 Video"} •{" "}
+                    {Gi(r.sizeBytes)}
+                  </F>
+                </C>:<Gt.View onLayout={e=>{const{width:o,height:i}=e.nativeEvent.layout;o>20&&i>20&&_o(T=>({...T,width:o,height:i}))}}style={[t.canvasContainer,{transform:[...Ie.getTranslateTransform(),{scale:ie}]}]}{...B==="draw"?qi.panHandlers:B==="none"&&ie>1?Qi.panHandlers:{}}>
+                <C style={[t.imageCanvasWrapper,{width:Be.width,height:Be.height,transform:[{rotate:`${X}deg`},{scaleX:fe?-1:1},{scaleY:we?-1:1}]}]}>
                   
-                  {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>)}
+                  <Co key={Pe?r?.uri:Y}source={{uri:Pe?r?.uri:Y}}style={t.image}resizeMode="cover"onError={()=>Re(!0)}/>
 
                   
-                  {v==="crop"&&<T style={e.cropOverlayMask}{...qt.panHandlers}>
-                      
-                      <T pointerEvents="none"style={[e.cropDimMask,{top:0,left:0,right:0,height:`${r.y*100}%`}]}/>
+                  {!Pe&&<>
                       
-                      <T pointerEvents="none"style={[e.cropDimMask,{top:`${(r.y+r.height)*100}%`,left:0,right:0,bottom:0}]}/>
+                      {D.brightness+D.exposure!==0&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:D.brightness+D.exposure>0?"#FFFFFF":"#000000",opacity:Math.min(.65,Math.abs(D.brightness+D.exposure)/100*.7)}]}/>}
+
                       
-                      <T pointerEvents="none"style={[e.cropDimMask,{top:`${r.y*100}%`,left:0,width:`${r.x*100}%`,height:`${r.height*100}%`}]}/>
+                      {D.warmth!==0&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:D.warmth>0?"#F59E0B":"#0284C7",opacity:Math.min(.4,Math.abs(D.warmth)/50*.35)}]}/>}
+
                       
-                      <T pointerEvents="none"style={[e.cropDimMask,{top:`${r.y*100}%`,left:`${(r.x+r.width)*100}%`,right:0,height:`${r.height*100}%`}]}/>
+                      {D.saturation>0&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"#A855F7",opacity:Math.min(.2,D.saturation/50*.15)}]}/>}
 
                       
-                      <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>
+                      {D.vignette>0&&<C pointerEvents="none"style={[L.absoluteFill,{borderRadius:6,borderWidth:Math.max(2,D.vignette/100*44),borderColor:`rgba(0, 0, 0, ${.85*(D.vignette/100)})`}]}/>}
 
                       
-                      <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]}/>
+                      {Z==="mono"&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"rgba(100, 116, 139, 0.45)"}]}/>}
+                      {Z==="noir"&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"rgba(0, 0, 0, 0.48)"}]}/>}
+                      {Z==="sepia"&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"rgba(120, 53, 15, 0.32)"}]}/>}
+                      {Z==="vintage"&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"rgba(217, 119, 6, 0.22)"}]}/>}
+                      {Z==="vibrant"&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"rgba(236, 72, 153, 0.16)"}]}/>}
+                      {Z==="cool"&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"rgba(14, 165, 233, 0.22)"}]}/>}
+                      {Z==="warm"&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"rgba(249, 115, 22, 0.22)"}]}/>}
+                      {Z==="fade"&&<C pointerEvents="none"style={[L.absoluteFill,{backgroundColor:"rgba(255, 255, 255, 0.18)"}]}/>}
+                    </>}
 
+                  
+                  {!Pe&&<Fr style={L.absoluteFill}pointerEvents={B==="draw"?"auto":"none"}>
+                      <Ct>
                         
-                        <T style={e.cropEdgeBarTop}/>
-                        <T style={e.cropEdgeBarBottom}/>
-                        <T style={e.cropEdgeBarLeft}/>
-                        <T style={e.cropEdgeBarRight}/>
+                        {J.map(e=>{if(e.type==="brush"){if(e.points.length<2)return null;const o=e.points.reduce((i,T,k)=>k===0?`M ${T.x} ${T.y}`:`${i} L ${T.x} ${T.y}`,"");return<Mo key={e.id}d={o}stroke={e.color}strokeWidth={e.strokeWidth}strokeLinecap="round"strokeLinejoin="round"fill="none"/>}if(e.type==="highlighter"){if(e.points.length<2)return null;const o=e.points.reduce((i,T,k)=>k===0?`M ${T.x} ${T.y}`:`${i} L ${T.x} ${T.y}`,"");return<Mo key={e.id}d={o}stroke={e.color}strokeWidth={e.strokeWidth*2.5}strokeOpacity={.4}strokeLinecap="round"strokeLinejoin="round"fill="none"/>}if(e.type==="arrow"){if(e.points.length<2)return null;const o=e.points[0],i=e.points[1],T=i.x-o.x,k=i.y-o.y,S=Math.atan2(k,T),A=Math.min(28,Math.max(14,e.strokeWidth*3.5)),j=Math.PI/6,q=i.x-A*Math.cos(S-j),Q=i.y-A*Math.sin(S-j),Ke=i.x-A*Math.cos(S+j),Pt=i.y-A*Math.sin(S+j);return<Ct key={e.id}>
+                                <$t x1={o.x}y1={o.y}x2={i.x}y2={i.y}stroke={e.color}strokeWidth={e.strokeWidth}strokeLinecap="round"/>
+                                <Ri points={`${i.x},${i.y} ${q},${Q} ${Ke},${Pt}`}fill={e.color}/>
+                              </Ct>}if(e.type==="rect"){const o=e.rect||{x:Math.min(e.points[0]?.x||0,e.points[1]?.x||0),y:Math.min(e.points[0]?.y||0,e.points[1]?.y||0),width:Math.abs((e.points[1]?.x||0)-(e.points[0]?.x||0)),height:Math.abs((e.points[1]?.y||0)-(e.points[0]?.y||0))};return<Nt key={e.id}x={o.x}y={o.y}width={o.width}height={o.height}stroke={e.color}strokeWidth={e.strokeWidth}rx={6}ry={6}fill="none"/>}if(e.type==="circle"){const o=e.points[0]||{x:0,y:0},i=e.points[1]||o,T=Math.min(o.x,i.x),k=Math.min(o.y,i.y),S=Math.max(10,Math.abs(i.x-o.x)),A=Math.max(10,Math.abs(i.y-o.y));return<To key={e.id}cx={T+S/2}cy={k+A/2}rx={S/2}ry={A/2}stroke={e.color}strokeWidth={e.strokeWidth}fill="none"/>}if(e.type==="spotlight"){const o=e.points[0]||{x:0,y:0},i=e.points[1]||o,T=Math.min(o.x,i.x),k=Math.min(o.y,i.y),S=Math.max(16,Math.abs(i.x-o.x)),A=Math.max(16,Math.abs(i.y-o.y));return<Ct key={e.id}>
+                                <To cx={T+S/2}cy={k+A/2}rx={S/2}ry={A/2}stroke="#FBBF24"strokeWidth={2.5}strokeDasharray="5,3"fill="rgba(255, 255, 255, 0.15)"/>
+                              </Ct>}if(e.type==="step"){const o=e.points[0]||{x:0,y:0},i=Math.max(12,Math.min(20,e.strokeWidth*2.2+8));return<Ct key={e.id}>
+                                <Si cx={o.x}cy={o.y}r={i}fill={e.color||"#EF4444"}stroke="#FFFFFF"strokeWidth={1.5}/>
+                                <Pi x={o.x}y={o.y+i*.35}fill="#FFFFFF"fontSize={Math.round(i*.95)}fontWeight="bold"textAnchor="middle">
+                                  {e.stepNumber||1}
+                                </Pi>
+                              </Ct>}if(e.type==="redact"){const o=e.rect||{x:Math.min(e.points[0]?.x||0,e.points[1]?.x||0),y:Math.min(e.points[0]?.y||0,e.points[1]?.y||0),width:Math.abs((e.points[1]?.x||0)-(e.points[0]?.x||0)),height:Math.abs((e.points[1]?.y||0)-(e.points[0]?.y||0))};return<Nt key={e.id}x={o.x}y={o.y}width={o.width}height={o.height}fill="#000000"rx={4}ry={4}/>}if(e.type==="pixelate"){const o=e.rect||{x:Math.min(e.points[0]?.x||0,e.points[1]?.x||0),y:Math.min(e.points[0]?.y||0,e.points[1]?.y||0),width:Math.abs((e.points[1]?.x||0)-(e.points[0]?.x||0)),height:Math.abs((e.points[1]?.y||0)-(e.points[0]?.y||0))};return<Ct key={e.id}>
+                                <Nt x={o.x}y={o.y}width={o.width}height={o.height}fill="rgba(255,255,255,0.22)"stroke="rgba(255,255,255,0.5)"strokeWidth={1.5}strokeDasharray="4,4"rx={4}ry={4}/>
+                                <$t x1={o.x}y1={o.y+o.height*.33}x2={o.x+o.width}y2={o.y+o.height*.33}stroke="rgba(255,255,255,0.35)"strokeWidth={1}/>
+                                <$t x1={o.x}y1={o.y+o.height*.66}x2={o.x+o.width}y2={o.y+o.height*.66}stroke="rgba(255,255,255,0.35)"strokeWidth={1}/>
+                                <$t x1={o.x+o.width*.33}y1={o.y}x2={o.x+o.width*.33}y2={o.y+o.height}stroke="rgba(255,255,255,0.35)"strokeWidth={1}/>
+                                <$t x1={o.x+o.width*.66}y1={o.y}x2={o.x+o.width*.66}y2={o.y+o.height}stroke="rgba(255,255,255,0.35)"strokeWidth={1}/>
+                              </Ct>}return null})}
 
                         
-                        <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>}
+                        {W&&W.length>0&&<>
+                            {I==="brush"&&W.length>1&&<Mo d={W.reduce((e,o,i)=>i===0?`M ${o.x} ${o.y}`:`${e} L ${o.x} ${o.y}`,"")}stroke={Ce}strokeWidth={ze}strokeLinecap="round"strokeLinejoin="round"fill="none"/>}
 
-              
-              {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>}
+                            {I==="highlighter"&&W.length>1&&<Mo d={W.reduce((e,o,i)=>i===0?`M ${o.x} ${o.y}`:`${e} L ${o.x} ${o.y}`,"")}stroke={Ce}strokeWidth={ze*2.5}strokeOpacity={.4}strokeLinecap="round"strokeLinejoin="round"fill="none"/>}
+
+                            {I==="arrow"&&W.length>1&&(()=>{const e=W[0],o=W[W.length-1],i=o.x-e.x,T=o.y-e.y,k=Math.atan2(T,i),S=Math.min(28,Math.max(14,ze*3.5)),A=Math.PI/6,j=o.x-S*Math.cos(k-A),q=o.y-S*Math.sin(k-A),Q=o.x-S*Math.cos(k+A),Ke=o.y-S*Math.sin(k+A);return<Ct>
+                                  <$t x1={e.x}y1={e.y}x2={o.x}y2={o.y}stroke={Ce}strokeWidth={ze}strokeLinecap="round"/>
+                                  <Ri points={`${o.x},${o.y} ${j},${q} ${Q},${Ke}`}fill={Ce}/>
+                                </Ct>})()}
+
+                            {I==="rect"&&W.length>1&&(()=>{const e=W[0],o=W[W.length-1],i=Math.min(e.x,o.x),T=Math.min(e.y,o.y),k=Math.abs(o.x-e.x),S=Math.abs(o.y-e.y);return<Nt x={i}y={T}width={k}height={S}stroke={Ce}strokeWidth={ze}rx={6}ry={6}fill="none"/>})()}
 
+                            {I==="circle"&&W.length>1&&(()=>{const e=W[0],o=W[W.length-1],i=Math.min(e.x,o.x),T=Math.min(e.y,o.y),k=Math.max(10,Math.abs(o.x-e.x)),S=Math.max(10,Math.abs(o.y-e.y));return<To cx={i+k/2}cy={T+S/2}rx={k/2}ry={S/2}stroke={Ce}strokeWidth={ze}fill="none"/>})()}
+
+                            {I==="spotlight"&&W.length>1&&(()=>{const e=W[0],o=W[W.length-1],i=Math.min(e.x,o.x),T=Math.min(e.y,o.y),k=Math.max(16,Math.abs(o.x-e.x)),S=Math.max(16,Math.abs(o.y-e.y));return<Ct>
+                                  <To cx={i+k/2}cy={T+S/2}rx={k/2}ry={S/2}stroke="#FBBF24"strokeWidth={2.5}strokeDasharray="5,3"fill="rgba(255, 255, 255, 0.15)"/>
+                                </Ct>})()}
+
+                            {I==="step"&&W.length>0&&(()=>{const e=W[0],o=J.filter(T=>T.type==="step").length,i=Math.max(12,Math.min(20,ze*2.2+8));return<Ct>
+                                  <Si cx={e.x}cy={e.y}r={i}fill={Ce||"#EF4444"}stroke="#FFFFFF"strokeWidth={1.5}/>
+                                  <Pi x={e.x}y={e.y+i*.35}fill="#FFFFFF"fontSize={Math.round(i*.95)}fontWeight="bold"textAnchor="middle">
+                                    {o+1}
+                                  </Pi>
+                                </Ct>})()}
+
+                            {I==="redact"&&W.length>1&&(()=>{const e=W[0],o=W[W.length-1],i=Math.min(e.x,o.x),T=Math.min(e.y,o.y),k=Math.abs(o.x-e.x),S=Math.abs(o.y-e.y);return<Nt x={i}y={T}width={k}height={S}fill="#000000"stroke="rgba(255,255,255,0.4)"strokeWidth={1}strokeDasharray="3,3"rx={4}ry={4}/>})()}
+
+                            {I==="pixelate"&&W.length>1&&(()=>{const e=W[0],o=W[W.length-1],i=Math.min(e.x,o.x),T=Math.min(e.y,o.y),k=Math.abs(o.x-e.x),S=Math.abs(o.y-e.y);return<Nt x={i}y={T}width={k}height={S}fill="rgba(255,255,255,0.22)"stroke="rgba(255,255,255,0.6)"strokeWidth={1.5}strokeDasharray="4,4"rx={4}ry={4}/>})()}
+                          </>}
+                      </Ct>
+                    </Fr>}
+
+                  
+                  {xe&&!Pe&&<C pointerEvents="none"style={t.watermarkOverlay}>
+                      <F style={t.watermarkText}>
+                        {io.OS.toUpperCase()} • {ke}×{Se} • QA DIAGNOSTIC
+                      </F>
+                      <F style={t.watermarkTime}>
+                        {new Date().toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}
+                      </F>
+                    </C>}
+
+                  
+                  {B==="text"&&<Oo style={L.absoluteFill}onPress={e=>{const{locationX:o,locationY:i}=e.nativeEvent,T=Math.max(1,Be.width),k=Math.max(1,Be.height),S=Math.max(.05,Math.min(.85,o/T)),A=Math.max(.05,Math.min(.85,i/k));Zi({x:S,y:A}),Bo()}}/>}
+
+                  
+                  {!Pe&&Te.map(e=><Zr key={e.id}textItem={e}canvasWidth={Be.width}canvasHeight={Be.height}scale={ie}onUpdate={(o,i)=>{te(),Ee(T=>T.map(k=>k.id===o?{...k,...i}:k))}}onDelete={o=>{ar(o)}}onEdit={o=>Bo(o)}/>)}
+
+                  
+                  {(ue||B==="crop")&&!Pe&&<C pointerEvents="none"style={t.instagramGridOverlay}>
+                      <C style={[t.instagramGridHLine,{top:"33.33%"}]}/>
+                      <C style={[t.instagramGridHLine,{top:"66.67%"}]}/>
+                      <C style={[t.instagramGridVLine,{left:"33.33%"}]}/>
+                      <C style={[t.instagramGridVLine,{left:"66.67%"}]}/>
+                    </C>}
+                </C>
+              </Gt.View>}
+
+
+
+            
+            {ee&&ni&&<Oo onPressIn={()=>{R("light"),At(!0)}}onPressOut={()=>{R("light"),At(!1)}}style={({pressed:e})=>[t.holdCompareBtn,e&&t.holdCompareBtnPressed]}>
+                <Br size={14}color={M.white}/>
+                <F style={t.holdCompareText}>
+                  {Pe?"Original Image":"Hold to Compare"}
+                </F>
+              </Oo>}
+
+            
+            {G&&<P onPress={Io}activeOpacity={.85}style={t.modernCenterPlayBtn}>
+                {de?<Oi size={24}color={M.white}/>:<C style={{marginLeft:3}}>
+                    <Ho size={24}color={M.white}/>
+                  </C>}
+              </P>}
+
+            
+            {G&&<C style={t.videoFloatingHud}>
+                <P onPress={Io}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  {de?<Oi size={13}color={M.white}/>:<Ho size={13}color={M.white}/>}
+                </P>
+                <C style={t.videoHudProgressBar}>
+                  <C style={[t.videoHudProgressFill,{left:`${re/(ne||1e4)*100}%`,width:`${Math.max(4,(he-re)/(ne||1e4)*100)}%`}]}/>
+                </C>
+                <F style={t.videoHudTimeText}>
+                  {li||"00:05"}
+                </F>
+                {me&&<C style={t.videoHudBadge}>
+                    <So size={10}color="#F87171"/>
+                  </C>}
+                {Ve!==1&&<C style={t.videoHudBadge}>
+                    <F style={t.videoHudBadgeText}>{Ve}x</F>
+                  </C>}
+              </C>}
+
+            
+            {ee&&<C style={t.floatingZoomBar}>
+                <Bt onPress={Ki}style={t.zoomBtn}accessibilityLabel="Zoom In">
+                  <Ur size={15}color={M.white}/>
+                </Bt>
+
+                <P onPress={Ko}activeOpacity={.8}style={t.zoomLevelBadge}>
+                  <F style={t.zoomLevelText}>
+                    {Math.round(ie*100)}%
+                  </F>
+                </P>
+
+                <Bt onPress={Ji}style={t.zoomBtn}accessibilityLabel="Zoom Out">
+                  <Xr size={15}color={M.white}/>
+                </Bt>
+
+                <Bt onPress={Ko}style={t.zoomBtn}accessibilityLabel="Fit to Screen">
+                  <Or size={14}color={M.white}/>
+                </Bt>
+              </C>}
+
+            
+            {ee&&B==="crop"&&<Qr cropBox={Qt}imageWidth={Be.width}imageHeight={Be.height}imageOffsetX={(nt.width-Be.width)/2}imageOffsetY={(nt.height-Be.height)/2}scale={ie}onUpdateCropBox={kt}onApplyCrop={ai}onCancelCrop={()=>U("none")}/>}
+          </C>
+        </C>
+
+        
+        <C style={t.bottomControlsContainer}>
+          
+          {(ee||G)&&<C style={t.contextToolPanel}>
               
-              {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>}
+              <C style={t.panelHeaderRow}>
+                <C style={t.panelHeaderLeft}>
+                  <C style={[t.panelGlowDot,ee&&B==="draw"&&{backgroundColor:"#818CF8"},ee&&B==="crop"&&{backgroundColor:"#38BDF8"},ee&&B==="adjust"&&{backgroundColor:"#F59E0B"},ee&&B==="text"&&{backgroundColor:"#A855F7"},G&&B==="trim"&&{backgroundColor:"#38BDF8"},G&&B==="audio"&&{backgroundColor:"#F59E0B"},G&&B==="speed"&&{backgroundColor:"#8B5CF6"},G&&B==="gif"&&{backgroundColor:"#10B981"},G&&B==="snapshot"&&{backgroundColor:"#EC4899"},G&&B==="none"&&{backgroundColor:"#818CF8"}]}/>
+                  <F style={t.panelHeaderTitle}>
+                    {ee?B==="draw"?I==="redact"?"BLACKOUT REDACTION":I==="pixelate"?"PIXELATE BLUR":I==="highlighter"?"HIGHLIGHTER":I==="arrow"?"ARROW CALLOUT":I==="rect"?"RECTANGLE BOX":I==="circle"?"CIRCLE / ELLIPSE":I==="spotlight"?"SPOTLIGHT FOCUS":I==="step"?"STEP NUMBER BADGE":"PEN BRUSH":B==="crop"?"CROP & ROTATE":B==="adjust"?`ADJUST: ${Fe.toUpperCase()}`:B==="text"?"TEXT & BUG BADGES":"CANVAS PREVIEW":B==="trim"?"VIDEO TRIMMER":B==="audio"?"AUDIO CONTROLS":B==="speed"?"SPEED MULTIPLIER":B==="gif"?"GIF EXPORT STUDIO":B==="snapshot"?"FRAME SNAPSHOT":"VIDEO STUDIO & PLAYER"}
+                  </F>
+                </C>
+                <C style={t.panelValueBadge}>
+                  <F style={t.panelValueText}>
+                    {ee?B==="draw"?I==="redact"?"100% Solid":I==="pixelate"?`+${Ro} px`:I==="step"?`Badge #${J.filter(e=>e.type==="step").length+1}`:`+${ze} px`:B==="crop"?`${zo.toUpperCase()} \u2022 ${X}\xB0`:B==="adjust"?Fe==="vignette"?`+${D.vignette}%`:`${D[Fe]>=0?"+":""}${D[Fe]}%`:B==="text"?`${Te.length} Notes`:`${Math.round(ie*100)}%`:B==="trim"?`${(re/1e3).toFixed(1)}s - ${(he/1e3).toFixed(1)}s (${((he-re)/1e3).toFixed(1)}s)`:B==="audio"?me?"Muted (0%)":`${Xe}% Vol`:B==="speed"?`${Ve}x Speed`:B==="gif"?`${Zt} FPS \u2022 ${Po}px`:B==="snapshot"?`${ke||1080}\xD7${Se||1920}`:li||"00:05"}
+                  </F>
+                </C>
+              </C>
 
               
-              {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>}
+              {G&&B==="trim"&&Lo.length>0&&<Ti horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={t.filmstripScroll}>
+                  {Lo.map(e=>{const o=e.timeMs>=re&&e.timeMs<=he;return<P key={`thumb_${e.index}_${e.timeMs}`}onPress={()=>{R("light"),Qe==="start"?it(Math.min(he-500,e.timeMs)):rt(Math.max(re+500,e.timeMs))}}style={[t.filmstripThumbItem,o&&t.filmstripThumbActive]}>
+                        <Co source={{uri:e.uri}}style={t.filmstripThumbImg}resizeMode="cover"/>
+                        <F style={t.filmstripThumbTime}>
+                          {(e.timeMs/1e3).toFixed(1)}s
+                        </F>
+                      </P>})}
+                </Ti>}
 
               
-              <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 style={t.sliderRowContainer}>
+                <F style={t.sliderMinIndicator}>
+                  {G&&B==="speed"?"0.5x":G&&B==="gif"?"6fps":"\u25CB"}
+                </F>
+                <C onLayout={e=>{const o=e.nativeEvent.layout.width;o>20&&(Jo.current=o)}}style={t.sliderTrackTouchable}{...er.panHandlers}>
+                  <C style={t.sliderTrackBg}>
+                    <C style={[t.sliderFillTrack,{width:`${ti}%`},G&&B==="trim"&&{left:`${re/(ne||1e4)*100}%`,width:`${Math.max(4,(he-re)/(ne||1e4)*100)}%`,backgroundColor:"#38BDF8"}]}/>
+                    <C pointerEvents="none"style={[t.sliderThumbHandle,{left:`${ti}%`}]}>
+                      <C style={t.sliderThumbInnerGlow}/>
+                    </C>
+                  </C>
+                </C>
+                <F style={t.sliderMaxIndicator}>
+                  {G&&B==="speed"?"2.0x":G&&B==="gif"?"24fps":"\u25CF"}
+                </F>
+              </C>
 
               
-              {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>
-
-                  <G onPress={Qt}style={e.zoomBtn}accessibilityLabel="Zoom Out">
-                    <Zo size={15}color={o.white}/>
-                  </G>
-                </T>}
-            </T>
+              <Ti horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={t.modeChipsScroll}>
+                {G?B==="trim"?<>
+                      
+                      <P onPress={()=>{R("light"),ro("start")}}style={[t.modeChip,Qe==="start"&&t.modeChipActive]}>
+                        <F style={[t.modeChipText,Qe==="start"&&t.modeChipTextActive]}>
+                          Start: {(re/1e3).toFixed(1)}s
+                        </F>
+                      </P>
 
-            
-            {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>
+                      <P onPress={()=>{R("light"),ro("end")}}style={[t.modeChip,Qe==="end"&&t.modeChipActive]}>
+                        <F style={[t.modeChipText,Qe==="end"&&t.modeChipTextActive]}>
+                          End: {(he/1e3).toFixed(1)}s
+                        </F>
+                      </P>
 
-                
-                <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>}
+                      <C style={t.subDivider}/>
 
-            
-            <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>
+                      
+                      <P onPress={()=>{R("light");const e=ne||1e4;it(0),rt(Math.min(e,3e3))}}style={t.modeChip}>
+                        <F style={t.modeChipText}>First 3s</F>
+                      </P>
+
+                      <P onPress={()=>{R("light");const e=ne||1e4;it(0),rt(Math.min(e,5e3))}}style={t.modeChip}>
+                        <F style={t.modeChipText}>First 5s</F>
+                      </P>
+
+                      <P onPress={()=>{R("light");const e=ne||1e4;it(0),rt(Math.min(e,1e4))}}style={t.modeChip}>
+                        <F style={t.modeChipText}>First 10s</F>
+                      </P>
+
+                      <C style={t.subDivider}/>
+
+                      <P onPress={ii}style={t.applyActionBtn}>
+                        <F style={t.applyActionText}>Apply Trim</F>
+                      </P>
+
+                      <P onPress={()=>{R("light"),it(0),rt(ne||1e4)}}style={t.cancelActionBtn}>
+                        <F style={t.cancelActionText}>Reset</F>
+                      </P>
+                    </>:B==="audio"?<>
+                      <P onPress={()=>{R("light"),_t(e=>!e)}}style={[t.modeChip,me&&t.modeChipActive]}>
+                        <So size={14}color={me?M.white:"rgba(255,255,255,0.7)"}/>
+                        <F style={[t.modeChipText,me&&t.modeChipTextActive]}>
+                          {me?"Muted":"Unmuted"}
+                        </F>
+                      </P>
+
+                      <C style={t.subDivider}/>
+
+                      {[100,75,50,25,0].map(e=><P key={e}onPress={()=>{R("light"),no(e),_t(e===0)}}style={[t.modeChip,!me&&Xe===e&&t.modeChipActive]}>
+                          <F style={[t.modeChipText,!me&&Xe===e&&t.modeChipTextActive]}>
+                            {e}%
+                          </F>
+                        </P>)}
+
+                      <C style={t.subDivider}/>
+
+                      <P onPress={hr}style={t.applyActionBtn}>
+                        <F style={t.applyActionText}>Strip Audio</F>
+                      </P>
+                    </>:B==="speed"?<>
+                      {[.5,.75,1,1.25,1.5,2].map(e=><P key={e}onPress={()=>{R("light"),ao(e)}}style={[t.modeChip,Ve===e&&t.modeChipActive]}>
+                          <Eo size={13}color={Ve===e?M.white:"rgba(255,255,255,0.7)"}/>
+                          <F style={[t.modeChipText,Ve===e&&t.modeChipTextActive]}>
+                            {e===1?"1.0x (Normal)":`${e}x`}
+                          </F>
+                        </P>)}
+                    </>:B==="gif"?<>
+                      
+                      {[{fps:8,label:"8 FPS (Small)"},{fps:12,label:"12 FPS (Smooth)"},{fps:20,label:"20 FPS (HD)"}].map(e=><P key={e.fps}onPress={()=>{R("light"),Go(e.fps)}}style={[t.modeChip,Zt===e.fps&&t.modeChipActive]}>
+                          <F style={[t.modeChipText,Zt===e.fps&&t.modeChipTextActive]}>
+                            {e.label}
+                          </F>
+                        </P>)}
+
+                      <C style={t.subDivider}/>
+
+                      
+                      {[{w:320,label:"320px"},{w:480,label:"480px"},{w:640,label:"640px"}].map(e=><P key={e.w}onPress={()=>{R("light"),Ui(e.w)}}style={[t.modeChip,Po===e.w&&t.modeChipActive]}>
+                          <F style={[t.modeChipText,Po===e.w&&t.modeChipTextActive]}>
+                            {e.label}
+                          </F>
+                        </P>)}
+
+                      <C style={t.subDivider}/>
+
+                      <P onPress={si}disabled={De}style={[t.applyActionBtn,De&&{opacity:.6}]}>
+                        <F style={t.applyActionText}>
+                          {De?"Exporting...":"Export GIF"}
+                        </F>
+                      </P>
+                    </>:B==="snapshot"?<>
+                      <P onPress={ri}disabled={pe}style={t.applyActionBtn}>
+                        <Fo size={14}color={M.white}/>
+                        <F style={t.applyActionText}>
+                          Snapshot Current Frame (PNG)
+                        </F>
+                      </P>
+                    </>:<>
+                      <P onPress={Io}style={t.modeChipActive}>
+                        <Ho size={14}color={M.white}/>
+                        <F style={t.modeChipTextActive}>Play Video</F>
+                      </P>
+                      <P onPress={()=>{R("light"),U("trim")}}style={t.modeChip}>
+                        <Wi size={14}color="rgba(255,255,255,0.7)"/>
+                        <F style={t.modeChipText}>Trim Clip</F>
+                      </P>
+                      <P onPress={()=>{R("light"),U("audio")}}style={t.modeChip}>
+                        <So size={14}color="rgba(255,255,255,0.7)"/>
+                        <F style={t.modeChipText}>Audio</F>
+                      </P>
+                      <P onPress={()=>{R("light"),U("speed")}}style={t.modeChip}>
+                        <Eo size={14}color="rgba(255,255,255,0.7)"/>
+                        <F style={t.modeChipText}>Speed</F>
+                      </P>
+                      <P onPress={()=>{R("light"),U("gif")}}style={t.modeChip}>
+                        <Do size={14}color="rgba(255,255,255,0.7)"/>
+                        <F style={t.modeChipText}>Export GIF</F>
+                      </P>
+                      <P onPress={()=>{R("light"),U("snapshot")}}style={t.modeChip}>
+                        <Fo size={14}color="rgba(255,255,255,0.7)"/>
+                        <F style={t.modeChipText}>Snapshot</F>
+                      </P>
+                    </>:B==="draw"?<>
+                    
+                    <P onPress={()=>{R("light"),Ue("brush")}}style={[t.modeChip,I==="brush"&&t.modeChipActive]}>
+                      <Vo size={14}color={I==="brush"?M.white:"rgba(255,255,255,0.6)"}/>
+                      <F style={[t.modeChipText,I==="brush"&&t.modeChipTextActive]}>
+                        Brush
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Ue("highlighter")}}style={[t.modeChip,I==="highlighter"&&t.modeChipActive]}>
+                      <Ar size={14}color={I==="highlighter"?M.white:"rgba(255,255,255,0.6)"}/>
+                      <F style={[t.modeChipText,I==="highlighter"&&t.modeChipTextActive]}>
+                        Highlighter
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Ue("arrow")}}style={[t.modeChip,I==="arrow"&&t.modeChipActive]}>
+                      <Rr size={14}color={I==="arrow"?M.white:"rgba(255,255,255,0.6)"}/>
+                      <F style={[t.modeChipText,I==="arrow"&&t.modeChipTextActive]}>
+                        Arrow
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Ue("rect")}}style={[t.modeChip,I==="rect"&&t.modeChipActive]}>
+                      <F style={[t.modeChipIconText,I==="rect"&&{color:M.white}]}>
+                        □
+                      </F>
+                      <F style={[t.modeChipText,I==="rect"&&t.modeChipTextActive]}>
+                        Rectangle
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Ue("circle")}}style={[t.modeChip,I==="circle"&&t.modeChipActive]}>
+                      <F style={[t.modeChipIconText,I==="circle"&&{color:M.white}]}>
+                        ○
+                      </F>
+                      <F style={[t.modeChipText,I==="circle"&&t.modeChipTextActive]}>
+                        Circle
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Ue("spotlight")}}style={[t.modeChip,I==="spotlight"&&t.modeChipActive]}>
+                      <F style={[t.modeChipIconText,I==="spotlight"&&{color:M.white}]}>
+                        🔦
+                      </F>
+                      <F style={[t.modeChipText,I==="spotlight"&&t.modeChipTextActive]}>
+                        Spotlight
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Ue("step"),H(z("mediaGallery.tapToPlaceStep","Tap or drag on image to place numbered steps \u2460 \u2461 \u2462"))}}style={[t.modeChip,I==="step"&&t.modeChipActive]}>
+                      <F style={[t.modeChipIconText,I==="step"&&{color:M.white}]}>
+                        ①
+                      </F>
+                      <F style={[t.modeChipText,I==="step"&&t.modeChipTextActive]}>
+                        Step #{J.filter(e=>e.type==="step").length+1}
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Ue("redact")}}style={[t.modeChip,I==="redact"&&t.modeChipActive]}>
+                      <Vr size={14}color={I==="redact"?M.white:"rgba(255,255,255,0.6)"}/>
+                      <F style={[t.modeChipText,I==="redact"&&t.modeChipTextActive]}>
+                        Redact
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Ue("pixelate")}}style={[t.modeChip,I==="pixelate"&&t.modeChipActive]}>
+                      <Wr size={14}color={I==="pixelate"?M.white:"rgba(255,255,255,0.6)"}/>
+                      <F style={[t.modeChipText,I==="pixelate"&&t.modeChipTextActive]}>
+                        Pixelate
+                      </F>
+                    </P>
+
+                    <C style={t.subDivider}/>
+
+                    {Li.map(e=><P key={e}onPress={()=>{R("light"),No(e)}}style={[t.colorDot,{backgroundColor:e},Ce===e&&t.colorDotActive]}/>)}
+
+                    <C style={t.subDivider}/>
+
+                    <P onPress={rr}disabled={J.length===0}style={[t.actionPillBtn,J.length===0&&{opacity:.4}]}>
+                      <Ei size={13}color={M.white}/>
+                      <F style={t.actionPillText}>Undo</F>
+                    </P>
+
+                    {J.length>0&&<P onPress={nr}style={[t.actionPillBtn,{backgroundColor:"rgba(239, 68, 68, 0.2)"}]}>
+                        <F style={[t.actionPillText,{color:M.rose400}]}>
+                          Clear ({J.length})
+                        </F>
+                      </P>}
+                  </>:B==="adjust"?<>
+                    
+                    {[{key:"none",label:"Original",icon:"\u2726"},{key:"vibrant",label:"Vibrant",icon:"\u{1F308}"},{key:"mono",label:"Mono",icon:"\u25D0"},{key:"sepia",label:"Sepia",icon:"\u2615"},{key:"vintage",label:"Vintage",icon:"\u{1F39E}"},{key:"noir",label:"Noir",icon:"\u{1F311}"},{key:"cool",label:"Cool",icon:"\u2744"},{key:"warm",label:"Warm",icon:"\u2600"},{key:"fade",label:"Fade",icon:"\u{1F32B}"}].map(e=><P key={e.key}onPress={()=>{R("light"),te(),Ut(e.key)}}style={[t.modeChip,Z===e.key&&t.modeChipActive]}>
+                        <F style={[t.modeChipIconText,Z===e.key&&{color:M.white}]}>
+                          {e.icon}
+                        </F>
+                        <F style={[t.modeChipText,Z===e.key&&t.modeChipTextActive]}>
+                          {e.label}
+                        </F>
+                      </P>)}
+
+                    <C style={t.subDivider}/>
+
+                    
+                    <P onPress={()=>{R("light"),te(),Ot(e=>!e)}}style={[t.modeChip,xe&&t.modeChipActive]}>
+                      <F style={[t.modeChipIconText,xe&&{color:M.white}]}>
+                        🛡
+                      </F>
+                      <F style={[t.modeChipText,xe&&t.modeChipTextActive]}>
+                        QA Bar {xe?"ON":"OFF"}
+                      </F>
+                    </P>
+
+                    
+                    <P onPress={()=>{R("light"),Dt(e=>!e)}}style={[t.modeChip,ue&&t.modeChipActive]}>
+                      <Wo size={13}color={ue?M.white:"rgba(255,255,255,0.8)"}/>
+                      <F style={[t.modeChipText,ue&&t.modeChipTextActive]}>
+                        Grid 3×3
+                      </F>
+                    </P>
+
+                    <C style={t.subDivider}/>
+
+                    
+                    {[{key:"brightness",label:"Brightness",icon:"\u2600"},{key:"contrast",label:"Contrast",icon:"\u25D0"},{key:"saturation",label:"Saturation",icon:"\u{1F3A8}"},{key:"warmth",label:"Warmth",icon:"\u{1F525}"},{key:"exposure",label:"Exposure",icon:"\u26A1"},{key:"vignette",label:"Vignette",icon:"\u25CE"}].map(e=><P key={e.key}onPress={()=>{R("light"),Ni(e.key)}}style={[t.modeChip,Fe===e.key&&t.modeChipActive]}>
+                        <F style={[t.modeChipIconText,Fe===e.key&&{color:M.white}]}>
+                          {e.icon}
+                        </F>
+                        <F style={[t.modeChipText,Fe===e.key&&t.modeChipTextActive]}>
+                          {e.label}
+                        </F>
+                      </P>)}
+                    <C style={t.subDivider}/>
+                    <P onPress={()=>{R("medium"),te(),Ut("none"),Ot(!1),Ft({brightness:0,contrast:0,saturation:0,warmth:0,exposure:0,vignette:0}),H(z("mediaGallery.resetAdjustments","Adjustments Reset"))}}style={t.modeChip}>
+                      <Di size={12}color="rgba(255,255,255,0.7)"/>
+                      <F style={t.modeChipText}>Reset</F>
+                    </P>
+                  </>:B==="crop"?<>
+                    {["free","1:1","4:3","16:9","9:16","3:2"].map(e=><P key={e}onPress={()=>{R("light"),qt(e);const o=Ht(e,ke,Se);kt(o)}}style={[t.modeChip,zo===e&&t.modeChipActive]}>
+                        <F style={[t.modeChipText,zo===e&&t.modeChipTextActive]}>
+                          {e==="free"?"Free":e}
+                        </F>
+                      </P>)}
+                    <C style={t.subDivider}/>
+                    
+                    <P onPress={()=>{R("light"),te(),ve(e=>(e+90)%360)}}style={t.modeChip}>
+                      <Er size={13}color="rgba(255,255,255,0.8)"/>
+                      <F style={t.modeChipText}>Rotate 90°</F>
+                    </P>
+                    
+                    <P onPress={()=>{R("light"),te(),Xt(e=>!e)}}style={[t.modeChip,fe&&t.modeChipActive]}>
+                      <F style={[t.modeChipIconText,fe&&{color:M.white}]}>
+                        ⇄
+                      </F>
+                      <F style={[t.modeChipText,fe&&t.modeChipTextActive]}>
+                        Flip H
+                      </F>
+                    </P>
+                    
+                    <P onPress={()=>{R("light"),te(),Yt(e=>!e)}}style={[t.modeChip,we&&t.modeChipActive]}>
+                      <F style={[t.modeChipIconText,we&&{color:M.white}]}>
+                        ⇅
+                      </F>
+                      <F style={[t.modeChipText,we&&t.modeChipTextActive]}>
+                        Flip V
+                      </F>
+                    </P>
+                    
+                    <P onPress={()=>{R("light"),Dt(e=>!e)}}style={[t.modeChip,ue&&t.modeChipActive]}>
+                      <Wo size={13}color={ue?M.white:"rgba(255,255,255,0.8)"}/>
+                      <F style={[t.modeChipText,ue&&t.modeChipTextActive]}>
+                        Grid 3×3
+                      </F>
+                    </P>
+                    <C style={t.subDivider}/>
+                    <P onPress={ai}style={t.applyActionBtn}>
+                      <F style={t.applyActionText}>Apply</F>
+                    </P>
+                    <P onPress={()=>U("none")}style={t.cancelActionBtn}>
+                      <F style={t.cancelActionText}>Cancel</F>
+                    </P>
+                  </>:B==="text"?<>
+                    <P onPress={()=>Bo()}style={t.modeChipActive}>
+                      <F style={t.modeChipTextActive}>+ Custom Note</F>
+                    </P>
+
+                    <C style={t.subDivider}/>
+
+                    
+                    {[{label:"\u{1F41E} BUG",color:"#EF4444"},{label:"\u26A0\uFE0F OVERFLOW",color:"#F59E0B"},{label:"\u26A1 SLOW >3s",color:"#8B5CF6"},{label:"\u{1F6AB} API 500",color:"#DC2626"},{label:"\u{1F4A5} CRASH",color:"#991B1B"}].map(e=><P key={e.label}onPress={()=>{R("light"),te(),Ee(o=>[...o,{id:`text_${Date.now()}_${Math.random()}`,text:e.label,x:ho?.x??.35,y:ho?.y??.35,color:"#FFFFFF",bgColor:e.color,fontSize:13}]),H(z("mediaGallery.tagPlaced",`Placed tag: ${e.label}`))}}style={[t.modeChip,{borderColor:e.color,backgroundColor:`${e.color}26`}]}>
+                        <F style={[t.modeChipText,{color:e.color,fontWeight:"700"}]}>
+                          {e.label}
+                        </F>
+                      </P>)}
+
+                    <C style={t.subDivider}/>
+
+                    {Li.map(e=><P key={e}onPress={()=>{R("light"),No(e)}}style={[t.colorDot,{backgroundColor:e},Ce===e&&t.colorDotActive]}/>)}
+                    {Te.length>0&&<>
+                        <C style={t.subDivider}/>
+                        <P onPress={()=>{R("medium"),te(),Ee([])}}style={[t.modeChip,{backgroundColor:"rgba(239, 68, 68, 0.2)"}]}>
+                          <F style={[t.modeChipText,{color:M.rose500}]}>
+                            Clear All ({Te.length})
+                          </F>
+                        </P>
+                      </>}
+                  </>:<>
+                    <P onPress={()=>{R("light"),U("draw"),Ue("brush")}}style={t.modeChip}>
+                      <Vo size={14}color="rgba(255,255,255,0.7)"/>
+                      <F style={t.modeChipText}>Markup</F>
+                    </P>
+                    <P onPress={()=>{R("light");const e=Ht("free",ke,Se);kt(e),qt("free"),U("crop")}}style={t.modeChip}>
+                      <Ii size={14}color="rgba(255,255,255,0.7)"/>
+                      <F style={t.modeChipText}>Crop</F>
+                    </P>
+                    <P onPress={()=>{R("light"),U("adjust")}}style={t.modeChip}>
+                      <Vi size={14}color="rgba(255,255,255,0.7)"/>
+                      <F style={t.modeChipText}>Adjust</F>
+                    </P>
+                    <P onPress={()=>{R("light"),U("text"),H(z("mediaGallery.tapToAddText","Tap anywhere on the image to add text"))}}style={t.modeChip}>
+                      <Hi size={14}color="rgba(255,255,255,0.7)"/>
+                      <F style={t.modeChipText}>Add Text</F>
+                    </P>
+                  </>}
+              </Ti>
+            </C>}
+
+          
+          <C style={t.studioToolbar}>
+            {(ee?cr:ur).map(e=>{const o=B===e.key;return<Bt key={e.key}onPress={()=>{if(R("light"),e.key==="crop"){const i=Ht("free",ke,Se);kt(i),qt("free"),U("crop")}else e.key==="text"?(U("text"),H(z("mediaGallery.tapToAddText","Tap anywhere on the image to add text"))):U(e.key)}}style={[t.studioToolItem,o&&t.studioToolItemActive]}>
+                  {e.icon(o)}
+                  <F style={[t.studioToolLabel,o&&t.studioToolLabelActive]}>
+                    {e.label}
+                  </F>
+                  {"hasBadge"in e&&e.hasBadge&&<C style={t.studioTabBadgeDot}/>}
+                </Bt>})}
+          </C>
+        </C>
+      </C>
+    </C>
 
       
-      <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>
+      <Ci visible={_i}transparent={!0}animationType="fade"onRequestClose={()=>Jt(!1)}>
+        <C style={t.textModalBackdrop}>
+          <C style={t.textModalCard}>
+            <F style={t.textModalTitle}>
+              Add Text Note / Callout
+            </F>
+            <Cr style={t.textModalInput}placeholder="e.g. Defect: Button overlap"placeholderTextColor="rgba(255,255,255,0.4)"value={so}onChangeText={lo}autoFocus={!0}multiline={!0}/>
+            <C style={t.textModalActions}>
+              <P onPress={()=>Jt(!1)}style={t.modalCancelBtn}>
+                <F style={t.modalCancelText}>Cancel</F>
+              </P>
+              <P onPress={sr}style={t.modalConfirmBtn}>
+                <F style={t.modalConfirmText}>Place Text</F>
+              </P>
+            </C>
+          </C>
+        </C>
+      </Ci>
 
       
-      <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}});
+      <Sr visible={Ne}title={z("mediaGallery.deleteTitle","Delete Media?")}message={z("mediaGallery.deleteMessage",{filename:r.filename})}confirmText={z("mediaGallery.delete","Delete")}cancelText={z("common.cancel","Cancel")}isDestructive={!0}icon="trash"onConfirm={()=>{qe(!1),It(r),Me()}}onCancel={()=>qe(!1)}/>
+    </Ci>};const t=L.create({modalBackdrop:{flex:1,backgroundColor:"rgba(0, 0, 0, 0.70)",justifyContent:"flex-end",zIndex:999999,elevation:999999},modalBackdropPressable:{...L.absoluteFillObject},modalContentCard:{backgroundColor:"#070A14",borderTopLeftRadius:20,borderTopRightRadius:20,overflow:"hidden",shadowColor:M.black,shadowOffset:{width:0,height:-4},shadowOpacity:.25,shadowRadius:10,elevation:16},header:{width:"100%",zIndex:10,borderBottomWidth:L.hairlineWidth,borderBottomColor:"rgba(255, 255, 255, 0.12)"},headerInner:{width:"100%",flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:12,paddingTop:6,paddingBottom:8,minHeight:48},headerLeft:{flexDirection:"row",alignItems:"center",gap:8,flex:1,minWidth:0,marginRight:6},headerTextCol:{flex:1,minWidth:0,justifyContent:"center"},headerTitleRow:{flexDirection:"row",alignItems:"center",gap:6},title:{fontFamily:E.interBold,fontSize:13,color:M.white,letterSpacing:-.1,flexShrink:1},formatBadge:{backgroundColor:"rgba(255, 255, 255, 0.18)",paddingHorizontal:5,paddingVertical:1.5,borderRadius:4,borderWidth:L.hairlineWidth,borderColor:"rgba(255, 255, 255, 0.25)"},formatBadgeText:{fontFamily:E.interBold,fontSize:8.5,color:M.white,letterSpacing:.4},headerSubtitleRow:{flexDirection:"row",alignItems:"center",gap:4,marginTop:1},subtitleDim:{fontFamily:E.interMedium,fontSize:10,color:"rgba(255, 255, 255, 0.85)"},subtitleDot:{fontSize:10,color:"rgba(255, 255, 255, 0.45)"},subtitleSize:{fontFamily:E.interBold,fontSize:10,color:"#38BDF8"},headerBackBtn:{width:32,height:32,borderRadius:16,alignItems:"center",justifyContent:"center",backgroundColor:"rgba(255, 255, 255, 0.12)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.18)"},headerRight:{flexDirection:"row",alignItems:"center",gap:6,flexShrink:0},undoRedoGroup:{flexDirection:"row",alignItems:"center",backgroundColor:"rgba(255, 255, 255, 0.12)",borderRadius:8,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.18)",height:30,overflow:"hidden"},undoHalfBtn:{paddingHorizontal:8,height:"100%",alignItems:"center",justifyContent:"center"},redoHalfBtn:{paddingHorizontal:8,height:"100%",alignItems:"center",justifyContent:"center"},undoDivider:{width:1,height:14,backgroundColor:"rgba(255, 255, 255, 0.2)"},actionDisabled:{opacity:.35},headerMoreBtn:{width:30,height:30,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.12)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.18)",alignItems:"center",justifyContent:"center"},headerSaveBtn:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:"#059669",borderRadius:8,borderWidth:1,borderColor:"rgba(52, 211, 153, 0.45)",paddingHorizontal:11,height:30},headerSaveText:{fontFamily:E.interBold,fontSize:11,color:M.white},headerExportBtn:{flexDirection:"row",alignItems:"center",gap:5,backgroundColor:"#0284C7",borderRadius:8,borderWidth:1,borderColor:"rgba(56, 189, 248, 0.5)",paddingHorizontal:10,height:30},headerExportText:{fontFamily:E.interBold,fontSize:11,color:M.white},headerActionBtn:{width:30,height:30,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.08)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.12)",alignItems:"center",justifyContent:"center"},moreMenuDropdown:{position:"absolute",top:52,right:12,backgroundColor:"#0F172A",borderRadius:12,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.18)",padding:6,zIndex:100,elevation:12,shadowColor:M.black,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:8,minWidth:160},moreMenuItem:{flexDirection:"row",alignItems:"center",gap:8,paddingVertical:8,paddingHorizontal:10,borderRadius:8},moreMenuItemDestructive:{borderTopWidth:L.hairlineWidth,borderTopColor:"rgba(255, 255, 255, 0.1)",marginTop:4,paddingTop:8},moreMenuItemText:{fontFamily:E.interMedium,fontSize:12,color:M.white},stageWrapper:{flex:1,width:"100%",backgroundColor:"#03050A",paddingHorizontal:8,paddingTop:8,paddingBottom:4,minHeight:0},previewCard:{flex:1,width:"100%",borderRadius:12,overflow:"hidden",backgroundColor:"#03050A",alignItems:"center",justifyContent:"center",position:"relative"},canvasContainer:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center",position:"relative"},imageCanvasWrapper:{position:"relative",alignItems:"center",justifyContent:"center"},instagramGridOverlay:{...L.absoluteFillObject,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.45)",zIndex:15},instagramGridHLine:{position:"absolute",left:0,right:0,height:1,backgroundColor:"rgba(255, 255, 255, 0.45)",shadowColor:"#000000",shadowOpacity:.6,shadowRadius:1,shadowOffset:{width:0,height:.5}},instagramGridVLine:{position:"absolute",top:0,bottom:0,width:1,backgroundColor:"rgba(255, 255, 255, 0.45)",shadowColor:"#000000",shadowOpacity:.6,shadowRadius:1,shadowOffset:{width:.5,height:0}},image:{width:"100%",height:"100%"},stageTopLeftBadge:{position:"absolute",top:12,left:12,flexDirection:"row",alignItems:"center",gap:6,backgroundColor:"rgba(10, 15, 29, 0.88)",paddingHorizontal:10,paddingVertical:5,borderRadius:12,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.12)",zIndex:20},badgeGlowDot:{width:7,height:7,borderRadius:3.5,backgroundColor:"#38BDF8",shadowColor:"#38BDF8",shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:4},badgeGlowText:{fontFamily:E.interSemiBold,fontSize:10.5,color:"rgba(255, 255, 255, 0.92)"},holdCompareBtn:{position:"absolute",bottom:12,left:12,flexDirection:"row",alignItems:"center",gap:6,backgroundColor:"rgba(10, 15, 29, 0.90)",paddingHorizontal:12,paddingVertical:7,borderRadius:14,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.15)",shadowColor:M.black,shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4,zIndex:20},holdCompareBtnPressed:{backgroundColor:M.indigo600,borderColor:M.indigo400},holdCompareText:{fontFamily:E.interSemiBold,fontSize:11,color:M.white},floatingZoomBar:{position:"absolute",right:12,bottom:12,backgroundColor:"rgba(10, 15, 29, 0.92)",borderRadius:22,borderWidth:1.2,borderColor:"rgba(255, 255, 255, 0.16)",paddingVertical:5,paddingHorizontal:5,alignItems:"center",gap:4,shadowColor:M.black,shadowOffset:{width:0,height:4},shadowOpacity:.5,shadowRadius:10,elevation:12,zIndex:35},zoomBtn:{width:28,height:28,borderRadius:14,backgroundColor:"rgba(255, 255, 255, 0.10)",alignItems:"center",justifyContent:"center"},zoomLevelBadge:{paddingHorizontal:4,paddingVertical:3},zoomLevelText:{fontFamily:E.interBold,fontSize:9.5,color:"#38BDF8",letterSpacing:.2},videoImageOverlay:{...L.absoluteFillObject,backgroundColor:"rgba(10, 13, 20, 0.28)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:M.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:E.interSemiBold,fontSize:15,color:M.white,marginTop:12},videoFallbackSubtitle:{fontFamily:E.interRegular,fontSize:12,color:"rgba(255, 255, 255, 0.6)",marginTop:4},modernCenterPlayBtn:{position:"absolute",width:60,height:60,borderRadius:30,backgroundColor:"rgba(15, 23, 42, 0.78)",borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.45)",alignItems:"center",justifyContent:"center",shadowColor:M.black,shadowOffset:{width:0,height:4},shadowOpacity:.6,shadowRadius:10,elevation:12,zIndex:25},videoFloatingHud:{position:"absolute",bottom:12,left:12,right:12,backgroundColor:"rgba(10, 15, 29, 0.88)",borderRadius:14,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.16)",flexDirection:"row",alignItems:"center",paddingHorizontal:12,paddingVertical:8,gap:10,shadowColor:M.black,shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:6,elevation:6,zIndex:20},videoHudProgressBar:{flex:1,height:4,backgroundColor:"rgba(255, 255, 255, 0.15)",borderRadius:2,position:"relative",overflow:"hidden"},videoHudProgressFill:{position:"absolute",top:0,bottom:0,backgroundColor:"#38BDF8",borderRadius:2},videoHudTimeText:{fontFamily:E.interBold,fontSize:10.5,color:M.white,letterSpacing:.2},videoHudBadge:{backgroundColor:"rgba(255, 255, 255, 0.12)",paddingHorizontal:5,paddingVertical:2,borderRadius:6},videoHudBadgeText:{fontFamily:E.interBold,fontSize:9,color:"#C084FC"},filmstripScroll:{flexDirection:"row",alignItems:"center",gap:6,paddingVertical:2},filmstripThumbItem:{width:48,height:48,borderRadius:8,borderWidth:1.5,borderColor:"rgba(255, 255, 255, 0.2)",overflow:"hidden",position:"relative",backgroundColor:"#0F172A"},filmstripThumbActive:{borderColor:"#38BDF8",borderWidth:2,transform:[{scale:1.05}]},filmstripThumbImg:{width:"100%",height:"100%"},filmstripThumbTime:{position:"absolute",bottom:2,right:2,backgroundColor:"rgba(0, 0, 0, 0.75)",paddingHorizontal:3,paddingVertical:1,borderRadius:3,fontFamily:E.interBold,fontSize:7.5,color:M.white},bottomControlsContainer:{width:"100%",backgroundColor:"#070A14",paddingHorizontal:8,paddingTop:6,paddingBottom:io.OS==="ios"?24:12,borderTopWidth:L.hairlineWidth,borderTopColor:"rgba(255, 255, 255, 0.08)",gap:6},contextToolPanel:{width:"100%",backgroundColor:"rgba(10, 15, 29, 0.96)",borderRadius:16,paddingVertical:9,paddingHorizontal:12,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.12)",gap:8},panelHeaderRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",width:"100%"},panelHeaderLeft:{flexDirection:"row",alignItems:"center",gap:7},panelGlowDot:{width:7,height:7,borderRadius:3.5,backgroundColor:"#818CF8",shadowColor:"#818CF8",shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:4},panelHeaderTitle:{fontFamily:E.interBold,fontSize:11,color:M.white,letterSpacing:.6},panelValueBadge:{backgroundColor:"rgba(2, 132, 199, 0.22)",paddingHorizontal:8,paddingVertical:3,borderRadius:8,borderWidth:1,borderColor:"rgba(56, 189, 248, 0.45)"},panelValueText:{fontFamily:E.interBold,fontSize:10.5,color:"#38BDF8"},sliderRowContainer:{flexDirection:"row",alignItems:"center",width:"100%",gap:8,paddingHorizontal:2},sliderMinIndicator:{fontSize:10,color:"rgba(255, 255, 255, 0.5)"},sliderMaxIndicator:{fontSize:12,color:"rgba(255, 255, 255, 0.85)"},sliderTrackTouchable:{flex:1,height:36,justifyContent:"center"},sliderTrackBg:{width:"100%",height:4,backgroundColor:"rgba(255, 255, 255, 0.14)",borderRadius:2,position:"relative",justifyContent:"center"},sliderFillTrack:{height:4,backgroundColor:"#0284C7",borderRadius:2},sliderThumbHandle:{position:"absolute",width:20,height:20,borderRadius:10,backgroundColor:"#38BDF8",marginLeft:-10,alignItems:"center",justifyContent:"center",shadowColor:"#38BDF8",shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:6,elevation:6},sliderThumbInnerGlow:{width:8,height:8,borderRadius:4,backgroundColor:M.white},modeChipsScroll:{flexDirection:"row",alignItems:"center",gap:8,paddingTop:2},modeChip:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:12,paddingVertical:6,borderRadius:10,backgroundColor:"rgba(255, 255, 255, 0.08)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.12)"},modeChipActive:{flexDirection:"row",alignItems:"center",gap:6,paddingHorizontal:12,paddingVertical:6,borderRadius:10,backgroundColor:"rgba(2, 132, 199, 0.28)",borderColor:"#38BDF8",borderWidth:1.2},modeChipText:{fontFamily:E.interSemiBold,fontSize:11,color:"rgba(255, 255, 255, 0.75)"},modeChipTextActive:{color:M.white,fontFamily:E.interBold,fontSize:11},modeChipIconText:{fontSize:13,color:"rgba(255, 255, 255, 0.7)",marginRight:1},subDivider:{width:1,height:18,backgroundColor:"rgba(255, 255, 255, 0.16)",marginHorizontal:4},colorDot:{width:22,height:22,borderRadius:11,borderWidth:2,borderColor:"rgba(255, 255, 255, 0.3)"},colorDotActive:{borderColor:M.white,transform:[{scale:1.25}]},actionPillBtn:{flexDirection:"row",alignItems:"center",gap:5,paddingHorizontal:10,paddingVertical:6,borderRadius:10,backgroundColor:"rgba(255, 255, 255, 0.10)"},actionPillText:{fontFamily:E.interSemiBold,fontSize:10.5,color:M.white},applyActionBtn:{backgroundColor:M.emerald600,paddingHorizontal:14,paddingVertical:6,borderRadius:10},applyActionText:{fontFamily:E.interBold,fontSize:11.5,color:M.white},cancelActionBtn:{backgroundColor:"rgba(255, 255, 255, 0.14)",paddingHorizontal:12,paddingVertical:6,borderRadius:10},cancelActionText:{fontFamily:E.interSemiBold,fontSize:11.5,color:"rgba(255, 255, 255, 0.85)"},studioToolbar:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",backgroundColor:"rgba(15, 20, 36, 0.95)",borderRadius:16,paddingVertical:4,paddingHorizontal:5,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.08)",gap:4},studioToolItem:{flex:1,flexDirection:"column",alignItems:"center",justifyContent:"center",gap:3,paddingVertical:7,paddingHorizontal:4,borderRadius:12,borderWidth:1,borderColor:"transparent",position:"relative"},studioToolItemActive:{backgroundColor:"rgba(2, 132, 199, 0.22)",borderColor:"#38BDF8",borderWidth:1.2},studioToolLabel:{fontFamily:E.interSemiBold,fontSize:10,color:"rgba(255, 255, 255, 0.60)",letterSpacing:.1},studioToolLabelActive:{color:"#38BDF8",fontFamily:E.interBold},studioTabBadgeDot:{position:"absolute",top:6,right:12,width:5,height:5,borderRadius:2.5,backgroundColor:"#C084FC"},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:M.black,shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},textAnnotationText:{fontFamily:E.interBold,fontSize:11},textDeleteBtn:{width:14,height:14,borderRadius:7,backgroundColor:"rgba(0, 0, 0, 0.45)",alignItems:"center",justifyContent:"center"},cropOverlayMask:{...L.absoluteFillObject,zIndex:100,elevation:100},cropDimMask:{position:"absolute",backgroundColor:"rgba(0, 0, 0, 0.58)"},cropBoxFrame:{position:"absolute",borderWidth:2,borderStyle:"solid",borderColor:"#FFFFFF",backgroundColor:"rgba(56, 189, 248, 0.08)",shadowColor:M.black,shadowOffset:{width:0,height:0},shadowOpacity:.9,shadowRadius:5,elevation:10},cropGridH:{position:"absolute",left:0,right:0,height:1,backgroundColor:"rgba(255, 255, 255, 0.45)"},cropGridV:{position:"absolute",top:0,bottom:0,width:1,backgroundColor:"rgba(255, 255, 255, 0.45)"},cropCornerBracket:{position:"absolute",width:20,height:20,borderColor:"#FFFFFF",shadowColor:M.black,shadowOffset:{width:0,height:1},shadowOpacity:.8,shadowRadius:3,elevation:6},bracketTL:{top:-3,left:-3,borderTopWidth:4,borderLeftWidth:4},bracketTR:{top:-3,right:-3,borderTopWidth:4,borderRightWidth:4},bracketBL:{bottom:-3,left:-3,borderBottomWidth:4,borderLeftWidth:4},bracketBR:{bottom:-3,right:-3,borderBottomWidth:4,borderRightWidth:4},cropEdgeBarTop:{position:"absolute",top:-3,left:"50%",marginLeft:-18,width:36,height:5,backgroundColor:"#FFFFFF",borderRadius:2.5},cropEdgeBarBottom:{position:"absolute",bottom:-3,left:"50%",marginLeft:-18,width:36,height:5,backgroundColor:"#FFFFFF",borderRadius:2.5},cropEdgeBarLeft:{position:"absolute",left:-3,top:"50%",marginTop:-18,width:5,height:36,backgroundColor:"#FFFFFF",borderRadius:2.5},cropEdgeBarRight:{position:"absolute",right:-3,top:"50%",marginTop:-18,width:5,height:36,backgroundColor:"#FFFFFF",borderRadius:2.5},cropHandleTouchArea:{position:"absolute",width:44,height:44,alignItems:"center",justifyContent:"center",zIndex:30},handleAreaTL:{top:-22,left:-22},handleAreaTR:{top:-22,right:-22},handleAreaBL:{bottom:-22,left:-22},handleAreaBR:{bottom:-22,right:-22},cropEdgeTouchAreaTop:{position:"absolute",top:-20,left:"25%",right:"25%",height:40,alignItems:"center",justifyContent:"center",zIndex:25},cropEdgeTouchAreaBottom:{position:"absolute",bottom:-20,left:"25%",right:"25%",height:40,alignItems:"center",justifyContent:"center",zIndex:25},cropEdgeTouchAreaLeft:{position:"absolute",left:-20,top:"25%",bottom:"25%",width:40,alignItems:"center",justifyContent:"center",zIndex:25},cropEdgeTouchAreaRight:{position:"absolute",right:-20,top:"25%",bottom:"25%",width:40,alignItems:"center",justifyContent:"center",zIndex:25},cropCancelBtn:{position:"absolute",top:14,left:14,width:38,height:38,borderRadius:19,backgroundColor:"#DC2626",borderWidth:2,borderColor:M.white,alignItems:"center",justifyContent:"center",shadowColor:M.black,shadowOffset:{width:0,height:4},shadowOpacity:.6,shadowRadius:8,elevation:16,zIndex:200},cropConfirmBtn:{position:"absolute",top:14,right:14,width:38,height:38,borderRadius:19,backgroundColor:"#10B981",borderWidth:2,borderColor:M.white,alignItems:"center",justifyContent:"center",shadowColor:M.black,shadowOffset:{width:0,height:4},shadowOpacity:.6,shadowRadius:8,elevation:16,zIndex:200},textModalBackdrop:{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:E.interBold,fontSize:14,color:M.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:E.interRegular,fontSize:13,color:M.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:E.interSemiBold,fontSize:12,color:"rgba(255, 255, 255, 0.7)"},modalConfirmBtn:{paddingHorizontal:16,paddingVertical:8,borderRadius:8,backgroundColor:M.indigo600},modalConfirmText:{fontFamily:E.interBold,fontSize:12,color:M.white},watermarkOverlay:{position:"absolute",bottom:0,left:0,right:0,backgroundColor:"rgba(3, 7, 18, 0.85)",paddingHorizontal:10,paddingVertical:5,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderTopWidth:L.hairlineWidth,borderTopColor:"rgba(255, 255, 255, 0.2)"},watermarkText:{fontFamily:E.interBold,fontSize:9.5,color:"#38BDF8",letterSpacing:.2},watermarkTime:{fontFamily:E.interSemiBold,fontSize:9.5,color:"#94A3B8"},moreMenuItemIconText:{fontSize:14}});