react-native-inapp-inspector 2.4.2 → 2.5.0

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

@@ -1,150 +1,372 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(e,o,a,i){i===void 0&&(i=a);var r=Object.getOwnPropertyDescriptor(o,a);(!r||("get"in r?!o.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return o[a]}}),Object.defineProperty(e,i,r)}):(function(e,o,a,i){i===void 0&&(i=a),e[i]=o[a]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(e,o){Object.defineProperty(e,"default",{enumerable:!0,value:o})}):function(e,o){e.default=o}),__importStar=this&&this.__importStar||(function(){var e=function(o){return e=Object.getOwnPropertyNames||function(a){var i=[];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(i[i.length]=r);return i},e(o)};return function(o){if(o&&o.__esModule)return o;var a={};if(o!=null)for(var i=e(o),r=0;r<i.length;r++)i[r]!=="default"&&__createBinding(a,o,i[r]);return __setModuleDefault(a,o),a}})(),__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MediaPreviewModal=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_linear_gradient_1=__importDefault(require("react-native-linear-gradient")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),TouchableScale_1=__importDefault(require("../TouchableScale")),ConfirmationModal_1=require("./ConfirmationModal"),NetworkIcons_1=require("../NetworkIcons"),capture_1=require("../../capture"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),i18n_1=require("../../i18n"),NativeInspector_1=require("../../native/NativeInspector"),MediaPreviewModal=({item:e,visible:o,onClose:a,onDelete:i,onConvertToGif:r})=>{const{t}=(0,i18n_1.useTranslation)(),[u,y]=(0,react_1.useState)(!1),[_,h]=(0,react_1.useState)(!1),[s,v]=(0,react_1.useState)(!1),[m,g]=(0,react_1.useState)(!1),[T,p]=(0,react_1.useState)(!1);if(!e)return null;const c=()=>{e?.uri&&(0,helpers_1.copyImageOrMediaToClipboard)(e.uri,e.type==="image"?"Image":"Media")},b=async()=>{try{g(!0),await capture_1.ScreenCapture.playVideo(e.uri)}catch{(0,toast_1.showToast)(t("mediaGallery.playError","Unable to play video"))}finally{g(!1)}},f=()=>{(0,NativeInspector_1.triggerNativeHaptic)("medium"),p(!0)},x=async()=>{if(r){y(!0);try{await r(e),(0,toast_1.showToast)(t("mediaGallery.convertedSuccess"))}catch{(0,toast_1.showToast)(t("mediaGallery.convertFailed"))}finally{y(!1)}}},w=async()=>{try{const d=e.uri.startsWith("file://")||e.uri.startsWith("content://")||e.uri.startsWith("http")?e.uri:`file://${e.uri}`,A=react_native_1.Platform.select({ios:{url:d,title:e.filename},default:{title:e.filename,message:e.filename,url:d}});(await react_native_1.Share.share(A)).action===react_native_1.Share.sharedAction&&(0,toast_1.showToast)(t("mediaGallery.shareSuccess","Shared successfully"))}catch(d){d?.message!=="User did not share"&&(0,toast_1.showToast)(t("mediaGallery.shareUnavailable","Sharing not available on this device"))}},l=e.type==="video",C=e.type==="gif",n=e.durationMs?(e.durationMs/1e3).toFixed(1):null,S=n?`00:${Number(n)<10?"0":""}${n}`:null;return<react_native_1.Modal visible={o}transparent={!0}animationType="fade"statusBarTranslucent={!0}onRequestClose={a}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(o,h,w,m){m===void 0&&(m=w);var y=Object.getOwnPropertyDescriptor(h,w);(!y||("get"in y?!h.__esModule:y.writable||y.configurable))&&(y={enumerable:!0,get:function(){return h[w]}}),Object.defineProperty(o,m,y)}):(function(o,h,w,m){m===void 0&&(m=w),o[m]=h[w]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(o,h){Object.defineProperty(o,"default",{enumerable:!0,value:h})}):function(o,h){o.default=h}),__importStar=this&&this.__importStar||(function(){var o=function(h){return o=Object.getOwnPropertyNames||function(w){var m=[];for(var y in w)Object.prototype.hasOwnProperty.call(w,y)&&(m[m.length]=y);return m},o(h)};return function(h){if(h&&h.__esModule)return h;var w={};if(h!=null)for(var m=o(h),y=0;y<m.length;y++)m[y]!=="default"&&__createBinding(w,h,m[y]);return __setModuleDefault(w,h),w}})(),__importDefault=this&&this.__importDefault||function(o){return o&&o.__esModule?o:{default:o}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MediaPreviewModal=void 0;const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_linear_gradient_1=__importDefault(require("react-native-linear-gradient")),react_native_svg_1=__importStar(require("react-native-svg")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),TouchableScale_1=__importDefault(require("../TouchableScale")),ConfirmationModal_1=require("./ConfirmationModal"),NetworkIcons_1=require("../NetworkIcons"),capture_1=require("../../capture"),editor_1=require("../../editor"),helpers_1=require("../../helpers"),toast_1=require("../../helpers/toast"),i18n_1=require("../../i18n"),NativeInspector_1=require("../../native/NativeInspector"),COLOR_PALETTE=["#EF4444","#F59E0B","#38BDF8","#10B981","#A855F7","#FFFFFF","#0F172A"],MediaPreviewModal=({item:o,visible:h,onClose:w,onDelete:m,onConvertToGif:y})=>{const{t:n}=(0,i18n_1.useTranslation)(),[de,he]=(0,react_1.useState)(!1),[P,v]=(0,react_1.useState)(!1),[Be,F]=(0,react_1.useState)(null),[Me,O]=(0,react_1.useState)(o?.width),[Re,I]=(0,react_1.useState)(o?.height),[ze,D]=(0,react_1.useState)(o?.sizeBytes),[Ve,J]=(0,react_1.useState)(o?.durationMs),[Pe,Q]=(0,react_1.useState)(!1),[Fe,pe]=(0,react_1.useState)(!1),[Oe,ee]=(0,react_1.useState)(!1),[l,S]=(0,react_1.useState)("none"),[ue,N]=(0,react_1.useState)(1),[$,ge]=(0,react_1.useState)(0),[te,Ie]=(0,react_1.useState)("free"),[i,T]=(0,react_1.useState)({x:.1,y:.15,width:.8,height:.7}),[A,ye]=(0,react_1.useState)("#EF4444"),[j,De]=(0,react_1.useState)(4),[E,q]=(0,react_1.useState)([]),[oe,U]=(0,react_1.useState)(null),[ht,$e]=(0,react_1.useState)("rect"),[He,ie]=(0,react_1.useState)([]),[We,X]=(0,react_1.useState)([]),[Le,G]=(0,react_1.useState)(!1),[be,fe]=(0,react_1.useState)(null),[Y,Z]=(0,react_1.useState)(""),[Ee,ae]=(0,react_1.useState)([]),pt=(0,react_1.useRef)(null),[we,me]=(0,react_1.useState)({width:react_native_1.Dimensions.get("window").width-16,height:react_native_1.Dimensions.get("window").height*.72,pageX:0,pageY:0}),z=(0,react_1.useRef)(l);z.current=l;const Te=(0,react_1.useRef)(A);Te.current=A;const Ce=(0,react_1.useRef)(j);Ce.current=j;const xe=(0,react_1.useRef)(i);xe.current=i;const re=(0,react_1.useRef)(we);re.current=we;const Ge=(0,react_1.useRef)(react_native_1.PanResponder.create({onStartShouldSetPanResponder:()=>z.current==="draw",onMoveShouldSetPanResponder:()=>z.current==="draw",onPanResponderGrant:e=>{const{locationX:t,locationY:a}=e.nativeEvent;U([{x:t,y:a}])},onPanResponderMove:e=>{const{locationX:t,locationY:a}=e.nativeEvent;U(g=>g?[...g,{x:t,y:a}]:[{x:t,y:a}])},onPanResponderRelease:()=>{U(e=>(e&&e.length>1&&q(t=>[...t,{id:`stroke_${Date.now()}_${Math.random()}`,points:e,color:Te.current,strokeWidth:Ce.current}]),null))}})).current,K=(0,react_1.useRef)({mode:"none",startX:0,startY:0,origBox:{x:.08,y:.1,width:.84,height:.75}}),Ne=(0,react_1.useRef)(react_native_1.PanResponder.create({onStartShouldSetPanResponder:()=>z.current==="crop",onStartShouldSetPanResponderCapture:()=>z.current==="crop",onMoveShouldSetPanResponder:()=>z.current==="crop",onMoveShouldSetPanResponderCapture:()=>z.current==="crop",onPanResponderTerminationRequest:()=>!1,onShouldBlockNativeResponder:()=>!0,onPanResponderGrant:e=>{const t=re.current,a=t.width>50?t.width:react_native_1.Dimensions.get("window").width-16,g=t.height>50?t.height:react_native_1.Dimensions.get("window").height*.72,{locationX:L,locationY:k}=e.nativeEvent,p=Math.max(0,Math.min(1,L/a)),d=Math.max(0,Math.min(1,k/g)),_=xe.current,B=_.x,R=_.y,s=_.x+_.width,c=_.y+_.height,b=Math.max(.08,40/a),f=Math.max(.08,40/g);let r="none";Math.abs(p-B)<=b&&Math.abs(d-R)<=f?r="tl":Math.abs(p-s)<=b&&Math.abs(d-R)<=f?r="tr":Math.abs(p-B)<=b&&Math.abs(d-c)<=f?r="bl":Math.abs(p-s)<=b&&Math.abs(d-c)<=f?r="br":Math.abs(d-R)<=f&&p>=B&&p<=s?r="top":Math.abs(d-c)<=f&&p>=B&&p<=s?r="bottom":Math.abs(p-B)<=b&&d>=R&&d<=c?r="left":Math.abs(p-s)<=b&&d>=R&&d<=c?r="right":p>=B&&p<=s&&d>=R&&d<=c?r="center":r="new",K.current={mode:r,startX:p,startY:d,origBox:{..._}}},onPanResponderMove:(e,t)=>{const a=re.current,g=a.width>0?a.width:react_native_1.Dimensions.get("window").width-16,L=a.height>0?a.height:react_native_1.Dimensions.get("window").height*.7;if(!g||!L)return;const k=t.dx/g,p=t.dy/L,{mode:d,startX:_,startY:B,origBox:R}=K.current,{x:s,y:c,width:b,height:f}=R;if(d==="center"){const r=Math.max(0,Math.min(1-b,s+k)),C=Math.max(0,Math.min(1-f,c+p));T(ce=>({...ce,x:r,y:C}))}else if(d==="new"){const r=Math.max(0,Math.min(1,_+k)),C=Math.max(0,Math.min(1,B+p)),ce=Math.min(_,r),st=Math.min(B,C),ct=Math.max(.04,Math.abs(r-_)),dt=Math.max(.04,Math.abs(C-B));T({x:ce,y:st,width:ct,height:dt})}else if(d==="tl"){const r=Math.max(0,Math.min(s+b-.04,s+k)),C=Math.max(0,Math.min(c+f-.04,c+p));T({x:r,y:C,width:b-(r-s),height:f-(C-c)})}else if(d==="tr"){const r=Math.max(0,Math.min(c+f-.04,c+p)),C=Math.max(.04,Math.min(1-s,b+k));T({x:s,y:r,width:C,height:f-(r-c)})}else if(d==="bl"){const r=Math.max(0,Math.min(s+b-.04,s+k)),C=Math.max(.04,Math.min(1-c,f+p));T({x:r,y:c,width:b-(r-s),height:C})}else if(d==="br"){const r=Math.max(.04,Math.min(1-s,b+k)),C=Math.max(.04,Math.min(1-c,f+p));T({x:s,y:c,width:r,height:C})}else if(d==="top"){const r=Math.max(0,Math.min(c+f-.04,c+p));T({x:s,y:r,width:b,height:f-(r-c)})}else if(d==="bottom"){const r=Math.max(.04,Math.min(1-c,f+p));T({x:s,y:c,width:b,height:r})}else if(d==="left"){const r=Math.max(0,Math.min(s+b-.04,s+k));T({x:r,y:c,width:b-(r-s),height:f})}else if(d==="right"){const r=Math.max(.04,Math.min(1-s,b+k));T({x:s,y:c,width:r,height:f})}},onPanResponderRelease:()=>{K.current.mode="none"},onPanResponderTerminate:()=>{K.current.mode="none"}})).current;if(react_1.default.useEffect(()=>{o?.uri&&(F(o.uri),O(o.width),I(o.height),D(o.sizeBytes),J(o.durationMs),Q(!1),ge(0),N(1),S("none"),q([]),U(null),ie([]),X([]),ae([]),T({x:.08,y:.1,width:.84,height:.75}))},[o?.uri,o?.width,o?.height,o?.sizeBytes,o?.durationMs]),!o||!h)return null;const u=Be||o.uri,H=Me??o.width,W=Re??o.height,_e=ze??o.sizeBytes,ne=Ve??o.durationMs,M=o.type==="video",ve=o.type==="gif",x=o.type==="image",je=$===90||$===270?H&&W?Math.min(W/H,H/W,.75):.72:1,qe=()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),N(e=>Math.min(4,parseFloat((e+.25).toFixed(2))))},Ue=()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),N(e=>Math.max(1,parseFloat((e-.25).toFixed(2))))},Xe=()=>{(0,NativeInspector_1.triggerNativeHaptic)("medium"),N(1)},Ye=async()=>{if(!u||!x)return;(0,NativeInspector_1.triggerNativeHaptic)("light");const e=($+90)%360;if(ge(e),(0,toast_1.showToast)(n("mediaGallery.rotatedSuccess",`Rotated ${e}\xB0`)),!P){v(!0);try{const t=await editor_1.MediaEditor.editPhoto({uri:u,rotation:90});t?.uri&&(F(t.uri),t.width&&O(t.width),t.height&&I(t.height),t.size&&D(t.size))}catch{}finally{v(!1)}}},Ze=()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),q(e=>e.slice(0,-1))},Ke=()=>{(0,NativeInspector_1.triggerNativeHaptic)("medium"),q([])},Je=e=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),S("crop"),Ie(e),T(e==="1:1"?{x:.15,y:.2,width:.7,height:.7}:e==="4:3"?{x:.1,y:.2,width:.8,height:.6}:e==="16:9"?{x:.05,y:.25,width:.9,height:.506}:e==="9:16"?{x:.25,y:.1,width:.5,height:.888}:e==="3:2"?{x:.1,y:.2,width:.8,height:.533}:{x:.08,y:.1,width:.84,height:.75})},Qe=async()=>{if(!(!u||!x)){(0,NativeInspector_1.triggerNativeHaptic)("medium"),v(!0);try{const e=await editor_1.MediaEditor.cropToDefect(u,{x:i.x,y:i.y,width:i.width,height:i.height,isNormalized:!0});e?.uri&&(F(e.uri),e.width&&O(e.width),e.height&&I(e.height),e.size&&D(e.size),(0,toast_1.showToast)(n("mediaGallery.croppedSuccess","Image Cropped")),S("none"))}catch{(0,toast_1.showToast)(n("mediaGallery.cropFailed","Crop failed"))}finally{v(!1)}}},le=e=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),$e(e);const t={id:`shape_${Date.now()}`,type:e,x:.25,y:.35,width:e==="circle"?.4:.5,height:e==="circle"?.4:.25,color:A};ie(a=>[...a,t]),(0,toast_1.showToast)(n("mediaGallery.shapeAdded",`${e.toUpperCase()} Added`))},et=()=>{(0,NativeInspector_1.triggerNativeHaptic)("light");const e={id:`blur_${Date.now()}`,x:.12,y:.35,width:.76,height:.12};ae(t=>[...t,e]),(0,toast_1.showToast)(n("mediaGallery.blurAdded","Blur Mask Added"))},Se=e=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),e?(fe(e),Z(e.text)):(fe(null),Z("")),G(!0)},tt=()=>{if(!Y.trim()){G(!1);return}if(be)X(e=>e.map(t=>t.id===be.id?{...t,text:Y.trim(),color:A}:t));else{const e={id:`text_${Date.now()}`,text:Y.trim(),x:.2,y:.4,color:AppColors_1.AppColors.white,bgColor:A==="#FFFFFF"?"#0F172A":A};X(t=>[...t,e])}G(!1),Z(""),(0,toast_1.showToast)(n("mediaGallery.textAdded","Text Added"))},ot=async e=>{if(!(!u||!x||P)){(0,NativeInspector_1.triggerNativeHaptic)("medium"),v(!0);try{const t=await editor_1.MediaEditor.editPhoto({uri:u,quality:.85,crop:{x:0,y:0,width:1,height:1,isNormalized:!0}});if(t?.uri){F(t.uri);const a=Math.round((H||1080)*e),g=Math.round((W||1920)*e);O(a),I(g),t.size&&D(Math.round(t.size*e*e)),(0,toast_1.showToast)(n("mediaGallery.resizedSuccess",`Resized to ${Math.round(e*100)}% (${a}\xD7${g})`)),S("none")}}catch{(0,toast_1.showToast)(n("mediaGallery.resizeFailed","Resize failed"))}finally{v(!1)}}},se=()=>{u&&((0,NativeInspector_1.triggerNativeHaptic)("light"),(0,helpers_1.copyImageOrMediaToClipboard)(u,x?"Image":"Media"))},it=async()=>{try{(0,NativeInspector_1.triggerNativeHaptic)("light");const e=u.startsWith("file://")||u.startsWith("content://")||u.startsWith("http")?u:`file://${u}`,t=react_native_1.Platform.select({ios:{url:e,title:o.filename},default:{title:o.filename,message:o.filename,url:e}});(await react_native_1.Share.share(t)).action===react_native_1.Share.sharedAction&&(0,toast_1.showToast)(n("mediaGallery.shareSuccess","Shared successfully"))}catch(e){e?.message!=="User did not share"&&(0,toast_1.showToast)(n("mediaGallery.shareUnavailable","Sharing not available on this device"))}},at=()=>{(0,NativeInspector_1.triggerNativeHaptic)("medium"),ee(!0)},Ae=async()=>{if(y){he(!0);try{await y(o),(0,toast_1.showToast)(n("mediaGallery.convertedSuccess","Converted to GIF!"))}catch{(0,toast_1.showToast)(n("mediaGallery.convertFailed","Conversion failed"))}finally{he(!1)}}},ke=async()=>{try{pe(!0),await capture_1.ScreenCapture.playVideo(u)}catch{(0,toast_1.showToast)(n("mediaGallery.playError","Unable to play video"))}finally{pe(!1)}},rt=async()=>{if(!(!u||!M||P)){v(!0),(0,NativeInspector_1.triggerNativeHaptic)("light");try{const t=Math.min(ne||1e4,5e3),a=await editor_1.MediaEditor.trimReproClip(u,0,t,{quality:"medium"});a?.uri&&(F(a.uri),a.width&&O(a.width),a.height&&I(a.height),a.size&&D(a.size),a.durationMs&&J(a.durationMs),(0,toast_1.showToast)(n("mediaGallery.trimmedSuccess","Trimmed to 5s Repro Clip")))}catch{(0,toast_1.showToast)(n("mediaGallery.trimFailed","Trim failed"))}finally{v(!1)}}},nt=async()=>{if(!(!u||!M||P)){v(!0),(0,NativeInspector_1.triggerNativeHaptic)("light");try{const e=await editor_1.MediaEditor.muteVideo(u);e?.uri&&(F(e.uri),e.width&&O(e.width),e.height&&I(e.height),e.size&&D(e.size),e.durationMs&&J(e.durationMs),(0,toast_1.showToast)(n("mediaGallery.mutedSuccess","Audio Stripped")))}catch{(0,toast_1.showToast)(n("mediaGallery.muteFailed","Mute failed"))}finally{v(!1)}}},V=ne?(ne/1e3).toFixed(1):null,lt=V?`00:${Number(V)<10?"0":""}${V}`:null;return<react_native_1.Modal visible={h}transparent={!0}animationType="fade"statusBarTranslucent={!0}onRequestClose={w}>
       <react_native_1.StatusBar translucent backgroundColor="transparent"barStyle="light-content"/>
       <react_native_1.View style={previewStyles.overlay}>
         
