react-native-inapp-inspector 2.3.18 → 2.3.20

package/dist/esm/components/CodeSnippet.js

@@ -1,607 +1,70 @@
-import React, { useMemo, useState, useRef, useEffect } from 'react';
-import { StyleSheet, Text, View, Platform, FlatList, TextInput, Pressable } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
-import { SearchIcon, ClearIcon } from './NetworkIcons';
-import CopyButton from './CopyButton';
-import TouchableScale from './TouchableScale';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-const escapeRegExp = (string) => {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-};
-const formatHTML = (html) => {
-    if (!html)
-        return '';
-    let indent = 0;
-    const cleaned = html
-        .replace(/<([a-zA-Z0-9:-]+)([^>]*)>\s*<\/([a-zA-Z0-9:-]+)>/g, '<$1$2></$3>')
-        .replace(/(<[^>]+>)/g, '\n$1\n')
-        .replace(/\n+/g, '\n');
-    const lines = cleaned.split('\n');
-    const formatted = [];
-    const selfClosingTags = /^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i;
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i].trim();
-        if (!line)
-            continue;
-        if (line.startsWith('</')) {
-            indent = Math.max(0, indent - 1);
-        }
-        formatted.push('  '.repeat(indent) + line);
-        if (line.startsWith('<') &&
-            !line.startsWith('</') &&
-            !line.startsWith('<!') &&
-            !line.endsWith('/>')) {
-            const tagNameMatch = line.match(/^<([a-zA-Z0-9:-]+)/);
-            if (tagNameMatch) {
-                const tagName = tagNameMatch[1];
-                if (!selfClosingTags.test(tagName)) {
-                    const closeTagRegex = new RegExp(`</${escapeRegExp(tagName)}>`);
-                    if (!closeTagRegex.test(line)) {
-                        indent++;
-                    }
-                }
-            }
-        }
-    }
-    return formatted.join('\n');
-};
-const formatCSS = (css) => {
-    if (!css)
-        return '';
-    const cleaned = css
-        .replace(/\s*\{\s*/g, ' {\n')
-        .replace(/\s*;\s*/g, ';\n')
-        .replace(/\s*\}\s*/g, '\n}\n')
-        .replace(/\n+/g, '\n');
-    const lines = cleaned.split('\n');
-    let indent = 0;
-    const formatted = [];
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i].trim();
-        if (!line)
-            continue;
-        if (line.startsWith('}')) {
-            indent = Math.max(0, indent - 1);
-        }
-        formatted.push('  '.repeat(indent) + line);
-        if (line.endsWith('{')) {
-            indent++;
-        }
-    }
-    return formatted.join('\n');
-};
-const formatJS = (js) => {
-    if (!js)
-        return '';
-    const lines = js.split(/\r?\n/);
-    let indent = 0;
-    const formatted = [];
-    for (let i = 0; i < lines.length; i++) {
-        const line = lines[i].trim();
-        if (!line)
-            continue;
-        let openCount = (line.match(/\{|\[/g) || []).length;
-        let closeCount = (line.match(/\}|\]/g) || []).length;
-        if (line.startsWith('}') || line.startsWith(']')) {
-            indent = Math.max(0, indent - 1);
-        }
-        else if (closeCount > openCount) {
-            indent = Math.max(0, indent - (closeCount - openCount));
-        }
-        formatted.push('  '.repeat(indent) + line);
-        if (openCount > closeCount &&
-            !line.startsWith('}') &&
-            !line.startsWith(']')) {
-            indent += openCount - closeCount;
-        }
-        else if (line.endsWith('{') || line.endsWith('[')) {
-            indent++;
-        }
-    }
-    return formatted.join('\n');
-};
-const tokenizeJS = (text) => {
-    const tokens = [];
-    const regex = /(\/\/.*|\/\*[\s\S]*?\*\/)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\'|\`(?:\\.|[^\`\\])*\`)|(\b(const|let|var|function|return|if|else|for|while|import|export|class|try|catch|new|this|async|await|break|continue|switch|case|default|throw|typeof|yield)\b)|(\b(console|window|document|fetch|global|require|module|exports|Promise|Map|Set|Array|Object|String|Number|Boolean)\b)|(\b\d+(?:\.\d+)?\b)/g;
-    let lastIndex = 0;
-    let match;
-    while ((match = regex.exec(text)) !== null) {
-        if (regex.lastIndex === match.index) {
-            regex.lastIndex++;
-        }
-        if (match.index > lastIndex) {
-            tokens.push({
-                text: text.substring(lastIndex, match.index),
-                type: 'plain',
-            });
-        }
-        const matchedText = match[0];
-        if (match[1])
-            tokens.push({ text: matchedText, type: 'comment' });
-        else if (match[2])
-            tokens.push({ text: matchedText, type: 'string' });
-        else if (match[3])
-            tokens.push({ text: matchedText, type: 'keyword' });
-        else if (match[4])
-            tokens.push({ text: matchedText, type: 'builtin' });
-        else if (match[5])
-            tokens.push({ text: matchedText, type: 'number' });
-        lastIndex = regex.lastIndex;
-    }
-    if (lastIndex < text.length) {
-        tokens.push({ text: text.substring(lastIndex), type: 'plain' });
-    }
-    return tokens;
-};
-const tokenizeCSS = (text) => {
-    const tokens = [];
-    const regex = /(\/\*[\s\S]*?\*\/)|(\.[a-zA-Z0-9_-]+|#[a-zA-Z0-9_-]+|[a-zA-Z0-9_-]+(?=\s*\{))|([a-zA-Z0-9_-]+(?=\s*:))|(:[^;]+;)/g;
-    let lastIndex = 0;
-    let match;
-    while ((match = regex.exec(text)) !== null) {
-        if (regex.lastIndex === match.index) {
-            regex.lastIndex++;
-        }
-        if (match.index > lastIndex) {
-            tokens.push({
-                text: text.substring(lastIndex, match.index),
-                type: 'plain',
-            });
-        }
-        const matchedText = match[0];
-        if (match[1])
-            tokens.push({ text: matchedText, type: 'comment' });
-        else if (match[2])
-            tokens.push({ text: matchedText, type: 'selector' });
-        else if (match[3])
-            tokens.push({ text: matchedText, type: 'property' });
-        else if (match[4]) {
-            tokens.push({ text: ':', type: 'plain' });
-            tokens.push({ text: matchedText.substring(1), type: 'value' });
-        }
-        lastIndex = regex.lastIndex;
-    }
-    if (lastIndex < text.length) {
-        tokens.push({ text: text.substring(lastIndex), type: 'plain' });
-    }
-    return tokens;
-};
-const tokenizeHTML = (text) => {
-    const tokens = [];
-    const regex = /(<!--[\s\S]*?-->)|(<\/?[a-zA-Z0-9:-]+>?)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\')|([a-zA-Z0-9:-]+(?=\s*=))/g;
-    let lastIndex = 0;
-    let match;
-    while ((match = regex.exec(text)) !== null) {
-        if (regex.lastIndex === match.index) {
-            regex.lastIndex++;
-        }
-        if (match.index > lastIndex) {
-            tokens.push({
-                text: text.substring(lastIndex, match.index),
-                type: 'plain',
-            });
-        }
-        const matchedText = match[0];
-        if (match[1])
-            tokens.push({ text: matchedText, type: 'comment' });
-        else if (match[2])
-            tokens.push({ text: matchedText, type: 'tag' });
-        else if (match[3])
-            tokens.push({ text: matchedText, type: 'string' });
-        else if (match[4])
-            tokens.push({ text: matchedText, type: 'attribute' });
-        lastIndex = regex.lastIndex;
-    }
-    if (lastIndex < text.length) {
-        tokens.push({ text: text.substring(lastIndex), type: 'plain' });
-    }
-    return tokens;
-};
-const getStyleForType = (type) => {
-    switch (type) {
-        case 'comment':
-            return styles.comment;
-        case 'string':
-            return styles.string;
-        case 'keyword':
-            return styles.keyword;
-        case 'builtin':
-            return styles.builtin;
-        case 'number':
-            return styles.number;
-        case 'tag':
-            return styles.tag;
-        case 'attribute':
-            return styles.attribute;
-        case 'selector':
-            return styles.selector;
-        case 'property':
-            return styles.property;
-        case 'value':
-            return styles.value;
-        default:
-            return [styles.plain, { color: AppColors.primaryBlack }];
-    }
-};
-const ArrowUpIcon = ({ color = AppColors.slate500, size = 16 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M18 15l-6-6-6 6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-const ArrowDownIcon = ({ color = AppColors.slate500, size = 16 }) => (<Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </Svg>);
-const CodeSnippetLine = React.memo(({ line, lineIndex, language, search, isActiveMatch, }) => {
-    const tokens = useMemo(() => {
-        if (language === 'html')
-            return tokenizeHTML(line);
-        if (language === 'css')
-            return tokenizeCSS(line);
-        return tokenizeJS(line);
-    }, [line, language]);
-    const renderTokenText = (text, type) => {
-        const baseStyle = getStyleForType(type);
-        if (!search) {
-            return <Text style={baseStyle}>{text}</Text>;
-        }
-        const parts = text.split(new RegExp(`(${escapeRegExp(search)})`, 'gi'));
-        return (<Text style={baseStyle}>
-          {parts.map((part, index) => {
-                const isMatch = part.toLowerCase() === search.toLowerCase();
-                return isMatch ? (<Text key={index} style={styles.highlight}>
-                {part}
-              </Text>) : (part);
-            })}
-        </Text>);
-    };
-    return (<View style={[styles.lineRow, isActiveMatch && styles.activeMatchRow]}>
+import B,{useMemo as I,useState as R,useRef as D,useEffect as L}from"react";import{StyleSheet as _,Text as T,View as S,Platform as G,FlatList as Q,TextInput as O,Pressable as U}from"react-native";import F,{Path as A}from"react-native-svg";import{SearchIcon as J,ClearIcon as Y}from"./NetworkIcons";import K from"./CopyButton";import $ from"./TouchableScale";import{AppColors as e}from"../styles/AppColors";import{AppFonts as M}from"../styles/AppFonts";const V=n=>n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),X=n=>{if(!n)return"";let t=0;const i=n.replace(/<([a-zA-Z0-9:-]+)([^>]*)>\s*<\/([a-zA-Z0-9:-]+)>/g,"<$1$2></$3>").replace(/(<[^>]+>)/g,`
+$1
+`).replace(/\n+/g,`
+`).split(`
+`),r=[],o=/^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i;for(let d=0;d<i.length;d++){const s=i[d].trim();if(s&&(s.startsWith("</")&&(t=Math.max(0,t-1)),r.push("  ".repeat(t)+s),s.startsWith("<")&&!s.startsWith("</")&&!s.startsWith("<!")&&!s.endsWith("/>"))){const p=s.match(/^<([a-zA-Z0-9:-]+)/);if(p){const g=p[1];o.test(g)||new RegExp(`</${V(g)}>`).test(s)||t++}}}return r.join(`
+`)},ee=n=>{if(!n)return"";const l=n.replace(/\s*\{\s*/g,` {
+`).replace(/\s*;\s*/g,`;
+`).replace(/\s*\}\s*/g,`
+}
+`).replace(/\n+/g,`
+`).split(`
+`);let i=0;const r=[];for(let o=0;o<l.length;o++){const d=l[o].trim();d&&(d.startsWith("}")&&(i=Math.max(0,i-1)),r.push("  ".repeat(i)+d),d.endsWith("{")&&i++)}return r.join(`
+`)},te=n=>{if(!n)return"";const t=n.split(/\r?\n/);let l=0;const i=[];for(let r=0;r<t.length;r++){const o=t[r].trim();if(!o)continue;let d=(o.match(/\{|\[/g)||[]).length,s=(o.match(/\}|\]/g)||[]).length;o.startsWith("}")||o.startsWith("]")?l=Math.max(0,l-1):s>d&&(l=Math.max(0,l-(s-d))),i.push("  ".repeat(l)+o),d>s&&!o.startsWith("}")&&!o.startsWith("]")?l+=d-s:(o.endsWith("{")||o.endsWith("["))&&l++}return i.join(`
+`)},re=n=>{const t=[],l=/(\/\/.*|\/\*[\s\S]*?\*\/)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\'|\`(?:\\.|[^\`\\])*\`)|(\b(const|let|var|function|return|if|else|for|while|import|export|class|try|catch|new|this|async|await|break|continue|switch|case|default|throw|typeof|yield)\b)|(\b(console|window|document|fetch|global|require|module|exports|Promise|Map|Set|Array|Object|String|Number|Boolean)\b)|(\b\d+(?:\.\d+)?\b)/g;let i=0,r;for(;(r=l.exec(n))!==null;){l.lastIndex===r.index&&l.lastIndex++,r.index>i&&t.push({text:n.substring(i,r.index),type:"plain"});const o=r[0];r[1]?t.push({text:o,type:"comment"}):r[2]?t.push({text:o,type:"string"}):r[3]?t.push({text:o,type:"keyword"}):r[4]?t.push({text:o,type:"builtin"}):r[5]&&t.push({text:o,type:"number"}),i=l.lastIndex}return i<n.length&&t.push({text:n.substring(i),type:"plain"}),t},ne=n=>{const t=[],l=/(\/\*[\s\S]*?\*\/)|(\.[a-zA-Z0-9_-]+|#[a-zA-Z0-9_-]+|[a-zA-Z0-9_-]+(?=\s*\{))|([a-zA-Z0-9_-]+(?=\s*:))|(:[^;]+;)/g;let i=0,r;for(;(r=l.exec(n))!==null;){l.lastIndex===r.index&&l.lastIndex++,r.index>i&&t.push({text:n.substring(i,r.index),type:"plain"});const o=r[0];r[1]?t.push({text:o,type:"comment"}):r[2]?t.push({text:o,type:"selector"}):r[3]?t.push({text:o,type:"property"}):r[4]&&(t.push({text:":",type:"plain"}),t.push({text:o.substring(1),type:"value"})),i=l.lastIndex}return i<n.length&&t.push({text:n.substring(i),type:"plain"}),t},oe=n=>{const t=[],l=/(<!--[\s\S]*?-->)|(<\/?[a-zA-Z0-9:-]+>?)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\')|([a-zA-Z0-9:-]+(?=\s*=))/g;let i=0,r;for(;(r=l.exec(n))!==null;){l.lastIndex===r.index&&l.lastIndex++,r.index>i&&t.push({text:n.substring(i,r.index),type:"plain"});const o=r[0];r[1]?t.push({text:o,type:"comment"}):r[2]?t.push({text:o,type:"tag"}):r[3]?t.push({text:o,type:"string"}):r[4]&&t.push({text:o,type:"attribute"}),i=l.lastIndex}return i<n.length&&t.push({text:n.substring(i),type:"plain"}),t},ie=n=>{switch(n){case"comment":return a.comment;case"string":return a.string;case"keyword":return a.keyword;case"builtin":return a.builtin;case"number":return a.number;case"tag":return a.tag;case"attribute":return a.attribute;case"selector":return a.selector;case"property":return a.property;case"value":return a.value;default:return[a.plain,{color:e.primaryBlack}]}},Se=({color:n=e.slate500,size:t=16})=><F width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <A d="M18 15l-6-6-6 6"stroke={n}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+  </F>,Ce=({color:n=e.slate500,size:t=16})=><F width={t}height={t}viewBox="0 0 24 24"fill="none">
+    <A d="M6 9l6 6 6-6"stroke={n}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+  </F>,Te=B.memo(({line:n,lineIndex:t,language:l,search:i,isActiveMatch:r})=>{const o=I(()=>l==="html"?oe(n):l==="css"?ne(n):re(n),[n,l]),d=(s,p)=>{const g=ie(p);if(!i)return<T style={g}>{s}</T>;const v=s.split(new RegExp(`(${V(i)})`,"gi"));return<T style={g}>
+          {v.map((m,z)=>m.toLowerCase()===i.toLowerCase()?<T key={z}style={a.highlight}>
+                {m}
+              </T>:m)}
+        </T>};return<S style={[a.lineRow,r&&a.activeMatchRow]}>
         
-        <View style={[styles.gutter, { backgroundColor: AppColors.grayBackground, borderRightColor: AppColors.grayBorderSecondary }, isActiveMatch && styles.activeMatchGutter]}>
-          <Text style={[styles.lineNumber, { color: AppColors.grayTextWeak }, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</Text>
-        </View>
+        <S style={[a.gutter,{backgroundColor:e.grayBackground,borderRightColor:e.grayBorderSecondary},r&&a.activeMatchGutter]}>
+          <T style={[a.lineNumber,{color:e.grayTextWeak},r&&a.activeMatchLineNumber]}>{t+1}</T>
+        </S>
 
         
-        <View style={styles.codeLine}>
-          <Text style={[styles.codeLineText, { color: AppColors.primaryBlack }]}>
-            {tokens.length === 0 ? (<Text style={[styles.plain, { color: AppColors.primaryBlack }]}> </Text>) : (tokens.map((token, tokenIdx) => (<React.Fragment key={tokenIdx}>
-                  {renderTokenText(token.text, token.type)}
-                </React.Fragment>)))}
-          </Text>
-        </View>
-      </View>);
-});
-const CodeSnippet = ({ code, language, search, }) => {
-    const [searchQuery, setSearchQuery] = useState('');
-    const [debouncedQuery, setDebouncedQuery] = useState('');
-    const [currentMatchIdx, setCurrentMatchIdx] = useState(-1);
-    const [visibleLinesCount, setVisibleLinesCount] = useState(200);
-    const flatListRef = useRef(null);
-    useEffect(() => {
-        if (search !== undefined) {
-            setSearchQuery(search);
-        }
-    }, [search]);
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            setDebouncedQuery(searchQuery);
-        }, 300);
-        return () => clearTimeout(timer);
-    }, [searchQuery]);
-    const formattedCode = useMemo(() => {
-        if (!code)
-            return '';
-        if (code.length > 150000) {
-            return code;
-        }
-        if (language === 'html')
-            return formatHTML(code);
-        if (language === 'css')
-            return formatCSS(code);
-        if (language === 'javascript')
-            return formatJS(code);
-        return code;
-    }, [code, language]);
-    const lines = useMemo(() => {
-        if (!formattedCode)
-            return [];
-        return formattedCode.split(/\r?\n/);
-    }, [formattedCode]);
-    const matches = useMemo(() => {
-        if (!debouncedQuery.trim() || debouncedQuery.length < 2)
-            return [];
-        const query = debouncedQuery.toLowerCase();
-        const indices = [];
-        for (let i = 0; i < lines.length; i++) {
-            if (lines[i].toLowerCase().includes(query)) {
-                indices.push(i);
-            }
-        }
-        return indices;
-    }, [debouncedQuery, lines]);
-    useEffect(() => {
-        setVisibleLinesCount(200);
-        setSearchQuery(search || '');
-        setCurrentMatchIdx(-1);
-    }, [code, language]);
-    useEffect(() => {
-        if (matches.length > 0) {
-            setCurrentMatchIdx(0);
-            scrollToMatch(0);
-        }
-        else {
-            setCurrentMatchIdx(-1);
-        }
-    }, [matches]);
-    const scrollToMatch = (matchIdx) => {
-        if (matches.length === 0 || matchIdx < 0 || matchIdx >= matches.length)
-            return;
-        const lineIdx = matches[matchIdx];
-        if (lineIdx >= visibleLinesCount) {
-            setVisibleLinesCount(lineIdx + 100);
-        }
-        setTimeout(() => {
-            try {
-                flatListRef.current?.scrollToIndex({
-                    index: lineIdx,
-                    animated: false,
-                    viewPosition: 0.3,
-                });
-            }
-            catch (e) {
-            }
-        }, 50);
-    };
-    const onScrollToIndexFailed = (error) => {
-        flatListRef.current?.scrollToOffset({
-            offset: error.averageItemLength * error.index,
-            animated: false,
-        });
-        setTimeout(() => {
-            try {
-                flatListRef.current?.scrollToIndex({
-                    index: error.index,
-                    animated: false,
-                    viewPosition: 0.3,
-                });
-            }
-            catch (err) {
-                console.warn('Scroll to line index failed after fallback retry:', err);
-            }
-        }, 60);
-    };
-    const handleNextMatch = () => {
-        if (matches.length === 0)
-            return;
-        const nextIdx = (currentMatchIdx + 1) % matches.length;
-        setCurrentMatchIdx(nextIdx);
-        scrollToMatch(nextIdx);
-    };
-    const handlePrevMatch = () => {
-        if (matches.length === 0)
-            return;
-        const prevIdx = (currentMatchIdx - 1 + matches.length) % matches.length;
-        setCurrentMatchIdx(prevIdx);
-        scrollToMatch(prevIdx);
-    };
-    const visibleLines = useMemo(() => {
-        return lines.slice(0, visibleLinesCount);
-    }, [lines, visibleLinesCount]);
-    const handleEndReached = () => {
-        if (visibleLinesCount < lines.length) {
-            setVisibleLinesCount(prev => Math.min(prev + 150, lines.length));
-        }
-    };
-    const renderLine = ({ item, index }) => {
-        const isActiveMatch = matches.length > 0 && currentMatchIdx >= 0 && index === matches[currentMatchIdx];
-        return (<CodeSnippetLine line={item} lineIndex={index} language={language} search={debouncedQuery} isActiveMatch={isActiveMatch}/>);
-    };
-    return (<View style={{ flex: 1 }}>
+        <S style={a.codeLine}>
+          <T style={[a.codeLineText,{color:e.primaryBlack}]}>
+            {o.length===0?<T style={[a.plain,{color:e.primaryBlack}]}> </T>:o.map((s,p)=><B.Fragment key={p}>
+                  {d(s.text,s.type)}
+                </B.Fragment>)}
+          </T>
+        </S>
+      </S>}),ve=({code:n,language:t,search:l})=>{const[i,r]=R(""),[o,d]=R(""),[s,p]=R(-1),[g,v]=R(200),m=D(null);L(()=>{l!==void 0&&r(l)},[l]),L(()=>{const c=setTimeout(()=>{d(i)},300);return()=>clearTimeout(c)},[i]);const z=I(()=>n?n.length>15e4?n:t==="html"?X(n):t==="css"?ee(n):t==="javascript"?te(n):n:"",[n,t]),y=I(()=>z?z.split(/\r?\n/):[],[z]),u=I(()=>{if(!o.trim()||o.length<2)return[];const c=o.toLowerCase(),h=[];for(let C=0;C<y.length;C++)y[C].toLowerCase().includes(c)&&h.push(C);return h},[o,y]);L(()=>{v(200),r(l||""),p(-1)},[n,t]),L(()=>{u.length>0?(p(0),W(0)):p(-1)},[u]);const W=c=>{if(u.length===0||c<0||c>=u.length)return;const h=u[c];h>=g&&v(h+100),setTimeout(()=>{try{m.current?.scrollToIndex({index:h,animated:!1,viewPosition:.3})}catch{}},50)},P=c=>{m.current?.scrollToOffset({offset:c.averageItemLength*c.index,animated:!1}),setTimeout(()=>{try{m.current?.scrollToIndex({index:c.index,animated:!1,viewPosition:.3})}catch(h){console.warn("Scroll to line index failed after fallback retry:",h)}},60)},j=()=>{if(u.length===0)return;const c=(s+1)%u.length;p(c),W(c)},N=()=>{if(u.length===0)return;const c=(s-1+u.length)%u.length;p(c),W(c)},Z=I(()=>y.slice(0,g),[y,g]),E=()=>{g<y.length&&v(c=>Math.min(c+150,y.length))},H=({item:c,index:h})=>{const C=u.length>0&&s>=0&&h===u[s];return<Te line={c}lineIndex={h}language={t}search={o}isActiveMatch={C}/>};return<S style={{flex:1}}>
       
-      <View style={styles.searchRow}>
-        <View style={[styles.searchBar, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
-          <SearchIcon color={AppColors.grayTextWeak} size={15}/>
-          <TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={[styles.searchInput, { color: AppColors.primaryBlack }]} autoCorrect={false} autoCapitalize="none"/>
+      <S style={a.searchRow}>
+        <S style={[a.searchBar,{backgroundColor:e.primaryLight,borderColor:e.grayBorderSecondary}]}>
+          <J color={e.grayTextWeak}size={15}/>
+          <O placeholder={`Search ${t.toUpperCase()}...`}placeholderTextColor={e.grayTextWeak}value={i}onChangeText={r}style={[a.searchInput,{color:e.primaryBlack}]}autoCorrect={!1}autoCapitalize="none"/>
 
           
-          {debouncedQuery.length >= 2 && (<Text style={[styles.matchCountText, { backgroundColor: AppColors.grayBackground, color: AppColors.grayTextWeak }]}>
-              {matches.length > 0 ? `${currentMatchIdx + 1}/${matches.length}` : '0/0'}
-            </Text>)}
+          {o.length>=2&&<T style={[a.matchCountText,{backgroundColor:e.grayBackground,color:e.grayTextWeak}]}>
+              {u.length>0?`${s+1}/${u.length}`:"0/0"}
+            </T>}
 
-          {searchQuery.length > 0 && (<Pressable onPress={() => setSearchQuery('')} hitSlop={8} style={styles.clearBtn}>
-              <ClearIcon color={AppColors.grayTextWeak} size={12}/>
-            </Pressable>)}
-        </View>
+          {i.length>0&&<U onPress={()=>r("")}hitSlop={8}style={a.clearBtn}>
+              <Y color={e.grayTextWeak}size={12}/>
+            </U>}
+        </S>
 
         
-        {matches.length > 0 && (<View style={[styles.navArrowsGroup, { backgroundColor: AppColors.primaryLight, borderColor: AppColors.grayBorderSecondary }]}>
-            <TouchableScale onPress={handlePrevMatch} hitSlop={8} style={styles.navArrowBtn}>
-              <ArrowUpIcon color={AppColors.grayTextStrong} size={14}/>
-            </TouchableScale>
-            <TouchableScale onPress={handleNextMatch} hitSlop={8} style={styles.navArrowBtn}>
-              <ArrowDownIcon color={AppColors.grayTextStrong} size={14}/>
-            </TouchableScale>
-          </View>)}
+        {u.length>0&&<S style={[a.navArrowsGroup,{backgroundColor:e.primaryLight,borderColor:e.grayBorderSecondary}]}>
+            <$ onPress={N}hitSlop={8}style={a.navArrowBtn}>
+              <Se color={e.grayTextStrong}size={14}/>
+            </$>
+            <$ onPress={j}hitSlop={8}style={a.navArrowBtn}>
+              <Ce color={e.grayTextStrong}size={14}/>
+            </$>
+          </S>}
 
-        <CopyButton value={code} label={`${language.toUpperCase()} Source`}/>
-      </View>
+        <K value={n}label={`${t.toUpperCase()} Source`}/>
+      </S>
 
       
-      <View style={[styles.container, { backgroundColor: AppColors.grayBackground, borderColor: AppColors.grayBorderSecondary }]}>
-        <FlatList ref={flatListRef} data={visibleLines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={30} windowSize={5} initialNumToRender={50} removeClippedSubviews={Platform.OS === 'android'} onEndReached={handleEndReached} onEndReachedThreshold={0.5} onScrollToIndexFailed={onScrollToIndexFailed}/>
-      </View>
-    </View>);
-};
-const monoFont = AppFonts.interRegular;
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors.slate50,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.slate200,
-        overflow: 'hidden',
-    },
-    searchRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 6,
-        gap: 8,
-    },
-    searchBar: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.white,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.slate200,
-        paddingHorizontal: 8,
-        height: 32,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors.slate900,
-        marginLeft: 6,
-        paddingVertical: 0,
-    },
-    matchCountText: {
-        fontFamily: AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors.slate500,
-        marginHorizontal: 6,
-        backgroundColor: AppColors.slate100,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-    },
-    clearBtn: {
-        padding: 4,
-    },
-    navArrowsGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors.white,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors.slate200,
-        height: 32,
-        paddingHorizontal: 2,
-    },
-    navArrowBtn: {
-        padding: 5,
-        borderRadius: 6,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    lineRow: {
-        flexDirection: 'row',
-        alignItems: 'stretch',
-        minHeight: 20,
-        paddingVertical: 1,
-    },
-    activeMatchRow: {
-        backgroundColor: `${AppColors.amber600}38`,
-        borderLeftWidth: 4,
-        borderLeftColor: AppColors.amber600,
-    },
-    gutter: {
-        width: 40,
-        backgroundColor: AppColors.slate100,
-        borderRightWidth: 1,
-        borderRightColor: AppColors.slate200,
-        justifyContent: 'flex-start',
-        alignItems: 'flex-end',
-        paddingRight: 6,
-        paddingTop: 1,
-    },
-    activeMatchGutter: {
-        backgroundColor: `${AppColors.amber600}59`,
-        borderRightColor: `${AppColors.amber600}80`,
-    },
-    lineNumber: {
-        fontFamily: monoFont,
-        fontSize: 9,
-        color: AppColors.slate400,
-    },
-    activeMatchLineNumber: {
-        color: AppColors.amber800,
-        fontWeight: 'bold',
-    },
-    codeLine: {
-        flex: 1,
-        paddingLeft: 10,
-        paddingRight: 12,
-        justifyContent: 'center',
-    },
-    codeLineText: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.slate700,
-        flexWrap: 'wrap',
-    },
-    plain: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.slate700,
-    },
-    comment: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.slate500,
-        fontStyle: 'italic',
-    },
-    string: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.amber700,
-    },
-    keyword: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.violet600,
-        fontWeight: 'bold',
-    },
-    builtin: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.teal600,
-    },
-    number: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.blue600,
-    },
-    tag: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.indigo600,
-        fontWeight: 'bold',
-    },
-    attribute: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.teal600,
-    },
-    selector: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.violet600,
-        fontWeight: 'bold',
-    },
-    property: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.teal600,
-    },
-    value: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors.orange600,
-    },
-    highlight: {
-        backgroundColor: AppColors.highlightYellow,
-        color: AppColors.black,
-    },
-});
-export default CodeSnippet;
+      <S style={[a.container,{backgroundColor:e.grayBackground,borderColor:e.grayBorderSecondary}]}>
+        <Q ref={m}data={Z}renderItem={H}keyExtractor={(c,h)=>String(h)}maxToRenderPerBatch={30}windowSize={5}initialNumToRender={50}removeClippedSubviews={G.OS==="android"}onEndReached={E}onEndReachedThreshold={.5}onScrollToIndexFailed={P}/>
+      </S>
+    </S>},f=M.interRegular,a=_.create({container:{flex:1,backgroundColor:e.slate50,borderRadius:8,borderWidth:1,borderColor:e.slate200,overflow:"hidden"},searchRow:{flexDirection:"row",alignItems:"center",marginBottom:6,gap:8},searchBar:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:e.white,borderRadius:8,borderWidth:1,borderColor:e.slate200,paddingHorizontal:8,height:32},searchInput:{flex:1,fontFamily:M.interRegular,fontSize:12,color:e.slate900,marginLeft:6,paddingVertical:0},matchCountText:{fontFamily:M.interMedium,fontSize:10,color:e.slate500,marginHorizontal:6,backgroundColor:e.slate100,paddingHorizontal:6,paddingVertical:2,borderRadius:4},clearBtn:{padding:4},navArrowsGroup:{flexDirection:"row",alignItems:"center",backgroundColor:e.white,borderRadius:8,borderWidth:1,borderColor:e.slate200,height:32,paddingHorizontal:2},navArrowBtn:{padding:5,borderRadius:6,alignItems:"center",justifyContent:"center"},lineRow:{flexDirection:"row",alignItems:"stretch",minHeight:20,paddingVertical:1},activeMatchRow:{backgroundColor:`${e.amber600}38`,borderLeftWidth:4,borderLeftColor:e.amber600},gutter:{width:40,backgroundColor:e.slate100,borderRightWidth:1,borderRightColor:e.slate200,justifyContent:"flex-start",alignItems:"flex-end",paddingRight:6,paddingTop:1},activeMatchGutter:{backgroundColor:`${e.amber600}59`,borderRightColor:`${e.amber600}80`},lineNumber:{fontFamily:f,fontSize:9,color:e.slate400},activeMatchLineNumber:{color:e.amber800,fontWeight:"bold"},codeLine:{flex:1,paddingLeft:10,paddingRight:12,justifyContent:"center"},codeLineText:{fontFamily:f,fontSize:10.5,color:e.slate700,flexWrap:"wrap"},plain:{fontFamily:f,fontSize:10.5,color:e.slate700},comment:{fontFamily:f,fontSize:10.5,color:e.slate500,fontStyle:"italic"},string:{fontFamily:f,fontSize:10.5,color:e.amber700},keyword:{fontFamily:f,fontSize:10.5,color:e.violet600,fontWeight:"bold"},builtin:{fontFamily:f,fontSize:10.5,color:e.teal600},number:{fontFamily:f,fontSize:10.5,color:e.blue600},tag:{fontFamily:f,fontSize:10.5,color:e.indigo600,fontWeight:"bold"},attribute:{fontFamily:f,fontSize:10.5,color:e.teal600},selector:{fontFamily:f,fontSize:10.5,color:e.violet600,fontWeight:"bold"},property:{fontFamily:f,fontSize:10.5,color:e.teal600},value:{fontFamily:f,fontSize:10.5,color:e.orange600},highlight:{backgroundColor:e.highlightYellow,color:e.black}});export default ve;