react-native-inapp-inspector 2.3.12 → 2.3.13

package/dist/commonjs/components/HeadersSection.js

@@ -80,10 +80,11 @@ const HeaderRow = react_1.default.memo(function HeaderRow({ headerKey, value, is
         <react_native_1.Text style={styles_1.default.htValue} selectable numberOfLines={expanded ? undefined : 3}>
           {value}
         </react_native_1.Text>
-        {isLong && (<react_native_1.View style={styles_1.default.htExpandRow}>
+        {isLong && (<react_native_1.View style={[styles_1.default.htExpandRow, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
             <react_native_1.Text style={styles_1.default.htExpandText}>
-              {expanded ? '▲ less' : '▼ more'}
+              {expanded ? 'less' : 'more'}
             </react_native_1.Text>
+            <NetworkIcons_1.ChevronIcon direction={expanded ? 'up' : 'down'} color={AppColors_1.AppColors.purple} size={10}/>
           </react_native_1.View>)}
       </react_native_1.Pressable>
       <TouchableScale_1.default onPress={() => (0, helpers_1.copyToClipboard)(value, headerKey)} hitSlop={8} style={styles_1.default.htCopyBtn}>

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

@@ -418,9 +418,9 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
                 ? `${(node.sizeKb / 1024).toFixed(2)} MB`
                 : `${node.sizeKb} KB`}`} accessibilityState={{ expanded: isExpanded }} accessibilityHint="Double tap to expand or collapse folder" onPress={() => toggleFolder(node.fullPath)} style={[bundleStyles.treeFolderRow, { paddingLeft: indentLeft }]}>
           <react_native_1.View style={bundleStyles.treeRowLeft}>
-            <react_native_1.Text style={bundleStyles.treeChevron}>
-              {isCollapsed ? '▸' : '▾'}
-            </react_native_1.Text>
+            <react_native_1.View style={{ marginRight: 4 }}>
+              <NetworkIcons_1.ChevronIcon direction={isCollapsed ? 'right' : 'down'} size={12} color={AppColors_1.AppColors.grayTextWeak}/>
+            </react_native_1.View>
             {isCollapsed ? (<NetworkIcons_1.FolderIcon color={AppColors_1.AppColors.amber500} size={15}/>) : (<NetworkIcons_1.FolderOpenIcon color={AppColors_1.AppColors.amber500} size={15}/>)}
             <HighlightText_1.default text={node.name + '/'} search={search} style={bundleStyles.treeFolderName} highlightStyle={bundleStyles.searchHighlight}/>
             <react_native_1.View style={bundleStyles.treeCountBadge}>
@@ -876,7 +876,7 @@ const BundleTab = react_1.default.memo(() => {
                     letterSpacing: 0.3,
                     textTransform: 'uppercase',
                 }}>
-                            Live Metro URL ↗
+                            Live Metro URL
                           </react_native_1.Text>
                         </react_native_1.View>
                         <react_native_1.Text style={{

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

@@ -164,10 +164,10 @@ const DebuggingTab = () => {
               </react_native_1.View>
               <react_native_1.Text style={styles.serverSubtitle}>
                 {activePortInfo?.status === 'active'
-            ? `🟢 Active & Bundling (${activePortInfo.latencyMs}ms)`
+            ? `Active & Bundling (${activePortInfo.latencyMs}ms)`
             : activePortInfo?.status === 'checking'
-                ? '🟡 Probing Metro Ports...'
-                : '🔴 Standby / Select active port'}
+                ? 'Probing Metro Ports...'
+                : 'Standby / Select active port'}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
@@ -232,9 +232,12 @@ const DebuggingTab = () => {
           <react_native_1.TextInput style={styles.input} value={hostIp} onChangeText={setHostIp} placeholder="192.168.1.15" placeholderTextColor={AppColors_1.AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
           <react_native_1.Text style={styles.inputSuffix}>:{selectedPort}</react_native_1.Text>
         </react_native_1.View>
-        <react_native_1.Text style={styles.inputHint}>
-          💡 Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
-        </react_native_1.Text>
+        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 6 }}>
+          <NetworkIcons_1.InfoCircleIcon size={13} color={AppColors_1.AppColors.grayTextWeak}/>
+          <react_native_1.Text style={[styles.inputHint, { marginTop: 0, flex: 1 }]}>
+            Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
+          </react_native_1.Text>
+        </react_native_1.View>
       </react_native_1.View>
 
       
@@ -286,13 +289,16 @@ const DebuggingTab = () => {
           <QRCodeView_1.default value={currentQrValue} size={190} color={AppColors_1.AppColors.primaryBlack} backgroundColor={AppColors_1.AppColors.white}/>
 
           <react_native_1.View style={styles.qrInfoBox}>
-            <react_native_1.Text style={styles.qrTargetTitle}>
-              {activeQrTab === 'apk'
-            ? '📦 Direct APK Download URL'
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginBottom: 2 }}>
+              {activeQrTab === 'apk' ? (<NetworkIcons_1.PackageIcon size={14} color={AppColors_1.AppColors.purple}/>) : activeQrTab === 'host' ? (<NetworkIcons_1.SmartphoneIcon size={14} color={AppColors_1.AppColors.purple}/>) : (<NetworkIcons_1.BoltIcon size={14} color={AppColors_1.AppColors.amber500}/>)}
+              <react_native_1.Text style={styles.qrTargetTitle}>
+                {activeQrTab === 'apk'
+            ? 'Direct APK Download URL'
             : activeQrTab === 'host'
-                ? '📱 Dev Settings Bundle Host'
-                : '⚡ Live Metro Fast-Refresh Endpoint'}
-            </react_native_1.Text>
+                ? 'Dev Settings Bundle Host'
+                : 'Live Metro Fast-Refresh Endpoint'}
+              </react_native_1.Text>
+            </react_native_1.View>
             <react_native_1.Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
               {currentQrValue}
             </react_native_1.Text>
@@ -318,7 +324,10 @@ const DebuggingTab = () => {
 
       
       <react_native_1.View style={styles.guideCard}>
-        <react_native_1.Text style={styles.guideHeading}>📱 HOW TO CONNECT ANDROID DEVICE:</react_native_1.Text>
+        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 12 }}>
+          <NetworkIcons_1.SmartphoneIcon size={15} color={AppColors_1.AppColors.primaryLight}/>
+          <react_native_1.Text style={[styles.guideHeading, { marginBottom: 0 }]}>HOW TO CONNECT ANDROID DEVICE:</react_native_1.Text>
+        </react_native_1.View>
 
         <react_native_1.View style={styles.stepRow}>
           <react_native_1.View style={styles.stepNumberBadge}>
@@ -349,7 +358,10 @@ const DebuggingTab = () => {
             <react_native_1.Text style={styles.stepNumberText}>3</react_native_1.Text>
           </react_native_1.View>
           <react_native_1.View style={{ flex: 1 }}>
-            <react_native_1.Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh ⚡</react_native_1.Text>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <react_native_1.Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh</react_native_1.Text>
+              <NetworkIcons_1.BoltIcon size={13} color={AppColors_1.AppColors.amber500}/>
+            </react_native_1.View>
             <react_native_1.Text style={styles.stepDesc}>
               Any changes saved in VS Code will immediately update <react_native_1.Text style={{ fontWeight: '700' }}>both the iOS Simulator and physical Android phone</react_native_1.Text> in real-time!
             </react_native_1.Text>

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

@@ -303,7 +303,7 @@ const NetworkDetail = react_1.default.memo(() => {
                     letterSpacing: 0.4,
                     textTransform: 'uppercase',
                 }}>
-                        ENDPOINT URL ↗
+                        ENDPOINT URL
                       </react_native_1.Text>
                     </react_native_1.View>
 
@@ -338,7 +338,7 @@ const NetworkDetail = react_1.default.memo(() => {
                     fontSize: 9,
                     color: AppColors_1.AppColors.sky600,
                 }}>
-                          Open ↗
+                          Open
                         </react_native_1.Text>
                       </react_native_1.View>
                     </react_native_1.View>

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

@@ -370,12 +370,13 @@ const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQuery =
               <react_native_1.Text style={styles.sectionTitle}>LATENCY & SPEED</react_native_1.Text>
               <react_native_1.View style={styles.chipsWrap}>
                 {[
-            { key: 'all', label: 'All Speeds', color: AppColors_1.AppColors.purple },
-            { key: 'fast', label: '⚡ Fast (<200ms)', color: AppColors_1.AppColors.greenColor, count: counts.fastCount },
-            { key: 'normal', label: '⏱️ Normal (200-500ms)', color: AppColors_1.AppColors.skyBlue, count: counts.normalCount },
-            { key: 'slow', label: '⚠️ Slow (>500ms)', color: AppColors_1.AppColors.errorColor, count: counts.slowCount },
+            { key: 'all', label: 'All Speeds', color: AppColors_1.AppColors.purple, icon: NetworkIcons_1.LayersIcon },
+            { key: 'fast', label: 'Fast (<200ms)', color: AppColors_1.AppColors.greenColor, icon: NetworkIcons_1.BoltIcon, count: counts.fastCount },
+            { key: 'normal', label: 'Normal (200-500ms)', color: AppColors_1.AppColors.skyBlue, icon: NetworkIcons_1.ClockIcon, count: counts.normalCount },
+            { key: 'slow', label: 'Slow (>500ms)', color: AppColors_1.AppColors.errorColor, icon: NetworkIcons_1.CircleAlertIcon, count: counts.slowCount },
         ].map(item => {
             const isSelected = draft.latency === item.key;
+            const IconComp = item.icon;
             return (<react_native_1.TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, latency: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -383,6 +384,7 @@ const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQuery =
                         borderColor: item.color,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors_1.AppColors.grayTextWeak}/>
                       <react_native_1.Text style={[
                     styles.chipLabel,
                     isSelected && { color: item.color, fontFamily: AppFonts_1.AppFonts.interBold },
@@ -404,11 +406,12 @@ const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQuery =
               <react_native_1.Text style={styles.sectionTitle}>PROTOCOL</react_native_1.Text>
               <react_native_1.View style={styles.chipsWrap}>
                 {[
-            { key: 'all', label: 'All Protocols', color: AppColors_1.AppColors.purple },
-            { key: 'https', label: '🔒 HTTPS Secure', color: AppColors_1.AppColors.mintGreenText, count: counts.httpsCount },
-            { key: 'http', label: '🔓 HTTP Insecure', color: AppColors_1.AppColors.amber700, count: counts.httpCount },
+            { key: 'all', label: 'All Protocols', color: AppColors_1.AppColors.purple, icon: NetworkIcons_1.GlobeIcon },
+            { key: 'https', label: 'HTTPS Secure', color: AppColors_1.AppColors.mintGreenText, icon: NetworkIcons_1.LockIcon, count: counts.httpsCount },
+            { key: 'http', label: 'HTTP Insecure', color: AppColors_1.AppColors.amber700, icon: NetworkIcons_1.UnlockIcon, count: counts.httpCount },
         ].map(item => {
             const isSelected = draft.protocol === item.key;
+            const IconComp = item.icon;
             return (<react_native_1.TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, protocol: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -416,6 +419,7 @@ const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQuery =
                         borderColor: item.color,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors_1.AppColors.grayTextWeak}/>
                       <react_native_1.Text style={[
                     styles.chipLabel,
                     isSelected && { color: item.color, fontFamily: AppFonts_1.AppFonts.interBold },
@@ -437,13 +441,14 @@ const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQuery =
               <react_native_1.Text style={styles.sectionTitle}>SORT BY</react_native_1.Text>
               <react_native_1.View style={styles.chipsWrap}>
                 {[
-            { key: 'time_desc', label: '⏱️ Newest First (Default)' },
-            { key: 'time_asc', label: '⌛ Oldest First' },
-            { key: 'duration_desc', label: '🐢 Slowest Response' },
-            { key: 'duration_asc', label: '🚀 Fastest Response' },
-            { key: 'size_desc', label: '📦 Largest Response Size' },
+            { key: 'time_desc', label: 'Newest First (Default)', icon: NetworkIcons_1.ClockIcon },
+            { key: 'time_asc', label: 'Oldest First', icon: NetworkIcons_1.HourglassIcon },
+            { key: 'duration_desc', label: 'Slowest Response', icon: NetworkIcons_1.TurtleIcon },
+            { key: 'duration_asc', label: 'Fastest Response', icon: NetworkIcons_1.RocketIcon },
+            { key: 'size_desc', label: 'Largest Response Size', icon: NetworkIcons_1.PackageIcon },
         ].map(item => {
             const isSelected = draft.sortBy === item.key;
+            const IconComp = item.icon;
             return (<react_native_1.TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, sortBy: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -451,6 +456,7 @@ const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQuery =
                         borderColor: AppColors_1.AppColors.purple,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak}/>
                       <react_native_1.Text style={[
                     styles.chipLabel,
                     isSelected && { color: AppColors_1.AppColors.purple, fontFamily: AppFonts_1.AppFonts.interBold },

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

@@ -127,9 +127,12 @@ const StorageEntryCard = react_1.default.memo(function StorageEntryCard({ entry,
         <react_native_1.Text style={styles.valuePreviewText} numberOfLines={isExpanded ? undefined : 3} selectable={isExpanded}>
           {displayValue}
         </react_native_1.Text>
-        {entry.value.length > 80 && (<react_native_1.Text style={styles.expandHint}>
-            {isExpanded ? '▲ Collapse' : '▼ Expand'}
-          </react_native_1.Text>)}
+        {entry.value.length > 80 && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4, marginTop: 4 }}>
+            <react_native_1.Text style={styles.expandHint}>
+              {isExpanded ? 'Collapse' : 'Expand'}
+            </react_native_1.Text>
+            <NetworkIcons_1.ChevronIcon direction={isExpanded ? 'up' : 'down'} size={10} color={AppColors_1.AppColors.purple}/>
+          </react_native_1.View>)}
       </TouchableScale_1.default>
     </react_native_1.View>);
 });
@@ -504,7 +507,10 @@ exports.StorageTab = react_1.default.memo(() => {
                 : editType === 'boolean'
                     ? 'true'
                     : 'String value...'} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} style={[styles.textInput, styles.textAreaInput]} multiline textAlignVertical="top" autoCapitalize="none"/>
-              {jsonError && (<react_native_1.Text style={styles.errorText}>⚠️ {jsonError}</react_native_1.Text>)}
+              {jsonError && (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginTop: 4 }}>
+                  <NetworkIcons_1.WarningTriangleIcon size={12} color={AppColors_1.AppColors.errorColor}/>
+                  <react_native_1.Text style={styles.errorText}>{jsonError}</react_native_1.Text>
+                </react_native_1.View>)}
             </react_native_1.View>
 
             

package/dist/commonjs/components/JsonViewer.js

@@ -82,10 +82,11 @@ const JsonTableRow = react_1.default.memo(({ itemKey, val, search, }) => {
             localStyles.tableCellValue,
             isObject && localStyles.tableCellRawCode,
         ]} highlightStyle={localStyles.highlight} numberOfLines={expanded ? undefined : 3} selectable={true}/>
-        {isMultiline && (<react_native_1.TouchableOpacity onPress={() => setExpanded(prev => !prev)} hitSlop={6} style={localStyles.showMoreBtn}>
+        {isMultiline && (<react_native_1.TouchableOpacity onPress={() => setExpanded(prev => !prev)} hitSlop={6} style={[localStyles.showMoreBtn, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
             <react_native_1.Text style={localStyles.showMoreText}>
-              {expanded ? 'Show less ▲' : 'Show more ▼'}
+              {expanded ? 'Show less' : 'Show more'}
             </react_native_1.Text>
+            <NetworkIcons_1.ChevronIcon direction={expanded ? 'up' : 'down'} size={10} color={AppColors_1.AppColors.purple}/>
           </react_native_1.TouchableOpacity>)}
       </react_native_1.View>
     </react_native_1.View>);

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

@@ -37,7 +37,7 @@ export declare const SignalIcon: ({ color, size, }: IconProps) => React.JSX.Elem
 export declare const DiffIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const GlobeIcon: ({ color, size }: IconProps) => React.JSX.Element;
 export declare const SortArrowIcon: ({ color, size, direction, }: IconProps) => React.JSX.Element;
-export declare const ChevronIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const ChevronIcon: ({ color, size, direction, }: IconProps) => React.JSX.Element;
 export declare const FilterIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const DownloadIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const CloseWhite: ({ color, size }: IconProps) => React.JSX.Element;
@@ -135,3 +135,6 @@ export declare const PencilIcon: ({ color, size, }: IconProps) => React.JSX.Elem
 export declare const PlusIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const LockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
 export declare const QrCodeIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const UnlockIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const RocketIcon: ({ color, size, }: IconProps) => React.JSX.Element;
+export declare const TurtleIcon: ({ color, size, }: IconProps) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -38,7 +38,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InfoCircleIcon = exports.UserIcon = exports.LayersIcon = exports.WipeIcon = exports.FolderIcon = exports.SettingsIcon = exports.EyeIcon = exports.JsIcon = exports.CssIcon = exports.HtmlIcon = exports.BrandSquareIcon = exports.BrandCircleIcon = exports.MoonIcon = exports.SunIcon = exports.DebugIcon = exports.InsightsIcon = exports.AnalyticsIcon = exports.WhiteBackNavigation = exports.CloseWhite = exports.DownloadIcon = exports.FilterIcon = exports.ChevronIcon = exports.SortArrowIcon = exports.GlobeIcon = exports.DiffIcon = exports.SignalIcon = exports.ExportIcon = exports.HeaderPauseIcon = exports.TrashIcon = exports.FailIcon = exports.CircleAlertIcon = exports.CircleXIcon = exports.CircleCheckIcon = exports.CheckIcon = exports.TerminalIcon = exports.FetchIcon = exports.CopyIcon = exports.HeadersIcon = exports.ResponseIcon = exports.RequestIcon = exports.SizeIcon = exports.StatusIcon = exports.CalendarIcon = exports.ClockIcon = exports.ClearIcon = exports.SearchIcon = exports.ExpandCollapseIcon = exports.ScreenIcon = exports.MapPinIcon = exports.EmptyRadarIcon = void 0;
 exports.DiagnosticsIcon = exports.StackTraceIcon = exports.LayoutIcon = exports.ChipIcon = exports.SkullIcon = exports.ShieldAlertIcon = exports.CrashIcon = exports.UserCheckIcon = exports.TargetGoalIcon = exports.RepeatIcon = exports.PinIcon = exports.HourglassIcon = exports.FlameIcon = exports.CodeBracketsIcon = exports.AndroidIcon = exports.AppleIcon = exports.LinkChainIcon = exports.GitHubIcon = exports.PackageBoxIcon = exports.ExternalLinkIcon = exports.MoneyIcon = exports.CartIcon = exports.TextAaIcon = exports.BrainIcon = exports.AtomIcon = exports.MapIcon = exports.SparkleIcon = exports.LightbulbIcon = exports.DocIcon = exports.FolderOpenIcon = exports.BanIcon = exports.BoltIcon = exports.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = exports.RefreshCcwIcon = exports.TimelineIcon = exports.LiveStateIcon = exports.BundleIcon = exports.ForwardChevronIcon = exports.PackageIcon = exports.TableIcon = exports.RawIcon = exports.PrettyIcon = exports.SortIcon = exports.MotionIcon = exports.TrendingUpIcon = exports.ErrorCircleIcon = exports.WarningTriangleIcon = void 0;
-exports.QrCodeIcon = exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
+exports.TurtleIcon = exports.RocketIcon = exports.UnlockIcon = exports.QrCodeIcon = exports.LockIcon = exports.PlusIcon = exports.PencilIcon = exports.DatabaseIcon = exports.ShieldCheckIcon = exports.WifiIcon = exports.CpuIcon = exports.ChevronDownIcon = exports.ResetIcon = exports.NpmIcon = exports.TagIcon = exports.BugIcon = exports.AlertTriangleIcon = exports.SmartphoneIcon = exports.KeyIcon = exports.BarChartIcon = exports.DiceIcon = exports.ZapIcon = exports.FlaskIcon = exports.LoadingSpinnerIcon = exports.ListenerIcon = exports.AllFramesIcon = exports.AppFramesIcon = exports.RawJsonIcon = exports.TrailIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 const AppColors_1 = require("../styles/AppColors");
@@ -236,9 +236,16 @@ const SortArrowIcon = ({ color = AppColors_1.AppColors.primaryLight, size = 20,
     </react_native_svg_1.default>);
 };
 exports.SortArrowIcon = SortArrowIcon;
-const ChevronIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => {
+const ChevronIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, direction = 'down', }) => {
+    let path = 'M6 9l6 6 6-6';
+    if (direction === 'up')
+        path = 'M18 15l-6-6-6 6';
+    else if (direction === 'right')
+        path = 'M9 18l6-6-6-6';
+    else if (direction === 'left')
+        path = 'M15 18l-6-6 6-6';
     return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-      <react_native_svg_1.Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d={path} stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
     </react_native_svg_1.default>);
 };
 exports.ChevronIcon = ChevronIcon;
@@ -906,3 +913,19 @@ const QrCodeIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, })
     <react_native_svg_1.Path d="M14 14h3v3h-3zM18 18h3v3h-3zM14 19h3v2h-3zM19 14h2v3h-2z" fill={color}/>
   </react_native_svg_1.default>);
 exports.QrCodeIcon = QrCodeIcon;
+const UnlockIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M7 11V7a5 5 0 0 1 9.9-1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.UnlockIcon = UnlockIcon;
+const RocketIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09zM12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6.05 11a22.35 22.35 0 0 1-3.95 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    <react_native_svg_1.Path d="M9 12l-4 4M15 6l-3 3" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+  </react_native_svg_1.default>);
+exports.RocketIcon = RocketIcon;
+const TurtleIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14, }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <react_native_svg_1.Ellipse cx="12" cy="14" rx="7" ry="5" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Circle cx="12" cy="6" r="3" stroke={color} strokeWidth="2"/>
+    <react_native_svg_1.Path d="M5 12l-2-2M19 12l2-2M6 18l-2 2M18 18l2 2" stroke={color} strokeWidth="2" strokeLinecap="round"/>
+  </react_native_svg_1.default>);
+exports.TurtleIcon = TurtleIcon;

package/dist/commonjs/constants/telemetryConfig.d.ts

@@ -1,3 +1,3 @@
-export declare const ENC_MID = "df8ace0290a695bd05986213";
-export declare const ENC_SEC = "db93cb0186b1f7bb0ba63a0d0a64997586849455ce37";
-export declare const TELEMETRY_SALT = "rn-inapp-inspector-telemetry-v1";
+export declare const ENC_MID = "";
+export declare const ENC_SEC = "";
+export declare const TELEMETRY_SALT = "";

package/dist/commonjs/constants/telemetryConfig.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TELEMETRY_SALT = exports.ENC_SEC = exports.ENC_MID = void 0;
-exports.ENC_MID = 'df8ace0290a695bd05986213';
-exports.ENC_SEC = 'db93cb0186b1f7bb0ba63a0d0a64997586849455ce37';
-exports.TELEMETRY_SALT = 'rn-inapp-inspector-telemetry-v1';
+exports.ENC_MID = '';
+exports.ENC_SEC = '';
+exports.TELEMETRY_SALT = '';

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "2.3.12";
+export declare const LIB_VERSION = "2.3.13";

package/dist/commonjs/constants/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
-exports.LIB_VERSION = '2.3.12';
+exports.LIB_VERSION = '2.3.13';

package/dist/esm/components/HeadersSection.js

@@ -42,10 +42,11 @@ const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, inde
         <Text style={styles.htValue} selectable numberOfLines={expanded ? undefined : 3}>
           {value}
         </Text>
-        {isLong && (<View style={styles.htExpandRow}>
+        {isLong && (<View style={[styles.htExpandRow, { flexDirection: 'row', alignItems: 'center', gap: 4 }]}>
             <Text style={styles.htExpandText}>
-              {expanded ? '▲ less' : '▼ more'}
+              {expanded ? 'less' : 'more'}
             </Text>
+            <ChevronIcon direction={expanded ? 'up' : 'down'} color={AppColors.purple} size={10}/>
           </View>)}
       </Pressable>
       <TouchableScale onPress={() => copyToClipboard(value, headerKey)} hitSlop={8} style={styles.htCopyBtn}>

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

@@ -8,7 +8,7 @@ import FeatureUnderDevNotice from './FeatureUnderDevNotice';
 import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { copyToClipboard } from '../../helpers';
-import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, DownloadIcon, } from '../NetworkIcons';
+import { PackageIcon, SearchIcon, ClearIcon, CircleAlertIcon, LayersIcon, TimelineIcon, LiveStateIcon, StorageIcon, MetadataIcon, FolderIcon, FolderOpenIcon, TrashIcon, LightbulbIcon, SparkleIcon, ClockIcon, RefreshCcwIcon, ExternalLinkIcon, DownloadIcon, ChevronIcon, } from '../NetworkIcons';
 import Svg, { Path, Rect, Circle, Ellipse, G, Defs, LinearGradient, Stop, } from 'react-native-svg';
 import { analyzeHostAppBundle, getCachedBundleAnalysis, getInitialBundleAnalysis, getHostScriptURL, } from '../../customHooks/bundleAnalyzer';
 const PackageLogoRenderer = ({ name, size = 28 }) => {
@@ -378,9 +378,9 @@ const BundleTreeNodeView = ({ node, level, search, totalBundleKb, expandedFolder
                 ? `${(node.sizeKb / 1024).toFixed(2)} MB`
                 : `${node.sizeKb} KB`}`} accessibilityState={{ expanded: isExpanded }} accessibilityHint="Double tap to expand or collapse folder" onPress={() => toggleFolder(node.fullPath)} style={[bundleStyles.treeFolderRow, { paddingLeft: indentLeft }]}>
           <View style={bundleStyles.treeRowLeft}>
-            <Text style={bundleStyles.treeChevron}>
-              {isCollapsed ? '▸' : '▾'}
-            </Text>
+            <View style={{ marginRight: 4 }}>
+              <ChevronIcon direction={isCollapsed ? 'right' : 'down'} size={12} color={AppColors.grayTextWeak}/>
+            </View>
             {isCollapsed ? (<FolderIcon color={AppColors.amber500} size={15}/>) : (<FolderOpenIcon color={AppColors.amber500} size={15}/>)}
             <HighlightText text={node.name + '/'} search={search} style={bundleStyles.treeFolderName} highlightStyle={bundleStyles.searchHighlight}/>
             <View style={bundleStyles.treeCountBadge}>
@@ -836,7 +836,7 @@ const BundleTab = React.memo(() => {
                     letterSpacing: 0.3,
                     textTransform: 'uppercase',
                 }}>
-                            Live Metro URL ↗
+                            Live Metro URL
                           </Text>
                         </View>
                         <Text style={{

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

@@ -7,7 +7,7 @@ import TouchableScale from '../TouchableScale';
 import { copyToClipboard } from '../../helpers';
 import { showToast } from '../../helpers/toast';
 import { useTranslation } from '../../i18n';
-import { BoltIcon, SmartphoneIcon, PackageIcon, RepeatIcon, } from '../NetworkIcons';
+import { BoltIcon, SmartphoneIcon, PackageIcon, RepeatIcon, InfoCircleIcon, } from '../NetworkIcons';
 const COMMON_PORTS = [8081, 8082, 8083, 19000];
 export const DebuggingTab = () => {
     const { t } = useTranslation();
@@ -125,10 +125,10 @@ export const DebuggingTab = () => {
               </View>
               <Text style={styles.serverSubtitle}>
                 {activePortInfo?.status === 'active'
-            ? `🟢 Active & Bundling (${activePortInfo.latencyMs}ms)`
+            ? `Active & Bundling (${activePortInfo.latencyMs}ms)`
             : activePortInfo?.status === 'checking'
-                ? '🟡 Probing Metro Ports...'
-                : '🔴 Standby / Select active port'}
+                ? 'Probing Metro Ports...'
+                : 'Standby / Select active port'}
               </Text>
             </View>
           </View>
@@ -193,9 +193,12 @@ export const DebuggingTab = () => {
           <TextInput style={styles.input} value={hostIp} onChangeText={setHostIp} placeholder="192.168.1.15" placeholderTextColor={AppColors.grayTextWeak} autoCapitalize="none" autoCorrect={false}/>
           <Text style={styles.inputSuffix}>:{selectedPort}</Text>
         </View>
-        <Text style={styles.inputHint}>
-          💡 Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
-        </Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginTop: 6 }}>
+          <InfoCircleIcon size={13} color={AppColors.grayTextWeak}/>
+          <Text style={[styles.inputHint, { marginTop: 0, flex: 1 }]}>
+            Ensure your physical Android device and Mac are connected to the same Wi-Fi network.
+          </Text>
+        </View>
       </View>
 
       
@@ -247,13 +250,16 @@ export const DebuggingTab = () => {
           <QRCodeView value={currentQrValue} size={190} color={AppColors.primaryBlack} backgroundColor={AppColors.white}/>
 
           <View style={styles.qrInfoBox}>
-            <Text style={styles.qrTargetTitle}>
-              {activeQrTab === 'apk'
-            ? '📦 Direct APK Download URL'
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5, marginBottom: 2 }}>
+              {activeQrTab === 'apk' ? (<PackageIcon size={14} color={AppColors.purple}/>) : activeQrTab === 'host' ? (<SmartphoneIcon size={14} color={AppColors.purple}/>) : (<BoltIcon size={14} color={AppColors.amber500}/>)}
+              <Text style={styles.qrTargetTitle}>
+                {activeQrTab === 'apk'
+            ? 'Direct APK Download URL'
             : activeQrTab === 'host'
-                ? '📱 Dev Settings Bundle Host'
-                : '⚡ Live Metro Fast-Refresh Endpoint'}
-            </Text>
+                ? 'Dev Settings Bundle Host'
+                : 'Live Metro Fast-Refresh Endpoint'}
+              </Text>
+            </View>
             <Text style={styles.qrTargetUrl} numberOfLines={2} ellipsizeMode="middle">
               {currentQrValue}
             </Text>
@@ -279,7 +285,10 @@ export const DebuggingTab = () => {
 
       
       <View style={styles.guideCard}>
-        <Text style={styles.guideHeading}>📱 HOW TO CONNECT ANDROID DEVICE:</Text>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, marginBottom: 12 }}>
+          <SmartphoneIcon size={15} color={AppColors.primaryLight}/>
+          <Text style={[styles.guideHeading, { marginBottom: 0 }]}>HOW TO CONNECT ANDROID DEVICE:</Text>
+        </View>
 
         <View style={styles.stepRow}>
           <View style={styles.stepNumberBadge}>
@@ -310,7 +319,10 @@ export const DebuggingTab = () => {
             <Text style={styles.stepNumberText}>3</Text>
           </View>
           <View style={{ flex: 1 }}>
-            <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh ⚡</Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+              <Text style={styles.stepTitle}>Simultaneous Live Fast-Refresh</Text>
+              <BoltIcon size={13} color={AppColors.amber500}/>
+            </View>
             <Text style={styles.stepDesc}>
               Any changes saved in VS Code will immediately update <Text style={{ fontWeight: '700' }}>both the iOS Simulator and physical Android phone</Text> in real-time!
             </Text>

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

@@ -298,7 +298,7 @@ const NetworkDetail = React.memo(() => {
                     letterSpacing: 0.4,
                     textTransform: 'uppercase',
                 }}>
-                        ENDPOINT URL ↗
+                        ENDPOINT URL
                       </Text>
                     </View>
 
@@ -333,7 +333,7 @@ const NetworkDetail = React.memo(() => {
                     fontSize: 9,
                     color: AppColors.sky600,
                 }}>
-                          Open ↗
+                          Open
                         </Text>
                       </View>
                     </View>

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

@@ -5,7 +5,7 @@ import { AppColors } from '../../styles/AppColors';
 import { AppFonts } from '../../styles/AppFonts';
 import { useTranslation } from '../../i18n';
 import { METHOD_COLORS } from '../../constants';
-import { FilterIcon, CloseWhite, CircleCheckIcon, CircleAlertIcon, CircleXIcon, LayersIcon, RepeatIcon, ShieldAlertIcon, } from '../NetworkIcons';
+import { FilterIcon, CloseWhite, ClockIcon, CircleCheckIcon, CircleAlertIcon, CircleXIcon, LayersIcon, RepeatIcon, ShieldAlertIcon, BoltIcon, GlobeIcon, LockIcon, UnlockIcon, RocketIcon, TurtleIcon, HourglassIcon, PackageIcon, } from '../NetworkIcons';
 import TouchableScale from '../TouchableScale';
 export const DEFAULT_NETWORK_FILTERS = {
     statusCodes: new Set(['all']),
@@ -330,12 +330,13 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>LATENCY & SPEED</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'all', label: 'All Speeds', color: AppColors.purple },
-            { key: 'fast', label: '⚡ Fast (<200ms)', color: AppColors.greenColor, count: counts.fastCount },
-            { key: 'normal', label: '⏱️ Normal (200-500ms)', color: AppColors.skyBlue, count: counts.normalCount },
-            { key: 'slow', label: '⚠️ Slow (>500ms)', color: AppColors.errorColor, count: counts.slowCount },
+            { key: 'all', label: 'All Speeds', color: AppColors.purple, icon: LayersIcon },
+            { key: 'fast', label: 'Fast (<200ms)', color: AppColors.greenColor, icon: BoltIcon, count: counts.fastCount },
+            { key: 'normal', label: 'Normal (200-500ms)', color: AppColors.skyBlue, icon: ClockIcon, count: counts.normalCount },
+            { key: 'slow', label: 'Slow (>500ms)', color: AppColors.errorColor, icon: CircleAlertIcon, count: counts.slowCount },
         ].map(item => {
             const isSelected = draft.latency === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, latency: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -343,6 +344,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: item.color,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: item.color, fontFamily: AppFonts.interBold },
@@ -364,11 +366,12 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>PROTOCOL</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'all', label: 'All Protocols', color: AppColors.purple },
-            { key: 'https', label: '🔒 HTTPS Secure', color: AppColors.mintGreenText, count: counts.httpsCount },
-            { key: 'http', label: '🔓 HTTP Insecure', color: AppColors.amber700, count: counts.httpCount },
+            { key: 'all', label: 'All Protocols', color: AppColors.purple, icon: GlobeIcon },
+            { key: 'https', label: 'HTTPS Secure', color: AppColors.mintGreenText, icon: LockIcon, count: counts.httpsCount },
+            { key: 'http', label: 'HTTP Insecure', color: AppColors.amber700, icon: UnlockIcon, count: counts.httpCount },
         ].map(item => {
             const isSelected = draft.protocol === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, protocol: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -376,6 +379,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: item.color,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? item.color : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: item.color, fontFamily: AppFonts.interBold },
@@ -397,13 +401,14 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
               <Text style={styles.sectionTitle}>SORT BY</Text>
               <View style={styles.chipsWrap}>
                 {[
-            { key: 'time_desc', label: '⏱️ Newest First (Default)' },
-            { key: 'time_asc', label: '⌛ Oldest First' },
-            { key: 'duration_desc', label: '🐢 Slowest Response' },
-            { key: 'duration_asc', label: '🚀 Fastest Response' },
-            { key: 'size_desc', label: '📦 Largest Response Size' },
+            { key: 'time_desc', label: 'Newest First (Default)', icon: ClockIcon },
+            { key: 'time_asc', label: 'Oldest First', icon: HourglassIcon },
+            { key: 'duration_desc', label: 'Slowest Response', icon: TurtleIcon },
+            { key: 'duration_asc', label: 'Fastest Response', icon: RocketIcon },
+            { key: 'size_desc', label: 'Largest Response Size', icon: PackageIcon },
         ].map(item => {
             const isSelected = draft.sortBy === item.key;
+            const IconComp = item.icon;
             return (<TouchableOpacity key={item.key} activeOpacity={0.7} onPress={() => setDraft(prev => ({ ...prev, sortBy: item.key }))} style={[
                     styles.chip,
                     isSelected && {
@@ -411,6 +416,7 @@ export const NetworkFilterModal = ({ visible, onClose, filters, onApply, searchQ
                         borderColor: AppColors.purple,
                     },
                 ]}>
+                      <IconComp size={13} color={isSelected ? AppColors.purple : AppColors.grayTextWeak}/>
                       <Text style={[
                     styles.chipLabel,
                     isSelected && { color: AppColors.purple, fontFamily: AppFonts.interBold },