-        <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.indigo600,AppColors_1.AppColors.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={previewStyles.header}>
-          <react_native_1.TouchableOpacity activeOpacity={.8}onPress={c}style={previewStyles.headerLeft}>
-            <react_native_1.View style={previewStyles.badge}>
-              {l?<NetworkIcons_1.FilmIcon size={12}color={AppColors_1.AppColors.white}/>:C?<NetworkIcons_1.GifIcon size={12}color={AppColors_1.AppColors.white}/>:<NetworkIcons_1.ImageIcon size={12}color={AppColors_1.AppColors.white}/>}
-              <react_native_1.Text style={previewStyles.badgeText}>
-                {e.format.toUpperCase()}
-              </react_native_1.Text>
-            </react_native_1.View>
-            <react_native_1.View style={previewStyles.headerTextCol}>
-              <react_native_1.Text style={previewStyles.title}numberOfLines={1}>
-                {e.filename}
-              </react_native_1.Text>
-              <react_native_1.Text style={previewStyles.subtitle}>
-                {(0,helpers_1.formatBytes)(e.sizeBytes)} • {new Date(e.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.TouchableOpacity>
+        <react_native_1.View style={previewStyles.header}>
+          <react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.indigo600,AppColors_1.AppColors.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={react_native_1.StyleSheet.absoluteFill}pointerEvents="none"/>
+          <react_native_1.View style={previewStyles.headerInner}>
+            <react_native_1.TouchableOpacity activeOpacity={.8}onPress={se}style={previewStyles.headerLeft}>
+              <react_native_1.View style={previewStyles.badge}>
+                {M?<NetworkIcons_1.FilmIcon size={11}color={AppColors_1.AppColors.white}/>:ve?<NetworkIcons_1.GifIcon size={11}color={AppColors_1.AppColors.white}/>:<NetworkIcons_1.ImageIcon size={11}color={AppColors_1.AppColors.white}/>}
+                <react_native_1.Text style={previewStyles.badgeText}>
+                  {(o.format||(M?"mp4":ve?"gif":"png")).toUpperCase()}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={previewStyles.headerTextCol}>
+                <react_native_1.Text style={previewStyles.title}numberOfLines={1}>
+                  {o.filename||(o.uri?o.uri.split("/").pop():"")||"Capture"}
+                </react_native_1.Text>
+                <react_native_1.Text style={previewStyles.subtitle}numberOfLines={1}>
+                  {(0,helpers_1.formatBytes)(_e||0)}
+                  {o.timestamp?` \u2022 ${new Date(o.timestamp).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",second:"2-digit"})}`:""}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.TouchableOpacity>
 
-          
-          <react_native_1.View style={previewStyles.headerRight}>
-            <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={t("mediaGallery.copyUri","Copy URI")}onPress={c}style={previewStyles.headerActionBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <NetworkIcons_1.CopyIcon size={13}color={AppColors_1.AppColors.white}/>
-            </TouchableScale_1.default>
+            
+            <react_native_1.View style={previewStyles.headerRight}>
+              {M&&y&&<TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={n("mediaGallery.convertToGif","Convert to GIF")}onPress={Ae}disabled={de}style={[previewStyles.headerActionBtn,{backgroundColor:`${AppColors_1.AppColors.warningAmber}33`,borderColor:`${AppColors_1.AppColors.warningAmber}66`}]}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                  <NetworkIcons_1.GifIcon size={13}color={AppColors_1.AppColors.warningAmber}/>
+                </TouchableScale_1.default>}
 
-            <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={t("mediaGallery.share","Share")}onPress={w}style={previewStyles.headerActionBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <NetworkIcons_1.ShareIcon size={13}color={AppColors_1.AppColors.white}/>
-            </TouchableScale_1.default>
+              <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={n("mediaGallery.copyUri","Copy URI")}onPress={se}style={previewStyles.headerActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <NetworkIcons_1.CopyIcon size={13}color={AppColors_1.AppColors.white}/>
+              </TouchableScale_1.default>
 
-            <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={t("mediaGallery.delete")}onPress={f}style={previewStyles.headerDeleteBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <NetworkIcons_1.TrashIcon size={13}color={AppColors_1.AppColors.white}/>
-            </TouchableScale_1.default>
+              <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={n("mediaGallery.share","Share")}onPress={it}style={previewStyles.headerActionBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <NetworkIcons_1.ShareIcon size={13}color={AppColors_1.AppColors.white}/>
+              </TouchableScale_1.default>
 
-            <react_native_1.TouchableOpacity accessible={!0}accessibilityRole="button"accessibilityLabel={s?t("mediaGallery.collapse","Exit Fullscreen"):t("mediaGallery.expand","Expand Fullscreen")}onPress={()=>v(!s)}style={previewStyles.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <NetworkIcons_1.ExpandCollapseIcon size={13}isExpanded={s}color={AppColors_1.AppColors.white}/>
-            </react_native_1.TouchableOpacity>
+              <TouchableScale_1.default accessible={!0}accessibilityRole="button"accessibilityLabel={n("mediaGallery.delete","Delete")}onPress={at}style={previewStyles.headerDeleteBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <NetworkIcons_1.TrashIcon size={13}color={AppColors_1.AppColors.white}/>
+              </TouchableScale_1.default>
 
-            <react_native_1.TouchableOpacity accessible={!0}accessibilityRole="button"accessibilityLabel={t("mediaGallery.minimize","Minimize")}onPress={a}style={previewStyles.headerIconBtn}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-              <NetworkIcons_1.ChevronDownIcon size={14}color={AppColors_1.AppColors.white}/>
-            </react_native_1.TouchableOpacity>
+              <react_native_1.TouchableOpacity accessible={!0}accessibilityRole="button"accessibilityLabel={n("common.close","Close")}onPress={w}style={previewStyles.headerCloseBtn}hitSlop={{top:8,bottom:8,left:8,right:8}}>
+                <NetworkIcons_1.CloseWhite size={12}/>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
           </react_native_1.View>
-        </react_native_linear_gradient_1.default>
+        </react_native_1.View>
 
         
-        <react_native_1.View style={[previewStyles.stage,s&&previewStyles.stageExpanded]}>
-          <react_native_1.TouchableOpacity activeOpacity={l?.92:1}onPress={l?b:void 0}style={[previewStyles.previewCard,s&&previewStyles.previewCardExpanded]}>
-            {l?e.thumbnailUri&&!_?<>
-                  <react_native_1.Image source={{uri:e.thumbnailUri}}style={previewStyles.image}resizeMode="contain"onError={()=>h(!0)}/>
-                  <react_native_1.View style={previewStyles.videoImageOverlay}/>
-                </>:<react_native_1.View style={previewStyles.videoFallbackBackdrop}>
-                  <react_native_1.View style={previewStyles.videoFallbackGlow}/>
-                  <NetworkIcons_1.FilmIcon size={52}color={AppColors_1.AppColors.sky400}/>
-                  <react_native_1.Text style={previewStyles.videoFallbackTitle}>
-                    {e.width&&e.height?`${e.width} \xD7 ${e.height}`:"HD Video Recording"}
-                  </react_native_1.Text>
-                  <react_native_1.Text style={previewStyles.videoFallbackSubtitle}>
-                    {n?`${n}s duration`:"MP4 Video"} • {(0,helpers_1.formatBytes)(e.sizeBytes)}
-                  </react_native_1.Text>
-                </react_native_1.View>:<react_native_1.Image source={{uri:e.uri}}style={previewStyles.image}resizeMode="contain"onError={()=>h(!0)}/>}
+        <react_native_1.SafeAreaView style={previewStyles.stageSafe}>
+          <react_native_1.View style={previewStyles.stage}>
+            <react_native_1.View onLayout={e=>{const{width:t,height:a}=e.nativeEvent.layout;t>20&&a>20&&me(g=>({...g,width:t,height:a}))}}style={previewStyles.previewCard}>
+              {M?o.thumbnailUri&&!Pe?<>
+                    <react_native_1.Image source={{uri:o.thumbnailUri}}style={previewStyles.image}resizeMode="contain"onError={()=>Q(!0)}/>
+                    <react_native_1.View style={previewStyles.videoImageOverlay}/>
+                  </>:<react_native_1.View style={previewStyles.videoFallbackBackdrop}>
+                    <react_native_1.View style={previewStyles.videoFallbackGlow}/>
+                    <NetworkIcons_1.FilmIcon size={52}color={AppColors_1.AppColors.sky400}/>
+                    <react_native_1.Text style={previewStyles.videoFallbackTitle}>
+                      {o.width&&o.height?`${o.width} \xD7 ${o.height}`:"HD Video Recording"}
+                    </react_native_1.Text>
+                    <react_native_1.Text style={previewStyles.videoFallbackSubtitle}>
+                      {V?`${V}s duration`:"MP4 Video"} • {(0,helpers_1.formatBytes)(o.sizeBytes)}
+                    </react_native_1.Text>
+                  </react_native_1.View>:<react_native_1.View onLayout={e=>{const{width:t,height:a}=e.nativeEvent.layout;t>20&&a>20&&me(g=>({...g,width:t,height:a}))}}style={[previewStyles.canvasContainer,{transform:[{scale:ue*je},{rotate:`${$}deg`}]}]}{...l==="draw"?Ge.panHandlers:{}}>
+                  <react_native_1.Image key={u}source={{uri:u}}style={previewStyles.image}resizeMode="contain"onError={()=>Q(!0)}/>
 
-            
-            {l&&<react_native_1.View style={previewStyles.centerPlayContainer}pointerEvents="box-none">
-                <react_native_1.View style={previewStyles.centerPlayGlow}/>
-                <react_native_1.View style={previewStyles.centerPlayCircle}>
-                  <NetworkIcons_1.PlayIcon size={28}color={AppColors_1.AppColors.white}/>
-                </react_native_1.View>
-                <react_native_1.View style={previewStyles.centerPlayPill}>
-                  <react_native_1.Text style={previewStyles.centerPlayText}>
-                    {t("mediaGallery.playVideo","Play Video")}
-                  </react_native_1.Text>
-                </react_native_1.View>
-              </react_native_1.View>}
+                  
+                  <react_native_svg_1.default style={react_native_1.StyleSheet.absoluteFill}pointerEvents={l==="draw"?"auto":"none"}>
+                    <react_native_svg_1.G>
+                      {E.map(e=>{if(e.points.length<2)return null;const t=e.points.reduce((a,g,L)=>L===0?`M ${g.x} ${g.y}`:`${a} L ${g.x} ${g.y}`,"");return<react_native_svg_1.Path key={e.id}d={t}stroke={e.color}strokeWidth={e.strokeWidth}strokeLinecap="round"strokeLinejoin="round"fill="none"/>})}
+                      {oe&&oe.length>1&&<react_native_svg_1.Path d={oe.reduce((e,t,a)=>a===0?`M ${t.x} ${t.y}`:`${e} L ${t.x} ${t.y}`,"")}stroke={A}strokeWidth={j}strokeLinecap="round"strokeLinejoin="round"fill="none"/>}
+                    </react_native_svg_1.G>
+                  </react_native_svg_1.default>
 
-            
-            {l&&<react_native_1.View style={previewStyles.topLeftBadgeOverlay}pointerEvents="none">
+                  
+                  {He.map(e=><react_native_1.View key={e.id}style={[previewStyles.shapeItem,{left:`${e.x*100}%`,top:`${e.y*100}%`,width:`${e.width*100}%`,height:`${e.height*100}%`,borderColor:e.color,borderRadius:e.type==="circle"?999:e.type==="ellipse"?36:8}]}>
+                      <react_native_1.TouchableOpacity style={previewStyles.shapeDeleteBadge}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),ie(t=>t.filter(a=>a.id!==e.id))}}>
+                        <NetworkIcons_1.CloseWhite size={8}/>
+                      </react_native_1.TouchableOpacity>
+                    </react_native_1.View>)}
+
+                  
+                  {Ee.map(e=><react_native_1.View key={e.id}style={[previewStyles.blurItem,{left:`${e.x*100}%`,top:`${e.y*100}%`,width:`${e.width*100}%`,height:`${e.height*100}%`}]}>
+                      <react_native_1.Text style={previewStyles.blurItemText}>PRIVACY MASK</react_native_1.Text>
+                      <react_native_1.TouchableOpacity style={previewStyles.shapeDeleteBadge}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),ae(t=>t.filter(a=>a.id!==e.id))}}>
+                        <NetworkIcons_1.CloseWhite size={8}/>
+                      </react_native_1.TouchableOpacity>
+                    </react_native_1.View>)}
+
+                  
+                  {We.map(e=><react_native_1.TouchableOpacity key={e.id}activeOpacity={.85}onPress={()=>Se(e)}style={[previewStyles.textAnnotationPill,{left:`${e.x*100}%`,top:`${e.y*100}%`,backgroundColor:e.bgColor}]}>
+                      <react_native_1.Text style={[previewStyles.textAnnotationText,{color:e.color}]}>
+                        {e.text}
+                      </react_native_1.Text>
+                      <react_native_1.TouchableOpacity style={previewStyles.textDeleteBtn}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),X(t=>t.filter(a=>a.id!==e.id))}}>
+                        <NetworkIcons_1.CloseWhite size={8}/>
+                      </react_native_1.TouchableOpacity>
+                    </react_native_1.TouchableOpacity>)}
+
+                  
+                  {l==="crop"&&<react_native_1.View style={previewStyles.cropOverlayMask}{...Ne.panHandlers}>
+                      
+                      <react_native_1.View pointerEvents="none"style={[previewStyles.cropDimMask,{top:0,left:0,right:0,height:`${i.y*100}%`}]}/>
+                      
+                      <react_native_1.View pointerEvents="none"style={[previewStyles.cropDimMask,{top:`${(i.y+i.height)*100}%`,left:0,right:0,bottom:0}]}/>
+                      
+                      <react_native_1.View pointerEvents="none"style={[previewStyles.cropDimMask,{top:`${i.y*100}%`,left:0,width:`${i.x*100}%`,height:`${i.height*100}%`}]}/>
+                      
+                      <react_native_1.View pointerEvents="none"style={[previewStyles.cropDimMask,{top:`${i.y*100}%`,left:`${(i.x+i.width)*100}%`,right:0,height:`${i.height*100}%`}]}/>
+
+                      
+                      <react_native_svg_1.default style={react_native_1.StyleSheet.absoluteFill}pointerEvents="none">
+                        <react_native_svg_1.Rect x={`${i.x*100}%`}y={`${i.y*100}%`}width={`${i.width*100}%`}height={`${i.height*100}%`}stroke="#FFFFFF"strokeWidth="2.5"strokeDasharray="8, 5"fill="rgba(56, 189, 248, 0.10)"/>
+                        <react_native_svg_1.Line x1={`${i.x*100}%`}y1={`${(i.y+i.height*.333)*100}%`}x2={`${(i.x+i.width)*100}%`}y2={`${(i.y+i.height*.333)*100}%`}stroke="rgba(255, 255, 255, 0.55)"strokeWidth="1.2"strokeDasharray="4, 4"/>
+                        <react_native_svg_1.Line x1={`${i.x*100}%`}y1={`${(i.y+i.height*.666)*100}%`}x2={`${(i.x+i.width)*100}%`}y2={`${(i.y+i.height*.666)*100}%`}stroke="rgba(255, 255, 255, 0.55)"strokeWidth="1.2"strokeDasharray="4, 4"/>
+                        <react_native_svg_1.Line x1={`${(i.x+i.width*.333)*100}%`}y1={`${i.y*100}%`}x2={`${(i.x+i.width*.333)*100}%`}y2={`${(i.y+i.height)*100}%`}stroke="rgba(255, 255, 255, 0.55)"strokeWidth="1.2"strokeDasharray="4, 4"/>
+                        <react_native_svg_1.Line x1={`${(i.x+i.width*.666)*100}%`}y1={`${i.y*100}%`}x2={`${(i.x+i.width*.666)*100}%`}y2={`${(i.y+i.height)*100}%`}stroke="rgba(255, 255, 255, 0.55)"strokeWidth="1.2"strokeDasharray="4, 4"/>
+                      </react_native_svg_1.default>
+
+                      
+                      <react_native_1.View pointerEvents="none"style={[previewStyles.cropBoxFrame,{left:`${i.x*100}%`,top:`${i.y*100}%`,width:`${i.width*100}%`,height:`${i.height*100}%`}]}>
+                        
+                        <react_native_1.View style={[previewStyles.cropCornerBracket,previewStyles.bracketTL]}/>
+                        <react_native_1.View style={[previewStyles.cropCornerBracket,previewStyles.bracketTR]}/>
+                        <react_native_1.View style={[previewStyles.cropCornerBracket,previewStyles.bracketBL]}/>
+                        <react_native_1.View style={[previewStyles.cropCornerBracket,previewStyles.bracketBR]}/>
+
+                        
+                        <react_native_1.View style={previewStyles.cropEdgeBarTop}/>
+                        <react_native_1.View style={previewStyles.cropEdgeBarBottom}/>
+                        <react_native_1.View style={previewStyles.cropEdgeBarLeft}/>
+                        <react_native_1.View style={previewStyles.cropEdgeBarRight}/>
+
+                        
+                        <react_native_1.View style={previewStyles.cropCenterPill}>
+                          <react_native_1.Text style={previewStyles.cropCenterPillText}>
+                            {te.toUpperCase()} • {Math.round(i.width*100)}% × {Math.round(i.height*100)}%
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </react_native_1.View>
+                    </react_native_1.View>}
+                </react_native_1.View>}
+
+              
+              {M&&<react_native_1.TouchableOpacity activeOpacity={.9}onPress={ke}style={previewStyles.centerPlayContainer}>
+                  <react_native_1.View style={previewStyles.centerPlayGlow}/>
+                  <react_native_1.View style={previewStyles.centerPlayCircle}>
+                    <NetworkIcons_1.PlayIcon size={28}color={AppColors_1.AppColors.white}/>
+                  </react_native_1.View>
+                  <react_native_1.View style={previewStyles.centerPlayPill}>
+                    <react_native_1.Text style={previewStyles.centerPlayText}>
+                      {Fe?n("mediaGallery.playing","Playing Video..."):n("mediaGallery.playVideo","Play Video")}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.TouchableOpacity>}
+
+              
+              {M&&<react_native_1.View style={previewStyles.topLeftBadgeOverlay}pointerEvents="none">
+                  <react_native_1.View style={previewStyles.metaPill}>
+                    <NetworkIcons_1.FilmIcon size={11}color={AppColors_1.AppColors.sky400}/>
+                    <react_native_1.Text style={previewStyles.metaPillText}>
+                      {lt||(V?`${V}s`:"VIDEO")}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>}
+
+              
+              {x&&$>0&&<react_native_1.View style={previewStyles.topLeftBadgeOverlay}pointerEvents="none">
+                  <react_native_1.View style={[previewStyles.metaPill,{backgroundColor:"rgba(99, 102, 241, 0.90)"}]}>
+                    <NetworkIcons_1.RotateIcon size={11}color={AppColors_1.AppColors.white}/>
+                    <react_native_1.Text style={previewStyles.metaPillText}>{$}°</react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>}
+
+              
+              <react_native_1.TouchableOpacity activeOpacity={.8}onPress={se}style={previewStyles.bottomRightBadgeOverlay}>
                 <react_native_1.View style={previewStyles.metaPill}>
-                  <NetworkIcons_1.FilmIcon size={11}color={AppColors_1.AppColors.sky400}/>
+                  <NetworkIcons_1.CopyIcon size={10}color={AppColors_1.AppColors.sky400}/>
                   <react_native_1.Text style={previewStyles.metaPillText}>
-                    {S||(n?`${n}s`:"VIDEO")}
+                    {H&&W?`${H} \xD7 ${W} \u2022 `:""}
+                    {(0,helpers_1.formatBytes)(_e)}
                   </react_native_1.Text>
                 </react_native_1.View>
-              </react_native_1.View>}
+              </react_native_1.TouchableOpacity>
+
+              
+              {x&&<react_native_1.View style={previewStyles.floatingZoomBar}>
+                  <TouchableScale_1.default onPress={qe}style={previewStyles.zoomBtn}accessibilityLabel="Zoom In">
+                    <NetworkIcons_1.ZoomInIcon size={15}color={AppColors_1.AppColors.white}/>
+                  </TouchableScale_1.default>
 
-            {C&&<react_native_1.View style={previewStyles.topLeftBadgeOverlay}pointerEvents="none">
-                <react_native_1.View style={[previewStyles.metaPill,{backgroundColor:"rgba(245, 158, 11, 0.85)"}]}>
-                  <NetworkIcons_1.GifIcon size={11}color={AppColors_1.AppColors.white}/>
-                  <react_native_1.Text style={previewStyles.metaPillText}>ANIMATED GIF</react_native_1.Text>
+                  <react_native_1.TouchableOpacity onPress={Xe}activeOpacity={.8}style={previewStyles.zoomLevelBadge}>
+                    <react_native_1.Text style={previewStyles.zoomLevelText}>
+                      {Math.round(ue*100)}%
+                    </react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+
+                  <TouchableScale_1.default onPress={Ue}style={previewStyles.zoomBtn}accessibilityLabel="Zoom Out">
+                    <NetworkIcons_1.ZoomOutIcon size={15}color={AppColors_1.AppColors.white}/>
+                  </TouchableScale_1.default>
+                </react_native_1.View>}
+            </react_native_1.View>
+
+            
+            {x&&l==="crop"&&<react_native_1.View style={previewStyles.cropSubToolBar}>
+                
+                <react_native_1.View style={previewStyles.cropActionHeaderRow}>
+                  <react_native_1.Text style={previewStyles.cropHeaderTitle}>Drag box or corners to crop</react_native_1.Text>
+                  <react_native_1.View style={previewStyles.cropActionButtons}>
+                    <react_native_1.TouchableOpacity onPress={()=>S("none")}style={previewStyles.cancelActionBtn}>
+                      <react_native_1.Text style={previewStyles.cancelActionText}>Cancel</react_native_1.Text>
+                    </react_native_1.TouchableOpacity>
+                    <react_native_1.TouchableOpacity onPress={Qe}style={previewStyles.applyActionBtn}>
+                      <react_native_1.Text style={previewStyles.applyActionText}>Apply Crop</react_native_1.Text>
+                    </react_native_1.TouchableOpacity>
+                  </react_native_1.View>
                 </react_native_1.View>
+
+                
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={previewStyles.subToolScroll}>
+                  {["free","1:1","4:3","16:9","9:16","3:2"].map(e=><react_native_1.TouchableOpacity key={e}onPress={()=>Je(e)}style={[previewStyles.ratioChip,te===e&&previewStyles.ratioChipActive]}>
+                      <react_native_1.Text style={[previewStyles.ratioChipText,te===e&&previewStyles.ratioChipTextActive]}>
+                        {e.toUpperCase()}
+                      </react_native_1.Text>
+                    </react_native_1.TouchableOpacity>)}
+                </react_native_1.ScrollView>
+              </react_native_1.View>}
+
+            {x&&l==="resize"&&<react_native_1.View style={previewStyles.subToolBar}>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={previewStyles.subToolScroll}>
+                  {[{label:"75% HD",scale:.75},{label:"50% Half",scale:.5},{label:"25% Mini",scale:.25}].map(e=><react_native_1.TouchableOpacity key={e.label}onPress={()=>ot(e.scale)}style={previewStyles.ratioChip}>
+                      <react_native_1.Text style={previewStyles.ratioChipText}>{e.label}</react_native_1.Text>
+                    </react_native_1.TouchableOpacity>)}
+                  <react_native_1.TouchableOpacity onPress={()=>S("none")}style={previewStyles.cancelActionBtn}>
+                    <react_native_1.Text style={previewStyles.cancelActionText}>Done</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                </react_native_1.ScrollView>
+              </react_native_1.View>}
+
+            {x&&l==="draw"&&<react_native_1.View style={previewStyles.subToolBar}>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={previewStyles.subToolScroll}>
+                  {COLOR_PALETTE.map(e=><react_native_1.TouchableOpacity key={e}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),ye(e)}}style={[previewStyles.colorDot,{backgroundColor:e},A===e&&previewStyles.colorDotActive]}/>)}
+                  <react_native_1.View style={previewStyles.subDivider}/>
+                  {[2,4,8].map(e=><react_native_1.TouchableOpacity key={e}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),De(e)}}style={[previewStyles.strokeWidthBtn,j===e&&previewStyles.strokeWidthBtnActive]}>
+                      <react_native_1.View style={[previewStyles.strokeDot,{width:e+2,height:e+2,backgroundColor:A}]}/>
+                    </react_native_1.TouchableOpacity>)}
+                  <react_native_1.TouchableOpacity onPress={Ze}disabled={E.length===0}style={[previewStyles.actionPillBtn,E.length===0&&{opacity:.4}]}>
+                    <NetworkIcons_1.UndoIcon size={13}color={AppColors_1.AppColors.white}/>
+                    <react_native_1.Text style={previewStyles.actionPillText}>Undo</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                  <react_native_1.TouchableOpacity onPress={Ke}disabled={E.length===0}style={[previewStyles.actionPillBtn,E.length===0&&{opacity:.4}]}>
+                    <react_native_1.Text style={previewStyles.actionPillText}>Clear</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                </react_native_1.ScrollView>
+              </react_native_1.View>}
+
+            {x&&l==="shapes"&&<react_native_1.View style={previewStyles.subToolBar}>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}contentContainerStyle={previewStyles.subToolScroll}>
+                  <react_native_1.TouchableOpacity onPress={()=>le("rect")}style={previewStyles.shapeOptionBtn}>
+                    <NetworkIcons_1.RectangleIcon size={14}color={AppColors_1.AppColors.sky400}/>
+                    <react_native_1.Text style={previewStyles.shapeOptionText}>Rectangle</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                  <react_native_1.TouchableOpacity onPress={()=>le("circle")}style={previewStyles.shapeOptionBtn}>
+                    <NetworkIcons_1.CircleIconOutline size={14}color={AppColors_1.AppColors.amber400}/>
+                    <react_native_1.Text style={previewStyles.shapeOptionText}>Circle</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                  <react_native_1.TouchableOpacity onPress={()=>le("ellipse")}style={previewStyles.shapeOptionBtn}>
+                    <NetworkIcons_1.EllipseIconOutline size={14}color={AppColors_1.AppColors.violet600}/>
+                    <react_native_1.Text style={previewStyles.shapeOptionText}>Ellipse</react_native_1.Text>
+                  </react_native_1.TouchableOpacity>
+                  <react_native_1.View style={previewStyles.subDivider}/>
+                  {COLOR_PALETTE.slice(0,4).map(e=><react_native_1.TouchableOpacity key={e}onPress={()=>{(0,NativeInspector_1.triggerNativeHaptic)("light"),ye(e)}}style={[previewStyles.colorDot,{backgroundColor:e},A===e&&previewStyles.colorDotActive]}/>)}
+                </react_native_1.ScrollView>
               </react_native_1.View>}
 
             
