react-native-inapp-inspector 1.1.18 → 1.1.20

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

@@ -1,757 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const InspectorContext_1 = require("./InspectorContext");
-const TouchableScale_1 = __importDefault(require("../TouchableScale"));
-const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
-const EmptyState_1 = __importDefault(require("../EmptyState"));
-const HighlightText_1 = __importDefault(require("../HighlightText"));
-const CodeSnippet_1 = __importDefault(require("../CodeSnippet"));
-const CopyButton_1 = __importDefault(require("../CopyButton"));
-const styles_1 = __importDefault(require("../../styles"));
-const AppColors_1 = require("../../styles/AppColors");
-const AppFonts_1 = require("../../styles/AppFonts");
-const webViewLogger_1 = require("../../customHooks/webViewLogger");
-const NetworkIcons_1 = require("../NetworkIcons");
-let OriginalWebView = null;
-try {
-    const RNWebView = require('react-native-webview');
-    OriginalWebView = RNWebView.WebView || RNWebView.default;
-}
-catch (e) {
-    // Silent fail
-}
-const previewInspectScript = `
-(function() {
-  var style = document.createElement('style');
-  style.innerHTML = '* { cursor: pointer !important; }';
-  document.head.appendChild(style);
-
-  document.addEventListener('click', function(e) {
-    var el = e.target;
-    if (!el) return;
-
-    e.preventDefault();
-    e.stopPropagation();
-
-    var oldOutline = el.style.outline;
-    var oldTransition = el.style.transition;
-    el.style.transition = 'outline 0.15s ease';
-    el.style.outline = '3px solid #684B9B';
-    setTimeout(function() {
-      el.style.outline = oldOutline;
-      el.style.transition = oldTransition;
-    }, 600);
-
-    var tagName = el.tagName.toLowerCase();
-    var searchStr = '<' + tagName;
-    
-    if (el.id) {
-      searchStr += ' id="' + el.id + '"';
-    } else if (el.className && typeof el.className === 'string') {
-      var firstClass = el.className.trim().split(/\\s+/)[0];
-      if (firstClass) {
-        searchStr += ' class="' + firstClass;
-      }
-    } else {
-      var text = (el.textContent || '').trim().substring(0, 25);
-      if (text) {
-        searchStr = text;
-      }
-    }
-
-    if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
-      window.ReactNativeWebView.postMessage(JSON.stringify({
-        type: 'preview-inspect',
-        tagName: tagName,
-        id: el.id || '',
-        className: typeof el.className === 'string' ? el.className : '',
-        searchStr: searchStr
-      }));
-    }
-  }, true);
-})();
-true;
-`;
-const WebViewTab = () => {
-    const { webViewNavHistory, webViewSearch, webViewSubTab, setWebViewSubTab, webViewLogs, webViewHtml, webViewCss, webViewJs, webViewHtmlUrl, htmlSubTab, setHtmlSubTab, isHtmlTabReady, inspectedElement, setInspectedElement, getSearchTermForTab, filteredNavHistory, isDark, } = (0, InspectorContext_1.useInspector)();
-    if (webViewNavHistory.length === 0) {
-        return (<react_native_1.View style={styles_1.default.emptyContainer}>
-        <react_native_1.View style={styles_1.default.emptyIconWrap}>
-          <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
-        </react_native_1.View>
-        <react_native_1.Text style={styles_1.default.emptyTitle}>
-          No WebView Activity
-        </react_native_1.Text>
-        <react_native_1.Text style={styles_1.default.emptySub}>
-          Load a webpage within a connected WebView component to
-          inspect pages, page source, and console logs.
-        </react_native_1.Text>
-      </react_native_1.View>);
-    }
-    return (<react_native_1.View style={{ flex: 1 }}>
-      {/* ─── Current Page Address Bar (Now on top) ─── */}
-      {(() => {
-            const currentUrl = webViewNavHistory[0]?.url;
-            if (!currentUrl)
-                return null;
-            return (<react_native_1.View style={{
-                    paddingHorizontal: 12,
-                    paddingTop: 6,
-                    paddingBottom: 6,
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    borderBottomWidth: 1,
-                    borderBottomColor: AppColors_1.AppColors.dividerColor,
-                }}>
-            <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderRadius: 8,
-                    borderWidth: 1.5,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    paddingHorizontal: 10,
-                    paddingVertical: 5,
-                    gap: 8,
-                }}>
-              {/* Left: Lock and HTTPS label */}
-              <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                }}>
-                <react_native_1.Text style={{ fontSize: 11 }}>🔒</react_native_1.Text>
-                <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9.5,
-                    color: AppColors_1.AppColors.greenColor,
-                    letterSpacing: 0.5,
-                }}>
-                  HTTPS
-                </react_native_1.Text>
-              </react_native_1.View>
-              <react_native_1.View style={{
-                    width: 1.5,
-                    height: 12,
-                    backgroundColor: AppColors_1.AppColors.grayBorderSecondary,
-                }}/>
-
-              {/* Middle: URL text (Address style) */}
-              <react_native_1.View style={{ flex: 1 }}>
-                <HighlightText_1.default text={currentUrl} search={webViewSearch} numberOfLines={1} ellipsizeMode="tail" style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 11.5,
-                    color: AppColors_1.AppColors.primaryBlack,
-                }} highlightStyle={styles_1.default.highlight} detectLinks={false}/>
-              </react_native_1.View>
-
-              {/* Right: Copy Button */}
-              <CopyButton_1.default value={currentUrl} label="URL"/>
-
-              {/* Right: Globe Icon button to open browser */}
-              <TouchableScale_1.default onPress={() => react_native_1.Linking.openURL(currentUrl)} hitSlop={8} style={{
-                    width: 26,
-                    height: 26,
-                    borderRadius: 13,
-                    backgroundColor: AppColors_1.AppColors.grayBackground,
-                    borderWidth: 1,
-                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                }}>
-                <NetworkIcons_1.GlobeIcon size={11} color={AppColors_1.AppColors.purple}/>
-              </TouchableScale_1.default>
-            </react_native_1.View>
-          </react_native_1.View>);
-        })()}
-
-      {/* ─── WebView Sub-Tabs (Now below Address Bar) ─── */}
-      <react_native_1.View style={{
-            backgroundColor: AppColors_1.AppColors.primaryLight,
-            borderBottomWidth: 1,
-            borderBottomColor: AppColors_1.AppColors.dividerColor,
-            paddingVertical: 6,
-        }}>
-        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-            paddingHorizontal: 12,
-            flexDirection: 'row',
-            gap: 8,
-        }}>
-          {/* Sub-tab 1: Preview */}
-          <react_native_1.Pressable style={[
-            {
-                paddingVertical: 6,
-                paddingHorizontal: 14,
-                borderRadius: 8,
-                alignItems: 'center',
-                flexDirection: 'row',
-                gap: 6,
-                backgroundColor: 'rgba(0, 0, 0, 0.03)',
-                borderWidth: 1,
-                borderColor: 'transparent',
-            },
-            webViewSubTab === 'preview' && {
-                backgroundColor: AppColors_1.AppColors.purple,
-                borderColor: AppColors_1.AppColors.purple,
-            },
-        ]} onPress={() => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setWebViewSubTab('preview');
-        }}>
-            <NetworkIcons_1.EyeIcon color={webViewSubTab === 'preview'
-            ? '#FFFFFF'
-            : AppColors_1.AppColors.grayTextWeak} size={13}/>
-            <react_native_1.Text style={{
-            fontFamily: webViewSubTab === 'preview'
-                ? AppFonts_1.AppFonts.interBold
-                : AppFonts_1.AppFonts.interMedium,
-            fontSize: 12,
-            color: webViewSubTab === 'preview'
-                ? '#FFFFFF'
-                : AppColors_1.AppColors.grayTextStrong,
-        }}>
-              Preview
-            </react_native_1.Text>
-          </react_native_1.Pressable>
-
-          {/* Sub-tab 2: Page Source */}
-          <react_native_1.Pressable style={[
-            {
-                paddingVertical: 6,
-                paddingHorizontal: 14,
-                borderRadius: 8,
-                alignItems: 'center',
-                flexDirection: 'row',
-                gap: 6,
-                backgroundColor: 'rgba(0, 0, 0, 0.03)',
-                borderWidth: 1,
-                borderColor: 'transparent',
-            },
-            webViewSubTab === 'html' && {
-                backgroundColor: AppColors_1.AppColors.purple,
-                borderColor: AppColors_1.AppColors.purple,
-            },
-        ]} onPress={() => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setWebViewSubTab('html');
-        }}>
-            <NetworkIcons_1.HtmlIcon color={webViewSubTab === 'html'
-            ? '#FFFFFF'
-            : AppColors_1.AppColors.grayTextWeak} size={13}/>
-            <react_native_1.Text style={{
-            fontFamily: webViewSubTab === 'html'
-                ? AppFonts_1.AppFonts.interBold
-                : AppFonts_1.AppFonts.interMedium,
-            fontSize: 12,
-            color: webViewSubTab === 'html'
-                ? '#FFFFFF'
-                : AppColors_1.AppColors.grayTextStrong,
-        }}>
-              Page Source
-            </react_native_1.Text>
-          </react_native_1.Pressable>
-
-          {/* Sub-tab 3: History */}
-          <react_native_1.Pressable style={[
-            {
-                paddingVertical: 6,
-                paddingHorizontal: 14,
-                borderRadius: 8,
-                alignItems: 'center',
-                flexDirection: 'row',
-                gap: 6,
-                backgroundColor: 'rgba(0, 0, 0, 0.03)',
-                borderWidth: 1,
-                borderColor: 'transparent',
-            },
-            webViewSubTab === 'navigation' && {
-                backgroundColor: AppColors_1.AppColors.purple,
-                borderColor: AppColors_1.AppColors.purple,
-            },
-        ]} onPress={() => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setWebViewSubTab('navigation');
-        }}>
-            <NetworkIcons_1.ClockIcon color={webViewSubTab === 'navigation'
-            ? '#FFFFFF'
-            : AppColors_1.AppColors.grayTextWeak} size={13}/>
-            <react_native_1.Text style={{
-            fontFamily: webViewSubTab === 'navigation'
-                ? AppFonts_1.AppFonts.interBold
-                : AppFonts_1.AppFonts.interMedium,
-            fontSize: 12,
-            color: webViewSubTab === 'navigation'
-                ? '#FFFFFF'
-                : AppColors_1.AppColors.grayTextStrong,
-        }}>
-              History ({webViewNavHistory.length})
-            </react_native_1.Text>
-          </react_native_1.Pressable>
-
-          {/* Sub-tab 4: Console */}
-          <react_native_1.Pressable style={[
-            {
-                paddingVertical: 6,
-                paddingHorizontal: 14,
-                borderRadius: 8,
-                alignItems: 'center',
-                flexDirection: 'row',
-                gap: 6,
-                backgroundColor: 'rgba(0, 0, 0, 0.03)',
-                borderWidth: 1,
-                borderColor: 'transparent',
-            },
-            webViewSubTab === 'console' && {
-                backgroundColor: AppColors_1.AppColors.purple,
-                borderColor: AppColors_1.AppColors.purple,
-            },
-        ]} onPress={() => {
-            (0, InspectorContext_1.animateNextLayout)();
-            setWebViewSubTab('console');
-        }}>
-            <NetworkIcons_1.TerminalIcon color={webViewSubTab === 'console'
-            ? '#FFFFFF'
-            : AppColors_1.AppColors.grayTextWeak} size={13}/>
-            <react_native_1.Text style={{
-            fontFamily: webViewSubTab === 'console'
-                ? AppFonts_1.AppFonts.interBold
-                : AppFonts_1.AppFonts.interMedium,
-            fontSize: 12,
-            color: webViewSubTab === 'console'
-                ? '#FFFFFF'
-                : AppColors_1.AppColors.grayTextStrong,
-        }}>
-              Console ({webViewLogs.length})
-            </react_native_1.Text>
-          </react_native_1.Pressable>
-        </react_native_1.ScrollView>
-      </react_native_1.View>
-
-      {webViewSubTab === 'html' ? (<react_native_1.View style={{ flex: 1 }}>
-          {webViewHtml || webViewCss || webViewJs ? (<react_native_1.View style={{ flex: 1 }}>
-              {/* Clear Inspect Banner */}
-              {inspectedElement && (<react_native_1.View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        backgroundColor: AppColors_1.AppColors.purpleShade50,
-                        paddingHorizontal: 12,
-                        paddingVertical: 6,
-                        borderBottomWidth: 1,
-                        borderBottomColor: AppColors_1.AppColors.dividerColor,
-                    }}>
-                  <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interMedium,
-                        fontSize: 11.5,
-                        color: AppColors_1.AppColors.purple,
-                        flex: 1,
-                    }}>
-                    Inspecting element:{' '}
-                    <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                    }}>
-                      &lt;{inspectedElement.tagName}
-                      {inspectedElement.id
-                        ? ` id="${inspectedElement.id}"`
-                        : ''}
-                      {inspectedElement.className
-                        ? ` class="${inspectedElement.className
-                            .trim()
-                            .split(/\s+/)[0]}"`
-                        : ''}
-                      &gt;
-                    </react_native_1.Text>
-                  </react_native_1.Text>
-                  <react_native_1.Pressable onPress={() => setInspectedElement(null)} style={{
-                        paddingHorizontal: 8,
-                        paddingVertical: 4,
-                    }}>
-                    <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 11,
-                        color: AppColors_1.AppColors.purple,
-                    }}>
-                      Clear Inspect
-                    </react_native_1.Text>
-                  </react_native_1.Pressable>
-                </react_native_1.View>)}
-
-              {/* Inner sub-tabs inside HTML source view */}
-              <react_native_1.View style={{
-                    flexDirection: 'row',
-                    borderBottomWidth: 1,
-                    borderBottomColor: AppColors_1.AppColors.dividerColor,
-                    backgroundColor: AppColors_1.AppColors.primaryLight,
-                    paddingHorizontal: 12,
-                    gap: 12,
-                }}>
-                {['html', 'css', 'javascript'].map(tab => {
-                    const active = htmlSubTab === tab;
-                    const label = tab === 'html'
-                        ? 'HTML'
-                        : tab === 'css'
-                            ? 'CSS'
-                            : 'JavaScript';
-                    const activeColor = tab === 'html'
-                        ? '#EA580C' // Orange
-                        : tab === 'css'
-                            ? '#2563EB' // Blue
-                            : '#D97706'; // Dark Yellow/Amber
-                    return (<react_native_1.Pressable key={tab} onPress={() => {
-                            (0, InspectorContext_1.animateNextLayout)();
-                            setHtmlSubTab(tab);
-                        }} style={{
-                            paddingVertical: 8,
-                            paddingHorizontal: 4,
-                            borderBottomWidth: 2,
-                            borderBottomColor: active
-                                ? activeColor
-                                : 'transparent',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                        }}>
-                        {tab === 'html' && (<NetworkIcons_1.HtmlIcon color={active
-                                ? activeColor
-                                : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
-                        {tab === 'css' && (<NetworkIcons_1.CssIcon color={active
-                                ? activeColor
-                                : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
-                        {tab === 'javascript' && (<NetworkIcons_1.JsIcon color={active
-                                ? activeColor
-                                : AppColors_1.AppColors.grayTextWeak} size={14}/>)}
-                        <react_native_1.Text style={{
-                            fontFamily: active
-                                ? AppFonts_1.AppFonts.interBold
-                                : AppFonts_1.AppFonts.interMedium,
-                            fontSize: 13,
-                            color: active
-                                ? activeColor
-                                : AppColors_1.AppColors.grayTextWeak,
-                        }}>
-                          {label}
-                        </react_native_1.Text>
-                      </react_native_1.Pressable>);
-                })}
-              </react_native_1.View>
-              <react_native_1.View style={{ flex: 1, padding: 12 }}>
-                {!isHtmlTabReady ? (<react_native_1.View style={{
-                        flex: 1,
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                        minHeight: 200,
-                    }}>
-                    <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
-                  </react_native_1.View>) : htmlSubTab === 'html' ? (webViewHtml ? (<CodeSnippet_1.default code={webViewHtml} language="html" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
-                        fontFamily: 'monospace',
-                        fontSize: 11,
-                        color: '#94A3B8',
-                        padding: 12,
-                    }}>
-                      No HTML content captured.
-                    </react_native_1.Text>)) : htmlSubTab === 'css' ? (webViewCss ? (<CodeSnippet_1.default code={webViewCss} language="css" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
-                        fontFamily: 'monospace',
-                        fontSize: 11,
-                        color: '#94A3B8',
-                        padding: 12,
-                    }}>
-                      No CSS styles detected on this page.
-                    </react_native_1.Text>)) : webViewJs ? (<CodeSnippet_1.default code={webViewJs} language="javascript" search={getSearchTermForTab()}/>) : (<react_native_1.Text style={{
-                        fontFamily: 'monospace',
-                        fontSize: 11,
-                        color: '#94A3B8',
-                        padding: 12,
-                    }}>
-                    No scripts detected on this page.
-                  </react_native_1.Text>)}
-              </react_native_1.View>
-            </react_native_1.View>) : (<react_native_1.View style={styles_1.default.emptyContainer}>
-              <react_native_1.View style={styles_1.default.emptyIconWrap}>
-                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
-              </react_native_1.View>
-              <react_native_1.Text style={styles_1.default.emptyTitle}>
-                No Page Source Captured
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.emptySub}>
-                Load a page in the WebView to inspect its
-                HTML, CSS, or Javascript source.
-              </react_native_1.Text>
-            </react_native_1.View>)}
-        </react_native_1.View>) : webViewSubTab === 'navigation' ? (<react_native_1.FlatList data={filteredNavHistory} keyExtractor={(item, index) => `${index}-${item.timestamp}`} style={{
-                flex: 1,
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-            }} ListHeaderComponent={<react_native_1.View style={{
-                    paddingHorizontal: 16,
-                    paddingTop: 12,
-                    paddingBottom: 8,
-                }}>
-              <react_native_1.Text style={styles_1.default.resultCount}>
-                Navigation History ({webViewNavHistory.length}
-                )
-              </react_native_1.Text>
-            </react_native_1.View>} renderItem={({ item, index, }) => {
-                const isLatest = index === 0;
-                const formatNavTime = (ts) => {
-                    const d = new Date(ts);
-                    return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
-                };
-                return (<AnimatedEntrance_1.default index={index} distance={8} style={{
-                        marginHorizontal: 16,
-                        marginVertical: 6,
-                        borderRadius: 12,
-                        borderWidth: 1,
-                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                        backgroundColor: isLatest
-                            ? AppColors_1.AppColors.purpleShade50
-                            : AppColors_1.AppColors.primaryLight,
-                        padding: 14,
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        gap: 12,
-                        shadowColor: '#000000',
-                        shadowOffset: { width: 0, height: 2 },
-                        shadowOpacity: isDark ? 0.2 : 0.04,
-                        shadowRadius: 4,
-                        elevation: 2,
-                    }}>
-                <react_native_1.View style={{ flex: 1, gap: 8 }}>
-                  {/* Top row: Title and Badge */}
-                  <react_native_1.View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 8,
-                        flexWrap: 'wrap',
-                    }}>
-                    <react_native_1.Text numberOfLines={1} ellipsizeMode="tail" style={{
-                        fontFamily: AppFonts_1.AppFonts.interBold,
-                        fontSize: 14,
-                        color: AppColors_1.AppColors.primaryBlack,
-                        flexShrink: 1,
-                    }}>
-                      {item.title || 'Untitled Page'}
-                    </react_native_1.Text>
-                    {isLatest && (<react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            backgroundColor: AppColors_1.AppColors.greenStatus,
-                            paddingHorizontal: 8,
-                            paddingVertical: 3,
-                            borderRadius: 12,
-                        }}>
-                        <react_native_1.View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: AppColors_1.AppColors.greenBaggageText,
-                        }}/>
-                        <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: AppColors_1.AppColors.greenBaggageText,
-                        }}>
-                          Active
-                        </react_native_1.Text>
-                      </react_native_1.View>)}
-                  </react_native_1.View>
-
-                  {/* Middle row: URL with Globe Icon */}
-                  <react_native_1.View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                    <NetworkIcons_1.GlobeIcon size={12} color={AppColors_1.AppColors.grayTextWeak}/>
-                    <HighlightText_1.default text={item.url} search={webViewSearch} numberOfLines={2} ellipsizeMode="tail" style={{
-                        fontFamily: AppFonts_1.AppFonts.interRegular,
-                        fontSize: 12,
-                        color: AppColors_1.AppColors.grayText,
-                        flex: 1,
-                    }} highlightStyle={styles_1.default.highlight} detectLinks={true}/>
-                  </react_native_1.View>
-
-                  {/* Bottom row: Time */}
-                  <react_native_1.View style={{
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        gap: 6,
-                    }}>
-                    <NetworkIcons_1.ClockIcon size={11} color={AppColors_1.AppColors.grayTextWeak}/>
-                    <react_native_1.Text style={{
-                        fontFamily: AppFonts_1.AppFonts.interRegular,
-                        fontSize: 11,
-                        color: AppColors_1.AppColors.grayTextWeak,
-                    }}>
-                      {formatNavTime(item.timestamp)}
-                    </react_native_1.Text>
-                  </react_native_1.View>
-                </react_native_1.View>
-                <CopyButton_1.default value={item.url} label="URL"/>
-              </AnimatedEntrance_1.default>);
-            }} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={webViewSearch.length > 0}/>} contentContainerStyle={[
-                styles_1.default.listContent,
-                filteredNavHistory.length === 0 && {
-                    flexGrow: 1,
-                },
-            ]} keyboardShouldPersistTaps="handled"/>) : webViewSubTab === 'console' ? (<react_native_1.View style={{
-                flex: 1,
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-            }}>
-          {webViewLogs.length > 0 ? (<react_native_1.FlatList data={webViewLogs} keyExtractor={(item) => String(item.id)} style={{ flex: 1 }} ListHeaderComponent={<react_native_1.View style={{
-                        paddingHorizontal: 16,
-                        paddingTop: 12,
-                        paddingBottom: 8,
-                        flexDirection: 'row',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                    }}>
-                  <react_native_1.Text style={styles_1.default.resultCount}>
-                    Console Logs ({webViewLogs.length})
-                  </react_native_1.Text>
-                  <TouchableScale_1.default onPress={() => (0, webViewLogger_1.clearWebViewData)()} style={{
-                        padding: 6,
-                        borderRadius: 6,
-                        backgroundColor: AppColors_1.AppColors.primaryLight,
-                        borderWidth: 1,
-                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                    }}>
-                    <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={14}/>
-                  </TouchableScale_1.default>
-                </react_native_1.View>} renderItem={({ item }) => {
-                    const logColor = item.type === 'error'
-                        ? AppColors_1.AppColors.errorColor
-                        : item.type === 'warn'
-                            ? AppColors_1.AppColors.warningIconGold
-                            : item.type === 'info'
-                                ? AppColors_1.AppColors.skyBlue
-                                : AppColors_1.AppColors.grayTextWeak;
-                    const bgColor = item.type === 'error'
-                        ? 'rgba(255, 46, 87, 0.06)'
-                        : item.type === 'warn'
-                            ? 'rgba(191, 162, 82, 0.08)'
-                            : AppColors_1.AppColors.primaryLight;
-                    const d = new Date(item.timestamp);
-                    const timeStr = `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}:${String(d.getSeconds()).padStart(2, '0')}`;
-                    return (<AnimatedEntrance_1.default index={item.id} distance={8} style={{
-                            marginHorizontal: 12,
-                            marginVertical: 3,
-                            borderRadius: 8,
-                            borderWidth: 1,
-                            borderColor: AppColors_1.AppColors.grayBorderSecondary,
-                            borderLeftWidth: 3,
-                            borderLeftColor: logColor,
-                            backgroundColor: bgColor,
-                            padding: 10,
-                            flexDirection: 'row',
-                            gap: 8,
-                            alignItems: 'flex-start',
-                        }}>
-                    <react_native_1.View style={{ paddingTop: 1 }}>
-                      <NetworkIcons_1.TerminalIcon color={logColor} size={11}/>
-                    </react_native_1.View>
-                    <react_native_1.View style={{ flex: 1, gap: 3 }}>
-                      <react_native_1.View style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                        }}>
-                        <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interBold,
-                            fontSize: 10,
-                            color: logColor,
-                            textTransform: 'uppercase',
-                            letterSpacing: 0.5,
-                        }}>
-                          {item.type}
-                        </react_native_1.Text>
-                        <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interRegular,
-                            fontSize: 10,
-                            color: AppColors_1.AppColors.grayTextWeak,
-                        }}>
-                          {timeStr}
-                        </react_native_1.Text>
-                      </react_native_1.View>
-                      <react_native_1.Text style={{
-                            fontFamily: AppFonts_1.AppFonts.interRegular,
-                            fontSize: 12,
-                            color: AppColors_1.AppColors.primaryBlack,
-                            lineHeight: 16,
-                        }}>
-                        {item.message}
-                      </react_native_1.Text>
-                    </react_native_1.View>
-                  </AnimatedEntrance_1.default>);
-                }} initialNumToRender={20} maxToRenderPerBatch={20} windowSize={7} contentContainerStyle={[
-                    styles_1.default.listContent,
-                    webViewLogs.length === 0 && { flexGrow: 1 },
-                ]}/>) : (<react_native_1.View style={styles_1.default.emptyContainer}>
-              <react_native_1.View style={styles_1.default.emptyIconWrap}>
-                <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={32}/>
-              </react_native_1.View>
-              <react_native_1.Text style={styles_1.default.emptyTitle}>
-                No Console Logs
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.emptySub}>
-                Console logs from the WebView will appear
-                here.
-              </react_native_1.Text>
-            </react_native_1.View>)}
-        </react_native_1.View>) : (<react_native_1.View style={{
-                flex: 1,
-                backgroundColor: AppColors_1.AppColors.grayBackground,
-            }}>
-          {webViewHtml ? (OriginalWebView ? (<OriginalWebView source={{
-                    html: webViewHtml,
-                    baseUrl: webViewHtmlUrl,
-                }} injectedJavaScript={previewInspectScript} onMessage={(event) => {
-                    try {
-                        const data = JSON.parse(event.nativeEvent.data);
-                        if (data.type === 'preview-inspect') {
-                            setInspectedElement({
-                                tagName: data.tagName,
-                                id: data.id,
-                                className: data.className,
-                                searchStr: data.searchStr,
-                            });
-                            setWebViewSubTab('html');
-                            setHtmlSubTab('html');
-                        }
-                    }
-                    catch (err) { }
-                }} style={{ flex: 1 }}/>) : (<react_native_1.View style={{
-                    flex: 1,
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    padding: 20,
-                }}>
-                <react_native_1.Text style={{
-                    color: AppColors_1.AppColors.grayText,
-                    textAlign: 'center',
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                }}>
-                  react-native-webview is not installed in the
-                  target project. Install it to enable Preview
-                  mode.
-                </react_native_1.Text>
-              </react_native_1.View>)) : (<react_native_1.View style={styles_1.default.emptyContainer}>
-              <react_native_1.View style={styles_1.default.emptyIconWrap}>
-                <NetworkIcons_1.GlobeIcon color={AppColors_1.AppColors.purple} size={32}/>
-              </react_native_1.View>
-              <react_native_1.Text style={styles_1.default.emptyTitle}>
-                No Preview Available
-              </react_native_1.Text>
-              <react_native_1.Text style={styles_1.default.emptySub}>
-                Load a page in the WebView to see its visual
-                preview.
-              </react_native_1.Text>
-            </react_native_1.View>)}
-        </react_native_1.View>)}
-    </react_native_1.View>);
-};
-exports.default = WebViewTab;