react-native-inapp-inspector 1.1.27 → 1.1.28

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

@@ -46,11 +46,14 @@ const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
 const styles_1 = __importDefault(require("../../styles"));
 const AppColors_1 = require("../../styles/AppColors");
 const AppFonts_1 = require("../../styles/AppFonts");
+const i18n_1 = require("../../i18n");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
 const TouchableScale_1 = __importDefault(require("../TouchableScale"));
 const analyticsLogger_1 = require("../../customHooks/analyticsLogger");
 const helpers_1 = require("../../helpers");
 const NetworkIcons_1 = require("../NetworkIcons");
 const AnalyticsHeader = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.useTranslation)();
     const { analyticsEvents, filteredAnalyticsEvents, analyticsFilters, setAnalyticsFilters, analyticsHeaderExpanded, setAnalyticsHeaderExpanded, } = (0, InspectorContext_1.useInspector)();
     const userId = (0, analyticsLogger_1.getCurrentUserId)();
     const userProperties = (0, analyticsLogger_1.getCurrentUserProperties)();
@@ -135,20 +138,31 @@ const AnalyticsHeader = react_1.default.memo(() => {
             }
         });
     };
-    // 12-Bucket GA4 Realtime Stacked Histogram Graph (-30m / 30s to NOW)
+    // 12-Bucket GA4 Realtime Stacked Histogram & Spline Wave Graph (-30m / 30s to NOW)
     const BUCKET_COUNT = 12;
