react-native-inapp-inspector 1.1.22 → 1.1.24

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

@@ -295,35 +295,35 @@ const PerformanceTab = react_1.default.memo(() => {
       <react_native_1.View style={perfStyles.filterRow}>
         <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 6, paddingHorizontal: 12, paddingVertical: 4 }}>
           {[
-            { key: 'ALL', label: t('performance.allLogs'), icon: '⚡', count: events.length },
+            { key: 'ALL', label: t('performance.allLogs'), Icon: NetworkIcons_1.BoltIcon, count: events.length },
             {
                 key: 'JANKY',
                 label: t('performance.jankySlow'),
-                icon: '⚠️',
+                Icon: NetworkIcons_1.WarningTriangleIcon,
                 count: events.filter(e => e.severity === 'warning' || e.severity === 'critical').length,
             },
             {
                 key: 'NAVIGATION',
                 label: t('performance.navigation'),
-                icon: '🗺️',
+                Icon: NetworkIcons_1.MapIcon,
                 count: events.filter(e => e.category === 'navigation').length,
             },
             {
                 key: 'RENDER',
                 label: t('performance.components'),
-                icon: '⚛️',
+                Icon: NetworkIcons_1.AtomIcon,
                 count: events.filter(e => e.category === 'render').length,
             },
             {
                 key: 'MEMORY',
                 label: t('performance.memoryGc'),
-                icon: '🧠',
+                Icon: NetworkIcons_1.BrainIcon,
                 count: events.filter(e => e.category === 'memory').length,
             },
             {
                 key: 'IO',
                 label: t('performance.networkIo'),
-                icon: '🌐',
+                Icon: NetworkIcons_1.GlobeIcon,
                 count: events.filter(e => e.category === 'io' || e.category === 'bridge').length,
             },
         ].map(tab => {
@@ -332,7 +332,7 @@ const PerformanceTab = react_1.default.memo(() => {
                     perfStyles.filterPill,
                     isActive && perfStyles.filterPillActive,
                 ]}>
-                <react_native_1.Text style={perfStyles.filterPillIcon}>{tab.icon}</react_native_1.Text>
+                <tab.Icon color={isActive ? AppColors_1.AppColors.white : AppColors_1.AppColors.grayTextStrong} size={12}/>
                 <react_native_1.Text style={[
                     perfStyles.filterPillText,
                     isActive && perfStyles.filterPillTextActive,
@@ -525,7 +525,7 @@ const PerformanceTab = react_1.default.memo(() => {
         </react_native_1.View>
 
         {filteredEvents.length === 0 ? (<react_native_1.View style={perfStyles.emptyCard}>
-            <react_native_1.Text style={{ fontSize: 28 }}>⚡</react_native_1.Text>
+            <NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.amber500} size={30}/>
             <react_native_1.Text style={perfStyles.emptyTitle}>{t('performance.emptyTitle')}</react_native_1.Text>
             <react_native_1.Text style={perfStyles.emptySub}>
               {t('performance.emptySubtitle')}
@@ -612,7 +612,10 @@ const PerformanceTab = react_1.default.memo(() => {
 
                     {/* Actionable Optimization Tip */}
                     {event.advice && (<react_native_1.View style={perfStyles.adviceCard}>
-                        <react_native_1.Text style={perfStyles.adviceHeading}>💡 {t('performance.optimizationTip')}</react_native_1.Text>
+                        <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                          <NetworkIcons_1.LightbulbIcon color={AppColors_1.AppColors.purpleShade700} size={12}/>
+                          <react_native_1.Text style={perfStyles.adviceHeading}>{t('performance.optimizationTip')}</react_native_1.Text>
+                        </react_native_1.View>
                         <react_native_1.Text style={perfStyles.adviceBodyText}>{event.advice}</react_native_1.Text>
                       </react_native_1.View>)}
                   </react_native_1.View>)}
@@ -703,9 +706,6 @@ const perfStyles = react_native_1.StyleSheet.create({
         backgroundColor: AppColors_1.AppColors.brandPurple,
         borderColor: AppColors_1.AppColors.brandPurple,
     },
-    filterPillIcon: {
-        fontSize: 11,
-    },
     filterPillText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 11,

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

@@ -221,9 +221,12 @@ const ReduxTab = react_1.default.memo(() => {
           <react_native_1.Text style={reduxTabStyles.resultCount}>
             Showing {filteredSlices.length} of {sliceItems.length} state slices
           </react_native_1.Text>
-          <react_native_1.Text style={reduxTabStyles.sortLabel}>
-            {sortMode === 'latest' ? '⚡ Newest Updates First' : '🔤 Alphabetical (A-Z)'}
-          </react_native_1.Text>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+            {sortMode === 'latest' ? (<NetworkIcons_1.BoltIcon color={AppColors_1.AppColors.brandPurple} size={11}/>) : (<NetworkIcons_1.TextAaIcon color={AppColors_1.AppColors.brandPurple} size={11}/>)}
+            <react_native_1.Text style={reduxTabStyles.sortLabel}>
+              {sortMode === 'latest' ? 'Newest Updates First' : 'Alphabetical (A-Z)'}
+            </react_native_1.Text>
+          </react_native_1.View>
         </react_native_1.View>
       </react_native_1.View>
 

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

@@ -66,3 +66,15 @@ export declare const StorageIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const MetadataIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const ReduxIcon: ({ color, size, }: any) => React.JSX.Element;
 export declare const PerformanceIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const BoltIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const BanIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const FolderOpenIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const DocIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const LightbulbIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SparkleIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const MapIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const AtomIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const BrainIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const TextAaIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CartIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const MoneyIcon: ({ color, size }: any) => React.JSX.Element;

package/dist/commonjs/components/NetworkIcons.js

@@ -37,7 +37,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.PerformanceIcon = exports.ReduxIcon = exports.MetadataIcon = exports.StorageIcon = 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.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.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;
 const react_1 = __importDefault(require("react"));
 const react_native_svg_1 = __importStar(require("react-native-svg"));
 // Stylesheet
@@ -508,3 +508,94 @@ const PerformanceIcon = ({ color = AppColors_1.AppColors.purple, size = 14, }) =
     </react_native_svg_1.default>);
 };
 exports.PerformanceIcon = PerformanceIcon;
+// ─── App-wide Vector Icons (emoji-free, render on every device) ─────────────
+const BoltIcon = ({ color = AppColors_1.AppColors.amber500, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M13 2 4.5 13.5 H10.5 L9 22 19.5 9.5 H13.5 Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.BoltIcon = BoltIcon;
+const BanIcon = ({ color = AppColors_1.AppColors.errorColor, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Path d="M5.5 5.5 18.5 18.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.BanIcon = BanIcon;
+const FolderOpenIcon = ({ color = AppColors_1.AppColors.amber500, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M8.4 11 10 5.5a2 2 0 0 1 1.9-1.5h3.7a1.5 1.5 0 0 1 1.4 2L15.5 11" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M6.7 20.4 4.3 12.9A1.6 1.6 0 0 1 5.8 11h14.6a1.6 1.6 0 0 1 1.6 1.9l-2.4 7.5a2 2 0 0 1-2 1.4H8.7a2 2 0 0 1-2-1.4Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.FolderOpenIcon = FolderOpenIcon;
+const DocIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M14 2v4a2 2 0 0 0 2 2h4" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M8 13h8 M8 17h8" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.DocIcon = DocIcon;
+const LightbulbIcon = ({ color = AppColors_1.AppColors.amber500, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.8.8 1.3 1.5 1.5 2.5" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M9 18h6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M10 22h4" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.LightbulbIcon = LightbulbIcon;
+const SparkleIcon = ({ color = AppColors_1.AppColors.amber500, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M11.1 3.9c.2-.6 1-.6 1.2 0l1.2 4.2 4.2 1.2c.6.2.6 1 0 1.2l-4.2 1.2-1.2 4.2c-.2.6-1 .6-1.2 0l-1.2-4.2-4.2-1.2c-.6-.2-.6-1 0-1.2l4.2-1.2Z" fill={color}/>
+      <react_native_svg_1.Path d="M18.5 3.5v4 M16.5 5.5h4" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.SparkleIcon = SparkleIcon;
+const MapIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M3 5.5 9 3.5l6 2 6-2v15l-6 2-6-2-6 2Z" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M9 3.5v15M15 5.5v15" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Circle cx="12" cy="11" r="1.9" stroke={color} strokeWidth="1.6"/>
+    </react_native_svg_1.default>);
+};
+exports.MapIcon = MapIcon;
+const AtomIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Ellipse cx="12" cy="12" rx="9" ry="3.8" stroke={color} strokeWidth="1.6"/>
+      <react_native_svg_1.Ellipse cx="12" cy="12" rx="9" ry="3.8" stroke={color} strokeWidth="1.6" transform="rotate(60 12 12)"/>
+      <react_native_svg_1.Ellipse cx="12" cy="12" rx="9" ry="3.8" stroke={color} strokeWidth="1.6" transform="rotate(120 12 12)"/>
+      <react_native_svg_1.Circle cx="12" cy="12" r="1.6" fill={color}/>
+    </react_native_svg_1.default>);
+};
+exports.AtomIcon = AtomIcon;
+const BrainIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M9.5 2a2.5 2.5 0 0 0-2.5 2.5v.5a2.5 2.5 0 0 0-3 3.17A2.5 2.5 0 0 0 2 10.5c0 .76.34 1.44.88 1.9A2.5 2.5 0 0 0 2 15.5c0 .76.34 1.44.88 1.9A2.5 2.5 0 0 0 5 19.75c0 .75.5 1.5 1.25 1.75A2.5 2.5 0 0 0 8.5 23h.25a2.5 2.5 0 0 0 2.5-2.5V4a2.5 2.5 0 0 0-1.75-2ZM14.5 2a2.5 2.5 0 0 1 2.5 2.5v.5a2.5 2.5 0 0 1 3 3.17A2.5 2.5 0 0 1 22 10.5c0 .76-.34 1.44-.88 1.9a2.5 2.5 0 0 1 .88 1.9c0 .76-.34 1.44-.88 1.9A2.5 2.5 0 0 1 19 19.75c0 .75-.5 1.5-1.25 1.75A2.5 2.5 0 0 1 15.5 23h-.25a2.5 2.5 0 0 1-2.5-2.5V4a2.5 2.5 0 0 1 1.75-2Z" stroke={color} strokeWidth="1.6" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.BrainIcon = BrainIcon;
+const TextAaIcon = ({ color = AppColors_1.AppColors.grayTextWeak, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Path d="M4 19 7.5 7 11 19" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M5.5 15h4" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+      <react_native_svg_1.Path d="M16 19l1.7-6.6 1.7 6.6" stroke={color} strokeWidth="1.8" strokeLinejoin="round"/>
+      <react_native_svg_1.Path d="M16.9 15.8h1.6" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.TextAaIcon = TextAaIcon;
+const CartIcon = ({ color = AppColors_1.AppColors.amber500, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="9.5" cy="20" r="1.3" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Circle cx="18.5" cy="20" r="1.3" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Path d="M3 3.5h1.8a1 1 0 0 1 .97.75l3.1 9.75a1.5 1.5 0 0 0 1.44 1.1h9.2a1 1 0 0 0 .95-.7l2.5-7.5a.8.8 0 0 0-.75-1.05H7" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
+    </react_native_svg_1.default>);
+};
+exports.CartIcon = CartIcon;
+const MoneyIcon = ({ color = AppColors_1.AppColors.emerald500, size = 14 }) => {
+    return (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+      <react_native_svg_1.Circle cx="12" cy="12" r="8.5" stroke={color} strokeWidth="1.8"/>
+      <react_native_svg_1.Path d="M12 7v10M14.5 9.5c-.6-1-1.5-1.5-2.5-1.5-1.5 0-2.5.9-2.5 2s1 1.8 2.5 2 2.5.8 2.5 2-1 2-2.5 2c-1 0-1.9-.5-2.5-1.5" stroke={color} strokeWidth="1.8" strokeLinecap="round"/>
+    </react_native_svg_1.default>);
+};
+exports.MoneyIcon = MoneyIcon;

package/dist/commonjs/components/TreeNode.js

@@ -81,7 +81,7 @@ const TreeNode = react_1.default.memo(function TreeNode({ data, name, level = 0,
         {name !== undefined && (<react_native_1.Text style={[styles_1.default.codeKey, { marginBottom: 4 }]}>{`"${String(name)}": `}</react_native_1.Text>)}
         <react_native_1.View style={styles_1.default.filePreviewCard}>
           {isImage ? (<react_native_1.Image source={{ uri: file.uri }} style={styles_1.default.filePreviewThumb} resizeMode="cover"/>) : (<react_native_1.View style={styles_1.default.filePreviewDoc}>
-              <react_native_1.Text style={{ fontSize: 20 }}>📄</react_native_1.Text>
+              <NetworkIcons_1.DocIcon color={AppColors_1.AppColors.grayTextWeak} size={20}/>
             </react_native_1.View>)}
           <react_native_1.View style={{ flex: 1 }}>
             <react_native_1.Text style={styles_1.default.filePreviewName} numberOfLines={1}>

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

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.22";
+export declare const LIB_VERSION = "1.1.24";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '1.1.22';
+exports.LIB_VERSION = '1.1.24';

package/dist/commonjs/customHooks/bundleAnalyzer.d.ts

@@ -107,7 +107,7 @@ export declare const getHostScriptURL: () => string;
 /**
  * Parses raw Metro bundle source code to discover real modules and packages in the host app.
  */
-export declare const parseBundleSource: (bundleText: string, totalBytes: number, scriptURL: string) => HostBundleAnalysisResult;
+export declare const parseBundleSource: (bundleText: string, totalBytes: number, scriptURL: string, isLive?: boolean) => HostBundleAnalysisResult;
 /**
  * Automatically fetch and analyze the real running bundle for the host app.
  */

package/dist/commonjs/customHooks/bundleAnalyzer.js

@@ -15,20 +15,88 @@ const react_native_1 = require("react-native");
 let cachedAnalysis = null;
 let isAnalyzing = false;
 const subscribers = [];
+const getSourceCodeModule = () => {
+    try {
+        const legacy = react_native_1.NativeModules?.SourceCode;
+        if (legacy && typeof legacy.scriptURL === 'string' && legacy.scriptURL.length > 0) {
+            return legacy;
+        }
+    }
+    catch { }
+    try {
+        const turbo = react_native_1.TurboModuleRegistry?.get?.('SourceCode');
+        const constants = turbo?.getConstants?.();
+        const scriptURL = turbo?.scriptURL || constants?.scriptURL;
+        if (typeof scriptURL === 'string' && scriptURL.length > 0) {
+            return { scriptURL };
+        }
+    }
+    catch { }
+    return null;
+};
 const getHostScriptURL = () => {
-    const SourceCode = react_native_1.NativeModules?.SourceCode;
-    if (SourceCode && typeof SourceCode.scriptURL === 'string' && SourceCode.scriptURL.length > 0) {
-        return SourceCode.scriptURL;
+    // 1. NativeModules.SourceCode (bridged) or SourceCode TurboModule (bridgeless / new arch)
+    const scriptURL = getSourceCodeModule()?.scriptURL;
+    if (typeof scriptURL === 'string' && scriptURL.length > 0) {
+        return scriptURL;
     }
-    return react_native_1.Platform.OS === 'ios'
-        ? 'http://localhost:8081/index.bundle?platform=ios&dev=true'
-        : 'http://10.0.2.2:8081/index.bundle?platform=android&dev=true';
+    // 2. Android legacy: PlatformConstants.serverHost -> "localhost:8082"
+    try {
+        const serverHost = react_native_1.NativeModules?.PlatformConstants?.serverHost;
+        if (typeof serverHost === 'string' && serverHost.length > 0) {
+            return `http://${serverHost}/index.bundle?platform=${react_native_1.Platform.OS}&dev=true`;
+        }
+    }
+    catch { }
+    return '';
 };
 exports.getHostScriptURL = getHostScriptURL;
+const DEV_SERVER_PORTS = [8081, 8082, 8083, 8084, 8090, 8080, 19000];
+const buildProbeUrls = (scriptURL) => {
+    const urls = [];
+    if (typeof scriptURL === 'string' && scriptURL.startsWith('http')) {
+        urls.push(scriptURL);
+    }
+    const portMatch = typeof scriptURL === 'string' ? scriptURL.match(/:(\d{2,5})/) : null;
+    const ports = portMatch ? [parseInt(portMatch[1], 10)] : DEV_SERVER_PORTS;
+    const hosts = react_native_1.Platform.OS === 'android'
+        ? ['localhost', '127.0.0.1', '10.0.2.2']
+        : ['localhost', '127.0.0.1'];
+    for (const host of hosts) {
+        for (const port of ports) {
+            urls.push(`http://${host}:${port}/index.bundle?platform=${react_native_1.Platform.OS}&dev=true`);
+        }
+    }
+    return Array.from(new Set(urls));
+};
+const fetchWithTimeout = async (url, timeoutMs) => {
+    try {
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), timeoutMs);
+        try {
+            const res = await fetch(url, { signal: controller.signal });
+            if (!res.ok)
+                return { ok: false };
+            const contentLength = res.headers.get('content-length');
+            const text = await res.text();
+            return {
+                ok: true,
+                text,
+                bytes: contentLength ? parseInt(contentLength, 10) || text.length : text.length,
+            };
+        }
+        finally {
+            clearTimeout(timer);
+        }
+    }
+    catch {
+        return { ok: false };
+    }
+};
 /**
  * Parses raw Metro bundle source code to discover real modules and packages in the host app.
  */
-const parseBundleSource = (bundleText, totalBytes, scriptURL) => {
+const parseBundleSource = (bundleText, totalBytes, scriptURL, isLive = true) => {
     const isHermes = Boolean(globalThis.HermesInternal);
     const totalDevMb = Number((totalBytes / (1024 * 1024)).toFixed(2));
     const totalDevKb = Math.round(totalBytes / 1024);
@@ -451,7 +519,7 @@ const parseBundleSource = (bundleText, totalBytes, scriptURL) => {
         },
     ];
     return {
-        isLive: true,
+        isLive,
         scriptURL,
         totalDevBytes: totalBytes,
         totalDevMb,
@@ -526,30 +594,29 @@ const analyzeHostAppBundle = async () => {
     }
     isAnalyzing = true;
     const scriptURL = (0, exports.getHostScriptURL)();
-    try {
-        if (scriptURL && scriptURL.startsWith('http')) {
-            // 1. Try HEAD request first for fast content-length
-            const headRes = await fetch(scriptURL, { method: 'HEAD' });
-            const cl = headRes.headers.get('content-length');
-            let byteLength = cl ? parseInt(cl, 10) : 0;
-            // 2. Fetch partial text to discover real modules
-            const getRes = await fetch(scriptURL);
-            const bundleText = await getRes.text();
-            byteLength = byteLength || bundleText.length;
-            const result = (0, exports.parseBundleSource)(bundleText, byteLength, scriptURL);
-            cachedAnalysis = result;
-            isAnalyzing = false;
-            subscribers.forEach(cb => cb(result));
-            subscribers.length = 0;
-            return result;
+    // Probe candidate dev-server URLs until one serves the JS bundle
+    let fetched = null;
+    let fetchedUrl = '';
+    for (const url of buildProbeUrls(scriptURL)) {
+        const probe = await fetchWithTimeout(url, 3000);
+        if (probe.ok && probe.text && probe.text.length > 0) {
+            fetched = { text: probe.text, bytes: probe.bytes ?? probe.text.length };
+            fetchedUrl = url;
+            break;
         }
     }
-    catch (err) {
-        // If fetch failed (e.g. standalone production build or offline)
+    if (fetched) {
+        const result = (0, exports.parseBundleSource)(fetched.text, fetched.bytes, fetchedUrl);
+        cachedAnalysis = result;
+        isAnalyzing = false;
+        subscribers.forEach(cb => cb(result));
+        subscribers.length = 0;
+        return result;
     }
-    // Fallback to runtime memory estimation
+    // Fallback: could not reach a Metro dev server (release build, offline, or
+    // custom dev-server host). Return estimated values so the UI never crashes.
     const fallbackBytes = 6840000; // ~6.8MB standard RN dev bundle
-    const result = (0, exports.parseBundleSource)('', fallbackBytes, scriptURL);
+    const result = (0, exports.parseBundleSource)('', fallbackBytes, scriptURL || 'unknown', false);
     cachedAnalysis = result;
     isAnalyzing = false;
     subscribers.forEach(cb => cb(result));

package/dist/commonjs/i18n/locales/en.json

@@ -355,6 +355,8 @@
         "heroTitle": "Bundle & Asset Architecture",
         "heroSubtitle": "Real-time size breakdown across all assets, code, and dependencies",
         "heroSubtitleLive": "Live analysis of {{scriptUrl}}",
+        "liveAnalysisUnavailable": "Live bundle analysis unavailable",
+        "liveAnalysisUnavailableSub": "Could not reach the Metro dev server, so values are estimates. Make sure the app runs in development via `npx react-native start` and the Inspector can reach your Metro port (8081, 8082, ...).",
         "bundleOverviewJson": "Bundle Overview JSON",
         "devBundleSize": "DEV BUNDLE SIZE",
         "devBundleHint": "{{kb}} KB • {{modules}} modules",
@@ -379,11 +381,11 @@
         "treemapTitle": "Asset & File Type Ratio Treemap",
         "treemapSub": "Total ~{{mb}} MB",
         "treemapJson": "Ratio Treemap JSON",
-        "legendImages": "🖼️ Images:",
-        "legendTs": "📜 TS/TSX:",
-        "legendJs": "⚙️ JS Libs:",
-        "legendFonts": "🔤 Fonts:",
-        "legendJson": "📄 JSON:",
+        "legendImages": "Images:",
+        "legendTs": "TS/TSX:",
+        "legendJs": "JS Libs:",
+        "legendFonts": "Fonts:",
+        "legendJson": "JSON:",
         "categoryBreakdown": "Category Breakdown",
         "categoriesJson": "Categories Breakdown JSON",
         "catImagesTitle": "Images & Media Assets",
@@ -417,14 +419,14 @@
         "catJavascript": "JS & Node Modules",
         "catFonts": "Fonts & Glyphs",
         "catJson": "JSON & Data",
-        "treeView": "🌳 Tree View",
-        "flatList": "📄 Flat List",
+        "treeView": "Tree View",
+        "flatList": "Flat List",
         "expand": "Expand",
         "collapse": "Collapse",
         "showingFilesOf": "Showing {{shown}} of {{total}} files",
         "filesOf": "{{count}} of {{total}} Files",
-        "notConsumed": "🚫 Not Consumed",
-        "consumed": "⚡ Consumed",
+        "notConsumed": "Not Consumed",
+        "consumed": "Consumed",
         "copyFileInfo": "Copy {{name}} Info",
         "fileDetailsJson": "File Details JSON",
         "file": "file",
@@ -440,13 +442,13 @@
         "showingDependencies": "Showing {{count}} dependencies",
         "versionPrefix": "v{{version}}",
         "bundled": "bundled",
-        "deprecated": "⚠️ DEPRECATED",
-        "updateAvailable": "⚡ Update: v{{version}}",
-        "upToDate": "✨ Up to date",
-        "bundledBadge": "📦 Bundled",
+        "deprecated": "DEPRECATED",
+        "updateAvailable": "Update: v{{version}}",
+        "upToDate": "Up to date",
+        "bundledBadge": "Bundled",
         "packageDetailsJson": "Package Details JSON",
-        "direct": "📦 Direct",
-        "transitive": "🔗 Transitive",
+        "direct": "Direct",
+        "transitive": "Transitive",
         "minified": "~{{size}} KB minified",
         "npmLink": "npm ↗",
         "dependenciesCount": "{{count}} Dependencies",
@@ -460,16 +462,16 @@
         "mediaAndFonts": "{{count}} Media & Fonts",
         "optimizerTitle": "React Native Bundle Optimization Checklist",
         "optimizationChecklist": "Optimization Checklist",
-        "optTip1Title": "🖼️ Convert Heavy PNGs to WebP / SVGs",
+        "optTip1Title": "Convert Heavy PNGs to WebP / SVGs",
         "optTip1Desc": "Images account for >40% of final app download size. Converting 2x/3x raster PNGs to WebP saves 60-70% size with no visible fidelity loss.",
-        "optTip2Title": "📜 Enable Hermes Bytecode Engine",
-        "optTip2DescActive": "✅ Hermes is active! JavaScript is compiled into optimized bytecode Ahead-Of-Time.",
-        "optTip2DescInactive": "⚠️ Hermes is disabled. Enable hermes in your app config for ~40% smaller payload and instant TTI startup.",
-        "optTip3Title": "🔤 Font Subsetting & Weight Pruning",
+        "optTip2Title": "Enable Hermes Bytecode Engine",
+        "optTip2DescActive": "Hermes is active! JavaScript is compiled into optimized bytecode Ahead-Of-Time.",
+        "optTip2DescInactive": "Hermes is disabled. Enable hermes in your app config for ~40% smaller payload and instant TTI startup.",
+        "optTip3Title": "Font Subsetting & Weight Pruning",
         "optTip3Desc": "Include only the font weights you actively use (e.g. Regular & Bold). Remove unused glyph ranges to save 100KB+ per font file.",
-        "optTip4Title": "🌲 Selective Path Imports (Tree-shaking)",
+        "optTip4Title": "Selective Path Imports (Tree-shaking)",
         "optTip4Desc": "Import from specific subpaths (e.g. lodash/get or specific vector icon sets) instead of importing large monolithic packages.",
-        "optTip5Title": "⚡ Screen Lazy-Loading",
+        "optTip5Title": "Screen Lazy-Loading",
         "optTip5Desc": "Lazy load secondary screens and heavy modal sheets using dynamic imports and InteractionManager to reduce initial bundle evaluation.",
         "highImpact": "High Impact",
         "mediumImpact": "Medium Impact",

package/dist/esm/components/AnalyticsEventCard.js

@@ -6,6 +6,7 @@ import { formatGap, formatTime, getEventColor, getEventCategory, getCategoryColo
 import { useTranslation } from '../i18n';
 import HighlightText from './HighlightText';
 import TouchableScale from './TouchableScale';
+import { CartIcon, MoneyIcon } from './NetworkIcons';
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
     const { t } = useTranslation();
@@ -166,6 +167,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                             borderColor: AppColors.amberBorder,
                         },
                     ]}>
+                    <CartIcon color={AppColors.amber700} size={12}/>
                     <Text style={[
                         cardStyles.chipText,
                         {
@@ -173,7 +175,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                             fontFamily: AppFonts.interBold,
                         },
                     ]}>
-                      🛒 {items.length}{' '}
+                      {items.length}{' '}
                       {items.length === 1
                         ? t('analytics.item')
                         : t('analytics.items')}
@@ -198,6 +200,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                             borderColor: AppColors.emeraldBorder,
                         },
                     ]}>
+                    <MoneyIcon color={AppColors.emerald600} size={12}/>
                     <Text style={[
                         cardStyles.chipText,
                         {
@@ -205,7 +208,7 @@ const AnalyticsEventCard = React.memo(function AnalyticsEventCard({ event, onPre
                             fontFamily: AppFonts.interBold,
                         },
                     ]}>
-                      💰 {String(val)} {currencyStr}
+                      {String(val)} {currencyStr}
                     </Text>
                   </View>);
             }

package/dist/esm/components/ErrorBoundary.js

@@ -3,6 +3,7 @@ import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-nati
 import { AppColors } from '../styles/AppColors';
 import { AppFonts } from '../styles/AppFonts';
 import { copyToClipboard } from '../helpers';
+import { WarningTriangleIcon, CopyIcon } from './NetworkIcons';
 function parseStackTrace(stack) {
     if (!stack)
         return null;
@@ -74,7 +75,10 @@ ${error.stack}`;
             const isInline = this.props.fallbackType === 'inline';
             if (isInline) {
                 return (<View style={styles.inlineContainer}>
-            <Text style={styles.inlineTitle}>⚠️ Inspector Crash</Text>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <WarningTriangleIcon color={AppColors.redErrorText} size={14}/>
+              <Text style={styles.inlineTitle}>Inspector Crash</Text>
+            </View>
             <TouchableOpacity style={styles.inlineResetBtn} onPress={this.handleReset}>
               <Text style={styles.inlineResetText}>Reload</Text>
             </TouchableOpacity>
@@ -85,7 +89,9 @@ ${error.stack}`;
             const parsed = error && error.stack ? parseStackTrace(error.stack) : null;
             return (<View style={styles.container}>
           <View style={styles.card}>
-            <Text style={styles.emoji}>⚠️</Text>
+            <View style={{ marginBottom: 12, alignItems: 'center' }}>
+            <WarningTriangleIcon color={AppColors.amber500} size={44}/>
+          </View>
             <Text style={styles.title}>Something went wrong</Text>
             
             <View style={{
@@ -98,13 +104,19 @@ ${error.stack}`;
                     marginBottom: 12,
                     gap: 4
                 }}>
+              <View style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 4,
+                    backgroundColor: isNativeCrash ? AppColors.errorColor : AppColors.amber500,
+                }}/>
               <Text style={{
                     fontSize: 10,
                     fontWeight: 'bold',
                     color: isNativeCrash ? AppColors.errorColor : AppColors.amber500,
                     fontFamily: AppFonts.interBold || 'System'
                 }}>
-                {isNativeCrash ? '🔴 NATIVE CRASH' : '🟡 JAVASCRIPT CRASH'}
+                {isNativeCrash ? 'NATIVE CRASH' : 'JAVASCRIPT CRASH'}
               </Text>
             </View>
 
@@ -151,8 +163,9 @@ ${error.stack}`;
                     flexDirection: 'row',
                     gap: 6
                 }} onPress={this.handleCopyTrace}>
+                <CopyIcon color={AppColors.white} size={14}/>
                 <Text style={{ color: AppColors.white, fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts.interBold || 'System' }}>
-                  📋 Copy Crash Traceback
+                  Copy Crash Traceback
                 </Text>
               </TouchableOpacity>
             </View>
@@ -194,10 +207,6 @@ const styles = StyleSheet.create({
         shadowRadius: 12,
         elevation: 8,
     },
-    emoji: {
-        fontSize: 40,
-        marginBottom: 12,
-    },
     title: {
         fontFamily: AppFonts.interBold || 'System',
         fontSize: 18,

package/dist/esm/components/Inspector/BundleTab.d.ts

@@ -32,6 +32,7 @@ export interface BundlePackageItem {
     lastActive?: string;
     npmUrl?: string;
 }
+export type BundleIconType = 'source' | 'deps' | 'media' | 'overhead' | 'image' | 'typescript' | 'javascript' | 'font' | 'json' | 'folder' | 'ban' | 'bolt';
 export interface TreeNode {
     id: string;
     name: string;