react-native-inapp-inspector 2.3.19 → 2.3.21

package/dist/commonjs/components/CodeSnippet.js

@@ -1,645 +1,70 @@
-"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 });
-const react_1 = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const react_native_svg_1 = __importStar(require("react-native-svg"));
-const NetworkIcons_1 = require("./NetworkIcons");
-const CopyButton_1 = __importDefault(require("./CopyButton"));
-const TouchableScale_1 = __importDefault(require("./TouchableScale"));
-const AppColors_1 = require("../styles/AppColors");
-const AppFonts_1 = require("../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_1.AppColors.primaryBlack }];
-    }
-};
-const ArrowUpIcon = ({ color = AppColors_1.AppColors.slate500, size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <react_native_svg_1.Path d="M18 15l-6-6-6 6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </react_native_svg_1.default>);
-const ArrowDownIcon = ({ color = AppColors_1.AppColors.slate500, size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <react_native_svg_1.Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
-  </react_native_svg_1.default>);
-const CodeSnippetLine = react_1.default.memo(({ line, lineIndex, language, search, isActiveMatch, }) => {
-    const tokens = (0, react_1.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 <react_native_1.Text style={baseStyle}>{text}</react_native_1.Text>;
-        }
-        const parts = text.split(new RegExp(`(${escapeRegExp(search)})`, 'gi'));
-        return (<react_native_1.Text style={baseStyle}>
-          {parts.map((part, index) => {
-                const isMatch = part.toLowerCase() === search.toLowerCase();
-                return isMatch ? (<react_native_1.Text key={index} style={styles.highlight}>
-                {part}
-              </react_native_1.Text>) : (part);
-            })}
-        </react_native_1.Text>);
-    };
-    return (<react_native_1.View style={[styles.lineRow, isActiveMatch && styles.activeMatchRow]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(t,e,n,o){o===void 0&&(o=n);var r=Object.getOwnPropertyDescriptor(e,n);(!r||("get"in r?!e.__esModule:r.writable||r.configurable))&&(r={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(t,o,r)}):(function(t,e,n,o){o===void 0&&(o=n),t[o]=e[n]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(t,e){Object.defineProperty(t,"default",{enumerable:!0,value:e})}):function(t,e){t.default=e}),__importStar=this&&this.__importStar||(function(){var t=function(e){return t=Object.getOwnPropertyNames||function(n){var o=[];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(o[o.length]=r);return o},t(e)};return function(e){if(e&&e.__esModule)return e;var n={};if(e!=null)for(var o=t(e),r=0;r<o.length;r++)o[r]!=="default"&&__createBinding(n,e,o[r]);return __setModuleDefault(n,e),n}})(),__importDefault=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),react_native_svg_1=__importStar(require("react-native-svg")),NetworkIcons_1=require("./NetworkIcons"),CopyButton_1=__importDefault(require("./CopyButton")),TouchableScale_1=__importDefault(require("./TouchableScale")),AppColors_1=require("../styles/AppColors"),AppFonts_1=require("../styles/AppFonts"),escapeRegExp=t=>t.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),formatHTML=t=>{if(!t)return"";let e=0;const o=t.replace(/<([a-zA-Z0-9:-]+)([^>]*)>\s*<\/([a-zA-Z0-9:-]+)>/g,"<$1$2></$3>").replace(/(<[^>]+>)/g,`
+$1
+`).replace(/\n+/g,`
+`).split(`
+`),r=[],i=/^(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)$/i;for(let s=0;s<o.length;s++){const l=o[s].trim();if(l&&(l.startsWith("</")&&(e=Math.max(0,e-1)),r.push("  ".repeat(e)+l),l.startsWith("<")&&!l.startsWith("</")&&!l.startsWith("<!")&&!l.endsWith("/>"))){const u=l.match(/^<([a-zA-Z0-9:-]+)/);if(u){const d=u[1];i.test(d)||new RegExp(`</${escapeRegExp(d)}>`).test(l)||e++}}}return r.join(`
+`)},formatCSS=t=>{if(!t)return"";const n=t.replace(/\s*\{\s*/g,` {
+`).replace(/\s*;\s*/g,`;
+`).replace(/\s*\}\s*/g,`
+}
+`).replace(/\n+/g,`
+`).split(`
+`);let o=0;const r=[];for(let i=0;i<n.length;i++){const s=n[i].trim();s&&(s.startsWith("}")&&(o=Math.max(0,o-1)),r.push("  ".repeat(o)+s),s.endsWith("{")&&o++)}return r.join(`
+`)},formatJS=t=>{if(!t)return"";const e=t.split(/\r?\n/);let n=0;const o=[];for(let r=0;r<e.length;r++){const i=e[r].trim();if(!i)continue;let s=(i.match(/\{|\[/g)||[]).length,l=(i.match(/\}|\]/g)||[]).length;i.startsWith("}")||i.startsWith("]")?n=Math.max(0,n-1):l>s&&(n=Math.max(0,n-(l-s))),o.push("  ".repeat(n)+i),s>l&&!i.startsWith("}")&&!i.startsWith("]")?n+=s-l:(i.endsWith("{")||i.endsWith("["))&&n++}return o.join(`
+`)},tokenizeJS=t=>{const e=[],n=/(\/\/.*|\/\*[\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 o=0,r;for(;(r=n.exec(t))!==null;){n.lastIndex===r.index&&n.lastIndex++,r.index>o&&e.push({text:t.substring(o,r.index),type:"plain"});const i=r[0];r[1]?e.push({text:i,type:"comment"}):r[2]?e.push({text:i,type:"string"}):r[3]?e.push({text:i,type:"keyword"}):r[4]?e.push({text:i,type:"builtin"}):r[5]&&e.push({text:i,type:"number"}),o=n.lastIndex}return o<t.length&&e.push({text:t.substring(o),type:"plain"}),e},tokenizeCSS=t=>{const e=[],n=/(\/\*[\s\S]*?\*\/)|(\.[a-zA-Z0-9_-]+|#[a-zA-Z0-9_-]+|[a-zA-Z0-9_-]+(?=\s*\{))|([a-zA-Z0-9_-]+(?=\s*:))|(:[^;]+;)/g;let o=0,r;for(;(r=n.exec(t))!==null;){n.lastIndex===r.index&&n.lastIndex++,r.index>o&&e.push({text:t.substring(o,r.index),type:"plain"});const i=r[0];r[1]?e.push({text:i,type:"comment"}):r[2]?e.push({text:i,type:"selector"}):r[3]?e.push({text:i,type:"property"}):r[4]&&(e.push({text:":",type:"plain"}),e.push({text:i.substring(1),type:"value"})),o=n.lastIndex}return o<t.length&&e.push({text:t.substring(o),type:"plain"}),e},tokenizeHTML=t=>{const e=[],n=/(<!--[\s\S]*?-->)|(<\/?[a-zA-Z0-9:-]+>?)|(\"(?:\\.|[^\"\\])*\"|\'(?:\\.|[^\'\\])*\')|([a-zA-Z0-9:-]+(?=\s*=))/g;let o=0,r;for(;(r=n.exec(t))!==null;){n.lastIndex===r.index&&n.lastIndex++,r.index>o&&e.push({text:t.substring(o,r.index),type:"plain"});const i=r[0];r[1]?e.push({text:i,type:"comment"}):r[2]?e.push({text:i,type:"tag"}):r[3]?e.push({text:i,type:"string"}):r[4]&&e.push({text:i,type:"attribute"}),o=n.lastIndex}return o<t.length&&e.push({text:t.substring(o),type:"plain"}),e},getStyleForType=t=>{switch(t){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_1.AppColors.primaryBlack}]}},ArrowUpIcon=({color:t=AppColors_1.AppColors.slate500,size:e=16})=><react_native_svg_1.default width={e}height={e}viewBox="0 0 24 24"fill="none">
+    <react_native_svg_1.Path d="M18 15l-6-6-6 6"stroke={t}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+  </react_native_svg_1.default>,ArrowDownIcon=({color:t=AppColors_1.AppColors.slate500,size:e=16})=><react_native_svg_1.default width={e}height={e}viewBox="0 0 24 24"fill="none">
+    <react_native_svg_1.Path d="M6 9l6 6 6-6"stroke={t}strokeWidth="2.5"strokeLinecap="round"strokeLinejoin="round"/>
+  </react_native_svg_1.default>,CodeSnippetLine=react_1.default.memo(({line:t,lineIndex:e,language:n,search:o,isActiveMatch:r})=>{const i=(0,react_1.useMemo)(()=>n==="html"?tokenizeHTML(t):n==="css"?tokenizeCSS(t):tokenizeJS(t),[t,n]),s=(l,u)=>{const d=getStyleForType(u);if(!o)return<react_native_1.Text style={d}>{l}</react_native_1.Text>;const y=l.split(new RegExp(`(${escapeRegExp(o)})`,"gi"));return<react_native_1.Text style={d}>
+          {y.map((f,m)=>f.toLowerCase()===o.toLowerCase()?<react_native_1.Text key={m}style={styles.highlight}>
+                {f}
+              </react_native_1.Text>:f)}
+        </react_native_1.Text>};return<react_native_1.View style={[styles.lineRow,r&&styles.activeMatchRow]}>
         
-        <react_native_1.View style={[styles.gutter, { backgroundColor: AppColors_1.AppColors.grayBackground, borderRightColor: AppColors_1.AppColors.grayBorderSecondary }, isActiveMatch && styles.activeMatchGutter]}>
-          <react_native_1.Text style={[styles.lineNumber, { color: AppColors_1.AppColors.grayTextWeak }, isActiveMatch && styles.activeMatchLineNumber]}>{lineIndex + 1}</react_native_1.Text>
+        <react_native_1.View style={[styles.gutter,{backgroundColor:AppColors_1.AppColors.grayBackground,borderRightColor:AppColors_1.AppColors.grayBorderSecondary},r&&styles.activeMatchGutter]}>
+          <react_native_1.Text style={[styles.lineNumber,{color:AppColors_1.AppColors.grayTextWeak},r&&styles.activeMatchLineNumber]}>{e+1}</react_native_1.Text>
         </react_native_1.View>
 
         
         <react_native_1.View style={styles.codeLine}>
-          <react_native_1.Text style={[styles.codeLineText, { color: AppColors_1.AppColors.primaryBlack }]}>
-            {tokens.length === 0 ? (<react_native_1.Text style={[styles.plain, { color: AppColors_1.AppColors.primaryBlack }]}> </react_native_1.Text>) : (tokens.map((token, tokenIdx) => (<react_1.default.Fragment key={tokenIdx}>
-                  {renderTokenText(token.text, token.type)}
-                </react_1.default.Fragment>)))}
+          <react_native_1.Text style={[styles.codeLineText,{color:AppColors_1.AppColors.primaryBlack}]}>
+            {i.length===0?<react_native_1.Text style={[styles.plain,{color:AppColors_1.AppColors.primaryBlack}]}> </react_native_1.Text>:i.map((l,u)=><react_1.default.Fragment key={u}>
+                  {s(l.text,l.type)}
+                </react_1.default.Fragment>)}
           </react_native_1.Text>
         </react_native_1.View>
-      </react_native_1.View>);
-});
-const CodeSnippet = ({ code, language, search, }) => {
-    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
-    const [debouncedQuery, setDebouncedQuery] = (0, react_1.useState)('');
-    const [currentMatchIdx, setCurrentMatchIdx] = (0, react_1.useState)(-1);
-    const [visibleLinesCount, setVisibleLinesCount] = (0, react_1.useState)(200);
-    const flatListRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (search !== undefined) {
-            setSearchQuery(search);
-        }
-    }, [search]);
-    (0, react_1.useEffect)(() => {
-        const timer = setTimeout(() => {
-            setDebouncedQuery(searchQuery);
-        }, 300);
-        return () => clearTimeout(timer);
-    }, [searchQuery]);
-    const formattedCode = (0, react_1.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 = (0, react_1.useMemo)(() => {
-        if (!formattedCode)
-            return [];
-        return formattedCode.split(/\r?\n/);
-    }, [formattedCode]);
-    const matches = (0, react_1.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]);
-    (0, react_1.useEffect)(() => {
-        setVisibleLinesCount(200);
-        setSearchQuery(search || '');
-        setCurrentMatchIdx(-1);
-    }, [code, language]);
-    (0, react_1.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 = (0, react_1.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 (<react_native_1.View style={{ flex: 1 }}>
+      </react_native_1.View>}),CodeSnippet=({code:t,language:e,search:n})=>{const[o,r]=(0,react_1.useState)(""),[i,s]=(0,react_1.useState)(""),[l,u]=(0,react_1.useState)(-1),[d,y]=(0,react_1.useState)(200),f=(0,react_1.useRef)(null);(0,react_1.useEffect)(()=>{n!==void 0&&r(n)},[n]),(0,react_1.useEffect)(()=>{const a=setTimeout(()=>{s(o)},300);return()=>clearTimeout(a)},[o]);const m=(0,react_1.useMemo)(()=>t?t.length>15e4?t:e==="html"?formatHTML(t):e==="css"?formatCSS(t):e==="javascript"?formatJS(t):t:"",[t,e]),h=(0,react_1.useMemo)(()=>m?m.split(/\r?\n/):[],[m]),c=(0,react_1.useMemo)(()=>{if(!i.trim()||i.length<2)return[];const a=i.toLowerCase(),p=[];for(let g=0;g<h.length;g++)h[g].toLowerCase().includes(a)&&p.push(g);return p},[i,h]);(0,react_1.useEffect)(()=>{y(200),r(n||""),u(-1)},[t,e]),(0,react_1.useEffect)(()=>{c.length>0?(u(0),x(0)):u(-1)},[c]);const x=a=>{if(c.length===0||a<0||a>=c.length)return;const p=c[a];p>=d&&y(p+100),setTimeout(()=>{try{f.current?.scrollToIndex({index:p,animated:!1,viewPosition:.3})}catch{}},50)},b=a=>{f.current?.scrollToOffset({offset:a.averageItemLength*a.index,animated:!1}),setTimeout(()=>{try{f.current?.scrollToIndex({index:a.index,animated:!1,viewPosition:.3})}catch(p){console.warn("Scroll to line index failed after fallback retry:",p)}},60)},C=()=>{if(c.length===0)return;const a=(l+1)%c.length;u(a),x(a)},_=()=>{if(c.length===0)return;const a=(l-1+c.length)%c.length;u(a),x(a)},w=(0,react_1.useMemo)(()=>h.slice(0,d),[h,d]),A=()=>{d<h.length&&y(a=>Math.min(a+150,h.length))},v=({item:a,index:p})=>{const g=c.length>0&&l>=0&&p===c[l];return<CodeSnippetLine line={a}lineIndex={p}language={e}search={i}isActiveMatch={g}/>};return<react_native_1.View style={{flex:1}}>
       
       <react_native_1.View style={styles.searchRow}>
-        <react_native_1.View style={[styles.searchBar, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={15}/>
-          <react_native_1.TextInput placeholder={`Search ${language.toUpperCase()}...`} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={searchQuery} onChangeText={setSearchQuery} style={[styles.searchInput, { color: AppColors_1.AppColors.primaryBlack }]} autoCorrect={false} autoCapitalize="none"/>
+        <react_native_1.View style={[styles.searchBar,{backgroundColor:AppColors_1.AppColors.primaryLight,borderColor:AppColors_1.AppColors.grayBorderSecondary}]}>
+          <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak}size={15}/>
+          <react_native_1.TextInput placeholder={`Search ${e.toUpperCase()}...`}placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={o}onChangeText={r}style={[styles.searchInput,{color:AppColors_1.AppColors.primaryBlack}]}autoCorrect={!1}autoCapitalize="none"/>
 
           
-          {debouncedQuery.length >= 2 && (<react_native_1.Text style={[styles.matchCountText, { backgroundColor: AppColors_1.AppColors.grayBackground, color: AppColors_1.AppColors.grayTextWeak }]}>
-              {matches.length > 0 ? `${currentMatchIdx + 1}/${matches.length}` : '0/0'}
-            </react_native_1.Text>)}
+          {i.length>=2&&<react_native_1.Text style={[styles.matchCountText,{backgroundColor:AppColors_1.AppColors.grayBackground,color:AppColors_1.AppColors.grayTextWeak}]}>
+              {c.length>0?`${l+1}/${c.length}`:"0/0"}
+            </react_native_1.Text>}
 
-          {searchQuery.length > 0 && (<react_native_1.Pressable onPress={() => setSearchQuery('')} hitSlop={8} style={styles.clearBtn}>
-              <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={12}/>
-            </react_native_1.Pressable>)}
+          {o.length>0&&<react_native_1.Pressable onPress={()=>r("")}hitSlop={8}style={styles.clearBtn}>
+              <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak}size={12}/>
+            </react_native_1.Pressable>}
         </react_native_1.View>
 
         
-        {matches.length > 0 && (<react_native_1.View style={[styles.navArrowsGroup, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-            <TouchableScale_1.default onPress={handlePrevMatch} hitSlop={8} style={styles.navArrowBtn}>
-              <ArrowUpIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
+        {c.length>0&&<react_native_1.View style={[styles.navArrowsGroup,{backgroundColor:AppColors_1.AppColors.primaryLight,borderColor:AppColors_1.AppColors.grayBorderSecondary}]}>
+            <TouchableScale_1.default onPress={_}hitSlop={8}style={styles.navArrowBtn}>
+              <ArrowUpIcon color={AppColors_1.AppColors.grayTextStrong}size={14}/>
             </TouchableScale_1.default>
-            <TouchableScale_1.default onPress={handleNextMatch} hitSlop={8} style={styles.navArrowBtn}>
-              <ArrowDownIcon color={AppColors_1.AppColors.grayTextStrong} size={14}/>
+            <TouchableScale_1.default onPress={C}hitSlop={8}style={styles.navArrowBtn}>
+              <ArrowDownIcon color={AppColors_1.AppColors.grayTextStrong}size={14}/>
             </TouchableScale_1.default>
-          </react_native_1.View>)}
+          </react_native_1.View>}
 
-        <CopyButton_1.default value={code} label={`${language.toUpperCase()} Source`}/>
+        <CopyButton_1.default value={t}label={`${e.toUpperCase()} Source`}/>
       </react_native_1.View>
 
       
-      <react_native_1.View style={[styles.container, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-        <react_native_1.FlatList ref={flatListRef} data={visibleLines} renderItem={renderLine} keyExtractor={(_, index) => String(index)} maxToRenderPerBatch={30} windowSize={5} initialNumToRender={50} removeClippedSubviews={react_native_1.Platform.OS === 'android'} onEndReached={handleEndReached} onEndReachedThreshold={0.5} onScrollToIndexFailed={onScrollToIndexFailed}/>
+      <react_native_1.View style={[styles.container,{backgroundColor:AppColors_1.AppColors.grayBackground,borderColor:AppColors_1.AppColors.grayBorderSecondary}]}>
+        <react_native_1.FlatList ref={f}data={w}renderItem={v}keyExtractor={(a,p)=>String(p)}maxToRenderPerBatch={30}windowSize={5}initialNumToRender={50}removeClippedSubviews={react_native_1.Platform.OS==="android"}onEndReached={A}onEndReachedThreshold={.5}onScrollToIndexFailed={b}/>
       </react_native_1.View>
-    </react_native_1.View>);
-};
-const monoFont = AppFonts_1.AppFonts.interRegular;
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        flex: 1,
-        backgroundColor: AppColors_1.AppColors.slate50,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.slate200,
-        overflow: 'hidden',
-    },
-    searchRow: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        marginBottom: 6,
-        gap: 8,
-    },
-    searchBar: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors_1.AppColors.slate200,
-        paddingHorizontal: 8,
-        height: 32,
-    },
-    searchInput: {
-        flex: 1,
-        fontFamily: AppFonts_1.AppFonts.interRegular,
-        fontSize: 12,
-        color: AppColors_1.AppColors.slate900,
-        marginLeft: 6,
-        paddingVertical: 0,
-    },
-    matchCountText: {
-        fontFamily: AppFonts_1.AppFonts.interMedium,
-        fontSize: 10,
-        color: AppColors_1.AppColors.slate500,
-        marginHorizontal: 6,
-        backgroundColor: AppColors_1.AppColors.slate100,
-        paddingHorizontal: 6,
-        paddingVertical: 2,
-        borderRadius: 4,
-    },
-    clearBtn: {
-        padding: 4,
-    },
-    navArrowsGroup: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        backgroundColor: AppColors_1.AppColors.white,
-        borderRadius: 8,
-        borderWidth: 1,
-        borderColor: AppColors_1.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_1.AppColors.amber600}38`,
-        borderLeftWidth: 4,
-        borderLeftColor: AppColors_1.AppColors.amber600,
-    },
-    gutter: {
-        width: 40,
-        backgroundColor: AppColors_1.AppColors.slate100,
-        borderRightWidth: 1,
-        borderRightColor: AppColors_1.AppColors.slate200,
-        justifyContent: 'flex-start',
-        alignItems: 'flex-end',
-        paddingRight: 6,
-        paddingTop: 1,
-    },
-    activeMatchGutter: {
-        backgroundColor: `${AppColors_1.AppColors.amber600}59`,
-        borderRightColor: `${AppColors_1.AppColors.amber600}80`,
-    },
-    lineNumber: {
-        fontFamily: monoFont,
-        fontSize: 9,
-        color: AppColors_1.AppColors.slate400,
-    },
-    activeMatchLineNumber: {
-        color: AppColors_1.AppColors.amber800,
-        fontWeight: 'bold',
-    },
-    codeLine: {
-        flex: 1,
-        paddingLeft: 10,
-        paddingRight: 12,
-        justifyContent: 'center',
-    },
-    codeLineText: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.slate700,
-        flexWrap: 'wrap',
-    },
-    plain: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.slate700,
-    },
-    comment: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.slate500,
-        fontStyle: 'italic',
-    },
-    string: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.amber700,
-    },
-    keyword: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.violet600,
-        fontWeight: 'bold',
-    },
-    builtin: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.teal600,
-    },
-    number: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.blue600,
-    },
-    tag: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.indigo600,
-        fontWeight: 'bold',
-    },
-    attribute: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.teal600,
-    },
-    selector: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.violet600,
-        fontWeight: 'bold',
-    },
-    property: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.teal600,
-    },
-    value: {
-        fontFamily: monoFont,
-        fontSize: 10.5,
-        color: AppColors_1.AppColors.orange600,
-    },
-    highlight: {
-        backgroundColor: AppColors_1.AppColors.highlightYellow,
-        color: AppColors_1.AppColors.black,
-    },
-});
-exports.default = CodeSnippet;
+    </react_native_1.View>},monoFont=AppFonts_1.AppFonts.interRegular,styles=react_native_1.StyleSheet.create({container:{flex:1,backgroundColor:AppColors_1.AppColors.slate50,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.slate200,overflow:"hidden"},searchRow:{flexDirection:"row",alignItems:"center",marginBottom:6,gap:8},searchBar:{flex:1,flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.white,borderRadius:8,borderWidth:1,borderColor:AppColors_1.AppColors.slate200,paddingHorizontal:8,height:32},searchInput:{flex:1,fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:12,color:AppColors_1.AppColors.slate900,marginLeft:6,paddingVertical:0},matchCountText:{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10,color:AppColors_1.AppColors.slate500,marginHorizontal:6,backgroundColor:AppColors_1.AppColors.slate100,paddingHorizontal:6,paddingVertical:2,borderRadius:4},clearBtn:{padding:4},navArrowsGroup:{flexDirection:"row",alignItems:"center",backgroundColor:AppColors_1.AppColors.white,borderRadius:8,borderWidth:1,borderColor:AppColors_1.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_1.AppColors.amber600}38`,borderLeftWidth:4,borderLeftColor:AppColors_1.AppColors.amber600},gutter:{width:40,backgroundColor:AppColors_1.AppColors.slate100,borderRightWidth:1,borderRightColor:AppColors_1.AppColors.slate200,justifyContent:"flex-start",alignItems:"flex-end",paddingRight:6,paddingTop:1},activeMatchGutter:{backgroundColor:`${AppColors_1.AppColors.amber600}59`,borderRightColor:`${AppColors_1.AppColors.amber600}80`},lineNumber:{fontFamily:monoFont,fontSize:9,color:AppColors_1.AppColors.slate400},activeMatchLineNumber:{color:AppColors_1.AppColors.amber800,fontWeight:"bold"},codeLine:{flex:1,paddingLeft:10,paddingRight:12,justifyContent:"center"},codeLineText:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.slate700,flexWrap:"wrap"},plain:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.slate700},comment:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.slate500,fontStyle:"italic"},string:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.amber700},keyword:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.violet600,fontWeight:"bold"},builtin:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.teal600},number:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.blue600},tag:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.indigo600,fontWeight:"bold"},attribute:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.teal600},selector:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.violet600,fontWeight:"bold"},property:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.teal600},value:{fontFamily:monoFont,fontSize:10.5,color:AppColors_1.AppColors.orange600},highlight:{backgroundColor:AppColors_1.AppColors.highlightYellow,color:AppColors_1.AppColors.black}});exports.default=CodeSnippet;