-    const chartHeight = 56;
-    const histogramBars = (0, react_1.useMemo)(() => {
-        const buckets = Array.from({ length: BUCKET_COUNT }, () => ({
-            ecommerce: 0,
-            page_view: 0,
-            system: 0,
-            custom: 0,
-            total: 0,
-        }));
+    const chartHeight = 64;
+    const svgWidth = 320;
+    const [selectedBucketIdx, setSelectedBucketIdx] = (0, react_1.useState)(null);
+    const histogramData = (0, react_1.useMemo)(() => {
+        const buckets = [];
         const now = Date.now();
         const windowMs = 60000; // 60s window
         const bucketDuration = windowMs / BUCKET_COUNT;
+        for (let i = 0; i < BUCKET_COUNT; i++) {
+            const bucketAgeSec = Math.round(((BUCKET_COUNT - 1 - i) * bucketDuration) / 1000);
+            buckets.push({
+                index: i,
+                ecommerce: 0,
+                page_view: 0,
+                system: 0,
+                custom: 0,
+                total: 0,
+                x: (i / (BUCKET_COUNT - 1)) * (svgWidth - 24) + 12,
+                y: chartHeight - 12,
+                isLatest: i === BUCKET_COUNT - 1,
+                ageLabel: i === BUCKET_COUNT - 1 ? t('analytics.timeNow') : `-${bucketAgeSec}s`,
+            });
+        }
         for (const e of filteredAnalyticsEvents) {
             const age = now - e.timestamp;
             if (age >= 0 && age < windowMs) {
@@ -169,30 +183,43 @@ const AnalyticsHeader = react_1.default.memo(() => {
             }
         }
         const maxVal = Math.max(...buckets.map(b => b.total), 4);
-        return buckets.map((b, idx) => {
-            const totalH = Math.max((b.total / maxVal) * (chartHeight - 14), b.total > 0 ? 8 : 2.5);
-            const ecomH = b.total > 0 ? (b.ecommerce / b.total) * totalH : 0;
-            const screenH = b.total > 0 ? (b.page_view / b.total) * totalH : 0;
-            const sysH = b.total > 0 ? (b.system / b.total) * totalH : 0;
-            const custH = b.total > 0 ? (b.custom / b.total) * totalH : totalH;
-            return {
-                index: idx,
-                total: b.total,
-                totalHeight: totalH,
-                ecomHeight: ecomH,
-                screenHeight: screenH,
-                sysHeight: sysH,
-                custHeight: custH,
-                isLatest: idx === BUCKET_COUNT - 1,
-            };
+        buckets.forEach(b => {
+            const normalizedH = (b.total / maxVal) * (chartHeight - 22);
+            b.y = chartHeight - 10 - normalizedH;
         });
-    }, [filteredAnalyticsEvents, chartHeight]);
+        // Generate Cubic Bézier Spline paths
+        let linePath = `M ${buckets[0].x.toFixed(1)} ${buckets[0].y.toFixed(1)}`;
+        for (let i = 0; i < buckets.length - 1; i++) {
+            const p0 = buckets[Math.max(0, i - 1)];
+            const p1 = buckets[i];
+            const p2 = buckets[i + 1];
+            const p3 = buckets[Math.min(buckets.length - 1, i + 2)];
+            const cp1x = p1.x + (p2.x - p0.x) / 6;
+            const cp1y = p1.y + (p2.y - p0.y) / 6;
+            const cp2x = p2.x - (p3.x - p1.x) / 6;
+            const cp2y = p2.y - (p3.y - p1.y) / 6;
+            linePath += ` C ${cp1x.toFixed(1)} ${cp1y.toFixed(1)}, ${cp2x.toFixed(1)} ${cp2y.toFixed(1)}, ${p2.x.toFixed(1)} ${p2.y.toFixed(1)}`;
+        }
+        const lastB = buckets[buckets.length - 1];
+        const firstB = buckets[0];
+        const areaPath = `${linePath} L ${lastB.x.toFixed(1)} ${chartHeight - 4} L ${firstB.x.toFixed(1)} ${chartHeight - 4} Z`;
+        const peakVal = Math.max(...buckets.map(b => b.total), 0);
+        const eventRate = Math.round(buckets.reduce((a, b) => a + b.total, 0));
+        return {
+            buckets,
+            linePath,
+            areaPath,
+            peakVal,
+            eventRate,
+        };
+    }, [filteredAnalyticsEvents, chartHeight, svgWidth, t]);
+    const selectedBucket = selectedBucketIdx != null ? histogramData.buckets[selectedBucketIdx] : null;
     return (<react_native_1.View style={styles_1.default.analyticsHeaderCard}>
       {/* ── Top Header Row (GA4 Style) ─────────────────────────────────────── */}
       <react_native_1.View style={styles_1.default.analyticsHeaderTop}>
         <react_native_1.View style={{ flex: 1 }}>
           <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <react_native_1.Text style={styles_1.default.analyticsHeaderTitle}>Users in last 30 minutes</react_native_1.Text>
+            <react_native_1.Text style={styles_1.default.analyticsHeaderTitle}>{t('analytics.realtimeStream')}</react_native_1.Text>
             <react_native_1.View style={[
             styles_1.default.statusDot,
             {
@@ -210,11 +237,11 @@ const AnalyticsHeader = react_1.default.memo(() => {
                 fontFamily: AppFonts_1.AppFonts.interBold,
             },
         ]}>
-              {isTrackingEnabled ? 'Realtime' : 'Paused'}
+              {isTrackingEnabled ? t('performance.live') : t('common.pause')}
             </react_native_1.Text>
           </react_native_1.View>
           <react_native_1.Text style={styles_1.default.analyticsHeaderSubtitle} numberOfLines={1}>
-            {userId ? `User: ${userId}` : 'Anonymous Session'}
+            {userId ? `${t('analytics.userId')}: ${userId}` : t('analytics.emptySubtitle')}
           </react_native_1.Text>
         </react_native_1.View>
 
@@ -223,7 +250,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             setAnalyticsHeaderExpanded(!analyticsHeaderExpanded);
         }}>
           <react_native_1.Text style={styles_1.default.analyticsHeaderToggleText}>
-            {analyticsHeaderExpanded ? 'Hide Info' : 'Session Info'}
+            {analyticsHeaderExpanded ? t('common.close') : t('analytics.eventDetails')}
           </react_native_1.Text>
         </react_native_1.TouchableOpacity>
       </react_native_1.View>
@@ -243,7 +270,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
             flexDirection: 'row',
             justifyContent: 'space-between',
             alignItems: 'flex-start',
-            marginBottom: 8,
+            marginBottom: 6,
         }}>
           <react_native_1.View>
             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'baseline', gap: 6 }}>
@@ -260,13 +287,33 @@ const AnalyticsHeader = react_1.default.memo(() => {
             fontSize: 10.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-                events in window
+                {t('analytics.eventsInWindow')}
               </react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
 
-          {/* Realtime Badges */}
+          {/* Realtime Rate Badges */}
           <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 3,
+            backgroundColor: `${AppColors_1.AppColors.purple}14`,
+            paddingHorizontal: 6,
+            paddingVertical: 2.5,
+            borderRadius: 4,
+            borderWidth: 1,
+            borderColor: `${AppColors_1.AppColors.purple}2E`,
+        }}>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 9.5,
+            color: AppColors_1.AppColors.purple,
+        }}>
+                {t('analytics.eventVelocity', { rate: histogramData.eventRate })}
+              </react_native_1.Text>
+            </react_native_1.View>
+
             {categoryStats.totalRevenue > 0 && (<react_native_1.View style={{
                 flexDirection: 'row',
                 alignItems: 'center',
@@ -287,127 +334,129 @@ const AnalyticsHeader = react_1.default.memo(() => {
                   ${categoryStats.totalRevenue.toFixed(2)}
                 </react_native_1.Text>
               </react_native_1.View>)}
-            <react_native_1.View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 4,
-            backgroundColor: `${AppColors_1.AppColors.brandPurple}14`,
-            paddingHorizontal: 6,
-            paddingVertical: 2.5,
-            borderRadius: 4,
-            borderWidth: 1,
-            borderColor: `${AppColors_1.AppColors.brandPurple}2E`,
-        }}>
-              <NetworkIcons_1.TargetGoalIcon color={AppColors_1.AppColors.brandPurple} size={10}/>
-              <react_native_1.Text style={{
-            fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 9.5,
-            color: AppColors_1.AppColors.brandPurple,
-        }}>
-                Live Telemetry
-              </react_native_1.Text>
-            </react_native_1.View>
           </react_native_1.View>
         </react_native_1.View>
 
-        {/* GA4 Stacked Realtime Histogram Bar Graph */}
-        <react_native_1.View style={{
-            height: chartHeight,
+        {/* ── High Precision SVG Spline Area Graph ── */}
+        <react_native_1.View style={{ height: chartHeight, position: 'relative' }}>
+          <react_native_svg_1.default width="100%" height={chartHeight} viewBox={`0 0 ${svgWidth} ${chartHeight}`}>
+            <react_native_svg_1.Defs>
+              <react_native_svg_1.LinearGradient id="telemetryAreaGrad" x1="0" y1="0" x2="0" y2="1">
+                <react_native_svg_1.Stop offset="0%" stopColor={AppColors_1.AppColors.brandPurple} stopOpacity="0.4"/>
+                <react_native_svg_1.Stop offset="80%" stopColor={AppColors_1.AppColors.brandPurple} stopOpacity="0.05"/>
+                <react_native_svg_1.Stop offset="100%" stopColor={AppColors_1.AppColors.brandPurple} stopOpacity="0.0"/>
+              </react_native_svg_1.LinearGradient>
+            </react_native_svg_1.Defs>
+
+            {/* Baseline & Grid lines */}
+            <react_native_svg_1.Line x1="8" y1={chartHeight - 6} x2={svgWidth - 8} y2={chartHeight - 6} stroke={AppColors_1.AppColors.dividerColor} strokeWidth="1"/>
+            <react_native_svg_1.Line x1="8" y1={chartHeight / 2} x2={svgWidth - 8} y2={chartHeight / 2} stroke={AppColors_1.AppColors.dividerColor} strokeWidth="0.8" strokeDasharray="3,3"/>
+
+            {/* Glowing Area Fill */}
+            <react_native_svg_1.Path d={histogramData.areaPath} fill="url(#telemetryAreaGrad)"/>
+
+            {/* Smooth Spline Wave Stroke */}
+            <react_native_svg_1.Path d={histogramData.linePath} fill="none" stroke={AppColors_1.AppColors.brandPurple} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
+
+            {/* Data Points & Active Bucket Indicators */}
+            {histogramData.buckets.map((b, idx) => {
+            const isSelected = selectedBucketIdx === idx;
+            return (<react_native_svg_1.G key={b.index}>
+                  {isSelected && (<react_native_svg_1.Line x1={b.x} y1={4} x2={b.x} y2={chartHeight - 6} stroke={AppColors_1.AppColors.brandPurple} strokeWidth="1.2" strokeDasharray="2,2"/>)}
+
+                  {b.total > 0 && (<react_native_svg_1.Circle cx={b.x} cy={b.y} r={isSelected ? 4.5 : 2.8} fill={isSelected ? AppColors_1.AppColors.brandPurple : AppColors_1.AppColors.white} stroke={AppColors_1.AppColors.brandPurple} strokeWidth={isSelected ? 2 : 1.5}/>)}
+
+                  {b.isLatest && (<react_native_svg_1.G>
+                      <react_native_svg_1.Circle cx={b.x} cy={b.y} r="6.5" fill={AppColors_1.AppColors.brandPurple} opacity="0.22"/>
+                      <react_native_svg_1.Circle cx={b.x} cy={b.y} r="3" fill={AppColors_1.AppColors.brandPurple}/>
+                    </react_native_svg_1.G>)}
+                </react_native_svg_1.G>);
+        })}
+          </react_native_svg_1.default>
+
+          {/* Invisible Touch Columns for Interactive Bucket Selection */}
+          <react_native_1.View style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
             flexDirection: 'row',
-            alignItems: 'flex-end',
-            justifyContent: 'space-between',
-            paddingHorizontal: 2,
-            paddingBottom: 2,
-            borderBottomWidth: 1,
-            borderBottomColor: AppColors_1.AppColors.dividerColor,
         }}>
-          {histogramBars.map(bar => (<react_native_1.View key={bar.index} style={{
-                flex: 1,
+            {histogramData.buckets.map((b, idx) => (<react_native_1.TouchableOpacity key={b.index} style={{ flex: 1, height: '100%' }} activeOpacity={0.8} onPress={() => setSelectedBucketIdx(selectedBucketIdx === idx ? null : idx)}/>))}
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* Selected Bucket Quick Breakdown Overlay */}
+        {selectedBucket && (<react_native_1.View style={{
+                flexDirection: 'row',
                 alignItems: 'center',
-                justifyContent: 'flex-end',
-                height: '100%',
-                marginHorizontal: 1.5,
+                justifyContent: 'space-between',
+                backgroundColor: AppColors_1.AppColors.white,
+                borderRadius: 6,
+                paddingHorizontal: 8,
+                paddingVertical: 4,
+                marginTop: 4,
+                borderWidth: 1,
+                borderColor: AppColors_1.AppColors.brandPurple,
             }}>
-              {bar.total > 0 && (<react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 7.5,
-                    color: bar.isLatest
-                        ? AppColors_1.AppColors.brandPurple
-                        : AppColors_1.AppColors.grayTextWeak,
-                    marginBottom: 2,
-                }}>
-                  {bar.total}
-                </react_native_1.Text>)}
-              {/* Stacked Category Segments Column */}
-              <react_native_1.View style={{
-                width: '100%',
-                maxWidth: 15,
-                height: bar.totalHeight,
-                borderRadius: 3,
-                overflow: 'hidden',
-                backgroundColor: bar.total > 0
-                    ? `${AppColors_1.AppColors.grayBorderSecondary}40`
-                    : `${AppColors_1.AppColors.grayBorderSecondary}40`,
+            <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 10,
+                color: AppColors_1.AppColors.primaryBlack,
             }}>
-                {bar.total > 0 ? (<>
-                    {bar.ecomHeight > 0 && (<react_native_1.View style={{
-                        height: bar.ecomHeight,
-                        backgroundColor: AppColors_1.AppColors.amber500,
-                    }}/>)}
-                    {bar.screenHeight > 0 && (<react_native_1.View style={{
-                        height: bar.screenHeight,
-                        backgroundColor: AppColors_1.AppColors.sky500,
-                    }}/>)}
-                    {bar.sysHeight > 0 && (<react_native_1.View style={{
-                        height: bar.sysHeight,
-                        backgroundColor: AppColors_1.AppColors.purple,
-                    }}/>)}
-                    {bar.custHeight > 0 && (<react_native_1.View style={{
-                        height: bar.custHeight,
-                        backgroundColor: AppColors_1.AppColors.brandPurple,
-                    }}/>)}
-                  </>) : (<react_native_1.View style={{
-                    height: 2.5,
-                    backgroundColor: `${AppColors_1.AppColors.grayBorderSecondary}80`,
-                }}/>)}
-              </react_native_1.View>
-            </react_native_1.View>))}
-        </react_native_1.View>
+              {t('analytics.selectedBucket', {
+                time: selectedBucket.ageLabel,
+                count: selectedBucket.total,
+            })}
+            </react_native_1.Text>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              {selectedBucket.ecommerce > 0 && (<react_native_1.Text style={{ fontSize: 9, fontFamily: AppFonts_1.AppFonts.interBold, color: AppColors_1.AppColors.amber700 }}>
+                  Ecom: {selectedBucket.ecommerce}
+                </react_native_1.Text>)}
+              {selectedBucket.page_view > 0 && (<react_native_1.Text style={{ fontSize: 9, fontFamily: AppFonts_1.AppFonts.interBold, color: AppColors_1.AppColors.sky500 }}>
+                  Screen: {selectedBucket.page_view}
+                </react_native_1.Text>)}
+              {selectedBucket.custom > 0 && (<react_native_1.Text style={{ fontSize: 9, fontFamily: AppFonts_1.AppFonts.interBold, color: AppColors_1.AppColors.brandPurple }}>
+                  Custom: {selectedBucket.custom}
+                </react_native_1.Text>)}
+            </react_native_1.View>
+          </react_native_1.View>)}
 
         {/* Timeline Axis Labels */}
         <react_native_1.View style={{
             flexDirection: 'row',
             justifyContent: 'space-between',
             marginTop: 4,
-            paddingHorizontal: 2,
+            paddingHorizontal: 4,
         }}>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interMedium,
-            fontSize: 8,
+            fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            -30 min
+            {t('analytics.time30mAgo')}
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interMedium,
-            fontSize: 8,
+            fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            -20 min
+            {t('analytics.time20mAgo')}
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interMedium,
-            fontSize: 8,
+            fontSize: 8.5,
             color: AppColors_1.AppColors.grayTextWeak,
         }}>
