react-native-inapp-inspector 2.3.19 → 2.3.21

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

@@ -1,471 +1,85 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Animated, PanResponder, Platform, StyleSheet, Text, TouchableOpacity, useWindowDimensions, View, } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import AppHeaderLogo from '../AppHeaderLogo';
-import BrandCircleIcon from '../BrandCircleIcon';
-import { AndroidIcon, AppleIcon, CameraIcon, NpmIcon, VideoCameraIcon, } from '../NetworkIcons';
-import { ScreenCapture } from '../../capture';
-import { triggerNativeHaptic } from '../../native/NativeInspector';
-import { showToast } from '../../helpers/toast';
-import { getAppName, getAppVersionAndBuild } from '../../helpers';
-import { LIB_VERSION } from '../../constants';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import styles from '../../styles';
-import { useTranslation } from '../../i18n';
-import { MediaPreviewModal } from './MediaPreviewModal';
-const FabLauncher = () => {
-    const { setVisible, isMinimized, setIsMinimized, appIcon, fabPan, fabPanResponder, fabDraggedRef, pulseAnim, fabShineAnim, unreadPulseAnim, logs, analyticsEvents, refreshMediaCount, } = useInspector();
-    const { width: screenWidth } = useWindowDimensions();
-    const { t } = useTranslation();
-    const [appVersionString] = useState(() => {
-        return getAppVersionAndBuild().formatted;
-    });
-    const [isRecording, setIsRecording] = useState(false);
-    const [recordingSeconds, setRecordingSeconds] = useState(0);
-    const recordingTimerRef = useRef(null);
-    const [previewMediaItem, setPreviewMediaItem] = useState(null);
-    const playerPan = useRef(new Animated.ValueXY({ x: 0, y: 0 })).current;
-    const playerPanRef = useRef({ x: 0, y: 0 });
-    useEffect(() => {
-        const idX = playerPan.x.addListener(v => (playerPanRef.current.x = v.value));
-        const idY = playerPan.y.addListener(v => (playerPanRef.current.y = v.value));
-        return () => {
-            playerPan.x.removeListener(idX);
-            playerPan.y.removeListener(idY);
-        };
-    }, [playerPan]);
-    const playerDraggedRef = useRef(false);
-    const playerPanResponder = useRef(PanResponder.create({
-        onStartShouldSetPanResponder: () => false,
-        onMoveShouldSetPanResponder: (_e, g) => Math.abs(g.dx) > 4 || Math.abs(g.dy) > 4,
-        onPanResponderGrant: () => {
-            playerDraggedRef.current = true;
-            playerPan.setOffset({
-                x: playerPanRef.current.x,
-                y: playerPanRef.current.y,
-            });
-            playerPan.setValue({ x: 0, y: 0 });
-        },
-        onPanResponderMove: Animated.event([null, { dx: playerPan.x, dy: playerPan.y }], { useNativeDriver: false }),
-        onPanResponderRelease: () => {
-            playerPan.flattenOffset();
-            setTimeout(() => {
-                playerDraggedRef.current = false;
-            }, 50);
-        },
-        onPanResponderTerminate: () => {
-            playerPan.flattenOffset();
-            playerDraggedRef.current = false;
-        },
-    })).current;
-    useEffect(() => {
-        ScreenCapture.isRecording()
-            .then(active => {
-            setIsRecording(Boolean(active));
-        })
-            .catch(() => { });
-    }, []);
-    useEffect(() => {
-        if (isRecording) {
-            setRecordingSeconds(0);
-            recordingTimerRef.current = setInterval(() => {
-                setRecordingSeconds(prev => prev + 1);
-            }, 1000);
-        }
-        else {
-            if (recordingTimerRef.current) {
-                clearInterval(recordingTimerRef.current);
-                recordingTimerRef.current = null;
-            }
-            setRecordingSeconds(0);
-        }
-        return () => {
-            if (recordingTimerRef.current) {
-                clearInterval(recordingTimerRef.current);
-            }
-        };
-    }, [isRecording]);
-    const handleTakeScreenshot = useCallback(async () => {
-        if (playerDraggedRef.current)
-            return;
-        try {
-            triggerNativeHaptic('light');
-            const result = await ScreenCapture.takeScreenshot({
-                format: 'png',
-                quality: 0.9,
-                hideInspector: true,
-            });
-            if (result) {
-                triggerNativeHaptic('success');
-                const newItem = {
-                    id: `screenshot_${result.timestamp}.png`,
-                    type: 'image',
-                    format: result.format,
-                    uri: result.uri,
-                    filename: result.uri.split('/').pop() || `screenshot_${result.timestamp}.png`,
-                    sizeBytes: result.sizeBytes,
-                    timestamp: result.timestamp,
-                    width: result.width,
-                    height: result.height,
-                };
-                setPreviewMediaItem(newItem);
-                refreshMediaCount?.().catch(() => { });
-                showToast(t('header.screenshotCaptured', 'Screenshot captured'));
-            }
-            else {
-                showToast(t('header.screenshotFailed', 'Failed to capture screenshot'));
-            }
-        }
-        catch {
-            showToast(t('header.screenshotError', 'Error capturing screenshot'));
-        }
-    }, [refreshMediaCount, t]);
-    const handleToggleVideoRecording = useCallback(async () => {
-        if (playerDraggedRef.current)
-            return;
-        try {
-            if (isRecording) {
-                triggerNativeHaptic('medium');
-                const result = await ScreenCapture.stopRecording();
-                setIsRecording(false);
-                if (result) {
-                    triggerNativeHaptic('success');
-                    const newItem = {
-                        id: `video_${result.timestamp}.${result.format}`,
-                        type: result.format === 'gif' ? 'gif' : 'video',
-                        format: result.format,
-                        uri: result.uri,
-                        filename: result.uri.split('/').pop() ||
-                            `video_${result.timestamp}.${result.format}`,
-                        sizeBytes: result.sizeBytes,
-                        timestamp: result.timestamp,
-                        durationMs: result.durationMs,
-                        width: result.width,
-                        height: result.height,
-                        hasAudio: result.hasAudio,
-                    };
-                    setPreviewMediaItem(newItem);
-                    refreshMediaCount?.().catch(() => { });
-                    showToast(t('header.recordingSaved', {
-                        duration: (result.durationMs / 1000).toFixed(1),
-                        defaultValue: `Recording saved (${(result.durationMs / 1000).toFixed(1)}s)`,
-                    }));
-                }
-            }
-            else {
-                triggerNativeHaptic('medium');
-                const started = await ScreenCapture.startRecording({
-                    fps: 24,
-                    audioSource: 'none',
-                });
-                if (started) {
-                    setIsRecording(true);
-                    showToast(t('header.recordingStarted', 'Recording started'));
-                }
-                else {
-                    showToast(t('header.recordingStartFailed', 'Failed to start recording'));
-                }
-            }
-        }
-        catch {
-            showToast(t('header.recordingError', 'Error during screen recording'));
-            setIsRecording(false);
-        }
-    }, [isRecording, refreshMediaCount, t]);
-    const handleExpandInspector = useCallback(() => {
-        if (playerDraggedRef.current)
-            return;
-        triggerNativeHaptic('light');
-        setIsMinimized?.(false);
-        setVisible(true);
-    }, [setIsMinimized, setVisible]);
-    const formatTime = (secs) => {
-        const mins = Math.floor(secs / 60);
-        const remainingSecs = secs % 60;
-        return `${mins}:${remainingSecs < 10 ? '0' : ''}${remainingSecs}`;
-    };
-    return (<>
+import{useCallback as O,useEffect as F,useRef as B,useState as W}from"react";import{Animated as s,PanResponder as de,Platform as q,StyleSheet as pe,Text as M,TouchableOpacity as Se,useWindowDimensions as xe,View as S}from"react-native";import H from"react-native-linear-gradient";import{useInspector as Re}from"./InspectorContext";import A from"../TouchableScale";import Ce from"../AppHeaderLogo";import Te from"../BrandCircleIcon";import{AndroidIcon as Ie,AppleIcon as Ve,CameraIcon as Pe,CloseWhite as Be,MaximizeIcon as Me,NpmIcon as Ae,VideoCameraIcon as $e}from"../NetworkIcons";import{ScreenCapture as V}from"../../capture";import{triggerNativeHaptic as x}from"../../native/NativeInspector";import{showToast as v}from"../../helpers/toast";import{getAppName as Ee,getAppVersionAndBuild as Le}from"../../helpers";import{LIB_VERSION as De}from"../../constants";import{AppColors as i}from"../../styles/AppColors";import{AppFonts as _}from"../../styles/AppFonts";import $ from"../../styles";import{useTranslation as Oe}from"../../i18n";import{MediaPreviewModal as We}from"./MediaPreviewModal";const ke=()=>{const{setVisible:z,isMinimized:X,setIsMinimized:E,appIcon:Y,fabPan:J,fabPanResponder:K,fabDraggedRef:Q,pulseAnim:U,fabShineAnim:G,unreadPulseAnim:Z,logs:ee,analyticsEvents:te,refreshMediaCount:C}=Re(),{width:re}=xe(),{t:o}=Oe(),[ie]=W(()=>Le().formatted),[a,L]=W(!1),[oe,k]=W(0),T=B(null),[N,P]=W(null),n=B(new s.ValueXY({x:0,y:0})).current,D=B({x:0,y:0});F(()=>{const e=n.x.addListener(I=>D.current.x=I.value),r=n.y.addListener(I=>D.current.y=I.value);return()=>{n.x.removeListener(e),n.y.removeListener(r)}},[n]);const R=B(!1),ne=B(de.create({onStartShouldSetPanResponder:()=>!1,onMoveShouldSetPanResponder:(e,r)=>Math.abs(r.dx)>4||Math.abs(r.dy)>4,onPanResponderGrant:()=>{R.current=!0,n.setOffset({x:D.current.x,y:D.current.y}),n.setValue({x:0,y:0})},onPanResponderMove:s.event([null,{dx:n.x,dy:n.y}],{useNativeDriver:!1}),onPanResponderRelease:()=>{n.flattenOffset(),setTimeout(()=>{R.current=!1},50)},onPanResponderTerminate:()=>{n.flattenOffset(),R.current=!1}})).current;F(()=>{V.isRecording().then(e=>{L(!!e)}).catch(()=>{})},[]),F(()=>(a?(k(0),T.current=setInterval(()=>{k(e=>e+1)},1e3)):(T.current&&(clearInterval(T.current),T.current=null),k(0)),()=>{T.current&&clearInterval(T.current)}),[a]);const ae=O(async()=>{if(!R.current)try{x("light");const e=await V.takeScreenshot({format:"png",quality:.9,hideInspector:!0});if(e){x("success");const r={id:`screenshot_${e.timestamp}.png`,type:"image",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`screenshot_${e.timestamp}.png`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,width:e.width,height:e.height};P(r),C?.().catch(()=>{}),v(o("header.screenshotCaptured","Screenshot captured"))}else v(o("header.screenshotFailed","Failed to capture screenshot"))}catch{v(o("header.screenshotError","Error capturing screenshot"))}},[C,o]),se=O(async()=>{if(!R.current)try{if(a){x("medium");const e=await V.stopRecording();if(L(!1),e){x("success");const r={id:`video_${e.timestamp}.${e.format}`,type:e.format==="gif"?"gif":"video",format:e.format,uri:e.uri,filename:e.uri.split("/").pop()||`video_${e.timestamp}.${e.format}`,sizeBytes:e.sizeBytes,timestamp:e.timestamp,durationMs:e.durationMs,width:e.width,height:e.height,hasAudio:e.hasAudio};P(r),C?.().catch(()=>{}),v(o("header.recordingSaved",{duration:(e.durationMs/1e3).toFixed(1),defaultValue:`Recording saved (${(e.durationMs/1e3).toFixed(1)}s)`}))}}else x("medium"),await V.startRecording({fps:24,audioSource:"none"})?(L(!0),v(o("header.recordingStarted","Recording started"))):v(o("header.recordingStartFailed","Failed to start recording"))}catch{v(o("header.recordingError","Error during screen recording")),L(!1)}},[a,C,o]),j=O(()=>{R.current||(x("light"),E?.(!1),z(!0))},[E,z]),le=O(()=>{R.current||(x("light"),E?.(!1),z(!1))},[E,z]),ce=e=>{const r=Math.floor(e/60),I=e%60;return`${r}:${I<10?"0":""}${I}`};return<>
       
-      {isMinimized ? (<Animated.View style={[
-                fabStyles.playerContainer,
-                { transform: playerPan.getTranslateTransform() },
-            ]} {...playerPanResponder.panHandlers}>
+      {X?<s.View style={[t.playerContainer,{transform:n.getTranslateTransform()}]}{...ne.panHandlers}>
           
-          <LinearGradient colors={[AppColors.indigo600, AppColors.violet600]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={fabStyles.gradientBg} pointerEvents="none"/>
+          <H colors={[i.indigo600,i.violet600]}start={{x:0,y:0}}end={{x:1,y:1}}style={t.gradientBg}pointerEvents="none"/>
 
           
-          <View pointerEvents="none" style={fabStyles.playerShineClip}>
-            <Animated.View style={[
-                fabStyles.playerShineStreak,
-                {
-                    transform: [
-                        {
-                            translateX: fabShineAnim.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [-80, screenWidth + 80],
-                            }),
-                        },
-                        { rotate: '28deg' },
-                    ],
-                },
-            ]}>
-              <LinearGradient colors={[
-                'rgba(255, 255, 255, 0)',
-                'rgba(255, 255, 255, 0.18)',
-                'rgba(255, 255, 255, 0.70)',
-                'rgba(255, 255, 255, 1)',
-                'rgba(255, 255, 255, 0.70)',
-                'rgba(255, 255, 255, 0.18)',
-                'rgba(255, 255, 255, 0)',
-            ]} locations={[0, 0.22, 0.44, 0.5, 0.56, 0.78, 1]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
-            </Animated.View>
-          </View>
+          <S pointerEvents="none"style={t.playerShineClip}>
+            <s.View style={[t.playerShineStreak,{transform:[{translateX:G.interpolate({inputRange:[0,1],outputRange:[-80,re+80]})},{rotate:"28deg"}]}]}>
+              <H colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 1)","rgba(255, 255, 255, 0.70)","rgba(255, 255, 255, 0.18)","rgba(255, 255, 255, 0)"]}locations={[0,.22,.44,.5,.56,.78,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
+            </s.View>
+          </S>
 
           
-          <TouchableOpacity activeOpacity={0.75} onPress={handleExpandInspector} style={fabStyles.brandSection} accessibilityRole="button" accessibilityLabel={t('mediaGallery.expand', 'Expand Inspector')}>
-            <AppHeaderLogo size={36} customIcon={appIcon}/>
-            <View style={fabStyles.titleWrapper}>
-              <Text style={fabStyles.appTitle} numberOfLines={1}>
-                {getAppName()}
-              </Text>
-              <View style={fabStyles.versionRow}>
+          <Se activeOpacity={.75}onPress={j}style={t.brandSection}accessibilityRole="button"accessibilityLabel={o("mediaGallery.expand","Expand Inspector")}>
+            <Ce size={36}customIcon={Y}/>
+            <S style={t.titleWrapper}>
+              <M style={t.appTitle}numberOfLines={1}>
+                {Ee()}
+              </M>
+              <S style={t.versionRow}>
                 
-                <View style={fabStyles.versionChip}>
-                  {Platform.OS === 'ios' ? (<AppleIcon color={`${AppColors.white}E6`} size={9}/>) : (<AndroidIcon color={`${AppColors.white}E6`} size={9}/>)}
-                  <Text style={fabStyles.versionChipText} numberOfLines={1}>
-                    {appVersionString}
-                  </Text>
-                </View>
+                <S style={t.versionChip}>
+                  {q.OS==="ios"?<Ve color={`${i.white}E6`}size={9}/>:<Ie color={`${i.white}E6`}size={9}/>}
+                  <M style={t.versionChipText}numberOfLines={1}>
+                    {ie}
+                  </M>
+                </S>
 
                 
-                <View style={fabStyles.versionChip}>
-                  <NpmIcon size={9} color={AppColors.npmRedLight}/>
-                  <Text style={fabStyles.versionChipText} numberOfLines={1}>
-                    v{LIB_VERSION}
-                  </Text>
-                </View>
-              </View>
-            </View>
-          </TouchableOpacity>
+                <S style={t.versionChip}>
+                  <Ae size={9}color={i.npmRedLight}/>
+                  <M style={t.versionChipText}numberOfLines={1}>
+                    v{De}
+                  </M>
+                </S>
+              </S>
+            </S>
+          </Se>
 
           
-          <View style={fabStyles.actionsRow}>
+          <S style={t.actionsRow}>
             
-            <TouchableScale onPress={handleTakeScreenshot} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }} style={fabStyles.actionBtn}>
-              <CameraIcon size={13} color={AppColors.white}/>
-              <Text style={fabStyles.actionText}>
-                {t('header.photo', 'Photo')}
-              </Text>
-            </TouchableScale>
+            <A onPress={ae}hitSlop={{top:6,bottom:6,left:4,right:4}}style={t.actionBtn}>
+              <Pe size={12}color={i.white}/>
+              <M style={t.actionText}>
+                {o("header.photo","Photo")}
+              </M>
+            </A>
 
             
-            <TouchableScale onPress={handleToggleVideoRecording} hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }} style={[
-                fabStyles.actionBtn,
-                isRecording && fabStyles.recordingBtnActive,
-            ]}>
-              {isRecording ? (<View style={fabStyles.recordingDot}/>) : (<VideoCameraIcon size={13} color={AppColors.white}/>)}
-              <Text style={[
-                fabStyles.actionText,
-                isRecording && { color: AppColors.red300 },
-            ]}>
-                {isRecording
-                ? `${t('header.rec', 'REC')} ${formatTime(recordingSeconds)}`
-                : t('header.record', 'Record')}
-              </Text>
-            </TouchableScale>
-          </View>
-        </Animated.View>) : (<Animated.View style={[styles.fabWrapper, { transform: fabPan.getTranslateTransform() }]} {...fabPanResponder.panHandlers}>
-          <TouchableScale style={{ alignItems: 'center', justifyContent: 'center' }} onPress={() => {
-                if (fabDraggedRef.current)
-                    return;
-                triggerNativeHaptic('light');
-                setVisible(true);
-            }} hitSlop={10}>
-            <Animated.View style={[styles.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
-            <BrandCircleIcon size={62}/>
+            <A onPress={se}hitSlop={{top:6,bottom:6,left:4,right:4}}style={[t.actionBtn,a&&t.recordingBtnActive]}>
+              {a?<S style={t.recordingDot}/>:<$e size={12}color={i.white}/>}
+              <M style={[t.actionText,a&&{color:i.red300}]}>
+                {a?`${o("header.rec","REC")} ${ce(oe)}`:o("header.record","Record")}
+              </M>
+            </A>
+
+            
+            <A onPress={j}hitSlop={{top:6,bottom:6,left:4,right:4}}accessibilityRole="button"accessibilityLabel={o("common.expand","Expand")}style={t.actionBtnSquare}>
+              <Me size={12}color={i.white}/>
+            </A>
+
+            
+            <A onPress={le}hitSlop={{top:6,bottom:6,left:4,right:6}}accessibilityRole="button"accessibilityLabel={o("common.close","Close")}style={t.actionBtnSquare}>
+              <Be size={10}color={i.white}/>
+            </A>
+          </S>
+        </s.View>:<s.View style={[$.fabWrapper,{transform:J.getTranslateTransform()}]}{...K.panHandlers}>
+          <A style={{alignItems:"center",justifyContent:"center"}}onPress={()=>{Q.current||(x("light"),z(!0))}}hitSlop={10}>
+            <s.View style={[$.fabPulseRing,{transform:[{scale:U}]}]}/>
+            <Te size={62}/>
             
-            <View pointerEvents="none" style={styles.fabShineClip}>
-              <Animated.View style={[
-                styles.fabShineStreak,
-                {
-                    transform: [
-                        {
-                            translateX: fabShineAnim.interpolate({
-                                inputRange: [0, 1],
-                                outputRange: [-48, 96],
-                            }),
-                        },
-                        { rotate: '25deg' },
-                    ],
-                },
-            ]}>
-                <LinearGradient colors={[
-                'rgba(255, 255, 255, 0)',
-                'rgba(255, 255, 255, 0.25)',
-                'rgba(255, 255, 255, 0.95)',
-                'rgba(255, 255, 255, 0.25)',
-                'rgba(255, 255, 255, 0)',
-            ]} locations={[0, 0.25, 0.5, 0.75, 1]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
-              </Animated.View>
-            </View>
-            {(logs.length > 0 || analyticsEvents.length > 0) && (<Animated.View style={[
-                    styles.fabGreenDot,
-                    { transform: [{ scale: unreadPulseAnim }] },
-                ]}/>)}
-          </TouchableScale>
-        </Animated.View>)}
+            <S pointerEvents="none"style={$.fabShineClip}>
+              <s.View style={[$.fabShineStreak,{transform:[{translateX:G.interpolate({inputRange:[0,1],outputRange:[-48,96]})},{rotate:"25deg"}]}]}>
+                <H colors={["rgba(255, 255, 255, 0)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0.95)","rgba(255, 255, 255, 0.25)","rgba(255, 255, 255, 0)"]}locations={[0,.25,.5,.75,1]}start={{x:0,y:.5}}end={{x:1,y:.5}}style={{flex:1}}/>
+              </s.View>
+            </S>
+            {(ee.length>0||te.length>0)&&<s.View style={[$.fabGreenDot,{transform:[{scale:Z}]}]}/>}
+          </A>
+        </s.View>}
 
       
-      <MediaPreviewModal item={previewMediaItem} visible={!!previewMediaItem} onClose={() => setPreviewMediaItem(null)} onDelete={async (item) => {
-            await ScreenCapture.deleteMedia(item.uri);
-            refreshMediaCount?.().catch(() => { });
-            setPreviewMediaItem(null);
-        }} onConvertToGif={async (item) => {
-            const gif = await ScreenCapture.convertToGif(item.uri, {
-                fps: 12,
-                width: 480,
-            });
-            if (gif) {
-                refreshMediaCount?.().catch(() => { });
-                setPreviewMediaItem({
-                    id: `anim_${gif.timestamp}.gif`,
-                    type: 'gif',
-                    format: 'gif',
-                    uri: gif.uri,
-                    filename: gif.uri.split('/').pop() || `anim_${gif.timestamp}.gif`,
-                    sizeBytes: gif.sizeBytes,
-                    timestamp: gif.timestamp,
-                    durationMs: gif.durationMs,
-                });
-            }
-        }}/>
-    </>);
-};
-const fabStyles = StyleSheet.create({
-    playerContainer: {
-        position: 'absolute',
-        bottom: Platform.OS === 'ios' ? 34 : 18,
-        left: 12,
-        right: 12,
-        minHeight: 58,
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        borderRadius: 16,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.28)',
-        paddingHorizontal: 12,
-        paddingVertical: 7,
-        gap: 8,
-        zIndex: 99999,
-        elevation: 25,
-        shadowColor: AppColors.indigo600,
-        shadowOffset: { width: 0, height: 8 },
-        shadowOpacity: 0.45,
-        shadowRadius: 14,
-        overflow: 'hidden',
-    },
-    gradientBg: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: 16,
-    },
-    playerShineClip: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        borderRadius: 16,
-        overflow: 'hidden',
-    },
-    playerShineStreak: {
-        position: 'absolute',
-        top: -60,
-        width: 75,
-        height: 200,
-    },
-    brandSection: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 9,
-        flex: 1,
-        minWidth: 0,
-        paddingVertical: 2,
-    },
-    titleWrapper: {
-        flex: 1,
-        minWidth: 0,
-        justifyContent: 'center',
-        gap: 2,
-    },
-    appTitle: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 13.5,
-        color: AppColors.white,
-        letterSpacing: -0.2,
-    },
-    versionRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4,
-        minWidth: 0,
-    },
-    versionChip: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: `${AppColors.white}1F`,
-        borderRadius: 5,
-        paddingHorizontal: 5,
-        paddingVertical: 1.5,
-        gap: 3,
-        borderWidth: 1,
-        borderColor: `${AppColors.white}2E`,
-        flexShrink: 1,
-        minWidth: 0,
-    },
-    versionChipText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 8.5,
-        color: `${AppColors.white}EB`,
-        letterSpacing: 0.1,
-    },
-    actionsRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 6,
-    },
-    actionBtn: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4.5,
-        backgroundColor: 'rgba(255, 255, 255, 0.22)',
-        paddingHorizontal: 10,
-        paddingVertical: 6,
-        borderRadius: 7,
-        borderWidth: 1,
-        borderColor: 'rgba(255, 255, 255, 0.32)',
-    },
-    recordingBtnActive: {
-        backgroundColor: 'rgba(239, 68, 68, 0.32)',
-        borderColor: AppColors.red500,
-    },
-    recordingDot: {
-        width: 6,
-        height: 6,
-        borderRadius: 3,
-        backgroundColor: AppColors.red500,
-    },
-    actionText: {
-        fontFamily: AppFonts.interSemiBold,
-        fontSize: 11,
-        color: AppColors.white,
-    },
-});
-export default FabLauncher;
+      <We item={N}visible={!!N}onClose={()=>P(null)}onDelete={async e=>{await V.deleteMedia(e.uri),C?.().catch(()=>{}),P(null)}}onConvertToGif={async e=>{const r=await V.convertToGif(e.uri,{fps:12,width:480});r&&(C?.().catch(()=>{}),P({id:`anim_${r.timestamp}.gif`,type:"gif",format:"gif",uri:r.uri,filename:r.uri.split("/").pop()||`anim_${r.timestamp}.gif`,sizeBytes:r.sizeBytes,timestamp:r.timestamp,durationMs:r.durationMs}))}}/>
+    </>},t=pe.create({playerContainer:{position:"absolute",bottom:q.OS==="ios"?34:18,left:12,right:12,minHeight:58,flexDirection:"row",alignItems:"center",justifyContent:"space-between",borderRadius:16,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.28)",paddingHorizontal:12,paddingVertical:7,gap:8,zIndex:99999,elevation:25,shadowColor:i.indigo600,shadowOffset:{width:0,height:8},shadowOpacity:.45,shadowRadius:14,overflow:"hidden"},gradientBg:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16},playerShineClip:{position:"absolute",top:0,left:0,right:0,bottom:0,borderRadius:16,overflow:"hidden"},playerShineStreak:{position:"absolute",top:-60,width:75,height:200},brandSection:{flexDirection:"row",alignItems:"center",gap:9,flex:1,minWidth:0,paddingVertical:2},titleWrapper:{flex:1,minWidth:0,justifyContent:"center",gap:2},appTitle:{fontFamily:_.interBold,fontSize:13.5,color:i.white,letterSpacing:-.2},versionRow:{flexDirection:"row",alignItems:"center",gap:4,minWidth:0},versionChip:{flexDirection:"row",alignItems:"center",backgroundColor:`${i.white}1F`,borderRadius:5,paddingHorizontal:5,paddingVertical:1.5,gap:3,borderWidth:1,borderColor:`${i.white}2E`,flexShrink:1,minWidth:0},versionChipText:{fontFamily:_.interMedium,fontSize:8.5,color:`${i.white}EB`,letterSpacing:.1},actionsRow:{flexDirection:"row",alignItems:"center",gap:4.5,flexShrink:0},actionBtn:{flexDirection:"row",alignItems:"center",gap:4,backgroundColor:"rgba(255, 255, 255, 0.22)",paddingHorizontal:8,paddingVertical:5.5,borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},actionBtnSquare:{alignItems:"center",justifyContent:"center",width:27,height:27,backgroundColor:"rgba(255, 255, 255, 0.22)",borderRadius:7,borderWidth:1,borderColor:"rgba(255, 255, 255, 0.32)"},recordingBtnActive:{backgroundColor:"rgba(239, 68, 68, 0.32)",borderColor:i.red500},recordingDot:{width:6,height:6,borderRadius:3,backgroundColor:i.red500},actionText:{fontFamily:_.interSemiBold,fontSize:10.5,color:i.white}});export default ke;

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

@@ -1,74 +1,18 @@
-import React, { useState } from 'react';
-import { StyleSheet, Text, View, Pressable } from 'react-native';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { WarningTriangleIcon, ClearIcon } from '../NetworkIcons';
-export const FeatureUnderDevNotice = ({ featureName, compact = false, }) => {
-    const [isDismissed, setIsDismissed] = useState(false);
-    if (isDismissed)
-        return null;
-    return (<View style={[styles.container, compact && styles.containerCompact]}>
-      <View style={styles.contentRow}>
-        <View style={styles.badgeWrap}>
-          <WarningTriangleIcon color={AppColors.warningIconGold} size={12}/>
-          <Text style={styles.badgeText}>IN ACTIVE DEVELOPMENT</Text>
-        </View>
+import{useState as R}from"react";import{StyleSheet as S,Text as I,View as T,Pressable as B}from"react-native";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as C}from"../../styles/AppFonts";import{WarningTriangleIcon as W,ClearIcon as E}from"../NetworkIcons";export const FeatureUnderDevNotice=({featureName:w,compact:V=!1})=>{const[z,D]=R(!1);return z?null:<T style={[e.container,V&&e.containerCompact]}>
+      <T style={e.contentRow}>
+        <T style={e.badgeWrap}>
+          <W color={t.warningIconGold}size={12}/>
+          <I style={e.badgeText}>IN ACTIVE DEVELOPMENT</I>
+        </T>
 
-        <Pressable onPress={() => setIsDismissed(true)} hitSlop={8} style={styles.dismissBtn} accessible={true} accessibilityRole="button" accessibilityLabel="Dismiss notice">
-          <ClearIcon color={AppColors.grayTextWeak} size={11}/>
-        </Pressable>
-      </View>
+        <B onPress={()=>D(!0)}hitSlop={8}style={e.dismissBtn}accessible={!0}accessibilityRole="button"accessibilityLabel="Dismiss notice">
+          <E color={t.grayTextWeak}size={11}/>
+        </B>
+      </T>
 
-      <Text style={styles.messageText}>
-        {featureName ? `${featureName} is` : 'This module is'} currently in active
+      <I style={e.messageText}>
+        {w?`${w} is`:"This module is"} currently in active
         development. Results and metrics may vary in accuracy. We are continuously
         improving this feature for upcoming releases.
-      </Text>
-    </View>);
-};
-const styles = StyleSheet.create({
-    container: {
-        marginHorizontal: 12,
-        marginTop: 8,
-        marginBottom: 6,
-        paddingHorizontal: 12,
-        paddingVertical: 9,
-        borderRadius: 8,
-        backgroundColor: `${AppColors.warningIconGold}12`,
-        borderWidth: 1,
-        borderColor: `${AppColors.warningIconGold}30`,
-    },
-    containerCompact: {
-        marginTop: 4,
-        marginBottom: 4,
-        paddingVertical: 7,
-        paddingHorizontal: 10,
-    },
-    contentRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        marginBottom: 4,
-    },
-    badgeWrap: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: 4.5,
-    },
-    badgeText: {
-        fontFamily: AppFonts.interBold,
-        fontSize: 9.5,
-        color: AppColors.warningIconGold,
-        letterSpacing: 0.4,
-    },
-    dismissBtn: {
-        padding: 2,
-    },
-    messageText: {
-        fontFamily: AppFonts.interRegular,
-        fontSize: 10.5,
-        color: AppColors.grayText,
-        lineHeight: 15,
-    },
-});
-export default FeatureUnderDevNotice;
+      </I>
+    </T>};const e=S.create({container:{marginHorizontal:12,marginTop:8,marginBottom:6,paddingHorizontal:12,paddingVertical:9,borderRadius:8,backgroundColor:`${t.warningIconGold}12`,borderWidth:1,borderColor:`${t.warningIconGold}30`},containerCompact:{marginTop:4,marginBottom:4,paddingVertical:7,paddingHorizontal:10},contentRow:{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginBottom:4},badgeWrap:{flexDirection:"row",alignItems:"center",gap:4.5},badgeText:{fontFamily:C.interBold,fontSize:9.5,color:t.warningIconGold,letterSpacing:.4},dismissBtn:{padding:2},messageText:{fontFamily:C.interRegular,fontSize:10.5,color:t.grayText,lineHeight:15}});export default FeatureUnderDevNotice;

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

@@ -1,12 +1 @@
-import { createContext, useContext } from 'react';
-export { ModalAnimationType, SettingsPage, SettingsSubTab, LogFilter, } from '../../types';
-export const InspectorContext = createContext(null);
-export const useInspector = () => {
-    const ctx = useContext(InspectorContext);
-    if (!ctx) {
-        throw new Error('useInspector must be used within <InspectorContext.Provider>');
-    }
-    return ctx;
-};
-export const animateNextLayout = () => {
-};
+import{createContext as e,useContext as o}from"react";export{ModalAnimationType,SettingsPage,SettingsSubTab,LogFilter}from"../../types";export const InspectorContext=e(null),useInspector=()=>{const t=o(InspectorContext);if(!t)throw new Error("useInspector must be used within <InspectorContext.Provider>");return t},animateNextLayout=()=>{};