-            <react_native_1.TouchableOpacity activeOpacity={.8}onPress={c}style={previewStyles.bottomRightBadgeOverlay}>
-              <react_native_1.View style={previewStyles.metaPill}>
-                <NetworkIcons_1.CopyIcon size={10}color={AppColors_1.AppColors.sky400}/>
-                <react_native_1.Text style={previewStyles.metaPillText}>
-                  {e.width&&e.height?`${e.width} \xD7 ${e.height} \u2022 `:""}
-                  {(0,helpers_1.formatBytes)(e.sizeBytes)}
-                </react_native_1.Text>
-              </react_native_1.View>
-            </react_native_1.TouchableOpacity>
-          </react_native_1.TouchableOpacity>
-        </react_native_1.View>
+            <react_native_1.View style={previewStyles.bottomTesterDock}>
+              {x&&<>
+                  <TouchableScale_1.default onPress={()=>S(l==="crop"?"none":"crop")}style={[previewStyles.dockToolBtn,l==="crop"&&previewStyles.dockToolBtnActive]}>
+                    <NetworkIcons_1.CropIcon size={16}color={l==="crop"?AppColors_1.AppColors.white:AppColors_1.AppColors.sky400}/>
+                    <react_native_1.Text style={[previewStyles.dockToolLabel,l==="crop"&&{color:AppColors_1.AppColors.white}]}>
+                      Crop
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>
 
-        
-        <react_native_1.View style={previewStyles.footer}>
-          {l&&<TouchableScale_1.default onPress={b}style={previewStyles.primaryPlayBtn}>
-              <NetworkIcons_1.PlayIcon size={16}color={AppColors_1.AppColors.white}/>
-              <react_native_1.Text style={previewStyles.primaryPlayText}>
-                {m?t("mediaGallery.playing","Playing Video..."):t("mediaGallery.playInPlayer","Play Fullscreen Video")}
-              </react_native_1.Text>
-            </TouchableScale_1.default>}
-
-          <react_native_1.View style={previewStyles.actionsRow}>
-            <TouchableScale_1.default onPress={c}style={previewStyles.actionBtn}>
-              <NetworkIcons_1.CopyIcon size={14}color={AppColors_1.AppColors.grayText}/>
-              <react_native_1.Text style={previewStyles.actionText}>
-                {t("mediaGallery.copyUri","Copy URI")}
-              </react_native_1.Text>
-            </TouchableScale_1.default>
-
-            {r&&l&&<TouchableScale_1.default onPress={x}disabled={u}style={[previewStyles.actionBtn,{backgroundColor:AppColors_1.AppColors.amber100,borderColor:AppColors_1.AppColors.amber200}]}>
-                <NetworkIcons_1.GifIcon size={15}color={AppColors_1.AppColors.amber600}/>
-                <react_native_1.Text style={[previewStyles.actionText,{color:AppColors_1.AppColors.amber600,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                  {t(u?"mediaGallery.converting":"mediaGallery.convertToGif")}
-                </react_native_1.Text>
-              </TouchableScale_1.default>}
-
-            <TouchableScale_1.default onPress={w}style={[previewStyles.actionBtn,{backgroundColor:AppColors_1.AppColors.indigo600,borderColor:AppColors_1.AppColors.indigo600}]}>
-              <NetworkIcons_1.ShareIcon size={14}color={AppColors_1.AppColors.white}/>
-              <react_native_1.Text style={[previewStyles.actionText,{color:AppColors_1.AppColors.white,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                {t("mediaGallery.share","Share")}
-              </react_native_1.Text>
-            </TouchableScale_1.default>
-
-            {!l&&<TouchableScale_1.default onPress={f}style={[previewStyles.actionBtn,{backgroundColor:AppColors_1.AppColors.red100,borderColor:`${AppColors_1.AppColors.red500}4D`}]}>
-                <NetworkIcons_1.TrashIcon size={14}color={AppColors_1.AppColors.red500}/>
-                <react_native_1.Text style={[previewStyles.actionText,{color:AppColors_1.AppColors.red500,fontFamily:AppFonts_1.AppFonts.interBold}]}>
-                  {t("mediaGallery.delete","Delete")}
-                </react_native_1.Text>
-              </TouchableScale_1.default>}
+                  <TouchableScale_1.default onPress={()=>S(l==="resize"?"none":"resize")}style={[previewStyles.dockToolBtn,l==="resize"&&previewStyles.dockToolBtnActive]}>
+                    <NetworkIcons_1.ResizeIcon size={16}color={l==="resize"?AppColors_1.AppColors.white:AppColors_1.AppColors.emerald400}/>
+                    <react_native_1.Text style={[previewStyles.dockToolLabel,l==="resize"&&{color:AppColors_1.AppColors.white}]}>
+                      Resize
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  <TouchableScale_1.default onPress={()=>S(l==="draw"?"none":"draw")}style={[previewStyles.dockToolBtn,l==="draw"&&previewStyles.dockToolBtnActive]}>
+                    <NetworkIcons_1.PenIcon size={16}color={l==="draw"?AppColors_1.AppColors.white:AppColors_1.AppColors.rose400}/>
+                    <react_native_1.Text style={[previewStyles.dockToolLabel,l==="draw"&&{color:AppColors_1.AppColors.white}]}>
+                      Draw
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  <TouchableScale_1.default onPress={()=>S(l==="shapes"?"none":"shapes")}style={[previewStyles.dockToolBtn,l==="shapes"&&previewStyles.dockToolBtnActive]}>
+                    <NetworkIcons_1.ShapesIcon size={16}color={l==="shapes"?AppColors_1.AppColors.white:AppColors_1.AppColors.amber400}/>
+                    <react_native_1.Text style={[previewStyles.dockToolLabel,l==="shapes"&&{color:AppColors_1.AppColors.white}]}>
+                      Shapes
+                    </react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  <TouchableScale_1.default onPress={()=>Se()}style={previewStyles.dockToolBtn}>
+                    <NetworkIcons_1.TypeIcon size={16}color={AppColors_1.AppColors.indigo400}/>
+                    <react_native_1.Text style={previewStyles.dockToolLabel}>Text</react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  <TouchableScale_1.default onPress={et}style={previewStyles.dockToolBtn}>
+                    <NetworkIcons_1.BlurIcon size={16}color={AppColors_1.AppColors.sky300}/>
+                    <react_native_1.Text style={previewStyles.dockToolLabel}>Blur</react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  <TouchableScale_1.default onPress={Ye}style={previewStyles.dockToolBtn}>
+                    <NetworkIcons_1.RotateIcon size={16}color={AppColors_1.AppColors.violet600}/>
+                    <react_native_1.Text style={previewStyles.dockToolLabel}>Rotate</react_native_1.Text>
+                  </TouchableScale_1.default>
+                </>}
+
+              {M&&<>
+                  <TouchableScale_1.default onPress={rt}disabled={P}style={previewStyles.dockToolBtn}>
+                    <NetworkIcons_1.ScissorsIcon size={16}color={AppColors_1.AppColors.sky400}/>
+                    <react_native_1.Text style={previewStyles.dockToolLabel}>{n("media.trim5s","Trim 5s")}</react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  <TouchableScale_1.default onPress={nt}disabled={P}style={previewStyles.dockToolBtn}>
+                    <NetworkIcons_1.VolumeXIcon size={16}color={AppColors_1.AppColors.amber400}/>
+                    <react_native_1.Text style={previewStyles.dockToolLabel}>{n("media.muteAudio","Mute Audio")}</react_native_1.Text>
+                  </TouchableScale_1.default>
+
+                  {y&&<TouchableScale_1.default onPress={Ae}disabled={de}style={previewStyles.dockToolBtn}>
+                      <NetworkIcons_1.GifIcon size={16}color={AppColors_1.AppColors.violet600}/>
+                      <react_native_1.Text style={previewStyles.dockToolLabel}>{n("media.toGif","To GIF")}</react_native_1.Text>
+                    </TouchableScale_1.default>}
+
+                  <TouchableScale_1.default onPress={ke}style={[previewStyles.dockToolBtn,previewStyles.dockPrimaryBtn]}>
+                    <NetworkIcons_1.PlayIcon size={16}color={AppColors_1.AppColors.white}/>
+                    <react_native_1.Text style={[previewStyles.dockToolLabel,{color:AppColors_1.AppColors.white}]}>{n("media.play","Play")}</react_native_1.Text>
+                  </TouchableScale_1.default>
+                </>}
+            </react_native_1.View>
           </react_native_1.View>
-        </react_native_1.View>
+        </react_native_1.SafeAreaView>
       </react_native_1.View>
 
       
-      <ConfirmationModal_1.ConfirmationModal visible={T}title={t("mediaGallery.deleteTitle","Delete Media?")}message={t("mediaGallery.deleteMessage",{filename:e.filename})}confirmText={t("mediaGallery.delete","Delete")}cancelText={t("common.cancel","Cancel")}isDestructive={!0}icon="trash"onConfirm={()=>{p(!1),i(e),a()}}onCancel={()=>p(!1)}/>
-    </react_native_1.Modal>};exports.MediaPreviewModal=MediaPreviewModal;const previewStyles=react_native_1.StyleSheet.create({overlay:{flex:1,backgroundColor:AppColors_1.AppColors.slate900,justifyContent:"space-between"},header:{flexShrink:0,minHeight:react_native_1.Platform.OS==="ios"?96:66,flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:16,paddingTop:react_native_1.Platform.OS==="ios"?48:react_native_1.StatusBar.currentHeight?react_native_1.StatusBar.currentHeight+8:18,paddingBottom:14,borderBottomWidth:react_native_1.StyleSheet.hairlineWidth,borderBottomColor:"rgba(255, 255, 255, 0.25)",zIndex:10},headerLeft:{flexDirection:"row",alignItems:"center",gap:10,flex:1,minWidth:0,marginRight:8},headerTextCol:{flex:1,minWidth:0},headerRight:{flexDirection:"row",alignItems:"center",gap:7},badge:{flexDirection:"row",alignItems:"center",gap:4,paddingHorizontal:7,paddingVertical:3.5,borderRadius:6,backgroundColor:"rgba(255, 255, 255, 0.22)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.38)"},badgeText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10,letterSpacing:.4,color:AppColors_1.AppColors.white},title:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:13,color:AppColors_1.AppColors.white},subtitle:{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:11,color:"rgba(255, 255, 255, 0.6)",marginTop:1},headerActionBtn:{width:30,height:30,borderRadius:8,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:8,backgroundColor:"rgba(239, 68, 68, 0.35)",borderWidth:1,borderColor:"rgba(252, 165, 165, 0.55)",alignItems:"center",justifyContent:"center"},headerIconBtn:{width:30,height:30,borderRadius:8,backgroundColor:"rgba(255, 255, 255, 0.22)",borderWidth:1,borderColor:"rgba(255, 255, 255, 0.38)",alignItems:"center",justifyContent:"center"},stage:{flex:1,minHeight:0,alignItems:"center",justifyContent:"center",paddingHorizontal:14,paddingVertical:12,overflow:"hidden"},stageExpanded:{paddingHorizontal:0,paddingVertical:0},previewCard:{flex:1,width:"100%",minHeight:0,borderRadius:16,overflow:"hidden",backgroundColor:AppColors_1.AppColors.slate900,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.1)",alignItems:"center",justifyContent:"center",position:"relative"},previewCardExpanded:{borderRadius:0,borderWidth:0},image:{width:"100%",height:"100%"},videoImageOverlay:{...react_native_1.StyleSheet.absoluteFillObject,backgroundColor:"rgba(10, 13, 20, 0.28)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interSemiBold,fontSize:15,color:AppColors_1.AppColors.white,marginTop:12},videoFallbackSubtitle:{fontFamily:AppFonts_1.AppFonts.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:AppColors_1.AppColors.sky500,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interBold,fontSize:11.5,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interSemiBold,fontSize:11,color:AppColors_1.AppColors.white,letterSpacing:.2},footer:{flexShrink:0,paddingHorizontal:16,paddingTop:12,paddingBottom:react_native_1.Platform.OS==="ios"?34:16,borderTopWidth:1,borderTopColor:AppColors_1.AppColors.grayBorderSecondary,backgroundColor:AppColors_1.AppColors.white,gap:10,zIndex:10,...react_native_1.Platform.select({ios:{shadowColor:AppColors_1.AppColors.slate900,shadowOffset:{width:0,height:-3},shadowOpacity:.08,shadowRadius:8},android:{elevation:6}})},primaryPlayBtn:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8,width:"100%",paddingVertical:12,borderRadius:12,backgroundColor:AppColors_1.AppColors.indigo600,shadowColor:AppColors_1.AppColors.indigo600,shadowOffset:{width:0,height:3},shadowOpacity:.35,shadowRadius:6,elevation:4},primaryPlayText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:13.5,color:AppColors_1.AppColors.white,letterSpacing:.3},actionsRow:{flexDirection:"row",alignItems:"center",justifyContent:"center",gap:8},actionBtn:{flex:1,flexDirection:"row",alignItems:"center",justifyContent:"center",gap:6,paddingVertical:10,paddingHorizontal:12,borderRadius:10,backgroundColor:AppColors_1.AppColors.graySurface,borderWidth:1,borderColor:AppColors_1.AppColors.grayBorderSecondary},actionText:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:12,color:AppColors_1.AppColors.grayText}});
+      <react_native_1.Modal visible={Le}transparent={!0}animationType="fade"onRequestClose={()=>G(!1)}>
+        <react_native_1.View style={previewStyles.modalBackdrop}>
+          <react_native_1.View style={previewStyles.textModalCard}>
+            <react_native_1.Text style={previewStyles.textModalTitle}>Add Text Note / Callout</react_native_1.Text>
+            <react_native_1.TextInput style={previewStyles.textModalInput}placeholder="e.g. Defect: Button overlap"placeholderTextColor="rgba(255,255,255,0.4)"value={Y}onChangeText={Z}autoFocus={!0}multiline={!0}/>
+            <react_native_1.View style={previewStyles.textModalActions}>
+              <react_native_1.TouchableOpacity onPress={()=>G(!1)}style={previewStyles.modalCancelBtn}>
+                <react_native_1.Text style={previewStyles.modalCancelText}>Cancel</react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+              <react_native_1.TouchableOpacity onPress={tt}style={previewStyles.modalConfirmBtn}>
+                <react_native_1.Text style={previewStyles.modalConfirmText}>Place Text</react_native_1.Text>
+              </react_native_1.TouchableOpacity>
+            </react_native_1.View>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.Modal>
+
+      
+      <ConfirmationModal_1.ConfirmationModal visible={Oe}title={n("mediaGallery.deleteTitle","Delete Media?")}message={n("mediaGallery.deleteMessage",{filename:o.filename})}confirmText={n("mediaGallery.delete","Delete")}cancelText={n("common.cancel","Cancel")}isDestructive={!0}icon="trash"onConfirm={()=>{ee(!1),m(o),w()}}onCancel={()=>ee(!1)}/>
+    </react_native_1.Modal>};exports.MediaPreviewModal=MediaPreviewModal;const previewStyles=react_native_1.StyleSheet.create({overlay:{flex:1,backgroundColor:AppColors_1.AppColors.slate900},header:{width:"100%",zIndex:10,borderBottomWidth:react_native_1.StyleSheet.hairlineWidth,borderBottomColor:"rgba(255, 255, 255, 0.25)"},headerInner:{width:"100%",flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingHorizontal:14,paddingTop:react_native_1.Platform.OS==="ios"?52:react_native_1.StatusBar.currentHeight?react_native_1.StatusBar.currentHeight+8:18,paddingBottom:12,minHeight:react_native_1.Platform.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:AppFonts_1.AppFonts.interBold,fontSize:9.5,letterSpacing:.4,color:AppColors_1.AppColors.white},title:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:12.5,color:AppColors_1.AppColors.white,letterSpacing:-.1},subtitle:{fontFamily:AppFonts_1.AppFonts.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:{...react_native_1.StyleSheet.absoluteFillObject,backgroundColor:"rgba(10, 13, 20, 0.28)"},videoFallbackBackdrop:{flex:1,width:"100%",backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interSemiBold,fontSize:15,color:AppColors_1.AppColors.white,marginTop:12},videoFallbackSubtitle:{fontFamily:AppFonts_1.AppFonts.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:AppColors_1.AppColors.sky500,alignItems:"center",justifyContent:"center",paddingLeft:3,shadowColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interBold,fontSize:11.5,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interSemiBold,fontSize:11,color:AppColors_1.AppColors.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:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interBold,fontSize:9.5,color:AppColors_1.AppColors.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:AppColors_1.AppColors.indigo600,borderColor:AppColors_1.AppColors.indigo400},ratioChipText:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:10.5,color:"rgba(255, 255, 255, 0.8)"},ratioChipTextActive:{color:AppColors_1.AppColors.white,fontFamily:AppFonts_1.AppFonts.interBold},applyActionBtn:{backgroundColor:AppColors_1.AppColors.emerald600,paddingHorizontal:12,paddingVertical:5,borderRadius:8},applyActionText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:11,color:AppColors_1.AppColors.white},cancelActionBtn:{backgroundColor:"rgba(255, 255, 255, 0.12)",paddingHorizontal:10,paddingVertical:5,borderRadius:8},cancelActionText:{fontFamily:AppFonts_1.AppFonts.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:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interSemiBold,fontSize:10,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interSemiBold,fontSize:10.5,color:AppColors_1.AppColors.white},shapeItem:{position:"absolute",borderWidth:2.5,borderStyle:"solid"},shapeDeleteBadge:{position:"absolute",top:-8,right:-8,width:16,height:16,borderRadius:8,backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interBold,fontSize:9,color:AppColors_1.AppColors.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:AppColors_1.AppColors.black,shadowOffset:{width:0,height:2},shadowOpacity:.4,shadowRadius:4,elevation:4},textAnnotationText:{fontFamily:AppFonts_1.AppFonts.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:react_native_1.StyleSheet.hairlineWidth,borderBottomColor:"rgba(255, 255, 255, 0.12)"},cropHeaderTitle:{fontFamily:AppFonts_1.AppFonts.interSemiBold,fontSize:10.5,color:"rgba(255, 255, 255, 0.65)"},cropActionButtons:{flexDirection:"row",alignItems:"center",gap:8},cropOverlayMask:{...react_native_1.StyleSheet.absoluteFillObject,zIndex:100,elevation:100},cropDimMask:{position:"absolute",backgroundColor:"rgba(0, 0, 0, 0.58)"},cropBoxFrame:{position:"absolute",borderWidth:2,borderStyle:"dashed",borderColor:AppColors_1.AppColors.white,backgroundColor:"rgba(56, 189, 248, 0.08)",shadowColor:AppColors_1.AppColors.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:AppColors_1.AppColors.white,backgroundColor:AppColors_1.AppColors.sky500,borderRadius:2,borderWidth:2,shadowColor:AppColors_1.AppColors.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:AppColors_1.AppColors.white,borderRadius:3},cropEdgeBarBottom:{position:"absolute",bottom:-3,left:"35%",right:"35%",height:6,backgroundColor:AppColors_1.AppColors.white,borderRadius:3},cropEdgeBarLeft:{position:"absolute",left:-3,top:"35%",bottom:"35%",width:6,backgroundColor:AppColors_1.AppColors.white,borderRadius:3},cropEdgeBarRight:{position:"absolute",right:-3,top:"35%",bottom:"35%",width:6,backgroundColor:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interBold,fontSize:9,color:AppColors_1.AppColors.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:AppColors_1.AppColors.indigo600,borderColor:AppColors_1.AppColors.indigo400,borderWidth:1},dockPrimaryBtn:{backgroundColor:AppColors_1.AppColors.indigo600},dockToolLabel:{fontFamily:AppFonts_1.AppFonts.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:AppFonts_1.AppFonts.interBold,fontSize:14,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interRegular,fontSize:13,color:AppColors_1.AppColors.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:AppFonts_1.AppFonts.interSemiBold,fontSize:12,color:"rgba(255, 255, 255, 0.7)"},modalConfirmBtn:{paddingHorizontal:16,paddingVertical:8,borderRadius:8,backgroundColor:AppColors_1.AppColors.indigo600},modalConfirmText:{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:AppColors_1.AppColors.white}});