-            -10 min
+            {t('analytics.time10mAgo')}
           </react_native_1.Text>
           <react_native_1.Text style={{
             fontFamily: AppFonts_1.AppFonts.interBold,
-            fontSize: 8,
+            fontSize: 8.5,
             color: AppColors_1.AppColors.brandPurple,
         }}>
-            NOW
+            {t('analytics.timeNow')}
           </react_native_1.Text>
         </react_native_1.View>
       </react_native_1.View>
@@ -686,26 +735,26 @@ const AnalyticsHeader = react_1.default.memo(() => {
           <react_native_1.View style={styles_1.default.analyticsStatsRow}>
             <react_native_1.View style={styles_1.default.analyticsStatBox}>
               <react_native_1.Text style={styles_1.default.analyticsStatValue}>{totalEvents}</react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>Events</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{t('analytics.eventCount', { count: totalEvents })}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={styles_1.default.analyticsStatBox}>
               <react_native_1.Text style={styles_1.default.analyticsStatValue}>
                 {Object.keys(userProperties).length}
               </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>User Props</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{t('analytics.props')}</react_native_1.Text>
             </react_native_1.View>
             <react_native_1.View style={styles_1.default.analyticsStatBox}>
               <react_native_1.Text style={styles_1.default.analyticsStatValue}>
                 {Object.keys(defaultParams).length}
               </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>Defaults</react_native_1.Text>
+              <react_native_1.Text style={styles_1.default.analyticsStatLabel}>{t('analytics.defaultParameters')}</react_native_1.Text>
             </react_native_1.View>
           </react_native_1.View>
 
           {/* Details Section */}
           {(hasUserProps || hasDefaultParams) && (<react_native_1.View style={styles_1.default.analyticsHeaderDetails}>
               {hasUserProps && (<react_native_1.View style={{ marginBottom: 10 }}>
-                  <react_native_1.Text style={styles_1.default.detailsGroupTitle}>Active User Properties</react_native_1.Text>
+                  <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{t('analytics.userProperties')}</react_native_1.Text>
                   {Object.entries(userProperties).map(([k, v]) => (<react_native_1.View key={k} style={styles_1.default.detailsRow}>
                       <react_native_1.Text style={styles_1.default.detailsKey} selectable={true}>{k}</react_native_1.Text>
                       <react_native_1.Text style={styles_1.default.detailsValue} selectable={true}>{String(v)}</react_native_1.Text>
@@ -713,7 +762,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
                 </react_native_1.View>)}
 
               {hasDefaultParams && (<react_native_1.View>
-                  <react_native_1.Text style={styles_1.default.detailsGroupTitle}>Default Event Parameters</react_native_1.Text>
+                  <react_native_1.Text style={styles_1.default.detailsGroupTitle}>{t('analytics.defaultParameters')}</react_native_1.Text>
                   {Object.entries(defaultParams).map(([k, v]) => (<react_native_1.View key={k} style={styles_1.default.detailsRow}>
                       <react_native_1.Text style={styles_1.default.detailsKey} selectable={true}>{k}</react_native_1.Text>
                       <react_native_1.Text style={styles_1.default.detailsValue} selectable={true}>{String(v)}</react_native_1.Text>
@@ -724,6 +773,7 @@ const AnalyticsHeader = react_1.default.memo(() => {
     </react_native_1.View>);
 });
 const AnalyticsTab = react_1.default.memo(() => {
+    const { t } = (0, i18n_1.useTranslation)();
     const { filteredAnalyticsEvents, analyticsSearch, setAnalyticsSearch, handleDelete, selectedEvent, setSelectedEvent, newEventIds, logRouteMapRef, isAnalyticsLayoutReady, setIsAnalyticsLayoutReady, isAnalyticsPaused, setIsAnalyticsPaused, isAnalyticsFilterApplied, } = (0, InspectorContext_1.useInspector)();
     const [isFilterModalOpen, setIsFilterModalOpen] = (0, react_1.useState)(false);
     const keyExtractor = (0, react_1.useCallback)((item, index) => item?.id?.toString() ?? index.toString(), []);

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

@@ -43,5 +43,6 @@ export interface TreeNode {
     fileCount: number;
     children: TreeNode[];
 }
+export declare const downloadBundleFile: (file: BundleFileItem, scriptURL?: string) => Promise<void>;
 declare const BundleTab: React.MemoExoticComponent<() => React.JSX.Element>;
 export default BundleTab;