@xlabs-store/core 0.0.1 → 0.0.3

package/dist/esm/x-code-editor.entry.js

@@ -0,0 +1,2363 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, F as Fragment, H as Host } from './index-BMTt8QT3.js';
+
+// src/utils/tokenizer.ts
+// Pure syntax tokenizer — no external deps
+function escH$1(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+// ─── JavaScript Tokenizer ────────────────────────────────────────────────────
+function tokenizeJS(code) {
+    const KW = /^(const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|class|extends|new|this|super|import|export|default|from|typeof|instanceof|in|of|try|catch|finally|throw|async|await|static|get|set|delete|void|yield|null|undefined|true|false|NaN|Infinity)$/;
+    const BUILTIN = /^(console|Math|Array|Object|String|Number|Boolean|Symbol|BigInt|Promise|Map|Set|WeakMap|WeakSet|Error|TypeError|RangeError|JSON|Date|RegExp|Proxy|Reflect|globalThis|window|document|navigator|setTimeout|setInterval|clearTimeout|clearInterval|fetch|parseInt|parseFloat|isNaN|isFinite|encodeURI|decodeURI|structuredClone|queueMicrotask)$/;
+    const lines = code.split('\n');
+    let inMLComment = false;
+    return lines
+        .map(line => {
+        let out = '';
+        let rest = line;
+        if (inMLComment) {
+            const end = rest.indexOf('*/');
+            if (end < 0)
+                return `<span class="t-cmt">${escH$1(rest)}</span>`;
+            out += `<span class="t-cmt">${escH$1(rest.slice(0, end + 2))}</span>`;
+            rest = rest.slice(end + 2);
+            inMLComment = false;
+        }
+        while (rest.length > 0) {
+            // single-line comment
+            if (rest.startsWith('//')) {
+                out += `<span class="t-cmt">${escH$1(rest)}</span>`;
+                break;
+            }
+            // multi-line comment
+            if (rest.startsWith('/*')) {
+                const end = rest.indexOf('*/', 2);
+                if (end < 0) {
+                    out += `<span class="t-cmt">${escH$1(rest)}</span>`;
+                    inMLComment = true;
+                    break;
+                }
+                out += `<span class="t-cmt">${escH$1(rest.slice(0, end + 2))}</span>`;
+                rest = rest.slice(end + 2);
+                continue;
+            }
+            // template literal
+            if (rest[0] === '`') {
+                let i = 1, s = '`';
+                while (i < rest.length) {
+                    if (rest[i] === '\\') {
+                        s += rest[i] + rest[i + 1];
+                        i += 2;
+                        continue;
+                    }
+                    if (rest[i] === '`') {
+                        s += '`';
+                        i++;
+                        break;
+                    }
+                    s += rest[i++];
+                }
+                out += `<span class="t-str">${escH$1(s)}</span>`;
+                rest = rest.slice(s.length);
+                continue;
+            }
+            // string
+            const strM = rest.match(/^("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/);
+            if (strM) {
+                out += `<span class="t-str">${escH$1(strM[0])}</span>`;
+                rest = rest.slice(strM[0].length);
+                continue;
+            }
+            // decorator
+            if (rest[0] === '@') {
+                const dm = rest.match(/^@[a-zA-Z_$][a-zA-Z0-9_$]*/);
+                if (dm) {
+                    out += `<span class="t-dec">${escH$1(dm[0])}</span>`;
+                    rest = rest.slice(dm[0].length);
+                    continue;
+                }
+            }
+            // number
+            const numM = rest.match(/^(0x[\da-fA-F]+|0b[01]+|0o[0-7]+|\d+\.?\d*(?:[eE][+-]?\d+)?n?)\b/);
+            if (numM) {
+                out += `<span class="t-num">${numM[0]}</span>`;
+                rest = rest.slice(numM[0].length);
+                continue;
+            }
+            // identifier / keyword
+            const idM = rest.match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/);
+            if (idM) {
+                const w = idM[0];
+                if (KW.test(w))
+                    out += `<span class="t-kw">${w}</span>`;
+                else if (BUILTIN.test(w))
+                    out += `<span class="t-bi">${w}</span>`;
+                else if (rest[w.length] === '(')
+                    out += `<span class="t-fn">${w}</span>`;
+                else
+                    out += `<span class="t-id">${escH$1(w)}</span>`;
+                rest = rest.slice(w.length);
+                continue;
+            }
+            // operator
+            const opM = rest.match(/^(===|!==|=>|\.{3}|\?\?=?|\?\.|[+\-*/%=<>!&|^~?:]+)/);
+            if (opM) {
+                out += `<span class="t-op">${escH$1(opM[0])}</span>`;
+                rest = rest.slice(opM[0].length);
+                continue;
+            }
+            out += escH$1(rest[0]);
+            rest = rest.slice(1);
+        }
+        return out;
+    })
+        .join('\n');
+}
+// ─── CSS Tokenizer ──────────────────────────────────────────────────────────
+function tokenizeCSS(code) {
+    const lines = code.split('\n');
+    let inComment = false;
+    return lines
+        .map(line => {
+        let out = '', rest = line;
+        if (inComment) {
+            const e = rest.indexOf('*/');
+            if (e < 0)
+                return `<span class="t-cmt">${escH$1(rest)}</span>`;
+            out += `<span class="t-cmt">${escH$1(rest.slice(0, e + 2))}</span>`;
+            rest = rest.slice(e + 2);
+            inComment = false;
+        }
+        while (rest.length > 0) {
+            if (rest.startsWith('/*')) {
+                const e = rest.indexOf('*/', 2);
+                if (e < 0) {
+                    out += `<span class="t-cmt">${escH$1(rest)}</span>`;
+                    inComment = true;
+                    break;
+                }
+                out += `<span class="t-cmt">${escH$1(rest.slice(0, e + 2))}</span>`;
+                rest = rest.slice(e + 2);
+                continue;
+            }
+            // string
+            const strM = rest.match(/^("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/);
+            if (strM) {
+                out += `<span class="t-str">${escH$1(strM[0])}</span>`;
+                rest = rest.slice(strM[0].length);
+                continue;
+            }
+            // @-rule
+            const atM = rest.match(/^@(media|keyframes|import|font-face|layer|container|supports|charset|namespace)\b/);
+            if (atM) {
+                out += `<span class="t-kw">${escH$1(atM[0])}</span>`;
+                rest = rest.slice(atM[0].length);
+                continue;
+            }
+            // CSS property
+            const propM = rest.match(/^(-{1,2}[a-zA-Z][a-zA-Z0-9-]*)(?=\s*:)/);
+            if (propM) {
+                out += `<span class="t-prop">${escH$1(propM[0])}</span>`;
+                rest = rest.slice(propM[0].length);
+                continue;
+            }
+            // hex color
+            const hashM = rest.match(/^#([0-9a-fA-F]{3,8})\b/);
+            if (hashM) {
+                out += `<span class="t-num" style="border-bottom:2px solid #${hashM[1]}">#${hashM[1]}</span>`;
+                rest = rest.slice(hashM[0].length);
+                continue;
+            }
+            // number + unit
+            const numM = rest.match(/^-?[\d.]+(?:px|em|rem|vh|vw|vmin|vmax|%|s|ms|deg|rad|fr|ch|ex|cm|mm|in|pt|pc)?/);
+            if (numM && numM[0] && /\d/.test(numM[0])) {
+                out += `<span class="t-num">${numM[0]}</span>`;
+                rest = rest.slice(numM[0].length);
+                continue;
+            }
+            // function call
+            const fnM = rest.match(/^([a-zA-Z-]+)(?=\s*\()/);
+            if (fnM) {
+                out += `<span class="t-fn">${fnM[1]}</span>`;
+                rest = rest.slice(fnM[1].length);
+                continue;
+            }
+            // selector fragment
+            const selM = rest.match(/^([.#:][a-zA-Z_-][a-zA-Z0-9_-]*)/);
+            if (selM) {
+                out += `<span class="t-sel">${escH$1(selM[0])}</span>`;
+                rest = rest.slice(selM[0].length);
+                continue;
+            }
+            // keyword value
+            const kwM = rest.match(/^\b(important|auto|none|inherit|initial|unset|normal|bold|flex|grid|block|inline|absolute|relative|fixed|sticky|hidden|visible|scroll|solid|dashed|dotted|transparent|currentColor|center|left|right|top|bottom)\b/);
+            if (kwM) {
+                out += `<span class="t-kw">${kwM[0]}</span>`;
+                rest = rest.slice(kwM[0].length);
+                continue;
+            }
+            out += escH$1(rest[0]);
+            rest = rest.slice(1);
+        }
+        return out;
+    })
+        .join('\n');
+}
+// ─── HTML Tokenizer ─────────────────────────────────────────────────────────
+function tokenizeHTML(code) {
+    let out = '', i = 0;
+    while (i < code.length) {
+        // comment
+        if (code.slice(i, i + 4) === '<!--') {
+            const e = code.indexOf('-->', i + 4);
+            const chunk = e >= 0 ? code.slice(i, e + 3) : code.slice(i);
+            out += `<span class="t-cmt">${escH$1(chunk)}</span>`;
+            i = e >= 0 ? e + 3 : code.length;
+            continue;
+        }
+        if (code[i] === '<') {
+            const tagEnd = code.indexOf('>', i);
+            if (tagEnd < 0) {
+                out += escH$1(code.slice(i));
+                break;
+            }
+            const rawTag = code.slice(i, tagEnd + 1);
+            const close = code[i + 1] === '/';
+            const tagM = rawTag.match(/^<\/?([a-zA-Z][a-zA-Z0-9-]*)/);
+            if (!tagM) {
+                out += escH$1(rawTag);
+                i = tagEnd + 1;
+                continue;
+            }
+            const tagName = tagM[1];
+            let inner = rawTag.slice(tagM[0].length, -1);
+            // highlight attributes
+            inner = inner.replace(/([a-zA-Z_:][a-zA-Z0-9_:.-]*)(\s*=\s*)("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')?/g, (_, a, eq, v) => `<span class="t-attr">${escH$1(a)}</span>${escH$1(eq || '')}${v ? `<span class="t-str">${escH$1(v)}</span>` : ''}`);
+            out += `<span class="t-op">&lt;${close ? '/' : ''}</span><span class="t-tag">${tagName}</span>${inner}<span class="t-op">&gt;</span>`;
+            i = tagEnd + 1;
+            continue;
+        }
+        // HTML entity
+        if (code[i] === '&') {
+            const e = code.indexOf(';', i);
+            if (e >= 0 && e - i < 12) {
+                out += `<span class="t-str">${escH$1(code.slice(i, e + 1))}</span>`;
+                i = e + 1;
+                continue;
+            }
+        }
+        out += escH$1(code[i++]);
+    }
+    return out;
+}
+// ─── JSON Tokenizer ─────────────────────────────────────────────────────────
+function tokenizeJSON(code) {
+    const lines = code.split('\n');
+    return lines
+        .map(line => {
+        let out = '', rest = line;
+        while (rest.length > 0) {
+            const strM = rest.match(/^("(?:[^"\\]|\\.)*")/);
+            if (strM) {
+                const s = strM[0];
+                if (rest[s.length] === ':' || rest.slice(s.length).match(/^\s*:/))
+                    out += `<span class="t-prop">${escH$1(s)}</span>`;
+                else
+                    out += `<span class="t-str">${escH$1(s)}</span>`;
+                rest = rest.slice(s.length);
+                continue;
+            }
+            const numM = rest.match(/^-?\d+\.?\d*(?:[eE][+-]?\d+)?/);
+            if (numM) {
+                out += `<span class="t-num">${numM[0]}</span>`;
+                rest = rest.slice(numM[0].length);
+                continue;
+            }
+            const kwM = rest.match(/^\b(true|false|null)\b/);
+            if (kwM) {
+                out += `<span class="t-kw">${kwM[0]}</span>`;
+                rest = rest.slice(kwM[0].length);
+                continue;
+            }
+            out += escH$1(rest[0]);
+            rest = rest.slice(1);
+        }
+        return out;
+    })
+        .join('\n');
+}
+function tokenize$1(code, lang) {
+    switch (lang) {
+        case 'js':
+            return tokenizeJS(code);
+        case 'css':
+            return tokenizeCSS(code);
+        case 'html':
+            return tokenizeHTML(code);
+        case 'json':
+            return tokenizeJSON(code);
+        default:
+            return escH$1(code);
+    }
+}
+
+// src/utils/ast-parser.ts
+// Lightweight JS AST parser — produces a tree for the AST Explorer panel
+const JS_KEYWORDS = new Set([
+    'const',
+    'let',
+    'var',
+    'function',
+    'class',
+    'return',
+    'if',
+    'else',
+    'for',
+    'while',
+    'do',
+    'switch',
+    'case',
+    'break',
+    'continue',
+    'new',
+    'import',
+    'export',
+    'default',
+    'from',
+    'async',
+    'await',
+    'try',
+    'catch',
+    'finally',
+    'throw',
+    'typeof',
+    'instanceof',
+    'delete',
+    'void',
+    'yield',
+]);
+function tokenize(code) {
+    const toks = [];
+    let i = 0;
+    while (i < code.length) {
+        // whitespace
+        if (/\s/.test(code[i])) {
+            i++;
+            continue;
+        }
+        // single-line comment
+        if (code.slice(i, i + 2) === '//') {
+            while (i < code.length && code[i] !== '\n')
+                i++;
+            continue;
+        }
+        // multi-line comment
+        if (code.slice(i, i + 2) === '/*') {
+            while (i < code.length && code.slice(i, i + 2) !== '*/')
+                i++;
+            i += 2;
+            continue;
+        }
+        // string / template
+        const strM = code.slice(i).match(/^("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'|`(?:[^`\\]|\\.)*`)/);
+        if (strM) {
+            toks.push({ t: 'string', v: strM[0] });
+            i += strM[0].length;
+            continue;
+        }
+        // number
+        const numM = code.slice(i).match(/^[\d.]+/);
+        if (numM) {
+            toks.push({ t: 'number', v: numM[0] });
+            i += numM[0].length;
+            continue;
+        }
+        // identifier / keyword
+        const idM = code.slice(i).match(/^[a-zA-Z_$][a-zA-Z0-9_$]*/);
+        if (idM) {
+            toks.push({ t: JS_KEYWORDS.has(idM[0]) ? 'keyword' : 'identifier', v: idM[0] });
+            i += idM[0].length;
+            continue;
+        }
+        // punctuation / operator
+        const pM = code.slice(i).match(/^(===|!==|=>|\.{3}|\?\?|[{}()\[\];,.:+\-*/%=<>!&|^~?])/);
+        if (pM) {
+            toks.push({ t: 'punct', v: pM[0] });
+            i += pM[0].length;
+            continue;
+        }
+        i++;
+    }
+    toks.push({ t: 'eof', v: '' });
+    return toks;
+}
+class Parser {
+    toks;
+    i = 0;
+    constructor(toks) {
+        this.toks = toks;
+    }
+    peek() {
+        return this.toks[this.i] ?? { t: 'eof', v: '' };
+    }
+    eat() {
+        return this.toks[this.i++] ?? { t: 'eof', v: '' };
+    }
+    parseProgram() {
+        const body = [];
+        while (this.peek().t !== 'eof' && this.i < this.toks.length - 1) {
+            try {
+                const node = this.parseStatement();
+                if (node)
+                    body.push(node);
+            }
+            catch {
+                this.i++;
+                if (body.length > 60)
+                    break;
+            }
+        }
+        return { type: 'Program', body };
+    }
+    parseStatement() {
+        const p = this.peek();
+        if (p.v === 'import')
+            return this.parseImport();
+        if (p.v === 'export')
+            return this.parseExport();
+        if (p.v === 'class')
+            return this.parseClass();
+        if (p.v === 'function' || p.v === 'async')
+            return this.parseFunction();
+        if (p.v === 'const' || p.v === 'let' || p.v === 'var')
+            return this.parseVarDecl();
+        if (p.v === 'return')
+            return this.parseReturn();
+        if (p.v === 'if')
+            return this.parseIf();
+        if (p.v === 'for')
+            return this.parseFor();
+        if (p.v === 'while')
+            return this.parseWhile();
+        if (p.v === 'try')
+            return this.parseTryCatch();
+        // expression statement — skip to semicolon or block boundary
+        return this.skipToSemicolon();
+    }
+    skipToSemicolon() {
+        let depth = 0;
+        while (this.peek().t !== 'eof') {
+            const v = this.peek().v;
+            if (v === '{' || v === '(' || v === '[')
+                depth++;
+            if (v === '}' || v === ')' || v === ']') {
+                if (depth === 0)
+                    break;
+                depth--;
+            }
+            if (depth === 0 && v === ';') {
+                this.eat();
+                break;
+            }
+            this.eat();
+        }
+        return { type: 'ExpressionStatement' };
+    }
+    parseImport() {
+        this.eat(); // import
+        const specifiers = [];
+        while (this.peek().t !== 'eof' && this.peek().v !== ';' && this.peek().v !== '\n') {
+            if (this.peek().t === 'identifier')
+                specifiers.push(this.peek().v);
+            this.eat();
+        }
+        if (this.peek().v === ';')
+            this.eat();
+        return { type: 'ImportDeclaration', specifiers };
+    }
+    parseExport() {
+        this.eat(); // export
+        const isDefault = this.peek().v === 'default';
+        if (isDefault)
+            this.eat();
+        const declaration = this.peek().t !== 'eof' ? this.parseStatement() : null;
+        return { type: 'ExportDeclaration', default: isDefault, declaration };
+    }
+    parseClass() {
+        this.eat(); // class
+        const name = this.peek().t === 'identifier' ? this.eat().v : '';
+        let superClass = null;
+        if (this.peek().v === 'extends') {
+            this.eat();
+            superClass = this.peek().t === 'identifier' ? this.eat().v : null;
+        }
+        const methods = [];
+        if (this.peek().v === '{') {
+            this.eat();
+            let depth = 1;
+            while (this.peek().t !== 'eof' && depth > 0) {
+                const v = this.peek().v;
+                if (v === '{')
+                    depth++;
+                if (v === '}') {
+                    depth--;
+                    if (depth === 0) {
+                        this.eat();
+                        break;
+                    }
+                }
+                if (depth === 1 && this.peek().t === 'identifier' && this.toks[this.i + 1]?.v === '(') {
+                    const modifier = this.toks[this.i - 1]?.v === 'static' ? 'static' : this.toks[this.i - 1]?.v === 'async' ? 'async' : '';
+                    methods.push({ type: 'MethodDefinition', key: this.peek().v, kind: modifier || 'method' });
+                }
+                this.eat();
+            }
+        }
+        return { type: 'ClassDeclaration', id: { name }, superClass, body: { type: 'ClassBody', body: methods } };
+    }
+    parseFunction() {
+        if (this.peek().v === 'async')
+            this.eat();
+        this.eat(); // function
+        const name = this.peek().t === 'identifier' ? this.eat().v : '(anonymous)';
+        const params = [];
+        if (this.peek().v === '(') {
+            this.eat();
+            while (this.peek().v !== ')' && this.peek().t !== 'eof') {
+                if (this.peek().t === 'identifier')
+                    params.push(this.peek().v);
+                this.eat();
+            }
+            if (this.peek().v === ')')
+                this.eat();
+        }
+        // skip body
+        this.skipBlock();
+        return { type: 'FunctionDeclaration', id: { name }, params: params.map(p => ({ type: 'Identifier', name: p })) };
+    }
+    skipBlock() {
+        if (this.peek().v !== '{')
+            return;
+        this.eat();
+        let depth = 1;
+        while (this.peek().t !== 'eof' && depth > 0) {
+            if (this.peek().v === '{')
+                depth++;
+            if (this.peek().v === '}')
+                depth--;
+            this.eat();
+        }
+    }
+    parseVarDecl() {
+        const kind = this.eat().v; // const / let / var
+        const declarations = [];
+        while (this.peek().t !== 'eof' && this.peek().v !== ';') {
+            if (this.peek().t === 'identifier') {
+                const id = this.eat().v;
+                let init = null;
+                if (this.peek().v === '=') {
+                    this.eat();
+                    // try to capture simple init expression
+                    if (this.peek().t === 'string')
+                        init = { type: 'Literal', value: this.eat().v };
+                    else if (this.peek().t === 'number')
+                        init = { type: 'Literal', value: this.eat().v };
+                    else if (this.peek().v === 'new') {
+                        this.eat();
+                        const cls = this.peek().t === 'identifier' ? this.eat().v : '';
+                        if (this.peek().v === '(') {
+                            this.eat();
+                            while (this.peek().v !== ')' && this.peek().t !== 'eof')
+                                this.eat();
+                            this.eat();
+                        }
+                        init = { type: 'NewExpression', callee: cls };
+                    }
+                    else {
+                        // skip complex init
+                        let depth = 0;
+                        while (this.peek().t !== 'eof') {
+                            const v = this.peek().v;
+                            if (v === '{' || v === '(' || v === '[')
+                                depth++;
+                            if (v === '}' || v === ')' || v === ']') {
+                                if (depth === 0)
+                                    break;
+                                depth--;
+                            }
+                            if (depth === 0 && (v === ',' || v === ';'))
+                                break;
+                            this.eat();
+                        }
+                    }
+                }
+                declarations.push({ type: 'VariableDeclarator', id: { type: 'Identifier', name: id }, init });
+                if (this.peek().v === ',')
+                    this.eat();
+            }
+            else {
+                if (this.peek().v === '{' || this.peek().v === '[') {
+                    this.skipBlock();
+                    break;
+                }
+                this.eat();
+            }
+        }
+        if (this.peek().v === ';')
+            this.eat();
+        return { type: 'VariableDeclaration', kind, declarations };
+    }
+    parseReturn() {
+        this.eat(); // return
+        return this.skipToSemicolon() && { type: 'ReturnStatement' };
+    }
+    parseIf() {
+        this.eat(); // if
+        if (this.peek().v === '(') {
+            this.eat();
+            while (this.peek().v !== ')' && this.peek().t !== 'eof')
+                this.eat();
+            this.eat();
+        }
+        this.skipBlock();
+        if (this.peek().v === 'else') {
+            this.eat();
+            this.skipBlock();
+        }
+        return { type: 'IfStatement' };
+    }
+    parseFor() {
+        this.eat(); // for
+        if (this.peek().v === '(') {
+            this.eat();
+            while (this.peek().v !== ')' && this.peek().t !== 'eof')
+                this.eat();
+            this.eat();
+        }
+        this.skipBlock();
+        return { type: 'ForStatement' };
+    }
+    parseWhile() {
+        this.eat(); // while
+        if (this.peek().v === '(') {
+            this.eat();
+            while (this.peek().v !== ')' && this.peek().t !== 'eof')
+                this.eat();
+            this.eat();
+        }
+        this.skipBlock();
+        return { type: 'WhileStatement' };
+    }
+    parseTryCatch() {
+        this.eat(); // try
+        this.skipBlock();
+        if (this.peek().v === 'catch') {
+            this.eat();
+            if (this.peek().v === '(') {
+                this.eat();
+                while (this.peek().v !== ')' && this.peek().t !== 'eof')
+                    this.eat();
+                this.eat();
+            }
+            this.skipBlock();
+        }
+        if (this.peek().v === 'finally') {
+            this.eat();
+            this.skipBlock();
+        }
+        return { type: 'TryStatement' };
+    }
+}
+function parseAST(code) {
+    try {
+        const toks = tokenize(code);
+        return new Parser(toks).parseProgram();
+    }
+    catch (e) {
+        return { type: 'Program', body: [], error: String(e) };
+    }
+}
+
+const JS_ITEMS = [
+    // keywords
+    ...[
+        'const',
+        'let',
+        'var',
+        'function',
+        'class',
+        'return',
+        'if',
+        'else',
+        'for',
+        'while',
+        'do',
+        'switch',
+        'case',
+        'break',
+        'continue',
+        'try',
+        'catch',
+        'finally',
+        'throw',
+        'async',
+        'await',
+        'import',
+        'export',
+        'default',
+        'from',
+        'new',
+        'this',
+        'typeof',
+        'instanceof',
+        'delete',
+        'void',
+        'null',
+        'undefined',
+        'true',
+        'false',
+    ].map(k => ({
+        label: k,
+        type: 'kw',
+        detail: 'keyword',
+    })),
+    // snippets
+    {
+        label: 'caf',
+        type: 'snip',
+        detail: 'const arrow fn',
+        doc: 'Creates a const arrow function',
+        insert: 'const ${1:name} = (${2:args}) => {\n  $0\n};',
+    },
+    {
+        label: 'afn',
+        type: 'snip',
+        detail: 'async arrow fn',
+        insert: 'const ${1:name} = async (${2:args}) => {\n  $0\n};',
+    },
+    {
+        label: 'fn',
+        type: 'snip',
+        detail: 'function declaration',
+        insert: 'function ${1:name}(${2:args}) {\n  $0\n}',
+    },
+    {
+        label: 'class',
+        type: 'snip',
+        detail: 'class declaration',
+        insert: 'class ${1:Name} {\n  constructor(${2:args}) {\n    $0\n  }\n}',
+    },
+    {
+        label: 'for',
+        type: 'snip',
+        detail: 'for loop',
+        insert: 'for (let ${1:i} = 0; ${1:i} < ${2:arr}.length; ${1:i}++) {\n  $0\n}',
+    },
+    {
+        label: 'forin',
+        type: 'snip',
+        detail: 'for...in',
+        insert: 'for (const ${1:key} in ${2:obj}) {\n  $0\n}',
+    },
+    {
+        label: 'forof',
+        type: 'snip',
+        detail: 'for...of',
+        insert: 'for (const ${1:item} of ${2:arr}) {\n  $0\n}',
+    },
+    {
+        label: 'try',
+        type: 'snip',
+        detail: 'try / catch',
+        insert: 'try {\n  $0\n} catch (${1:err}) {\n  console.error(${1:err});\n}',
+    },
+    {
+        label: 'imp',
+        type: 'snip',
+        detail: 'import statement',
+        insert: "import { ${1:name} } from '${2:module}';",
+    },
+    {
+        label: 'prom',
+        type: 'snip',
+        detail: 'new Promise',
+        insert: 'new Promise((${1:resolve}, ${2:reject}) => {\n  $0\n})',
+    },
+    {
+        label: 'ife',
+        type: 'snip',
+        detail: 'immediately invoked fn',
+        insert: '(async () => {\n  $0\n})();',
+    },
+    // builtins
+    ...[
+        'console.log',
+        'console.error',
+        'console.warn',
+        'console.table',
+        'console.dir',
+        'Math.floor',
+        'Math.ceil',
+        'Math.round',
+        'Math.max',
+        'Math.min',
+        'Math.abs',
+        'Math.random',
+        'Math.pow',
+        'Math.sqrt',
+        'Array.from',
+        'Array.isArray',
+        'Array.of',
+        'Object.keys',
+        'Object.values',
+        'Object.entries',
+        'Object.assign',
+        'Object.freeze',
+        'Object.create',
+        'JSON.parse',
+        'JSON.stringify',
+        'parseInt',
+        'parseFloat',
+        'isNaN',
+        'isFinite',
+        'setTimeout',
+        'setInterval',
+        'clearTimeout',
+        'clearInterval',
+        'requestAnimationFrame',
+        'fetch',
+        'Promise.all',
+        'Promise.allSettled',
+        'Promise.race',
+        'Promise.resolve',
+        'Promise.reject',
+        'document.querySelector',
+        'document.querySelectorAll',
+        'document.getElementById',
+        'document.createElement',
+        'document.addEventListener',
+        'window.addEventListener',
+        'window.removeEventListener',
+        'localStorage.getItem',
+        'localStorage.setItem',
+        'localStorage.removeItem',
+        'sessionStorage.getItem',
+        'sessionStorage.setItem',
+    ].map(b => ({ label: b, type: 'fn', detail: 'builtin' })),
+    // array methods
+    ...[
+        'forEach',
+        'map',
+        'filter',
+        'reduce',
+        'reduceRight',
+        'find',
+        'findIndex',
+        'findLast',
+        'some',
+        'every',
+        'includes',
+        'indexOf',
+        'lastIndexOf',
+        'slice',
+        'splice',
+        'push',
+        'pop',
+        'shift',
+        'unshift',
+        'sort',
+        'reverse',
+        'flat',
+        'flatMap',
+        'join',
+        'fill',
+        'copyWithin',
+        'entries',
+        'keys',
+        'values',
+        'at',
+        'toSorted',
+        'toReversed',
+        'toSpliced',
+        'with',
+    ].map(m => ({ label: '.' + m, type: 'prop', detail: 'Array method' })),
+    // string methods
+    ...[
+        'split',
+        'trim',
+        'trimStart',
+        'trimEnd',
+        'replace',
+        'replaceAll',
+        'match',
+        'matchAll',
+        'search',
+        'startsWith',
+        'endsWith',
+        'includes',
+        'indexOf',
+        'lastIndexOf',
+        'slice',
+        'substring',
+        'padStart',
+        'padEnd',
+        'repeat',
+        'toUpperCase',
+        'toLowerCase',
+        'charAt',
+        'charCodeAt',
+        'codePointAt',
+        'normalize',
+        'at',
+    ].map(m => ({ label: '.' + m, type: 'prop', detail: 'String method' })),
+    // promise / async methods
+    ...['then', 'catch', 'finally'].map(m => ({ label: '.' + m, type: 'prop', detail: 'Promise method' })),
+];
+const CSS_ITEMS = [
+    ...[
+        'display',
+        'position',
+        'flex',
+        'grid',
+        'width',
+        'height',
+        'min-width',
+        'max-width',
+        'min-height',
+        'max-height',
+        'margin',
+        'margin-top',
+        'margin-right',
+        'margin-bottom',
+        'margin-left',
+        'padding',
+        'padding-top',
+        'padding-right',
+        'padding-bottom',
+        'padding-left',
+        'color',
+        'background',
+        'background-color',
+        'background-image',
+        'background-size',
+        'background-position',
+        'border',
+        'border-width',
+        'border-style',
+        'border-color',
+        'border-radius',
+        'font-size',
+        'font-weight',
+        'font-family',
+        'font-style',
+        'line-height',
+        'letter-spacing',
+        'text-align',
+        'text-decoration',
+        'text-transform',
+        'white-space',
+        'word-break',
+        'overflow',
+        'overflow-x',
+        'overflow-y',
+        'z-index',
+        'opacity',
+        'visibility',
+        'pointer-events',
+        'cursor',
+        'user-select',
+        'outline',
+        'box-shadow',
+        'text-shadow',
+        'transition',
+        'transform',
+        'animation',
+        'animation-name',
+        'animation-duration',
+        'gap',
+        'row-gap',
+        'column-gap',
+        'align-items',
+        'align-self',
+        'align-content',
+        'justify-content',
+        'justify-items',
+        'justify-self',
+        'flex-direction',
+        'flex-wrap',
+        'flex-grow',
+        'flex-shrink',
+        'flex-basis',
+        'grid-template-columns',
+        'grid-template-rows',
+        'grid-column',
+        'grid-row',
+        'grid-area',
+        'place-items',
+        'place-content',
+        'object-fit',
+        'object-position',
+        'aspect-ratio',
+        'clip-path',
+        'filter',
+        'backdrop-filter',
+        'will-change',
+        'contain',
+        'content',
+        'resize',
+        'top',
+        'right',
+        'bottom',
+        'left',
+        'inset',
+    ].map(p => ({ label: p, type: 'prop', detail: 'property' })),
+    ...[
+        'none',
+        'auto',
+        'inherit',
+        'initial',
+        'unset',
+        'revert',
+        'flex',
+        'grid',
+        'block',
+        'inline',
+        'inline-block',
+        'inline-flex',
+        'inline-grid',
+        'absolute',
+        'relative',
+        'fixed',
+        'sticky',
+        'static',
+        'hidden',
+        'visible',
+        'scroll',
+        'clip',
+        'transparent',
+        'currentColor',
+        'center',
+        'start',
+        'end',
+        'stretch',
+        'left',
+        'right',
+        'normal',
+        'bold',
+        'italic',
+        'nowrap',
+        'pre',
+        'pre-wrap',
+        'break-word',
+        'pointer',
+        'default',
+        'cover',
+        'contain',
+        'fill',
+        'underline',
+        'line-through',
+        'uppercase',
+        'lowercase',
+        'capitalize',
+        'ease',
+        'ease-in',
+        'ease-out',
+        'ease-in-out',
+        'linear',
+        'forwards',
+        'backwards',
+        'both',
+    ].map(v => ({ label: v, type: 'kw', detail: 'value' })),
+    ...[
+        'rgb()',
+        'rgba()',
+        'hsl()',
+        'hsla()',
+        'oklch()',
+        'color()',
+        'linear-gradient()',
+        'radial-gradient()',
+        'conic-gradient()',
+        'var()',
+        'calc()',
+        'clamp()',
+        'min()',
+        'max()',
+        'env()',
+        'url()',
+        'format()',
+        'translate()',
+        'scale()',
+        'rotate()',
+        'matrix()',
+    ].map(f => ({ label: f, type: 'fn', detail: 'function' })),
+];
+const HTML_ITEMS = [
+    ...[
+        'div',
+        'span',
+        'p',
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'a',
+        'img',
+        'input',
+        'button',
+        'form',
+        'label',
+        'select',
+        'option',
+        'optgroup',
+        'textarea',
+        'fieldset',
+        'legend',
+        'ul',
+        'ol',
+        'li',
+        'dl',
+        'dt',
+        'dd',
+        'table',
+        'tr',
+        'td',
+        'th',
+        'thead',
+        'tbody',
+        'tfoot',
+        'caption',
+        'colgroup',
+        'col',
+        'nav',
+        'header',
+        'footer',
+        'main',
+        'section',
+        'article',
+        'aside',
+        'address',
+        'dialog',
+        'details',
+        'summary',
+        'figure',
+        'figcaption',
+        'video',
+        'audio',
+        'source',
+        'track',
+        'canvas',
+        'svg',
+        'path',
+        'circle',
+        'rect',
+        'line',
+        'script',
+        'link',
+        'meta',
+        'title',
+        'base',
+        'head',
+        'body',
+        'html',
+        'style',
+        'template',
+        'slot',
+        'picture',
+        'iframe',
+        'object',
+        'embed',
+        'code',
+        'pre',
+        'kbd',
+        'samp',
+        'var',
+        'mark',
+        'del',
+        'ins',
+        's',
+        'sub',
+        'sup',
+        'abbr',
+        'blockquote',
+        'cite',
+        'q',
+        'small',
+        'strong',
+        'em',
+        'b',
+        'i',
+        'u',
+        'time',
+        'data',
+    ].map(t => ({ label: '<' + t, type: 'tag', detail: 'element', insert: `<${t}>$0</${t}>` })),
+    ...[
+        'class',
+        'id',
+        'src',
+        'href',
+        'alt',
+        'type',
+        'name',
+        'value',
+        'placeholder',
+        'disabled',
+        'checked',
+        'readonly',
+        'required',
+        'data-',
+        'aria-label',
+        'aria-hidden',
+        'aria-expanded',
+        'aria-controls',
+        'aria-describedby',
+        'role',
+        'tabindex',
+        'style',
+        'title',
+        'target',
+        'rel',
+        'action',
+        'method',
+        'for',
+        'colspan',
+        'rowspan',
+        'width',
+        'height',
+        'loading',
+        'defer',
+        'async',
+        'charset',
+        'content',
+        'property',
+        'lang',
+        'dir',
+        'hidden',
+        'autofocus',
+        'multiple',
+        'accept',
+        'pattern',
+        'min',
+        'max',
+        'step',
+        'autocomplete',
+        'enctype',
+        'novalidate',
+        'crossorigin',
+        'integrity',
+        'referrerpolicy',
+        'fetchpriority',
+    ].map(a => ({ label: a, type: 'attr', detail: 'attribute' })),
+];
+const JSON_ITEMS = [
+    { label: 'true', type: 'kw', detail: 'boolean' },
+    { label: 'false', type: 'kw', detail: 'boolean' },
+    { label: 'null', type: 'kw', detail: 'null' },
+];
+const DB = {
+    js: JS_ITEMS,
+    css: CSS_ITEMS,
+    html: HTML_ITEMS,
+    json: JSON_ITEMS,
+};
+function getCompletions(prefix, lang) {
+    if (!prefix || prefix.length < 1)
+        return [];
+    const lower = prefix.toLowerCase();
+    return (DB[lang] || []).filter(item => item.label.toLowerCase().startsWith(lower) && item.label !== prefix).slice(0, 14);
+}
+
+// src/utils/history.ts
+class EditHistory {
+    stack = [];
+    index = -1;
+    maxSize;
+    timer = null;
+    constructor(maxSize = 200) {
+        this.maxSize = maxSize;
+    }
+    push(entry) {
+        // debounce: only push after 400ms of inactivity
+        if (this.timer !== null)
+            clearTimeout(this.timer);
+        this.timer = setTimeout(() => {
+            if (this.stack[this.index]?.value === entry.value)
+                return;
+            this.stack = this.stack.slice(0, this.index + 1);
+            this.stack.push({ ...entry });
+            if (this.stack.length > this.maxSize)
+                this.stack.shift();
+            this.index = this.stack.length - 1;
+        }, 400);
+    }
+    /** Push immediately (e.g., before a bulk operation) */
+    pushNow(entry) {
+        if (this.timer !== null) {
+            clearTimeout(this.timer);
+            this.timer = null;
+        }
+        if (this.stack[this.index]?.value === entry.value)
+            return;
+        this.stack = this.stack.slice(0, this.index + 1);
+        this.stack.push({ ...entry });
+        if (this.stack.length > this.maxSize)
+            this.stack.shift();
+        this.index = this.stack.length - 1;
+    }
+    undo() {
+        if (this.index <= 0)
+            return null;
+        this.index--;
+        return { ...this.stack[this.index] };
+    }
+    redo() {
+        if (this.index >= this.stack.length - 1)
+            return null;
+        this.index++;
+        return { ...this.stack[this.index] };
+    }
+    canUndo() {
+        return this.index > 0;
+    }
+    canRedo() {
+        return this.index < this.stack.length - 1;
+    }
+}
+
+// src/utils/plugin-system.ts
+class PluginSystem {
+    plugins = new Map();
+    hooks = {};
+    handlers = {};
+    register(def) {
+        const enabled = def.enabled !== false;
+        this.plugins.set(def.id, { ...def, enabled });
+        if (enabled)
+            def.activate?.();
+        return this;
+    }
+    /** Transforming hook — each fn receives and returns a value */
+    hook(name, fn) {
+        (this.hooks[name] ??= []).push(fn);
+        return () => {
+            this.hooks[name] = (this.hooks[name] ?? []).filter(f => f !== fn);
+        };
+    }
+    /** Run all hooks, threading value through each */
+    applyHooks(name, initial, ...args) {
+        return (this.hooks[name] ?? []).reduce((v, fn) => fn(v, ...args), initial);
+    }
+    /** Fire-and-forget event */
+    on(event, fn) {
+        (this.handlers[event] ??= []).push(fn);
+        return () => {
+            this.handlers[event] = (this.handlers[event] ?? []).filter(f => f !== fn);
+        };
+    }
+    emit(event, data) {
+        (this.handlers[event] ?? []).forEach(fn => fn(data));
+    }
+    toggle(id) {
+        const p = this.plugins.get(id);
+        if (!p)
+            return false;
+        p.enabled = !p.enabled;
+        if (p.enabled)
+            p.activate?.();
+        else
+            p.deactivate?.();
+        return p.enabled;
+    }
+    isEnabled(id) {
+        return this.plugins.get(id)?.enabled ?? false;
+    }
+    list() {
+        return [...this.plugins.values()];
+    }
+    get(id) {
+        return this.plugins.get(id);
+    }
+}
+
+const xCodeEditorCss = () => `@charset "UTF-8";:root{--x-color-primary:#1677ff;--x-color-primary-rgb:22, 119, 255;--x-color-primary-contrast:#ffffff;--x-color-primary-contrast-rgb:255, 255, 255;--x-color-primary-shade:#0958d9;--x-color-primary-tint:#4096ff;--x-color-primary-bg:#e6f4ff;--x-color-primary-bg-hover:#bae0ff;--x-color-primary-border:#91caff;--x-color-primary-border-hover:#69b1ff;--x-color-primary-hover:#4096ff;--x-color-primary-active:#0958d9;--x-color-primary-text:#1677ff;--x-color-primary-text-hover:#4096ff;--x-color-primary-text-active:#0958d9;--x-color-secondary:#3dc2ff;--x-color-secondary-rgb:61, 194, 255;--x-color-secondary-contrast:#ffffff;--x-color-secondary-contrast-rgb:255, 255, 255;--x-color-secondary-shade:#36abe0;--x-color-secondary-tint:#50c8ff;--x-color-success:#52c41a;--x-color-success-rgb:82, 196, 26;--x-color-success-contrast:#ffffff;--x-color-success-contrast-rgb:255, 255, 255;--x-color-success-shade:#389e0d;--x-color-success-tint:#73d13d;--x-color-success-bg:#f6ffed;--x-color-success-bg-hover:#d9f7be;--x-color-success-border:#b7eb8f;--x-color-success-border-hover:#95de64;--x-color-success-hover:#73d13d;--x-color-success-active:#389e0d;--x-color-success-text:#52c41a;--x-color-success-text-hover:#73d13d;--x-color-success-text-active:#389e0d;--x-color-warning:#faad14;--x-color-warning-rgb:250, 173, 20;--x-color-warning-contrast:#000000;--x-color-warning-contrast-rgb:0, 0, 0;--x-color-warning-shade:#d48806;--x-color-warning-tint:#ffc53d;--x-color-warning-bg:#fffbe6;--x-color-warning-bg-hover:#fff1b8;--x-color-warning-border:#ffe58f;--x-color-warning-border-hover:#ffd666;--x-color-warning-hover:#ffc53d;--x-color-warning-active:#d48806;--x-color-warning-text:#faad14;--x-color-warning-text-hover:#ffc53d;--x-color-warning-text-active:#d48806;--x-color-danger:#ff4d4f;--x-color-danger-rgb:255, 77, 79;--x-color-danger-contrast:#ffffff;--x-color-danger-contrast-rgb:255, 255, 255;--x-color-danger-shade:#cf1322;--x-color-danger-tint:#ff7875;--x-color-error:#ff4d4f;--x-color-error-rgb:255, 77, 79;--x-color-error-bg:#fff2f0;--x-color-error-bg-hover:#ffccc7;--x-color-error-border:#ffa39e;--x-color-error-border-hover:#ff7875;--x-color-error-hover:#ff7875;--x-color-error-active:#d9363e;--x-color-error-text:#ff4d4f;--x-color-error-text-hover:#ff7875;--x-color-error-text-active:#d9363e;--x-color-info:#1677ff;--x-color-info-rgb:22, 119, 255;--x-color-info-bg:#e6f4ff;--x-color-info-bg-hover:#bae0ff;--x-color-info-border:#91caff;--x-color-info-border-hover:#69b1ff;--x-color-info-hover:#69b1ff;--x-color-info-active:#0958d9;--x-color-info-text:#1677ff;--x-color-info-text-hover:#69b1ff;--x-color-info-text-active:#0958d9;--x-color-text:rgba(0, 0, 0, 0.88);--x-color-text-secondary:rgba(0, 0, 0, 0.65);--x-color-text-tertiary:rgba(0, 0, 0, 0.45);--x-color-text-quaternary:rgba(0, 0, 0, 0.25);--x-color-text-disabled:rgba(0, 0, 0, 0.25);--x-color-text-placeholder:rgba(0, 0, 0, 0.25);--x-color-text-heading:rgba(0, 0, 0, 0.88);--x-color-text-label:rgba(0, 0, 0, 0.65);--x-color-text-description:rgba(0, 0, 0, 0.45);--x-color-text-light-solid:#ffffff;--x-color-text-processing:#ffffff;--x-color-bg-container:#ffffff;--x-color-bg-elevated:#ffffff;--x-color-bg-layout:#f5f5f5;--x-color-bg-spotlight:rgba(0, 0, 0, 0.85);--x-color-bg-mask:rgba(0, 0, 0, 0.45);--x-color-bg-base:#ffffff;--x-color-bg-container-disabled:#f5f5f5;--x-color-bg-container-loading:rgba(255, 255, 255, 0.65);--x-color-white:#ffffff;--x-color-fill:rgba(0, 0, 0, 0.15);--x-color-fill-secondary:rgba(0, 0, 0, 0.06);--x-color-fill-tertiary:rgba(0, 0, 0, 0.04);--x-color-fill-quaternary:rgba(0, 0, 0, 0.02);--x-color-border:#d9d9d9;--x-color-border-secondary:#f0f0f0;--x-color-border-bg:#ffffff;--x-color-split:rgba(5, 5, 5, 0.06);--x-color-dark:#222428;--x-color-dark-rgb:34, 36, 40;--x-color-dark-contrast:#ffffff;--x-color-dark-contrast-rgb:255, 255, 255;--x-color-dark-shade:#1e2023;--x-color-dark-tint:#383a3e;--x-color-medium:#92949c;--x-color-medium-rgb:146, 148, 156;--x-color-medium-contrast:#ffffff;--x-color-medium-contrast-rgb:255, 255, 255;--x-color-medium-shade:#808289;--x-color-medium-tint:#9d9fa6;--x-color-light:#f4f5f8;--x-color-light-rgb:244, 245, 248;--x-color-light-contrast:#000000;--x-color-light-contrast-rgb:0, 0, 0;--x-color-light-shade:#d7d8da;--x-color-light-tint:#f5f6f9;--x-font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',     'Noto Color Emoji';--x-font-family-code:'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;--x-font-size:14px;--x-font-size-sm:12px;--x-font-size-lg:16px;--x-font-size-xl:20px;--x-font-size-heading-1:38px;--x-font-size-heading-2:30px;--x-font-size-heading-3:24px;--x-font-size-heading-4:20px;--x-font-size-heading-5:16px;--x-line-height:1.5714285714285714;--x-line-height-lg:1.5;--x-line-height-sm:1.6666666666666667;--x-line-height-heading-1:1.2105263157894737;--x-line-height-heading-2:1.2666666666666666;--x-line-height-heading-3:1.3333333333333333;--x-line-height-heading-4:1.4;--x-line-height-heading-5:1.5;--x-font-weight-normal:400;--x-font-weight-medium:500;--x-font-weight-semibold:600;--x-font-weight-strong:600;--x-font-size-base:14px;--x-font-size-xxl:24px;--x-line-height-base:1.5714285714285714;--x-spacing-xxs:4px;--x-spacing-xs:8px;--x-spacing-sm:12px;--x-spacing-md:16px;--x-spacing-lg:20px;--x-spacing-xl:24px;--x-spacing-xxl:32px;--x-spacing-xxxl:48px;--x-margin-xxs:4px;--x-margin-xs:8px;--x-margin-sm:12px;--x-margin-md:16px;--x-margin-lg:24px;--x-margin-xl:32px;--x-margin-xxl:48px;--x-padding-xxs:4px;--x-padding-xs:8px;--x-padding-sm:12px;--x-padding-md:16px;--x-padding-lg:24px;--x-padding-content-horizontal-lg:24px;--x-padding-content-vertical-lg:12px;--x-padding-content-horizontal:16px;--x-padding-content-vertical:12px;--x-padding-content-horizontal-sm:16px;--x-padding-content-vertical-sm:8px;--x-border-radius:6px;--x-border-radius-xs:2px;--x-border-radius-sm:4px;--x-border-radius-lg:8px;--x-border-radius-xl:12px;--x-border-radius-outer:4px;--x-border-radius-base:6px;--x-border-width:1px;--x-border-width-base:1px;--x-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-shadow-lg:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-secondary:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tertiary:0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);--x-box-shadow-popover-arrow:2px 2px 5px rgba(0, 0, 0, 0.05);--x-box-shadow-card:0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);--x-box-shadow-drawer-right:-6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-left:6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-up:0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-drawer-down:0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05);--x-box-shadow-tabs-overflow-left:inset 10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-right:inset -10px 0 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-top:inset 0 10px 8px -8px rgba(0, 0, 0, 0.08);--x-box-shadow-tabs-overflow-bottom:inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08);--x-motion-duration-fast:0.1s;--x-motion-duration-mid:0.2s;--x-motion-duration-slow:0.3s;--x-motion-ease-in-out:cubic-bezier(0.645, 0.045, 0.355, 1);--x-motion-ease-out:cubic-bezier(0.215, 0.61, 0.355, 1);--x-motion-ease-in:cubic-bezier(0.55, 0.055, 0.675, 0.19);--x-motion-ease-out-back:cubic-bezier(0.12, 0.4, 0.29, 1.46);--x-motion-ease-in-back:cubic-bezier(0.71, -0.46, 0.88, 0.6);--x-motion-ease-in-out-circle:cubic-bezier(0.78, 0.14, 0.15, 0.86);--x-motion-ease-out-circle:cubic-bezier(0.08, 0.82, 0.17, 1);--x-motion-ease-in-circle:cubic-bezier(0.6, 0.04, 0.98, 0.34);--x-motion-ease-in-quint:cubic-bezier(0.755, 0.05, 0.855, 0.06);--x-motion-ease-out-quint:cubic-bezier(0.23, 1, 0.32, 1);--x-z-index-base:0;--x-z-index-popup-base:1000;--x-z-index-popup:1030;--x-z-index-affix:10;--x-z-index-modal:1000;--x-z-index-modal-mask:1000;--x-z-index-drawer:1000;--x-z-index-popover:1030;--x-z-index-dropdown:1050;--x-z-index-tooltip:1070;--x-z-index-notification:1080;--x-z-index-message:1090;--x-z-index-popconfirm:1060;--x-z-index-table-fixed:10;--x-opacity-loading:0.65;--x-opacity-image:1;--x-opacity-disabled:0.5;--x-control-height:32px;--x-control-height-xs:24px;--x-control-height-sm:24px;--x-control-height-lg:40px;--x-control-radio-size:16px;--x-control-checkbox-size:16px;--x-control-padding-horizontal:12px;--x-control-padding-horizontal-sm:8px;--x-control-outline-width:2px;--x-control-outline:rgba(5, 145, 255, 0.1);--x-control-item-bg-hover:rgba(0, 0, 0, 0.04);--x-control-item-bg-active:#e6f4ff;--x-control-item-bg-active-hover:#bae0ff;--x-control-item-bg-active-disabled:rgba(0, 0, 0, 0.15);--x-control-tmp-outline:rgba(0, 0, 0, 0.02);--x-color-yellow:#fadb14;--x-color-yellow-rgb:250, 219, 20;--x-font-family-base:var(--x-font-family);--x-color-link:#1677ff;--x-color-link-hover:#69b1ff;--x-color-link-active:#0958d9;--x-color-icon:rgba(0, 0, 0, 0.45);--x-color-icon-hover:rgba(0, 0, 0, 0.88);--x-color-highlight:#ff4d4f;--x-color-bg-text-hover:rgba(0, 0, 0, 0.06);--x-color-bg-text-active:rgba(0, 0, 0, 0.15);--x-screen-xs:480px;--x-screen-xs-min:480px;--x-screen-xs-max:575px;--x-screen-sm:576px;--x-screen-sm-min:576px;--x-screen-sm-max:767px;--x-screen-md:768px;--x-screen-md-min:768px;--x-screen-md-max:991px;--x-screen-lg:992px;--x-screen-lg-min:992px;--x-screen-lg-max:1199px;--x-screen-xl:1200px;--x-screen-xl-min:1200px;--x-screen-xl-max:1599px;--x-screen-xxl:1600px;--x-screen-xxl-min:1600px;--x-color-fill-content:rgba(0, 0, 0, 0.06);--x-color-fill-content-hover:rgba(0, 0, 0, 0.15);--x-color-fill-alter:rgba(0, 0, 0, 0.02);--x-scrollbar-width:12px;--x-scrollbar-track-bg:rgba(0, 0, 0, 0.04);--x-scrollbar-thumb-bg:rgba(0, 0, 0, 0.25);--x-scrollbar-thumb-bg-hover:rgba(0, 0, 0, 0.35);--x-menu-dark-bg:#001529;--x-menu-dark-item-bg:#001529;--x-menu-dark-popup-bg:#001529;--x-menu-dark-submenu-item-bg:#000c17}:host{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%;width:100%;overflow:hidden;--x-code-editor-bg:#0d0e14;--x-code-editor-surface:#13141c;--x-code-editor-surface2:#1a1b26;--x-code-editor-surface3:#1e2030;--x-code-editor-border:#2a2d3e;--x-code-editor-border2:#3b3f5c;--x-code-editor-txt:#c0caf5;--x-code-editor-txt2:#a9b1d6;--x-code-editor-txt3:#565f89;--x-code-editor-accent:#7aa2f7;--x-code-editor-purple:#bb9af7;--x-code-editor-green:#9ece6a;--x-code-editor-yellow:#e0af68;--x-code-editor-red:#f7768e;--x-code-editor-cyan:#7dcfff;--x-code-editor-orange:#ff9e64;--x-code-editor-lh:22px;--x-code-editor-fs:13px;--x-code-editor-gw:52px;--x-code-editor-font:'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace;--x-code-editor-sel:rgba(122, 162, 247, 0.18);--x-code-editor-match:rgba(224, 175, 104, 0.25);--x-code-editor-cur-line:rgba(122, 162, 247, 0.06);--x-code-editor-bracket:rgba(122, 162, 247, 0.35);font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace));color:var(--x-code-editor-txt);background:var(--x-code-editor-bg)}:host(.theme-light){--x-code-editor-bg:#f8f8f2;--x-code-editor-surface:#f0f0e8;--x-code-editor-surface2:#e8e8e0;--x-code-editor-surface3:#dcdcd4;--x-code-editor-border:#c8c8c0;--x-code-editor-border2:#b0b0a8;--x-code-editor-txt:#383a42;--x-code-editor-txt2:#4b4d58;--x-code-editor-txt3:#9096a2;--x-code-editor-accent:#4078f2;--x-code-editor-purple:#a626a4;--x-code-editor-green:#50a14f;--x-code-editor-yellow:#c18401;--x-code-editor-red:#e45649;--x-code-editor-cyan:#0184bc;--x-code-editor-orange:#986801;--x-code-editor-cur-line:rgba(64, 120, 242, 0.06);--x-code-editor-bracket:rgba(64, 120, 242, 0.3)}.x-code-editor-t-kw{color:var(--x-code-editor-purple)}.x-code-editor-t-fn{color:var(--x-code-editor-cyan)}.x-code-editor-t-str{color:var(--x-code-editor-green)}.x-code-editor-t-num{color:var(--x-code-editor-orange)}.x-code-editor-t-cmt{color:var(--x-code-editor-txt3);font-style:italic}.x-code-editor-t-op{color:#89ddff}.x-code-editor-t-id{color:var(--x-code-editor-txt)}.x-code-editor-t-bi{color:var(--x-code-editor-cyan)}.x-code-editor-t-prop{color:var(--x-code-editor-cyan)}.x-code-editor-t-rx{color:var(--x-code-editor-orange)}.x-code-editor-t-dec{color:var(--x-code-editor-red)}.x-code-editor-t-sel{color:var(--x-code-editor-yellow)}.x-code-editor-t-tag{color:var(--x-code-editor-red)}.x-code-editor-t-attr{color:var(--x-code-editor-yellow)}.x-code-editor-t-val{color:var(--x-code-editor-green)}.x-code-editor-folded-pill{display:inline-block;background:var(--x-code-editor-surface3);border:1px solid var(--x-code-editor-border2);border-radius:3px;padding:0 5px;font-size:11px;color:var(--x-code-editor-txt3);cursor:pointer;vertical-align:middle;margin-left:4px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.x-code-editor-folded-pill:hover{color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2));border-color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.x-code-editor-titlebar{height:38px;background:var(--x-code-editor-surface);border-bottom:1px solid var(--x-code-editor-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 14px;-ms-flex-negative:0;flex-shrink:0;gap:0}.x-code-editor-circles{display:-ms-flexbox;display:flex;gap:6px}.x-code-editor-dot{width:12px;height:12px;border-radius:50%;cursor:pointer;-webkit-transition:opacity 0.15s;transition:opacity 0.15s}.x-code-editor-dot:hover{opacity:0.8}.x-code-editor-dot.x-code-editor-red{background:#ff5f57}.x-code-editor-dot.x-code-editor-yellow{background:#ffbd2e}.x-code-editor-dot.x-code-editor-green{background:#28ca41}.x-code-editor-title-name{-ms-flex:1;flex:1;text-align:center;font-size:12px;color:var(--x-code-editor-txt3);letter-spacing:0.5px}.x-code-editor-title-spacer{width:52px}.x-code-editor-tabs{height:36px;background:var(--x-code-editor-surface);border-bottom:1px solid var(--x-code-editor-border);display:-ms-flexbox;display:flex;-ms-flex-align:end;align-items:flex-end;padding:0 8px;gap:2px;-ms-flex-negative:0;flex-shrink:0}.x-code-editor-tab{padding:0 14px;height:32px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:6px;font-size:12px;color:var(--x-code-editor-txt3);cursor:pointer;border-radius:6px 6px 0 0;border:1px solid transparent;border-bottom:none;-webkit-transition:all 0.12s;transition:all 0.12s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.x-code-editor-tab:hover{color:var(--x-code-editor-txt2);background:var(--x-code-editor-surface2)}.x-code-editor-tab.x-code-editor-active{color:var(--x-code-editor-txt);background:var(--x-code-editor-surface2);border-color:var(--x-code-editor-border)}.x-code-editor-tab-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.6}.x-code-editor-tab-js .x-code-editor-tab-dot{background:#f7c948}.x-code-editor-tab-css .x-code-editor-tab-dot{background:#61afef}.x-code-editor-tab-html .x-code-editor-tab-dot{background:#e06c75}.x-code-editor-tab-json .x-code-editor-tab-dot{background:#56b6c2}.x-code-editor-toolbar{height:32px;background:var(--x-code-editor-surface2);border-bottom:1px solid var(--x-code-editor-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 8px;gap:3px;-ms-flex-negative:0;flex-shrink:0}.x-code-editor-tbtn{height:22px;padding:0 8px;font-size:11px;color:var(--x-code-editor-txt3);background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace));white-space:nowrap;-webkit-transition:all 0.12s;transition:all 0.12s}.x-code-editor-tbtn:hover{color:var(--x-code-editor-txt2);border-color:var(--x-code-editor-border2);background:var(--x-code-editor-surface3)}.x-code-editor-tbtn.x-code-editor-active{color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2));border-color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.x-code-editor-tsep{width:1px;height:16px;background:var(--x-code-editor-border);margin:0 3px;-ms-flex-negative:0;flex-shrink:0}.x-code-editor-toolbar-lang{margin-left:auto;font-size:11px;color:var(--x-code-editor-txt3);padding:2px 8px;border:1px solid var(--x-code-editor-border);border-radius:4px}.x-code-editor-search-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:5px;padding:5px 10px;background:var(--x-code-editor-surface2);border-bottom:1px solid var(--x-code-editor-border);-ms-flex-negative:0;flex-shrink:0}.x-code-editor-search-input{background:var(--x-code-editor-surface3);border:1px solid var(--x-code-editor-border2);color:var(--x-code-editor-txt);padding:3px 8px;font-size:12px;border-radius:4px;outline:none;font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace));width:200px;-webkit-transition:border-color 0.15s;transition:border-color 0.15s}.x-code-editor-search-input:focus{border-color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.x-code-editor-sbar-btn{height:22px;padding:0 8px;font-size:11px;color:var(--x-code-editor-txt3);background:var(--x-code-editor-surface3);border:1px solid var(--x-code-editor-border);border-radius:4px;cursor:pointer;font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace));-webkit-transition:all 0.12s;transition:all 0.12s}.x-code-editor-sbar-btn:hover{color:var(--x-code-editor-txt);border-color:var(--x-code-editor-border2)}.x-code-editor-match-count{font-size:11px;color:var(--x-code-editor-txt3);min-width:70px}.x-code-editor-sbar-close{margin-left:auto;font-size:16px;color:var(--x-code-editor-txt3);cursor:pointer;width:22px;height:22px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;border-radius:4px;background:transparent;border:none;font-family:sans-serif}.x-code-editor-sbar-close:hover{color:var(--x-code-editor-txt);background:var(--x-code-editor-surface3)}.x-code-editor-main-area{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;overflow:hidden;position:relative}.x-code-editor-editor-wrap{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;overflow:hidden}.x-code-editor-gutter{width:var(--x-code-editor-gw, 52px);background:var(--x-code-editor-surface);border-right:1px solid var(--x-code-editor-border);-ms-flex-negative:0;flex-shrink:0;overflow:hidden;position:relative}.x-code-editor-gutter-canvas{display:block;position:absolute;top:0;left:0;width:100%;cursor:pointer}.x-code-editor-code-container{-ms-flex:1;flex:1;position:relative;overflow:auto;background:var(--x-code-editor-bg)}.x-code-editor-cur-line-hl{position:absolute;left:0;right:0;height:var(--x-code-editor-lh, 22px);background:var(--x-code-editor-cur-line);pointer-events:none;z-index:1}.x-code-editor-bracket-hl{position:absolute;width:9px;height:var(--x-code-editor-lh, 22px);background:var(--x-code-editor-bracket);border-radius:2px;pointer-events:none;z-index:3}.x-code-editor-search-hl{position:absolute;height:var(--x-code-editor-lh, 22px);background:var(--x-code-editor-match);border-radius:2px;pointer-events:none;z-index:4}.x-code-editor-word-hl{position:absolute;height:var(--x-code-editor-lh, 22px);background:rgba(122, 162, 247, 0.2);border:1px solid rgba(122, 162, 247, 0.3);border-radius:2px;pointer-events:none;z-index:3;-webkit-box-sizing:border-box;box-sizing:border-box}.x-code-editor-search-cur{background:rgba(122, 162, 247, 0.4)}.x-code-editor-extra-cursor{position:absolute;width:2px;background:var(--x-code-editor-orange);z-index:11;pointer-events:none;-webkit-animation:blink 1.1s step-end infinite;animation:blink 1.1s step-end infinite;height:var(--x-code-editor-lh, 22px)}@-webkit-keyframes blink{0%,100%{opacity:1}50%{opacity:0}}@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}.x-code-editor-highlight-layer{position:absolute;top:0;left:0;right:0;pointer-events:auto;padding:8px 0 8px 12px;font-size:var(--x-code-editor-fs, var(--x-font-size-sm, 13px));line-height:var(--x-code-editor-lh, 22px);font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace));white-space:pre;color:var(--x-code-editor-txt);z-index:5;-o-tab-size:2;tab-size:2;-moz-tab-size:2}.x-code-editor-code-input{position:absolute;top:0;left:0;width:100%;padding:8px 0 8px 12px;font-size:var(--x-code-editor-fs, var(--x-font-size-sm, 13px));line-height:var(--x-code-editor-lh, 22px);font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace));background:transparent;color:transparent;caret-color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2));border:none;outline:none;resize:none;white-space:pre;overflow:hidden;z-index:10;-o-tab-size:2;tab-size:2;-moz-tab-size:2;-webkit-text-fill-color:transparent}.x-code-editor-code-input::-moz-selection{background:var(--x-code-editor-sel)}.x-code-editor-code-input::selection{background:var(--x-code-editor-sel)}.x-code-editor-side-panel{width:280px;background:var(--x-code-editor-surface);border-left:1px solid var(--x-code-editor-border);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;overflow:hidden}.x-code-editor-panel-header{padding:9px 12px;font-size:12px;color:var(--x-code-editor-txt2);border-bottom:1px solid var(--x-code-editor-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-negative:0;flex-shrink:0}.x-code-editor-panel-close{font-size:16px;color:var(--x-code-editor-txt3);cursor:pointer;background:transparent;border:none;font-family:sans-serif;line-height:1;padding:0 2px}.x-code-editor-panel-close:hover{color:var(--x-code-editor-txt)}.x-code-editor-panel-body{-ms-flex:1;flex:1;overflow-y:auto;padding:8px}.x-code-editor-panel-hint{font-size:11px;color:var(--x-code-editor-txt3);padding:8px;font-style:italic}.x-code-editor-ast-tree{font-size:11px;font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace));line-height:1.6}.x-code-editor-ast-node{margin-left:10px}.x-code-editor-ast-toggle{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--x-code-editor-txt3);padding:1px 3px;border-radius:3px;display:inline-block}.x-code-editor-ast-toggle:hover{color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2));background:var(--x-code-editor-surface3)}.x-code-editor-ast-children{margin-left:12px}.x-code-editor-ast-row{padding:1px 0}.x-code-editor-ast-type{color:var(--x-code-editor-cyan)}.x-code-editor-ast-val{color:var(--x-code-editor-green)}.x-code-editor-ast-key{color:var(--x-code-editor-purple)}.x-code-editor-plugin-card{background:var(--x-code-editor-surface2);border:1px solid var(--x-code-editor-border);border-radius:6px;padding:10px 12px;margin-bottom:8px}.x-code-editor-plugin-card-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:5px}.x-code-editor-plugin-name{font-size:12px;color:var(--x-code-editor-txt);font-weight:500}.x-code-editor-plugin-desc{font-size:11px;color:var(--x-code-editor-txt3)}.x-code-editor-toggle{width:30px;height:16px;background:var(--x-code-editor-surface3);border-radius:8px;cursor:pointer;position:relative;border:1px solid var(--x-code-editor-border2);-webkit-transition:background 0.2s;transition:background 0.2s;-ms-flex-negative:0;flex-shrink:0}.x-code-editor-toggle.x-code-editor-on{background:var(--x-code-editor-accent, var(--x-color-primary, #4078f2));border-color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.x-code-editor-toggle::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;-webkit-transition:left 0.2s;transition:left 0.2s}.x-code-editor-toggle.x-code-editor-on::after{left:16px}.x-code-editor-autocomplete{position:absolute;background:var(--x-code-editor-surface2);border:1px solid var(--x-code-editor-border2);border-radius:6px;-webkit-box-shadow:0 8px 32px rgba(0, 0, 0, 0.6);box-shadow:0 8px 32px rgba(0, 0, 0, 0.6);z-index:200;min-width:220px;max-width:340px;max-height:230px;overflow-y:auto;font-size:12px}.x-code-editor-autocomplete::-webkit-scrollbar{width:4px}.x-code-editor-autocomplete::-webkit-scrollbar-track{background:var(--x-code-editor-surface3)}.x-code-editor-autocomplete::-webkit-scrollbar-thumb{background:var(--x-code-editor-border2);border-radius:2px}.x-code-editor-ac-item{padding:5px 10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:7px;cursor:pointer;-webkit-transition:background 0.08s;transition:background 0.08s}.x-code-editor-ac-item:hover,.x-code-editor-ac-item.x-code-editor-selected{background:var(--x-code-editor-surface3)}.x-code-editor-ac-icon{width:16px;height:16px;border-radius:3px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:9px;font-weight:700;-ms-flex-negative:0;flex-shrink:0}.x-code-editor-ac-kw{background:rgba(187, 154, 247, 0.2);color:var(--x-code-editor-purple)}.x-code-editor-ac-fn{background:rgba(125, 207, 255, 0.2);color:var(--x-code-editor-cyan)}.x-code-editor-ac-var{background:rgba(158, 206, 106, 0.2);color:var(--x-code-editor-green)}.x-code-editor-ac-prop{background:rgba(122, 162, 247, 0.2);color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.x-code-editor-ac-snip{background:rgba(255, 158, 100, 0.2);color:var(--x-code-editor-orange)}.x-code-editor-ac-tag{background:rgba(247, 118, 142, 0.2);color:var(--x-code-editor-red)}.x-code-editor-ac-attr{background:rgba(224, 175, 104, 0.2);color:var(--x-code-editor-yellow)}.x-code-editor-ac-label{-ms-flex:1;flex:1;color:var(--x-code-editor-txt);font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace))}.x-code-editor-ac-label b{color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.x-code-editor-ac-detail{font-size:10px;color:var(--x-code-editor-txt3);white-space:nowrap}.x-code-editor-statusbar{height:24px;background:var(--x-code-editor-surface);border-top:1px solid var(--x-code-editor-border);display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0 10px;gap:12px;font-size:11px;color:var(--x-code-editor-txt3);-ms-flex-negative:0;flex-shrink:0}.x-code-editor-sb-cursor{color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.x-code-editor-sb-sel{color:var(--x-code-editor-yellow)}.x-code-editor-sb-multicursor{color:var(--x-code-editor-orange)}.x-code-editor-sb-spacer{-ms-flex:1;flex:1}.x-code-editor-sb-utf,.x-code-editor-sb-lf{color:var(--x-code-editor-green)}.x-code-editor-sb-lang{color:var(--x-code-editor-txt2)}.x-code-editor-sb-chars{color:var(--x-code-editor-txt3)}.x-code-editor-sb-clear-cursors{font-size:10px;color:var(--x-code-editor-txt3);background:transparent;border:1px solid var(--x-code-editor-border);border-radius:3px;padding:0 5px;cursor:pointer;font-family:var(--x-code-editor-font, var(--x-font-family-code, "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace));-webkit-transition:all 0.1s;transition:all 0.1s}.x-code-editor-sb-clear-cursors:hover{color:var(--x-code-editor-txt);border-color:var(--x-code-editor-border2)}.x-code-editor-code-container::-webkit-scrollbar{width:8px;height:8px}.x-code-editor-code-container::-webkit-scrollbar-track{background:var(--x-code-editor-surface2)}.x-code-editor-code-container::-webkit-scrollbar-thumb{background:var(--x-code-editor-border2);border-radius:4px}.x-code-editor-code-container::-webkit-scrollbar-thumb:hover{background:var(--x-code-editor-txt3)}.x-code-editor-panel-body::-webkit-scrollbar{width:4px}.x-code-editor-panel-body::-webkit-scrollbar-track{background:transparent}.x-code-editor-panel-body::-webkit-scrollbar-thumb{background:var(--x-code-editor-border2);border-radius:2px}.t-kw{color:var(--x-code-editor-purple)}.t-str{color:var(--x-code-editor-green)}.t-num{color:var(--x-code-editor-orange)}.t-fn{color:var(--x-code-editor-cyan)}.t-bi{color:var(--x-code-editor-yellow)}.t-op{color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.t-id{color:var(--x-code-editor-txt)}.t-cmt{color:var(--x-code-editor-txt3);font-style:italic}.t-prop{color:var(--x-code-editor-accent, var(--x-color-primary, #4078f2))}.t-var{color:var(--x-code-editor-red)}.t-tag{color:var(--x-code-editor-red)}.t-attr{color:var(--x-code-editor-yellow)}.t-sel{color:var(--x-code-editor-yellow)}.t-dec{color:var(--x-code-editor-purple)}`;
+
+const LANG_NAMES = {
+    js: 'JavaScript',
+    css: 'CSS',
+    html: 'HTML',
+    json: 'JSON',
+};
+const PAIRS = {
+    '(': ')',
+    '[': ']',
+    '{': '}',
+    '"': '"',
+    "'": "'",
+    '`': '`',
+};
+const LH = 22; // line height px
+const CW = 7.8; // approx char width at 13px monospace
+const PAD = 12; // padding-left for code area
+function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(hi, n));
+}
+function escH(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+const XCodeEditor = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.codeChange = createEvent(this, "codeChange", 7);
+        this.cursorMove = createEvent(this, "cursorMove", 7);
+        this.langChange = createEvent(this, "langChange", 7);
+    }
+    // ==================== Props ====================
+    /**
+     * The value of the code editor.
+     */
+    value = '';
+    /**
+     * The programming language for syntax highlighting.
+     */
+    language = 'js';
+    /**
+     * Whether the editor is read-only.
+     */
+    readonly = false;
+    /**
+     * The tab size used for indentation.
+     */
+    tabSize = 2;
+    /**
+     * Editor theme ('dark' or 'light').
+     */
+    theme = 'dark';
+    /**
+     * Whether to show the minimap (not implemented yet).
+     */
+    showMinimap = false;
+    /**
+     * Custom class names for editor components.
+     */
+    classNames;
+    /**
+     * Custom styles for editor components.
+     */
+    styles;
+    // ==================== Events ====================
+    codeChange;
+    cursorMove;
+    langChange;
+    // ==================== Internal State ====================
+    _value = '';
+    _lang = 'js';
+    _cursorLine = 0;
+    _cursorCol = 0;
+    _selLen = 0;
+    _extraCursors = [];
+    _folds = new Set();
+    _matches = [];
+    _matchIdx = 0;
+    _searchQuery = '';
+    _replaceQuery = '';
+    _showSearch = false;
+    _showReplace = false;
+    _panel = null;
+    _astRoot = null;
+    _pluginList = [];
+    _acItems = [];
+    _acIndex = 0;
+    _acOpen = false;
+    _acX = 0;
+    _acY = 0;
+    _highlighted = '';
+    _displayLines = [];
+    get hostEl() { return getElement(this); }
+    ta;
+    codeContainer;
+    gutterCanvas;
+    acContainer;
+    // ==================== Internal Singletons ====================
+    history = new EditHistory(200);
+    plugins = new PluginSystem();
+    // ==================== Lifecycle ====================
+    componentWillLoad() {
+        this._value = this.value || '';
+        this._lang = this.language;
+        this._setupPlugins();
+        this._reHighlight();
+        this.history.pushNow({ value: this._value, selStart: 0, selEnd: 0 });
+    }
+    componentDidLoad() {
+        this._bindScrollSync();
+        this._drawGutter();
+        this._resizeTA();
+    }
+    componentDidUpdate() {
+        this._drawGutter();
+        this._resizeTA();
+    }
+    // ==================== Watchers ====================
+    onValueProp(v) {
+        if (v !== this._value) {
+            this._value = v;
+            this._reHighlight();
+        }
+    }
+    onLangProp(l) {
+        this._lang = l;
+        this._folds.clear();
+        this._reHighlight();
+    }
+    // ==================== Methods ====================
+    async getValue() {
+        return this._value;
+    }
+    async setValue(v) {
+        this._applyValue(v, 0, 0, true);
+    }
+    async setLanguage(l) {
+        this._lang = l;
+        this._reHighlight();
+    }
+    async undo() {
+        this._undo();
+    }
+    async redo() {
+        this._redo();
+    }
+    async format() {
+        this._formatDoc();
+    }
+    async foldAll() {
+        this._foldAll();
+    }
+    async unfoldAll() {
+        this._unfoldAll();
+    }
+    async openSearch() {
+        this._showSearch = true;
+    }
+    async getAST() {
+        if (this._lang !== 'js')
+            return null;
+        return parseAST(this._value);
+    }
+    async registerPlugin(def) {
+        this.plugins.register(def);
+        this._pluginList = this.plugins.list();
+    }
+    // ==================== Private Methods ====================
+    _setupPlugins() {
+        this.plugins
+            .register({ id: 'bracket-match', name: 'Bracket Matching', description: 'Highlights matching brackets under cursor', enabled: true })
+            .register({ id: 'auto-close', name: 'Auto Close', description: 'Auto-closes brackets and quotes', enabled: true })
+            .register({ id: 'auto-indent', name: 'Auto Indent', description: 'Smart indentation on Enter', enabled: true })
+            .register({ id: 'line-highlight', name: 'Line Highlight', description: 'Highlight current line', enabled: true })
+            .register({ id: 'fold', name: 'Code Folding', description: 'Collapse/expand code blocks', enabled: true })
+            .register({ id: 'autocomplete', name: 'Autocomplete', description: 'IntelliSense-style completion', enabled: true })
+            .register({ id: 'multi-cursor', name: 'Multi Cursor', description: 'Alt+Click to add cursors', enabled: true });
+        this._pluginList = this.plugins.list();
+    }
+    _bindScrollSync() {
+        this.codeContainer?.addEventListener('scroll', () => {
+            if (this.gutterCanvas) {
+                this.gutterCanvas.style.transform = `translateY(-${this.codeContainer.scrollTop}px)`;
+            }
+        });
+    }
+    _applyValue(v, selStart, selEnd, pushHistory = true) {
+        this._value = v;
+        if (this.ta) {
+            this.ta.value = v;
+            this.ta.setSelectionRange(selStart, selEnd);
+        }
+        if (pushHistory)
+            this.history.push({ value: v, selStart, selEnd });
+        this._reHighlight();
+        this.codeChange.emit({ value: v });
+    }
+    _reHighlight() {
+        // Build display lines (accounting for folds)
+        const lines = this._value.split('\n');
+        const displayLines = [];
+        let i = 0;
+        while (i < lines.length) {
+            if (this._folds.has(i) && this.plugins.isEnabled('fold')) {
+                const end = this._foldEnd(lines, i);
+                displayLines.push({ real: i, folded: true, count: end - i, text: lines[i] });
+                i = end + 1;
+            }
+            else {
+                displayLines.push({ real: i, folded: false, text: lines[i] });
+                i++;
+            }
+        }
+        this._displayLines = displayLines;
+        // Tokenize entire source, then pick lines
+        const tokenized = tokenize$1(this._value, this._lang).split('\n');
+        let hlHtml = '';
+        for (const dl of displayLines) {
+            if (dl.folded) {
+                hlHtml += (tokenized[dl.real] || '') + `<span class="x-code-editor-folded-pill" data-line="${dl.real}"> ··· ${dl.count} lines </span>\n`;
+            }
+            else {
+                hlHtml += (tokenized[dl.real] || '') + '\n';
+            }
+        }
+        this._highlighted = hlHtml;
+        // AST (debounced if panel open)
+        if (this._panel === 'ast')
+            this._refreshAST();
+        // Search re-run
+        if (this._searchQuery)
+            this._runSearch();
+    }
+    _drawGutter() {
+        const canvas = this.gutterCanvas;
+        if (!canvas)
+            return;
+        const totalLines = this._displayLines.length;
+        const w = canvas.offsetWidth || 52;
+        const h = Math.max(totalLines * LH + 32, this.codeContainer?.clientHeight || 400);
+        canvas.width = w * (devicePixelRatio || 1);
+        canvas.height = h * (devicePixelRatio || 1);
+        canvas.style.width = w + 'px';
+        canvas.style.height = h + 'px';
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.scale(devicePixelRatio || 1, devicePixelRatio || 1);
+        ctx.clearRect(0, 0, w, h);
+        ctx.font = `12px Fira Code, Consolas, monospace`;
+        ctx.textAlign = 'right';
+        this._displayLines.forEach((dl, i) => {
+            const y = i * LH + 8;
+            const isCur = dl.real === this._cursorLine;
+            if (isCur && this.plugins.isEnabled('line-highlight')) {
+                ctx.fillStyle = 'rgba(122,162,247,0.1)';
+                ctx.fillRect(0, y - 2, w, LH);
+            }
+            ctx.fillStyle = isCur ? '#c0caf5' : '#3b3f5c';
+            ctx.fillText(String(dl.real + 1), w - 8, y + LH * 0.72);
+            // fold triangle
+            if (this.plugins.isEnabled('fold') && (dl.folded || this._canFold(dl.real))) {
+                ctx.fillStyle = '#3b3f5c';
+                ctx.font = `8px monospace`;
+                ctx.fillText(dl.folded ? '▶' : '▼', w - 5, y + LH * 0.7);
+                ctx.font = `12px Fira Code, Consolas, monospace`;
+            }
+        });
+    }
+    _resizeTA() {
+        if (!this.ta || !this.codeContainer)
+            return;
+        const lines = this._displayLines.length;
+        const h = Math.max(lines * LH + 32, this.codeContainer.clientHeight);
+        this.ta.style.minHeight = h + 'px';
+    }
+    _cursorInfo() {
+        if (!this.ta)
+            return { line: 0, col: 0, pos: 0 };
+        const pos = this.ta.selectionStart;
+        const before = this._value.slice(0, pos);
+        const lines = before.split('\n');
+        return { line: lines.length - 1, col: lines[lines.length - 1].length, pos };
+    }
+    _onCursorChange() {
+        const { line, col} = this._cursorInfo();
+        this._cursorLine = line;
+        this._cursorCol = col;
+        this._selLen = Math.abs(this.ta.selectionEnd - this.ta.selectionStart);
+        this.cursorMove.emit({ line, col });
+        this._drawGutter();
+        if (this.plugins.isEnabled('autocomplete'))
+            this._tryShowAC();
+        // Word Highlights
+        this._wordHls = this._wordHighlights();
+        // Force re-render of highlight layers
+        this._reHighlight();
+    }
+    _wordHls = [];
+    _validateWord(str) {
+        return /^[A-Za-z0-9_$]+$/.test(str);
+    }
+    _wordHighlights() {
+        if (!this.ta)
+            return [];
+        const s = this.ta.selectionStart, e = this.ta.selectionEnd;
+        if (s === e) {
+            // Find word around cursor if empty selection
+            return []; // or complex logic to extract word boundaries at cursor
+        }
+        const word = this._value.slice(s, e);
+        if (!this._validateWord(word) || word.length > 50)
+            return [];
+        const escaped = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const re = new RegExp(`\\b${escaped}\\b`, 'g');
+        const hls = [];
+        let m;
+        while ((m = re.exec(this._value)) !== null) {
+            if (m.index !== s) {
+                const before = this._value.slice(0, m.index);
+                const lines = before.split('\n');
+                const rawLine = lines.length - 1;
+                const col = lines[rawLine].length;
+                const dispIdx = this._displayLines.findIndex(dl => dl.real === rawLine);
+                const row = dispIdx >= 0 ? dispIdx : rawLine;
+                hls.push({
+                    top: row * LH + 8,
+                    left: col * CW + PAD,
+                    width: word.length * CW,
+                });
+            }
+        }
+        return hls;
+    }
+    _bracketHighlights() {
+        if (!this.plugins.isEnabled('bracket-match') || !this.ta)
+            return [];
+        const pos = this.ta.selectionStart;
+        const text = this._value;
+        let searchPos = text[pos] && '{}[]()'.includes(text[pos]) ? pos : text[pos - 1] && '{}[]()'.includes(text[pos - 1]) ? pos - 1 : -1;
+        if (searchPos < 0)
+            return [];
+        const ch = text[searchPos];
+        const forward = '({['.includes(ch);
+        const match = this._findMatchBracket(text, searchPos, forward);
+        if (match < 0)
+            return [];
+        return [searchPos, match].map(p => {
+            const before = text.slice(0, p);
+            const lines = before.split('\n');
+            const dispLine = this._displayLines.findIndex(dl => dl.real === lines.length - 1);
+            const row = dispLine >= 0 ? dispLine : lines.length - 1;
+            const col = lines[lines.length - 1].length;
+            return { top: row * LH + 8, left: col * CW + PAD };
+        });
+    }
+    _findMatchBracket(text, pos, forward) {
+        const opens = '({[', closes = ')}]';
+        let depth = 0;
+        const dir = forward ? 1 : -1;
+        for (let i = pos; i >= 0 && i < text.length; i += dir) {
+            if (opens.includes(text[i]))
+                depth += forward ? 1 : -1;
+            if (closes.includes(text[i]))
+                depth += forward ? -1 : 1;
+            if (depth === 0 && i !== pos)
+                return i;
+        }
+        return -1;
+    }
+    _canFold(lineIdx) {
+        const lines = this._value.split('\n');
+        const line = lines[lineIdx] ?? '';
+        return /[{(\[]$/.test(line.trimEnd()) || /^(function|class|if|for|while)\b/.test(line.trim());
+    }
+    _foldEnd(lines, start) {
+        let depth = 0;
+        for (let i = start; i < lines.length; i++) {
+            for (const ch of lines[i]) {
+                if ('({['.includes(ch))
+                    depth++;
+                if (')}]'.includes(ch))
+                    depth--;
+                if (depth <= 0 && i > start)
+                    return i;
+            }
+        }
+        return Math.min(start + 1, lines.length - 1);
+    }
+    _toggleFold(lineIdx) {
+        const f = new Set(this._folds);
+        if (f.has(lineIdx))
+            f.delete(lineIdx);
+        else if (this._canFold(lineIdx))
+            f.add(lineIdx);
+        this._folds = f;
+        this._reHighlight();
+    }
+    _foldAll() {
+        const f = new Set();
+        this._value.split('\n').forEach((_, i) => {
+            if (this._canFold(i))
+                f.add(i);
+        });
+        this._folds = f;
+        this._reHighlight();
+    }
+    _unfoldAll() {
+        this._folds = new Set();
+        this._reHighlight();
+    }
+    _onInput() {
+        if (!this.ta)
+            return;
+        const pos = this.ta.selectionStart;
+        const char = this.ta.value[pos - 1];
+        // Auto-outdent on typing closing brackets
+        if (this.plugins.isEnabled('auto-indent') && (char === '}' || char === ']' || char === ')')) {
+            const before = this.ta.value.slice(0, pos - 1);
+            const lineStart = before.lastIndexOf('\n') + 1;
+            const linePrefix = before.slice(lineStart);
+            const tab = ' '.repeat(this.tabSize);
+            // Only unindent if line is purely whitespace and ends with our tab size
+            if (/^\s*$/.test(linePrefix) && linePrefix.endsWith(tab)) {
+                const newPrefix = linePrefix.slice(0, -tab.length);
+                const v = this.ta.value.slice(0, lineStart) + newPrefix + char + this.ta.value.slice(pos);
+                this._applyValue(v, lineStart + newPrefix.length + 1, lineStart + newPrefix.length + 1, false);
+                return;
+            }
+        }
+        const v = this.ta.value;
+        this._applyValue(v, this.ta.selectionStart, this.ta.selectionEnd, true);
+    }
+    _onKeydown(e) {
+        const ta = this.ta;
+        const ctrl = e.ctrlKey || e.metaKey;
+        // Undo / Redo
+        if (ctrl && e.key === 'z' && !e.shiftKey) {
+            e.preventDefault();
+            this._undo();
+            return;
+        }
+        if (ctrl && (e.key === 'y' || (e.key === 'z' && e.shiftKey))) {
+            e.preventDefault();
+            this._redo();
+            return;
+        }
+        // Search
+        if (ctrl && e.key === 'f') {
+            e.preventDefault();
+            this._showSearch = true;
+            return;
+        }
+        if (ctrl && e.key === 'h') {
+            e.preventDefault();
+            this._showSearch = true;
+            this._showReplace = true;
+            return;
+        }
+        // Format
+        if (e.shiftKey && e.altKey && e.key === 'F') {
+            e.preventDefault();
+            this._formatDoc();
+            return;
+        }
+        // Select all occurrences
+        if (ctrl && e.shiftKey && e.key === 'L') {
+            e.preventDefault();
+            this._selectAllOccurrences();
+            return;
+        }
+        // Autocomplete navigation
+        if (this._acOpen) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                this._acMove(1);
+                return;
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this._acMove(-1);
+                return;
+            }
+            if (e.key === 'Enter' || e.key === 'Tab') {
+                e.preventDefault();
+                this._acAccept();
+                return;
+            }
+            if (e.key === 'Escape') {
+                this._acOpen = false;
+                return;
+            }
+        }
+        // Tab
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            e.shiftKey ? this._unindent() : this._insertTab();
+            return;
+        }
+        // Enter — smart indent
+        if (e.key === 'Enter' && this.plugins.isEnabled('auto-indent')) {
+            e.preventDefault();
+            this._smartEnter();
+            return;
+        }
+        // Auto-close
+        if (this.plugins.isEnabled('auto-close')) {
+            if (PAIRS[e.key]) {
+                const start = ta.selectionStart, end = ta.selectionEnd;
+                if (start !== end) {
+                    e.preventDefault();
+                    this._wrapSel(e.key, PAIRS[e.key]);
+                    return;
+                }
+                if (e.key === PAIRS[e.key] && ta.value[start] === e.key) {
+                    e.preventDefault();
+                    ta.setSelectionRange(start + 1, start + 1);
+                    return;
+                }
+                e.preventDefault();
+                this._insertPair(e.key, PAIRS[e.key]);
+                return;
+            }
+            if (e.key === 'Backspace' && ta.selectionStart === ta.selectionEnd) {
+                const pos = ta.selectionStart;
+                const prev = ta.value[pos - 1], next = ta.value[pos];
+                if (prev && PAIRS[prev] === next) {
+                    e.preventDefault();
+                    const v = ta.value.slice(0, pos - 1) + ta.value.slice(pos + 1);
+                    this._applyValue(v, pos - 1, pos - 1);
+                    return;
+                }
+            }
+        }
+    }
+    _smartEnter() {
+        const ta = this.ta;
+        const pos = ta.selectionStart;
+        const before = ta.value.slice(0, pos);
+        const after = ta.value.slice(ta.selectionEnd);
+        const linesBefore = before.split('\n');
+        const curLine = linesBefore.pop() ?? '';
+        const match = curLine.match(/^(\s*)/);
+        const indent = match ? match[1] : '';
+        const lastCh = curLine.trimEnd().slice(-1);
+        const firstAfter = after.trimStart()[0];
+        const tab = ' '.repeat(this.tabSize);
+        let newIndent = indent;
+        let extra = '';
+        if ('({['.includes(lastCh)) {
+            newIndent = indent + tab;
+            if (')}]'.includes(firstAfter))
+                extra = '\n' + indent;
+        }
+        const insert = '\n' + newIndent + extra;
+        const v = before + insert + after;
+        const newPos = pos + 1 + newIndent.length;
+        this._applyValue(v, newPos, newPos);
+    }
+    _insertTab() {
+        const ta = this.ta;
+        const start = ta.selectionStart, end = ta.selectionEnd;
+        const tab = ' '.repeat(this.tabSize);
+        if (start === end) {
+            const v = ta.value.slice(0, start) + tab + ta.value.slice(end);
+            this._applyValue(v, start + tab.length, start + tab.length);
+        }
+        else {
+            const lineStart = ta.value.lastIndexOf('\n', start - 1) + 1;
+            const block = ta.value.slice(lineStart, end);
+            const indented = block
+                .split('\n')
+                .map(l => tab + l)
+                .join('\n');
+            const v = ta.value.slice(0, lineStart) + indented + ta.value.slice(end);
+            this._applyValue(v, lineStart, lineStart + indented.length);
+        }
+    }
+    _unindent() {
+        const ta = this.ta;
+        const start = ta.selectionStart, end = ta.selectionEnd;
+        const tab = ' '.repeat(this.tabSize);
+        const lineStart = ta.value.lastIndexOf('\n', start - 1) + 1;
+        const block = ta.value.slice(lineStart, end);
+        const unindented = block
+            .split('\n')
+            .map(l => (l.startsWith(tab) ? l.slice(tab.length) : l.startsWith('\t') ? l.slice(1) : l))
+            .join('\n');
+        const v = ta.value.slice(0, lineStart) + unindented + ta.value.slice(end);
+        this._applyValue(v, lineStart, lineStart + unindented.length);
+    }
+    _insertPair(open, close) {
+        const ta = this.ta;
+        const pos = ta.selectionStart;
+        const v = ta.value.slice(0, pos) + open + close + ta.value.slice(ta.selectionEnd);
+        this._applyValue(v, pos + 1, pos + 1);
+    }
+    _wrapSel(open, close) {
+        const ta = this.ta;
+        const s = ta.selectionStart, e = ta.selectionEnd;
+        const sel = ta.value.slice(s, e);
+        const v = ta.value.slice(0, s) + open + sel + close + ta.value.slice(e);
+        this._applyValue(v, s + 1, e + 1);
+    }
+    _undo() {
+        const entry = this.history.undo();
+        if (!entry)
+            return;
+        this._value = entry.value;
+        if (this.ta) {
+            this.ta.value = entry.value;
+            this.ta.setSelectionRange(entry.selStart, entry.selEnd);
+        }
+        this._reHighlight();
+        this.codeChange.emit({ value: this._value });
+    }
+    _redo() {
+        const entry = this.history.redo();
+        if (!entry)
+            return;
+        this._value = entry.value;
+        if (this.ta) {
+            this.ta.value = entry.value;
+            this.ta.setSelectionRange(entry.selStart, entry.selEnd);
+        }
+        this._reHighlight();
+        this.codeChange.emit({ value: this._value });
+    }
+    _addExtraCursor(e) {
+        if (!this.plugins.isEnabled('multi-cursor'))
+            return;
+        const rect = this.codeContainer.getBoundingClientRect();
+        const x = e.clientX - rect.left - PAD + this.codeContainer.scrollLeft;
+        const y = e.clientY - rect.top + this.codeContainer.scrollTop - 8;
+        const dispLine = clamp(Math.floor(y / LH), 0, this._displayLines.length - 1);
+        const realLine = this._displayLines[dispLine]?.real ?? 0;
+        const lines = this._value.split('\n');
+        const lineText = lines[realLine] ?? '';
+        const col = clamp(Math.round(x / CW), 0, lineText.length);
+        const pos = lines.slice(0, realLine).join('\n').length + (realLine > 0 ? 1 : 0) + col;
+        this._extraCursors = [...this._extraCursors, { pos }];
+    }
+    _extraCursorPositions() {
+        return this._extraCursors.map(cur => {
+            const before = this._value.slice(0, cur.pos);
+            const lines = before.split('\n');
+            const realLine = lines.length - 1;
+            const dispIdx = this._displayLines.findIndex(dl => dl.real === realLine);
+            const row = dispIdx >= 0 ? dispIdx : realLine;
+            const col = lines[realLine].length;
+            return { top: row * LH + 8, left: col * CW + PAD };
+        });
+    }
+    _selectAllOccurrences() {
+        const ta = this.ta;
+        const s = ta.selectionStart, e = ta.selectionEnd;
+        if (s === e)
+            return;
+        const word = ta.value.slice(s, e);
+        const escaped = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const re = new RegExp(escaped, 'g');
+        const cursors = [];
+        let m;
+        while ((m = re.exec(ta.value)) !== null) {
+            if (m.index !== s)
+                cursors.push({ pos: m.index });
+        }
+        this._extraCursors = cursors;
+    }
+    _runSearch() {
+        const q = this._searchQuery;
+        if (!q) {
+            this._matches = [];
+            return;
+        }
+        try {
+            const re = new RegExp(q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
+            const matches = [];
+            let m;
+            while ((m = re.exec(this._value)) !== null) {
+                matches.push({ start: m.index, end: m.index + m[0].length });
+            }
+            this._matches = matches;
+            if (this._matchIdx >= matches.length)
+                this._matchIdx = 0;
+        }
+        catch {
+            this._matches = [];
+        }
+    }
+    _searchNext() {
+        if (!this._matches.length)
+            return;
+        this._matchIdx = (this._matchIdx + 1) % this._matches.length;
+        this._jumpToMatch(this._matchIdx);
+    }
+    _searchPrev() {
+        if (!this._matches.length)
+            return;
+        this._matchIdx = (this._matchIdx - 1 + this._matches.length) % this._matches.length;
+        this._jumpToMatch(this._matchIdx);
+    }
+    _jumpToMatch(idx) {
+        const m = this._matches[idx];
+        if (!m || !this.ta)
+            return;
+        this.ta.setSelectionRange(m.start, m.end);
+        this.ta.focus();
+        const before = this._value.slice(0, m.start);
+        const line = before.split('\n').length - 1;
+        const dispIdx = this._displayLines.findIndex(dl => dl.real === line);
+        const row = dispIdx >= 0 ? dispIdx : line;
+        this.codeContainer.scrollTop = Math.max(0, row * LH - 100);
+    }
+    _replaceOne() {
+        const m = this._matches[this._matchIdx];
+        if (!m)
+            return;
+        this.history.pushNow({ value: this._value, selStart: m.start, selEnd: m.end });
+        const v = this._value.slice(0, m.start) + this._replaceQuery + this._value.slice(m.end);
+        this._applyValue(v, m.start, m.start + this._replaceQuery.length);
+        this._runSearch();
+    }
+    _replaceAll() {
+        if (!this._searchQuery)
+            return;
+        this.history.pushNow({ value: this._value, selStart: 0, selEnd: 0 });
+        try {
+            const re = new RegExp(this._searchQuery.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
+            const v = this._value.replace(re, this._replaceQuery);
+            this._applyValue(v, 0, 0);
+            this._runSearch();
+        }
+        catch { }
+    }
+    _searchHighlights() {
+        return this._matches.map((m, idx) => {
+            const before = this._value.slice(0, m.start);
+            const lines = before.split('\n');
+            const realLine = lines.length - 1;
+            const dispIdx = this._displayLines.findIndex(dl => dl.real === realLine);
+            const row = dispIdx >= 0 ? dispIdx : realLine;
+            const col = lines[realLine].length;
+            const len = m.end - m.start;
+            return { top: row * LH + 8, left: col * CW + PAD, width: len * CW, isCur: idx === this._matchIdx };
+        });
+    }
+    _tryShowAC() {
+        if (!this.ta)
+            return;
+        const pos = this.ta.selectionStart;
+        if (this.ta.selectionStart !== this.ta.selectionEnd) {
+            this._acOpen = false;
+            return;
+        }
+        const before = this._value.slice(0, pos);
+        const m = before.match(/[\w.@#-]+$/);
+        const prefix = m ? m[0] : '';
+        if (prefix.length < 1) {
+            this._acOpen = false;
+            return;
+        }
+        const items = getCompletions(prefix, this._lang);
+        if (!items.length) {
+            this._acOpen = false;
+            return;
+        }
+        this._acItems = items;
+        this._acIndex = 0;
+        this._acOpen = true;
+        // Position
+        const lines = before.split('\n');
+        const dispIdx = this._displayLines.findIndex(dl => dl.real === lines.length - 1);
+        const row = dispIdx >= 0 ? dispIdx : lines.length - 1;
+        const col = lines[lines.length - 1].length;
+        this._acX = col * CW + PAD;
+        this._acY = (row + 1) * LH + 8;
+    }
+    _acMove(dir) {
+        this._acIndex = clamp(this._acIndex + dir, 0, this._acItems.length - 1);
+        // Auto scroll to the selected item avoiding overlap
+        if (this.acContainer) {
+            // Wait for DOM to render the selected class (since Stencil is async)
+            // But actually we can just scroll immediately since the items are already in DOM,
+            // we just need the offsetTop of the corresponding item.
+            setTimeout(() => {
+                if (!this.acContainer)
+                    return;
+                const itemElement = this.acContainer.children[this._acIndex];
+                if (!itemElement)
+                    return;
+                const containerTop = this.acContainer.scrollTop;
+                const containerBottom = containerTop + this.acContainer.clientHeight;
+                const itemTop = itemElement.offsetTop;
+                const itemBottom = itemTop + itemElement.offsetHeight;
+                if (itemBottom > containerBottom) {
+                    this.acContainer.scrollTop = itemBottom - this.acContainer.clientHeight;
+                }
+                else if (itemTop < containerTop) {
+                    this.acContainer.scrollTop = itemTop;
+                }
+            }, 10);
+        }
+    }
+    _acAccept() {
+        const item = this._acItems[this._acIndex];
+        if (!item)
+            return;
+        const ta = this.ta;
+        const pos = ta.selectionStart;
+        const before = this._value.slice(0, pos);
+        const m = before.match(/[\w.@#-]+$/);
+        const prefix = m ? m[0] : '';
+        const insert = (item.insert ?? item.label).replace(/\$\{\d+:[^}]+\}|\$\d+/g, '');
+        const v = this._value.slice(0, pos - prefix.length) + insert + this._value.slice(pos);
+        const newPos = pos - prefix.length + insert.length;
+        this._applyValue(v, newPos, newPos);
+        this._acOpen = false;
+    }
+    _formatDoc() {
+        if (this._lang !== 'json')
+            return;
+        try {
+            const formatted = JSON.stringify(JSON.parse(this._value), null, this.tabSize);
+            this.history.pushNow({ value: this._value, selStart: 0, selEnd: 0 });
+            this._applyValue(formatted, 0, 0);
+        }
+        catch {
+            /* invalid json */
+        }
+    }
+    _refreshAST() {
+        if (this._lang !== 'js') {
+            this._astRoot = null;
+            return;
+        }
+        this._astRoot = parseAST(this._value);
+    }
+    _togglePanel(p) {
+        this._panel = this._panel === p ? null : p;
+        if (this._panel === 'ast')
+            this._refreshAST();
+        if (this._panel === 'plugins')
+            this._pluginList = this.plugins.list();
+    }
+    // ── Render helpers ─────────────────────────────────────────────────────────
+    _renderACIcon(type) {
+        const MAP = {
+            kw: 'K',
+            fn: 'F',
+            var: 'V',
+            prop: 'P',
+            snip: 'S',
+            tag: 'T',
+            attr: 'A',
+        };
+        return MAP[type] ?? '?';
+    }
+    _renderASTTree(node, depth = 0) {
+        if (!node)
+            return '';
+        if (Array.isArray(node)) {
+            if (!node.length)
+                return '<span class="x-code-editor-ast-val">[]</span>';
+            return node.map(n => this._renderASTTree(n, depth)).join('');
+        }
+        const { type, ...rest } = node;
+        const keys = Object.keys(rest).filter(k => !k.startsWith('_'));
+        const id = `n${Math.random().toString(36).slice(2, 8)}`;
+        const childHtml = keys
+            .map(k => {
+            const v = rest[k];
+            if (v === null || v === undefined)
+                return '';
+            const rendered = typeof v === 'object' ? this._renderASTTree(v, depth + 1) : `<span class="x-code-editor-ast-val">${escH(String(v))}</span>`;
+            return `<div class="x-code-editor-ast-row"><span class="x-code-editor-ast-key">${escH(k)}:</span> ${rendered}</div>`;
+        })
+            .filter(Boolean)
+            .join('');
+        if (!childHtml)
+            return `<span class="x-code-editor-ast-type">${escH(type ?? '')}</span>`;
+        return `<div class="x-code-editor-ast-node">
+      <span class="x-code-editor-ast-toggle" onclick="this.nextElementSibling.style.display=this.nextElementSibling.style.display==='none'?'':'none'">
+        ▾ <span class="x-code-editor-ast-type">${escH(type ?? '')}</span>
+      </span>
+      <div id="${id}" class="x-code-editor-ast-children">${childHtml}</div>
+    </div>`;
+    }
+    // ==================== Render ====================
+    render() {
+        const bracketHls = this._bracketHighlights();
+        const searchHls = this._searchHighlights();
+        const extraCursorPositions = this._extraCursorPositions();
+        const totalLines = this._displayLines.length;
+        const containerH = Math.max(totalLines * LH + 32, 300);
+        const acPrefix = (() => {
+            if (!this.ta)
+                return '';
+            const before = this._value.slice(0, this.ta.selectionStart);
+            return before.match(/[\w.@#-]+$/)?.[0] ?? '';
+        })();
+        const wrapperClasses = {
+            'x-code-editor-root': true,
+            [`theme-${this.theme}`]: true,
+            [this.classNames?.root ?? '']: !!this.classNames?.root,
+        };
+        const editorBoxClasses = {
+            'x-code-editor-editor-wrap': true,
+            [this.classNames?.editorBox ?? '']: !!this.classNames?.editorBox,
+        };
+        return (h(Host, { class: wrapperClasses, style: this.styles?.root }, h("div", { class: { 'x-code-editor-toolbar': true, [this.classNames?.toolbar ?? '']: !!this.classNames?.toolbar }, style: this.styles?.toolbar }, h("button", { class: "x-code-editor-tbtn", onClick: () => {
+                this._showSearch = true;
+            } }, "\u2315 Search"), h("button", { class: "x-code-editor-tbtn", onClick: () => {
+                this._showSearch = true;
+                this._showReplace = !this._showReplace;
+            } }, "\u21C4 Replace"), h("span", { class: "x-code-editor-tsep" }), h("button", { class: "x-code-editor-tbtn", onClick: () => this._undo(), title: "Ctrl+Z" }, "\u21BA Undo"), h("button", { class: "x-code-editor-tbtn", onClick: () => this._redo(), title: "Ctrl+Y" }, "\u21BB Redo"), h("span", { class: "x-code-editor-tsep" }), h("button", { class: "x-code-editor-tbtn", onClick: () => this._foldAll() }, "\u229F Fold All"), h("button", { class: "x-code-editor-tbtn", onClick: () => this._unfoldAll() }, "\u229E Unfold All"), h("span", { class: "x-code-editor-tsep" }), h("button", { class: `x-code-editor-tbtn${this._panel === 'ast' ? ' x-code-editor-active' : ''}`, onClick: () => this._togglePanel('ast') }, "\uD83C\uDF32 AST"), h("button", { class: `x-code-editor-tbtn${this._panel === 'plugins' ? ' x-code-editor-active' : ''}`, onClick: () => this._togglePanel('plugins') }, "\u2699 Plugins"), this._lang === 'json' && (h("button", { class: "x-code-editor-tbtn", onClick: () => this._formatDoc() }, "\u2726 Format")), h("span", { class: "x-code-editor-toolbar-lang" }, LANG_NAMES[this._lang])), this._showSearch && (h("div", { class: "x-code-editor-search-bar" }, h("input", { class: "x-code-editor-search-input", type: "text", placeholder: "Find\u2026", value: this._searchQuery, onInput: e => {
+                this._searchQuery = e.target.value;
+                this._runSearch();
+            }, onKeyDown: e => {
+                if (e.key === 'Enter')
+                    e.shiftKey ? this._searchPrev() : this._searchNext();
+                if (e.key === 'Escape') {
+                    this._showSearch = false;
+                    this._matches = [];
+                }
+            } }), this._showReplace && (h("input", { class: "x-code-editor-search-input", type: "text", placeholder: "Replace\u2026", value: this._replaceQuery, onInput: e => {
+                this._replaceQuery = e.target.value;
+            } })), h("button", { class: "x-code-editor-sbar-btn", onClick: () => this._searchPrev() }, "\u2191"), h("button", { class: "x-code-editor-sbar-btn", onClick: () => this._searchNext() }, "\u2193"), this._showReplace && (h(Fragment, null, h("button", { class: "x-code-editor-sbar-btn", onClick: () => this._replaceOne() }, "Replace"), h("button", { class: "x-code-editor-sbar-btn", onClick: () => this._replaceAll() }, "All"))), h("span", { class: "x-code-editor-match-count" }, this._matches.length > 0 ? `${this._matchIdx + 1} / ${this._matches.length}` : this._searchQuery ? '0 matches' : ''), h("button", { class: "x-code-editor-sbar-close", onClick: () => {
+                this._showSearch = false;
+                this._matches = [];
+            } }, "\u2715"))), h("div", { class: "x-code-editor-main-area" }, h("div", { class: editorBoxClasses, style: this.styles?.editorBox }, h("div", { class: { 'x-code-editor-gutter': true, [this.classNames?.gutter ?? '']: !!this.classNames?.gutter }, style: this.styles?.gutter }, h("canvas", { ref: el => (this.gutterCanvas = el), class: "x-code-editor-gutter-canvas", onClick: e => {
+                const rect = e.currentTarget.getBoundingClientRect();
+                const y = e.clientY - rect.top + this.codeContainer.scrollTop;
+                const dispIdx = Math.floor(y / LH);
+                const dl = this._displayLines[dispIdx];
+                if (dl && this.plugins.isEnabled('fold'))
+                    this._toggleFold(dl.real);
+            } })), h("div", { class: "x-code-editor-code-container", ref: el => (this.codeContainer = el) }, this.plugins.isEnabled('line-highlight') && h("div", { class: "x-code-editor-cur-line-hl", style: { top: `${this._cursorLine * LH + 8}px` } }), bracketHls.map(b => (h("div", { class: "x-code-editor-bracket-hl", style: { top: `${b.top}px`, left: `${b.left}px` } }))), searchHls.map(s => (h("div", { class: `x-code-editor-search-hl${s.isCur ? ' x-code-editor-search-cur' : ''}`, style: { top: `${s.top}px`, left: `${s.left}px`, width: `${s.width}px` } }))), extraCursorPositions.map(p => (h("div", { class: "x-code-editor-extra-cursor", style: { top: `${p.top}px`, left: `${p.left}px` } }))), this._wordHls.map(w => (h("div", { class: "x-code-editor-word-hl", style: { top: `${w.top}px`, left: `${w.left}px`, width: `${w.width}px` } }))), h("div", { class: "x-code-editor-highlight-layer", style: { minHeight: `${containerH}px` }, innerHTML: this._highlighted, onClick: e => {
+                const target = e.target;
+                if (target.classList.contains('x-code-editor-folded-pill')) {
+                    const line = parseInt(target.dataset.line ?? '0', 10);
+                    const f = new Set(this._folds);
+                    f.delete(line);
+                    this._folds = f;
+                    this._reHighlight();
+                }
+            } }), h("textarea", { ref: el => (this.ta = el), class: { 'x-code-editor-code-input': true, [this.classNames?.textarea ?? '']: !!this.classNames?.textarea }, spellcheck: false, autocomplete: "off", autocorrect: "off", autocapitalize: "off", readonly: this.readonly, style: { minHeight: `${containerH}px` }, onInput: () => this._onInput(), onKeyDown: e => this._onKeydown(e), onClick: () => this._onCursorChange(), onKeyUp: () => this._onCursorChange(), onMouseUp: () => this._onCursorChange(), onMouseDown: e => {
+                if (e.altKey) {
+                    e.preventDefault();
+                    this._addExtraCursor(e);
+                }
+            }, onScroll: () => this._drawGutter() }))), this._panel === 'ast' && (h("div", { class: "x-code-editor-side-panel" }, h("div", { class: "x-code-editor-panel-header" }, "AST Explorer", h("button", { class: "x-code-editor-panel-close", onClick: () => (this._panel = null) }, "\u2715")), h("div", { class: "x-code-editor-panel-body" }, this._lang !== 'js' ? (h("p", { class: "x-code-editor-panel-hint" }, "AST available for JavaScript only")) : this._astRoot ? (h("div", { class: "x-code-editor-ast-tree", innerHTML: this._renderASTTree(this._astRoot) })) : (h("p", { class: "x-code-editor-panel-hint" }, "Parsing\u2026"))))), this._panel === 'plugins' && (h("div", { class: "x-code-editor-side-panel" }, h("div", { class: "x-code-editor-panel-header" }, "Plugins", h("button", { class: "x-code-editor-panel-close", onClick: () => (this._panel = null) }, "\u2715")), h("div", { class: "x-code-editor-panel-body" }, this._pluginList.map(p => (h("div", { class: "x-code-editor-plugin-card" }, h("div", { class: "x-code-editor-plugin-card-header" }, h("span", { class: "x-code-editor-plugin-name" }, p.name), h("div", { class: `x-code-editor-toggle${p.enabled ? ' x-code-editor-on' : ''}`, onClick: () => {
+                this.plugins.toggle(p.id);
+                this._pluginList = this.plugins.list();
+                this._reHighlight();
+            } })), h("p", { class: "x-code-editor-plugin-desc" }, p.description)))))))), this._acOpen && this._acItems.length > 0 && (h("div", { class: "x-code-editor-autocomplete", ref: el => (this.acContainer = el), style: {
+                left: `${this._acX}px`,
+                top: `${this._acY - (this.codeContainer?.scrollTop || 0) + 32 + (this._showSearch ? 36 : 0)}px`,
+            } }, this._acItems.map((item, i) => {
+            const hl = item.label.slice(0, acPrefix.length);
+            const rest = item.label.slice(acPrefix.length);
+            return (h("div", { class: `x-code-editor-ac-item${i === this._acIndex ? ' x-code-editor-selected' : ''}`, onClick: () => {
+                    this._acIndex = i;
+                    this._acAccept();
+                } }, h("span", { class: `x-code-editor-ac-icon x-code-editor-ac-${item.type}` }, this._renderACIcon(item.type)), h("span", { class: "x-code-editor-ac-label" }, h("b", null, hl), rest), h("span", { class: "x-code-editor-ac-detail" }, item.detail)));
+        }))), h("div", { class: "x-code-editor-statusbar" }, h("span", { class: "x-code-editor-sb-cursor" }, "Ln ", this._cursorLine + 1, ", Col ", this._cursorCol + 1), this._selLen > 0 && h("span", { class: "x-code-editor-sb-sel" }, this._selLen, " selected"), this._extraCursors.length > 0 && h("span", { class: "x-code-editor-sb-multicursor" }, "+", this._extraCursors.length, " cursors"), this._extraCursors.length > 0 && (h("button", { class: "x-code-editor-sb-clear-cursors", onClick: () => (this._extraCursors = []) }, "\u00D7 clear")), h("span", { class: "x-code-editor-sb-spacer" }), h("span", { class: "x-code-editor-sb-utf" }, "UTF-8"), h("span", { class: "x-code-editor-sb-lf" }, "LF"), h("span", { class: "x-code-editor-sb-lang" }, LANG_NAMES[this._lang]), h("span", { class: "x-code-editor-sb-chars" }, this._value.length, " chars"))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueProp": 0
+            }],
+        "language": [{
+                "onLangProp": 0
+            }]
+    }; }
+};
+XCodeEditor.style = xCodeEditorCss();
+
+export { XCodeEditor as x_code_editor };