react-native-inapp-inspector 1.1.14 → 1.1.15

package/dist/commonjs/components/ApiDetailView.js

@@ -0,0 +1,304 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApiDetailView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const react_i18next_1 = require("react-i18next");
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const CopyButton_1 = __importDefault(require("./CopyButton"));
+const SectionHeader_1 = __importDefault(require("./SectionHeader"));
+const JsonViewer_1 = __importDefault(require("./JsonViewer"));
+const DiffViewer_1 = __importDefault(require("./DiffViewer"));
+const HeadersSection_1 = __importDefault(require("./HeadersSection"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const constants_1 = require("../constants");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
+const helpers_1 = require("../helpers");
+const ApiDetailView = ({ selected, apiDetailActiveTab, onSetApiDetailActiveTab, detailSearch, onSetDetailSearch, reqExpanded, onToggleReqExpanded, resExpanded, onToggleResExpanded, showReqDiff, onToggleShowReqDiff, showResDiff, onToggleShowResDiff, prevRequestData, prevResponseData, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const detailDisplayUrl = (0, helpers_1.formatDisplayUrl)(selected.url);
+    let hostStr = '';
+    let pathStr = detailDisplayUrl;
+    let queryStr = '';
+    try {
+        const qIndex = detailDisplayUrl.indexOf('?');
+        let cleanUrlForParsing = detailDisplayUrl;
+        if (qIndex !== -1) {
+            pathStr = detailDisplayUrl.substring(0, qIndex);
+            queryStr = detailDisplayUrl.substring(qIndex);
+            cleanUrlForParsing = pathStr;
+        }
+        const schemeIndex = cleanUrlForParsing.indexOf('://');
+        if (schemeIndex !== -1) {
+            const withoutScheme = cleanUrlForParsing.substring(schemeIndex + 3);
+            const firstSlash = withoutScheme.indexOf('/');
+            if (firstSlash !== -1) {
+                hostStr = withoutScheme.substring(0, firstSlash);
+                pathStr = withoutScheme.substring(firstSlash);
+            }
+            else {
+                hostStr = withoutScheme;
+                pathStr = '/';
+            }
+        }
+    }
+    catch (e) { }
+    return (<react_native_1.View style={{ flex: 1 }}>
+      {/* Non-scrollable details header */}
+      <react_native_1.View style={{ paddingHorizontal: 6, paddingTop: 4 }}>
+        <react_native_1.View style={styles_1.default.detailInfoBar}>
+          <react_native_1.View style={styles_1.default.detailInfoTop}>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+              <react_native_1.View style={[
+            styles_1.default.methodBadge,
+            {
+                backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
+                    AppColors_1.AppColors.grayText,
+            },
+        ]}>
+                <react_native_1.Text style={styles_1.default.methodBadgeText}>{selected.method}</react_native_1.Text>
+              </react_native_1.View>
+              {selected.status != null && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: `${(0, helpers_1.getStatusColor)(selected.status)}15`,
+                    borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}30`,
+                },
+            ]}>
+                  {selected.status !== 0 && (<react_native_svg_1.default width="10" height="10" viewBox="0 0 10 10">
+                      <react_native_svg_1.Circle cx="5" cy="5" r="5" fill={(0, helpers_1.getStatusColor)(selected.status)}/>
+                    </react_native_svg_1.default>)}
+                  <react_native_1.Text style={[
+                styles_1.default.chipText,
+                {
+                    color: selected.status === 0
+                        ? AppColors_1.AppColors.errorColor
+                        : (0, helpers_1.getStatusColor)(selected.status),
+                },
+            ]}>
+                    {selected.status === 0
+                ? 'Failed'
+                : String(selected.status)}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+
+              {selected.duration != null && (<react_native_1.View style={[
+                styles_1.default.chip,
+                {
+                    backgroundColor: 'rgba(104,75,155,0.08)',
+                    borderColor: 'rgba(104,75,155,0.18)',
+                },
+            ]}>
+                  <react_native_1.Text style={[
+                styles_1.default.chipText,
+                { color: AppColors_1.AppColors.purple },
+            ]}>
+                    {selected.duration}ms
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+            <react_native_1.View style={styles_1.default.detailInfoRight}>
+              <TouchableScale_1.default style={styles_1.default.iconSquareBtn} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)} hitSlop={12}>
+                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              </TouchableScale_1.default>
+              <CopyButton_1.default value={(0, helpers_1.getFetchCommand)(selected)} label="fetch()" iconType="fetch"/>
+              <CopyButton_1.default value={(0, helpers_1.getCurlCommand)(selected)} label="cURL" iconType="terminal"/>
+              <CopyButton_1.default value={detailDisplayUrl} label="URL"/>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          <react_native_1.Pressable style={{
+            backgroundColor: AppColors_1.AppColors.grayBackground,
+            borderRadius: 10,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.dividerColor,
+            padding: 10,
+            marginTop: 6,
+        }} onPress={() => react_native_1.Linking.openURL(detailDisplayUrl)}>
+            <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: 2,
+        }}>
+              <react_native_1.Text style={{
+            fontFamily: AppFonts_1.AppFonts.interMedium,
+            fontSize: 10,
+            color: AppColors_1.AppColors.grayTextWeak,
+            flex: 1,
+        }} numberOfLines={1}>
+                {hostStr || 'API Endpoint'}
+              </react_native_1.Text>
+              {queryStr ? (<react_native_1.View style={{
+                backgroundColor: 'rgba(104,75,155,0.08)',
+                paddingHorizontal: 5,
+                paddingVertical: 1,
+                borderRadius: 4,
+            }}>
+                  <react_native_1.Text style={{
+                fontFamily: AppFonts_1.AppFonts.interBold,
+                fontSize: 8.5,
+                color: AppColors_1.AppColors.purple,
+            }}>
+                    Query Params
+                  </react_native_1.Text>
+                </react_native_1.View>) : null}
+            </react_native_1.View>
+            <react_native_1.Text selectable={true} style={{
+            fontFamily: AppFonts_1.AppFonts.interBold,
+            fontSize: 12,
+            color: AppColors_1.AppColors.primaryBlack,
+            marginTop: 2,
+        }} numberOfLines={2}>
+              {pathStr}
+            </react_native_1.Text>
+            {queryStr ? (<react_native_1.Text selectable={true} style={{
+                fontFamily: AppFonts_1.AppFonts.interRegular,
+                fontSize: 10,
+                color: AppColors_1.AppColors.grayTextWeak,
+                marginTop: 4,
+            }} numberOfLines={1}>
+                {queryStr}
+              </react_native_1.Text>) : null}
+          </react_native_1.Pressable>
+        </react_native_1.View>
+
+        {/* Tab Selection */}
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles_1.default.detailTabBar}>
+          {['response', 'request', 'headers', 'metadata'].map(tab => (<TouchableScale_1.default key={tab} style={[
+                styles_1.default.detailTab,
+                apiDetailActiveTab === tab && styles_1.default.detailTabActive,
+            ]} onPress={() => onSetApiDetailActiveTab(tab)}>
+              <react_native_1.Text style={[
+                styles_1.default.detailTabText,
+                apiDetailActiveTab === tab && styles_1.default.detailTabTextActive,
+            ]}>
+                {t(`details.tab_${tab}`)}
+              </react_native_1.Text>
+            </TouchableScale_1.default>))}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {/* Scrollable details content */}
+      <react_native_1.ScrollView style={{ flex: 1 }} contentContainerStyle={{ padding: 6, gap: 4 }} keyboardShouldPersistTaps="handled" nestedScrollEnabled={true}>
+        {apiDetailActiveTab === 'metadata' && (<react_native_1.View style={styles_1.default.sectionContainer}>
+            <react_native_1.View style={styles_1.default.metadataCard}>
+              <react_native_1.View style={styles_1.default.metadataRow}>
+                <react_native_1.Text style={styles_1.default.metadataLabel}>{t('details.duration')}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.metadataValue}>
+                  {selected.duration != null
+                ? `${selected.duration} ms`
+                : '—'}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.metadataRow}>
+                <react_native_1.Text style={styles_1.default.metadataLabel}>{t('details.timestamp')}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.metadataValue}>
+                  {new Date(selected.startTime).toLocaleString()}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.metadataRow}>
+                <react_native_1.Text style={styles_1.default.metadataLabel}>{t('details.request_size')}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.metadataValue}>
+                  {(0, helpers_1.getSize)(selected.request)}
+                </react_native_1.Text>
+              </react_native_1.View>
+              <react_native_1.View style={styles_1.default.metadataRow}>
+                <react_native_1.Text style={styles_1.default.metadataLabel}>{t('details.response_size')}</react_native_1.Text>
+                <react_native_1.Text style={styles_1.default.metadataValue}>
+                  {(0, helpers_1.getSize)(selected.response)}
+                </react_native_1.Text>
+              </react_native_1.View>
+
+              {selected.caller && (<react_native_1.View style={[
+                    styles_1.default.metadataRow,
+                    { flexDirection: 'column', alignItems: 'flex-start', gap: 4 },
+                ]}>
+                  <react_native_1.Text style={styles_1.default.metadataLabel}>Caller Stack</react_native_1.Text>
+                  <react_native_1.Text style={[styles_1.default.metadataValue, { fontSize: 11 }]} selectable>
+                    {selected.caller}
+                  </react_native_1.Text>
+                </react_native_1.View>)}
+            </react_native_1.View>
+          </react_native_1.View>)}
+
+        {apiDetailActiveTab === 'headers' && (<>
+            <HeadersSection_1.default title="Response Headers" headers={selected.responseHeaders} search={detailSearch}/>
+            <HeadersSection_1.default title="Request Headers" headers={selected.requestHeaders} search={detailSearch}/>
+          </>)}
+
+        {apiDetailActiveTab === 'request' && (<>
+            <react_native_1.View style={styles_1.default.detailSearchRow}>
+              <react_native_1.View style={styles_1.default.detailSearchBox}>
+                <react_native_1.TextInput placeholder="Search request..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={onSetDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => onSetDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.Pressable>)}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles_1.default.sectionContainer}>
+              <SectionHeader_1.default title="Request Payload" value={selected.request} expanded={reqExpanded} onToggleExpand={onToggleReqExpanded} showDiff={prevRequestData != null} isDiffing={showReqDiff} onToggleDiff={onToggleShowReqDiff}/>
+              {showReqDiff ? (<DiffViewer_1.default oldData={prevRequestData} newData={selected.request} forceOpen={reqExpanded}/>) : (<JsonViewer_1.default data={selected.request} search={detailSearch} forceOpen={reqExpanded} wrap/>)}
+            </react_native_1.View>
+          </>)}
+
+        {apiDetailActiveTab === 'response' && (<>
+            <react_native_1.View style={styles_1.default.detailSearchRow}>
+              <react_native_1.View style={styles_1.default.detailSearchBox}>
+                <react_native_1.TextInput placeholder="Search response..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={detailSearch} onChangeText={onSetDetailSearch} style={styles_1.default.detailSearchInput} autoCorrect={false} autoCapitalize="none"/>
+                {detailSearch.length > 0 && (<react_native_1.Pressable onPress={() => onSetDetailSearch('')} hitSlop={10} style={{ padding: 8 }}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.Pressable>)}
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.View style={styles_1.default.sectionContainer}>
+              <SectionHeader_1.default title="Response" value={selected.response} expanded={resExpanded} onToggleExpand={onToggleResExpanded} showDiff={prevResponseData != null} isDiffing={showResDiff} onToggleDiff={onToggleShowResDiff}/>
+              {showResDiff ? (<DiffViewer_1.default oldData={prevResponseData} newData={selected.response} forceOpen={resExpanded}/>) : (<JsonViewer_1.default data={selected.response} search={detailSearch} forceOpen={resExpanded} wrap/>)}
+            </react_native_1.View>
+          </>)}
+      </react_native_1.ScrollView>
+    </react_native_1.View>);
+};
+exports.ApiDetailView = ApiDetailView;
+exports.default = exports.ApiDetailView;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FlatList } from 'react-native';
+import { NetworkLog, StatusFilter, Method, SortOrder, GroupedListItem, LocalFilter } from '../types';
+interface ApisTabViewProps {
+    search: string;
+    onSetSearch: (val: string) => void;
+    sortOrder: SortOrder;
+    onToggleSortOrder: () => void;
+    statusFilters: Set<StatusFilter>;
+    onToggleStatusFilter: (filter: StatusFilter) => void;
+    methodFilters: Set<Method>;
+    onToggleMethodFilter: (method: Method) => void;
+    availableMethods: Method[];
+    sectionFilters: Record<string, Set<LocalFilter>>;
+    onToggleSectionFilter: (section: string, filter: LocalFilter) => void;
+    groupByDomain: boolean;
+    onToggleGroupByDomain: () => void;
+    collapsedDomains: Set<string>;
+    onToggleCollapseDomain: (domain: string) => void;
+    onDeleteLogs: () => void;
+    selectedLogs: Set<number>;
+    onToggleSelectLog: (id: number) => void;
+    filteredLogs: NetworkLog[];
+    groupedListItems: GroupedListItem[];
+    onSelectLog: (log: NetworkLog) => void;
+    apisListRef: React.RefObject<FlatList<any> | null>;
+    logCounts: {
+        total: number;
+        filtered: number;
+    };
+}
+export declare const ApisTabView: React.FC<ApisTabViewProps>;
+export default ApisTabView;

package/dist/commonjs/components/ApisTabView.js

@@ -0,0 +1,235 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ApisTabView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const react_i18next_1 = require("react-i18next");
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const LogCard_1 = __importDefault(require("./LogCard"));
+const DomainHeader_1 = __importDefault(require("./DomainHeader"));
+const EmptyState_1 = __importDefault(require("./EmptyState"));
+const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
+exports.ApisTabView = react_1.default.memo(({ search, onSetSearch, sortOrder, onToggleSortOrder, statusFilters, onToggleStatusFilter, methodFilters, onToggleMethodFilter, availableMethods, sectionFilters, onToggleSectionFilter, groupByDomain, onToggleGroupByDomain, collapsedDomains, onToggleCollapseDomain, onDeleteLogs, selectedLogs, onToggleSelectLog, filteredLogs, groupedListItems, onSelectLog, apisListRef, logCounts, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const isSearchOrFilter = search.length > 0 || statusFilters.size > 0 || methodFilters.size > 0;
+    const renderItem = react_1.default.useCallback(({ item, index }) => {
+        if ('type' in item && item.type === 'header') {
+            const isCollapsed = collapsedDomains.has(item.domain);
+            const secFilter = sectionFilters[item.domain] ?? new Set();
+            return (<DomainHeader_1.default domain={item.domain} count={item.count} color={(0, helpers_1.getDomainColor)(item.domain)} isCollapsed={isCollapsed} onToggle={() => onToggleCollapseDomain(item.domain)} activeFilters={secFilter} onToggleFilter={f => onToggleSectionFilter(item.domain, f)} has2xx={item.has2xx} has4xx={item.has4xx} has5xx={item.has5xx}/>);
+        }
+        const log = item;
+        return (<AnimatedEntrance_1.default index={index} distance={8}>
+          <LogCard_1.default item={log} onPress={() => onSelectLog(log)} isSelected={selectedLogs.has(log.id)} onSelect={() => onToggleSelectLog(log.id)} searchStr={search}/>
+        </AnimatedEntrance_1.default>);
+    }, [
+        collapsedDomains,
+        onToggleCollapseDomain,
+        sectionFilters,
+        onToggleSectionFilter,
+        onSelectLog,
+        selectedLogs,
+        onToggleSelectLog,
+        search,
+    ]);
+    return (<react_native_1.View style={{ flex: 1 }}>
+      {/* Search and Filters Toolbar */}
+      <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.white,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors_1.AppColors.dividerColor,
+            paddingBottom: 6,
+        }}>
+        <react_native_1.View style={[styles_1.default.toolbarRow, { marginTop: 12, marginBottom: 8 }]}>
+          <react_native_1.View style={styles_1.default.searchContainer}>
+            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+            <react_native_1.TextInput placeholder={t('search.apis_placeholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={onSetSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {search.length > 0 && (<react_native_1.Pressable onPress={() => onSetSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+              </react_native_1.Pressable>)}
+          </react_native_1.View>
+
+          <react_native_1.View style={styles_1.default.toolbarRight}>
+            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={onToggleSortOrder} hitSlop={10}>
+              <NetworkIcons_1.SortArrowIcon color={AppColors_1.AppColors.grayTextStrong} size={18} direction={sortOrder === 'newest' ? 'down' : 'up'}/>
+            </TouchableScale_1.default>
+            <TouchableScale_1.default style={[
+            styles_1.default.toolbarBtn,
+            {
+                borderColor: 'rgba(255,46,87,0.22)',
+                backgroundColor: 'rgba(255,46,87,0.06)',
+            },
+        ]} onPress={onDeleteLogs} hitSlop={6}>
+              <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* Filter Chips Scroll View */}
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        }}>
+          <TouchableScale_1.default onPress={onToggleGroupByDomain}>
+            <react_native_1.View style={[
+            styles_1.default.statusFilterChip,
+            groupByDomain && {
+                borderColor: AppColors_1.AppColors.purple,
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+            },
+        ]}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                <NetworkIcons_1.FilterIcon size={12} color={groupByDomain ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextStrong}/>
+                <react_native_1.Text style={[
+            styles_1.default.statusFilterText,
+            groupByDomain && {
+                color: AppColors_1.AppColors.purple,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            },
+        ]}>
+                  {t('filters.group_by_domain')}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </TouchableScale_1.default>
+
+          {/* Status Filter Chips */}
+          {constants_1.STATUS_FILTERS.map(f => {
+            const active = statusFilters.has(f);
+            const badgeColor = f === '2xx'
+                ? AppColors_1.AppColors.greenColor
+                : f === '3xx'
+                    ? AppColors_1.AppColors.skyBlue
+                    : f === '4xx'
+                        ? AppColors_1.AppColors.lightOrange
+                        : f === '5xx'
+                            ? AppColors_1.AppColors.errorColor
+                            : AppColors_1.AppColors.grayText;
+            return (<TouchableScale_1.default key={f} onPress={() => onToggleStatusFilter(f)}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: badgeColor,
+                        backgroundColor: `${badgeColor}15`,
+                    },
+                ]}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                    <react_native_svg_1.default width="8" height="8" viewBox="0 0 8 8">
+                      <react_native_svg_1.Circle cx="4" cy="4" r="4" fill={active ? badgeColor : AppColors_1.AppColors.grayTextWeak}/>
+                    </react_native_svg_1.default>
+                    <react_native_1.Text style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: badgeColor,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      {f}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })}
+
+          {/* Method Filter Chips */}
+          {availableMethods.map(method => {
+            const active = methodFilters.has(method);
+            const mColor = constants_1.METHOD_COLORS[method] ?? AppColors_1.AppColors.purple;
+            return (<TouchableScale_1.default key={method} onPress={() => onToggleMethodFilter(method)}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: mColor,
+                        backgroundColor: `${mColor}15`,
+                    },
+                ]}>
+                  <react_native_1.Text style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: mColor,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                    {method}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {/* Main List */}
+      <react_native_1.FlatList ref={apisListRef} data={groupByDomain ? groupedListItems : filteredLogs} keyExtractor={(item, index) => 'id' in item && item.id != null
+            ? item.id.toString()
+            : 'domain' in item
+                ? `domain-${item.domain}`
+                : index.toString()} ListHeaderComponent={<react_native_1.Text style={[styles_1.default.resultCount, { marginBottom: 4, marginTop: 12 }]}>
+            {t('filters.showing_requests', {
+                filtered: logCounts.filtered,
+                total: logCounts.total,
+            })}
+          </react_native_1.Text>} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={isSearchOrFilter}/>} contentContainerStyle={[
+            styles_1.default.listContent,
+            filteredLogs.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+
+      {/* Scroll to Top Button */}
+      <TouchableScale_1.default onPress={() => {
+            apisListRef.current?.scrollToOffset({
+                offset: 0,
+                animated: true,
+            });
+        }} hitSlop={10} style={styles_1.default.scrollTopBtn}>
+        <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
+          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
+        </react_native_1.View>
+      </TouchableScale_1.default>
+    </react_native_1.View>);
+});
+exports.default = exports.ApisTabView;

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

@@ -1,8 +1,4 @@
 import React from 'react';
-interface CodeSnippetProps {
-    code: string;
-    language: 'html' | 'css' | 'javascript';
-    search?: string;
-}
+import { CodeSnippetProps } from '../types';
 declare const CodeSnippet: React.FC<CodeSnippetProps>;
 export default CodeSnippet;