react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/DiffViewer.js

@@ -36,6 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const react_i18next_1 = require("react-i18next");
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 // Helpers
@@ -44,17 +45,18 @@ const helpers_1 = require("../helpers");
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
 const DiffViewer = react_1.default.memo(({ oldData, newData, forceOpen, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
     const diffs = (0, react_1.useMemo)(() => (0, helpers_1.getDiff)(oldData, newData), [oldData, newData]);
     if (forceOpen === false) {
         return (<react_native_1.View style={styles_1.default.codeBlock}>
           <react_native_1.Text style={[styles_1.default.codeText, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            {'{ Diff hidden }'}
+            {t('network.diffHidden')}
           </react_native_1.Text>
         </react_native_1.View>);
     }
     if (diffs.length === 0) {
         return (<react_native_1.View style={styles_1.default.codeBlock}>
-          <react_native_1.Text style={styles_1.default.codeText}>No differences from previous API.</react_native_1.Text>
+          <react_native_1.Text style={styles_1.default.codeText}>{t('network.noDiff')}</react_native_1.Text>
         </react_native_1.View>);
     }
     return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles_1.default.codeBlockScroll}>

package/dist/commonjs/components/DomainHeader.js

@@ -60,77 +60,102 @@ const DomainHeader = ({ pageName, color, stats, activeFilters, onToggleFilter, i
         outputRange: ['-90deg', '0deg'],
     });
     const visibleStats = ['success', 'failed', 'loading'];
-    return (<react_native_1.Pressable style={[styles_1.default.domainHeaderRow, !isFirst && styles_1.default.domainHeaderSeparator]} onPress={() => onToggleCollapse(pageName)}>
-      <react_native_1.View style={styles_1.default.domainHeaderLeft}>
-        <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
-          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-        </react_native_1.Animated.View>
-        <NetworkIcons_1.ScreenIcon color={color} size={16}/>
-        <react_native_1.View style={{ flex: 1, marginLeft: 6, justifyContent: 'center' }}>
-          <react_native_1.Text style={[styles_1.default.domainHeaderText, { color, marginLeft: 0 }]} numberOfLines={1}>
-            {pageName}
-          </react_native_1.Text>
-          <react_native_1.View style={styles_1.default.domainSubRow}>
-            <react_native_1.Text style={styles_1.default.domainTimestamp}>
+    const total = stats.success + stats.failed + stats.loading;
+    const pctSuccess = total > 0 ? Math.round((stats.success / total) * 100) : 0;
+    const pctFailed = total > 0 ? Math.round((stats.failed / total) * 100) : 0;
+    const pctLoading = total > 0 ? Math.round((stats.loading / total) * 100) : 0;
+    return (<react_native_1.Pressable style={styles_1.default.domainHeaderCard} onPress={() => onToggleCollapse(pageName)}>
+      <react_native_1.View style={styles_1.default.domainHeaderTopRow}>
+        <react_native_1.View style={styles_1.default.domainHeaderLeft}>
+          <react_native_1.Animated.View style={{ transform: [{ rotate: chevronRotate }] }}>
+            <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.grayTextWeak} size={13}/>
+          </react_native_1.Animated.View>
+          <react_native_1.View style={[styles_1.default.domainIconWrap, { backgroundColor: `${color}18` }]}>
+            <NetworkIcons_1.ScreenIcon color={color} size={14}/>
+          </react_native_1.View>
+          <react_native_1.View style={{ flex: 1, justifyContent: 'center' }}>
+            <react_native_1.Text style={styles_1.default.domainTitleText} numberOfLines={1}>
+              {pageName}
+            </react_native_1.Text>
+            <react_native_1.Text style={styles_1.default.domainSummaryText} numberOfLines={1}>
               {(0, helpers_1.formatDateTime)(timestamp)}
             </react_native_1.Text>
           </react_native_1.View>
         </react_native_1.View>
-      </react_native_1.View>
 
-      <react_native_1.View style={styles_1.default.domainStatsGroup}>
-        {visibleStats.map((type, index) => {
-            const isLast = index === visibleStats.length - 1;
+        <react_native_1.View style={styles_1.default.domainStatsGroup}>
+          {visibleStats.map(type => {
             const isActive = activeFilters.has(type);
             let IconComponent;
             let activeColor = '';
             let count = 0;
-            let bgStyle = {};
             if (type === 'success') {
                 IconComponent = NetworkIcons_1.CheckIcon;
                 activeColor = AppColors_1.AppColors.greenColor;
                 count = stats.success;
-                bgStyle = {
-                    backgroundColor: isActive
-                        ? `${AppColors_1.AppColors.greenColor}15`
-                        : 'transparent',
-                };
             }
             else if (type === 'failed') {
                 IconComponent = NetworkIcons_1.FailIcon;
                 activeColor = AppColors_1.AppColors.errorColor;
                 count = stats.failed;
-                bgStyle = {
-                    backgroundColor: isActive
-                        ? `${AppColors_1.AppColors.errorColor}15`
-                        : 'transparent',
-                };
             }
             else {
                 IconComponent = NetworkIcons_1.ClockIcon;
                 activeColor = AppColors_1.AppColors.darkOrange;
                 count = stats.loading;
-                bgStyle = {
-                    backgroundColor: isActive
-                        ? `${AppColors_1.AppColors.darkOrange}15`
-                        : 'transparent',
-                };
             }
-            return (<react_native_1.Pressable key={type} onPress={() => onToggleFilter(pageName, type)} style={[
-                    styles_1.default.groupBtnItem,
-                    bgStyle,
-                    !isLast && styles_1.default.groupBtnBorderRight,
+            return (<react_native_1.Pressable key={type} onPress={() => onToggleFilter(pageName, type)} hitSlop={6} style={[
+                    styles_1.default.domainStatPill,
+                    isActive && {
+                        borderColor: `${activeColor}40`,
+                        backgroundColor: `${activeColor}12`,
+                    },
                 ]}>
-              <IconComponent color={isActive ? activeColor : AppColors_1.AppColors.grayTextWeak} size={type === 'failed' ? 8 : 10}/>
-              <react_native_1.Text style={[
+                <react_native_1.View style={[
+                    styles_1.default.filterCheckbox,
+                    { marginRight: 0, width: 11, height: 11, borderRadius: 2.5 },
+                    isActive && [
+                        styles_1.default.filterCheckboxActive,
+                        { backgroundColor: activeColor },
+                    ],
+                ]}>
+                  {isActive && (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white} size={7}/>)}
+                </react_native_1.View>
+                <IconComponent color={isActive ? activeColor : AppColors_1.AppColors.grayTextWeak} size={type === 'failed' ? 8 : 10}/>
+                <react_native_1.Text style={[
                     styles_1.default.domainStatText,
                     { color: isActive ? activeColor : AppColors_1.AppColors.grayTextWeak },
                 ]}>
-                {count}
-              </react_native_1.Text>
-            </react_native_1.Pressable>);
+                  {count}
+                </react_native_1.Text>
+              </react_native_1.Pressable>);
         })}
+        </react_native_1.View>
       </react_native_1.View>
+
+      {total > 0 && (<react_native_1.View style={styles_1.default.domainProgressTrack}>
+          {pctSuccess > 0 && (<react_native_1.View style={[
+                    styles_1.default.domainProgressSegment,
+                    {
+                        width: `${pctSuccess}%`,
+                        backgroundColor: AppColors_1.AppColors.greenColor,
+                    },
+                ]}/>)}
+          {pctFailed > 0 && (<react_native_1.View style={[
+                    styles_1.default.domainProgressSegment,
+                    {
+                        width: `${pctFailed}%`,
+                        backgroundColor: AppColors_1.AppColors.errorColor,
+                    },
+                ]}/>)}
+          {pctLoading > 0 && (<react_native_1.View style={[
+                    styles_1.default.domainProgressSegment,
+                    {
+                        width: `${pctLoading}%`,
+                        backgroundColor: AppColors_1.AppColors.darkOrange,
+                    },
+                ]}/>)}
+        </react_native_1.View>)}
     </react_native_1.Pressable>);
 };
 exports.default = DomainHeader;

package/dist/commonjs/components/EmptyState.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare const EmptyState: ({ isSearch }: {
+declare const EmptyState: React.NamedExoticComponent<{
     isSearch?: boolean;
-}) => React.JSX.Element;
+}>;
 export default EmptyState;

package/dist/commonjs/components/EmptyState.js

@@ -46,7 +46,7 @@ const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
 const styles_1 = __importDefault(require("../styles"));
-const EmptyState = ({ isSearch }) => {
+const EmptyState = react_1.default.memo(function EmptyState({ isSearch }) {
     const iconPulse = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
     (0, react_1.useEffect)(() => {
         const loop = react_native_1.Animated.loop(react_native_1.Animated.sequence([
@@ -87,5 +87,5 @@ const EmptyState = ({ isSearch }) => {
           <react_native_1.Text style={styles_1.default.reloadBtnText}>Reload App</react_native_1.Text>
         </TouchableScale_1.default>)}
     </AnimatedEntrance_1.default>);
-};
+});
 exports.default = EmptyState;

package/dist/commonjs/components/EndOfListFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface EndOfListFooterProps {
+    count?: number;
+    label?: string;
+    message?: string;
+}
+export declare const EndOfListFooter: React.FC<EndOfListFooterProps>;
+export default EndOfListFooter;

package/dist/commonjs/components/EndOfListFooter.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EndOfListFooter = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const NetworkIcons_1 = require("./NetworkIcons");
+const EndOfListFooter = ({ count, label, message = "You've reached the end of the list", }) => {
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.dividerLine}/>
+      <react_native_1.View style={styles.badgePill}>
+        <react_native_1.View style={styles.iconCircle}>
+          <NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.purple} size={8}/>
+        </react_native_1.View>
+        <react_native_1.Text style={styles.messageText}>{message}</react_native_1.Text>
+        {count != null && count > 0 && (<react_native_1.View style={styles.countBadge}>
+            <react_native_1.Text style={styles.countText}>
+              {count} {label ? (count === 1 ? label.replace(/s$/, '') : label) : ''}
+            </react_native_1.Text>
+          </react_native_1.View>)}
+      </react_native_1.View>
+      <react_native_1.View style={styles.dividerLine}/>
+    </react_native_1.View>);
+};
+exports.EndOfListFooter = EndOfListFooter;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 28,
+        gap: 8,
+    },
+    dividerLine: {
+        flex: 1,
+        height: 1,
+        backgroundColor: AppColors_1.AppColors.dividerColor,
+        opacity: 0.7,
+    },
+    badgePill: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 999,
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        shadowColor: AppColors_1.AppColors.black,
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.04,
+        shadowRadius: 2,
+        elevation: 1,
+    },
+    iconCircle: {
+        width: 14,
+        height: 14,
+        borderRadius: 7,
+        backgroundColor: `${AppColors_1.AppColors.purple}18`,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    messageText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.1,
+    },
+    countBadge: {
+        paddingHorizontal: 5,
+        paddingVertical: 1,
+        borderRadius: 6,
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    countText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9.5,
+        color: AppColors_1.AppColors.grayTextStrong,
+    },
+});
+exports.default = exports.EndOfListFooter;

package/dist/commonjs/components/ErrorBoundary.d.ts

@@ -1,17 +1,8 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-interface Props {
-    children: ReactNode;
-    onClose?: () => void;
-    onReset?: () => void;
-    fallbackType?: 'modal' | 'inline';
-}
-interface State {
-    hasError: boolean;
-    error: Error | null;
-}
-export declare class ErrorBoundary extends Component<Props, State> {
-    state: State;
-    static getDerivedStateFromError(error: Error): State;
+import React, { Component, ErrorInfo } from 'react';
+import { ErrorBoundaryProps, ErrorBoundaryState } from '../types';
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
     componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
     private handleReset;
     private handleCopyTrace;

package/dist/commonjs/components/ErrorBoundary.js

@@ -127,7 +127,7 @@ ${error.stack}`;
             <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    backgroundColor: isNativeCrash ? 'rgba(239, 68, 68, 0.1)' : 'rgba(245, 158, 11, 0.1)',
+                    backgroundColor: isNativeCrash ? `${AppColors_1.AppColors.errorColor}1A` : `${AppColors_1.AppColors.amber500}1A`,
                     paddingHorizontal: 10,
                     paddingVertical: 4,
                     borderRadius: 20,
@@ -137,7 +137,7 @@ ${error.stack}`;
               <react_native_1.Text style={{
                     fontSize: 10,
                     fontWeight: 'bold',
-                    color: isNativeCrash ? '#EF4444' : '#F59E0B',
+                    color: isNativeCrash ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.amber500,
                     fontFamily: AppFonts_1.AppFonts.interBold || 'System'
                 }}>
                 {isNativeCrash ? '🔴 NATIVE CRASH' : '🟡 JAVASCRIPT CRASH'}
@@ -149,22 +149,22 @@ ${error.stack}`;
             </react_native_1.Text>
 
             {parsed && (<react_native_1.View style={{
-                        backgroundColor: '#F1F5F9',
+                        backgroundColor: AppColors_1.AppColors.slate100,
                         borderRadius: 8,
                         padding: 10,
                         width: '100%',
                         marginBottom: 10,
                         borderWidth: 1,
-                        borderColor: '#E2E8F0',
+                        borderColor: AppColors_1.AppColors.slate200,
                         gap: 4
                     }}>
-                <react_native_1.Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts_1.AppFonts.interMedium }} numberOfLines={1}>
+                <react_native_1.Text style={{ fontSize: 11, color: AppColors_1.AppColors.slate600, fontFamily: AppFonts_1.AppFonts.interMedium }} numberOfLines={1}>
                   <react_native_1.Text style={{ fontWeight: 'bold' }}>Method:</react_native_1.Text> {parsed.method}
                 </react_native_1.Text>
-                <react_native_1.Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts_1.AppFonts.interMedium }} numberOfLines={1}>
+                <react_native_1.Text style={{ fontSize: 11, color: AppColors_1.AppColors.slate600, fontFamily: AppFonts_1.AppFonts.interMedium }} numberOfLines={1}>
                   <react_native_1.Text style={{ fontWeight: 'bold' }}>File:</react_native_1.Text> {parsed.file}
                 </react_native_1.Text>
-                <react_native_1.Text style={{ fontSize: 11, color: '#475569', fontFamily: AppFonts_1.AppFonts.interMedium }}>
+                <react_native_1.Text style={{ fontSize: 11, color: AppColors_1.AppColors.slate600, fontFamily: AppFonts_1.AppFonts.interMedium }}>
                   <react_native_1.Text style={{ fontWeight: 'bold' }}>Line:</react_native_1.Text> {parsed.line}  <react_native_1.Text style={{ fontWeight: 'bold' }}>Col:</react_native_1.Text> {parsed.column}
                 </react_native_1.Text>
               </react_native_1.View>)}
@@ -179,7 +179,7 @@ ${error.stack}`;
 
             <react_native_1.View style={{ width: '100%', gap: 8, marginBottom: 12 }}>
               <react_native_1.TouchableOpacity style={{
-                    backgroundColor: '#0F172A',
+                    backgroundColor: AppColors_1.AppColors.slate900,
                     height: 38,
                     borderRadius: 8,
                     justifyContent: 'center',
@@ -187,7 +187,7 @@ ${error.stack}`;
                     flexDirection: 'row',
                     gap: 6
                 }} onPress={this.handleCopyTrace}>
-                <react_native_1.Text style={{ color: '#FFFFFF', fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts_1.AppFonts.interBold || 'System' }}>
+                <react_native_1.Text style={{ color: AppColors_1.AppColors.white, fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts_1.AppFonts.interBold || 'System' }}>
                   📋 Copy Crash Traceback
                 </react_native_1.Text>
               </react_native_1.TouchableOpacity>
@@ -209,11 +209,11 @@ ${error.stack}`;
     }
 }
 exports.ErrorBoundary = ErrorBoundary;
-const monoFont = react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace';
+const monoFont = AppFonts_1.AppFonts.interRegular;
 const styles = react_native_1.StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.3)',
+        backgroundColor: `${AppColors_1.AppColors.black}4D`,
         justifyContent: 'center',
         alignItems: 'center',
         padding: 16,
@@ -221,11 +221,11 @@ const styles = react_native_1.StyleSheet.create({
     card: {
         width: '100%',
         maxWidth: 400,
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors_1.AppColors.white,
         borderRadius: 16,
         padding: 20,
         alignItems: 'center',
-        shadowColor: '#000000',
+        shadowColor: AppColors_1.AppColors.black,
         shadowOffset: { width: 0, height: 4 },
         shadowOpacity: 0.1,
         shadowRadius: 12,
@@ -238,14 +238,14 @@ const styles = react_native_1.StyleSheet.create({
     title: {
         fontFamily: AppFonts_1.AppFonts.interBold || 'System',
         fontSize: 18,
-        color: '#0F172A',
+        color: AppColors_1.AppColors.slate900,
         marginBottom: 8,
         textAlign: 'center',
     },
     subtitle: {
         fontFamily: AppFonts_1.AppFonts.interRegular || 'System',
         fontSize: 12,
-        color: '#64748B',
+        color: AppColors_1.AppColors.slate500,
         lineHeight: 18,
         textAlign: 'center',
         marginBottom: 16,
@@ -253,10 +253,10 @@ const styles = react_native_1.StyleSheet.create({
     scroll: {
         width: '100%',
         maxHeight: 180,
-        backgroundColor: '#F8FAFC',
+        backgroundColor: AppColors_1.AppColors.slate50,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors_1.AppColors.slate200,
         padding: 10,
         marginBottom: 20,
     },
@@ -266,7 +266,7 @@ const styles = react_native_1.StyleSheet.create({
     code: {
         fontFamily: monoFont,
         fontSize: 11,
-        color: '#E11D48',
+        color: AppColors_1.AppColors.rose600,
     },
     btnRow: {
         flexDirection: 'row',
@@ -275,7 +275,7 @@ const styles = react_native_1.StyleSheet.create({
     },
     resetBtn: {
         flex: 1,
-        backgroundColor: AppColors_1.AppColors.purple || '#684B9B',
+        backgroundColor: AppColors_1.AppColors.purple,
         height: 40,
         borderRadius: 8,
         justifyContent: 'center',
@@ -284,13 +284,13 @@ const styles = react_native_1.StyleSheet.create({
     resetBtnText: {
         fontFamily: AppFonts_1.AppFonts.interBold || 'System',
         fontSize: 13,
-        color: '#FFFFFF',
+        color: AppColors_1.AppColors.white,
     },
     closeBtn: {
         flex: 1,
-        backgroundColor: '#F1F5F9',
+        backgroundColor: AppColors_1.AppColors.slate100,
         borderWidth: 1,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors_1.AppColors.slate200,
         height: 40,
         borderRadius: 8,
         justifyContent: 'center',
@@ -299,13 +299,13 @@ const styles = react_native_1.StyleSheet.create({
     closeBtnText: {
         fontFamily: AppFonts_1.AppFonts.interBold || 'System',
         fontSize: 13,
-        color: '#475569',
+        color: AppColors_1.AppColors.slate600,
     },
     inlineContainer: {
         padding: 8,
-        backgroundColor: '#FFE4E6',
+        backgroundColor: AppColors_1.AppColors.roseBg,
         borderWidth: 1,
-        borderColor: '#FCA5A5',
+        borderColor: AppColors_1.AppColors.errorBorder,
         borderRadius: 8,
         flexDirection: 'row',
         alignItems: 'center',
@@ -315,10 +315,10 @@ const styles = react_native_1.StyleSheet.create({
     inlineTitle: {
         fontFamily: AppFonts_1.AppFonts.interBold || 'System',
         fontSize: 11,
-        color: '#991B1B',
+        color: AppColors_1.AppColors.redErrorText,
     },
     inlineResetBtn: {
-        backgroundColor: '#991B1B',
+        backgroundColor: AppColors_1.AppColors.redErrorText,
         paddingHorizontal: 10,
         paddingVertical: 4,
         borderRadius: 4,
@@ -326,7 +326,7 @@ const styles = react_native_1.StyleSheet.create({
     inlineResetText: {
         fontFamily: AppFonts_1.AppFonts.interBold || 'System',
         fontSize: 10,
-        color: '#FFFFFF',
+        color: AppColors_1.AppColors.white,
     },
 });
 exports.default = ErrorBoundary;

package/dist/commonjs/components/FloatingBubble.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Animated, PanResponder } from 'react-native';
+interface FloatingBubbleProps {
+    pan: Animated.ValueXY;
+    panResponder: ReturnType<typeof PanResponder.create>;
+    fabScaleAnim: Animated.Value;
+    fabRotateAnim: Animated.Value;
+    fabShineAnim: Animated.Value;
+    unreadPulseAnim: Animated.Value;
+    hasUnread: boolean;
+    onPress: () => void;
+}
+export declare const FloatingBubble: React.FC<FloatingBubbleProps>;
+export default FloatingBubble;

package/dist/commonjs/components/FloatingBubble.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingBubble = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const BrandCircleIcon_1 = require("./BrandCircleIcon");
+const styles_1 = __importDefault(require("../styles"));
+const AppColors_1 = require("../styles/AppColors");
+const FloatingBubble = ({ pan, panResponder, fabScaleAnim, fabRotateAnim, fabShineAnim, unreadPulseAnim, hasUnread, onPress, }) => {
+    return (<react_native_1.Animated.View style={[
+            styles_1.default.fabContainer,
+            {
+                transform: [
+                    { translateX: pan.x },
+                    { translateY: pan.y },
+                    { scale: fabScaleAnim },
+                ],
+            },
+        ]} {...panResponder.panHandlers}>
+      <TouchableScale_1.default style={styles_1.default.fabGradientTouchable} onPress={onPress} activeScale={0.88}>
+        <react_native_linear_gradient_1.default colors={[
+            AppColors_1.AppColors.gradientPurpleStart,
+            AppColors_1.AppColors.gradientPurpleMid,
+            AppColors_1.AppColors.gradientPurpleEnd,
+        ]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles_1.default.fabGradientInner}>
+          <react_native_1.Animated.View style={{
+            transform: [
+                {
+                    rotate: fabRotateAnim.interpolate({
+                        inputRange: [0, 1],
+                        outputRange: ['0deg', '360deg'],
+                    }),
+                },
+            ],
+        }}>
+            <BrandCircleIcon_1.BrandCircleIcon size={38}/>
+          </react_native_1.Animated.View>
+        </react_native_linear_gradient_1.default>
+
+        <react_native_1.View pointerEvents="none" style={styles_1.default.fabShineClip}>
+          <react_native_1.Animated.View style={[
+            styles_1.default.fabShineStreak,
+            {
+                transform: [
+                    {
+                        translateX: fabShineAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-48, 96],
+                        }),
+                    },
+                    { rotate: '25deg' },
+                ],
+            },
+        ]}>
+            <react_native_linear_gradient_1.default colors={[
+            'rgba(255,255,255,0)',
+            'rgba(255,255,255,0.55)',
+            'rgba(255,255,255,0)',
+        ]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
+          </react_native_1.Animated.View>
+        </react_native_1.View>
+        {hasUnread && (<react_native_1.Animated.View style={[
+                styles_1.default.fabGreenDot,
+                { transform: [{ scale: unreadPulseAnim }] },
+            ]}/>)}
+      </TouchableScale_1.default>
+    </react_native_1.Animated.View>);
+};
+exports.FloatingBubble = FloatingBubble;
+exports.default = exports.FloatingBubble;

package/dist/commonjs/components/HeadersSection.js

@@ -37,6 +37,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const react_i18next_1 = require("react-i18next");
 const react_native_1 = require("react-native");
 // Components
 const CopyButton_1 = __importDefault(require("./CopyButton"));
@@ -96,6 +97,7 @@ const HeaderRow = react_1.default.memo(function HeaderRow({ headerKey, value, is
     </react_native_1.Animated.View>);
 });
 const HeadersSection = ({ title, headers, search, resetKey, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
     const { toggleOpen, forceOpen, chevronStyle, bodyStyle } = (0, useAccordion_1.default)(false, 2400, 300);
     (0, react_1.useEffect)(() => {
         forceOpen(false);
@@ -142,12 +144,12 @@ const HeadersSection = ({ title, headers, search, resetKey, }) => {
 
       <react_native_1.Animated.View style={bodyStyle}>
         <react_native_1.View style={styles_1.default.htColHeadRow}>
-          <react_native_1.Text style={[styles_1.default.htColHead, { width: '30%' }]}>KEY</react_native_1.Text>
-          <react_native_1.Text style={[styles_1.default.htColHead, { flex: 1 }]}>VALUE</react_native_1.Text>
+          <react_native_1.Text style={[styles_1.default.htColHead, { width: '30%' }]}>{t('network.jsonViewer.key')}</react_native_1.Text>
+          <react_native_1.Text style={[styles_1.default.htColHead, { flex: 1 }]}>{t('network.jsonViewer.value')}</react_native_1.Text>
         </react_native_1.View>
 
         {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<react_native_1.View style={styles_1.default.htEmpty}>
-            <react_native_1.Text style={styles_1.default.htEmptyText}>No matching headers</react_native_1.Text>
+            <react_native_1.Text style={styles_1.default.htEmptyText}>{t('network.noMatchingHeaders')}</react_native_1.Text>
           </react_native_1.View>)}
       </react_native_1.Animated.View>
     </react_native_1.View>);

package/dist/commonjs/components/HighlightText.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-declare const HighlightText: ({ text, search, style, highlightStyle, detectLinks, ...rest }: any) => React.JSX.Element;
+declare const HighlightText: React.NamedExoticComponent<any>;
 export default HighlightText;