@xlabs-store/core 0.0.1 → 0.0.2

package/dist/collection/components/x-code-editor/x-code-editor.js

@@ -0,0 +1,1497 @@
+import { Host, h, Fragment } from "@stencil/core";
+import { tokenize } from "../../utils/code-editor/tokenizer";
+import { parseAST } from "../../utils/code-editor/ast-parser";
+import { getCompletions } from "../../utils/code-editor/autocomplete-db";
+import { EditHistory } from "../../utils/code-editor/history";
+import { PluginSystem } from "../../utils/code-editor/plugin-system";
+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;');
+}
+/**
+ * @component x-code-editor
+ * @description Full-featured code editor Web Component built with StencilJS.
+ *
+ * @example
+ * <x-code-editor language="js" theme="dark" tab-size="2"></x-code-editor>
+ */
+export class XCodeEditor {
+    // ==================== 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 = [];
+    // ==================== DOM refs ====================
+    hostEl;
+    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(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, pos: _pos } = 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 is() { return "x-code-editor"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["x-code-editor.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["x-code-editor.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the code editor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Language",
+                    "resolved": "\"css\" | \"html\" | \"js\" | \"json\"",
+                    "references": {
+                        "Language": {
+                            "location": "import",
+                            "path": "../../utils/code-editor/tokenizer",
+                            "id": "src/utils/code-editor/tokenizer.ts::Language",
+                            "referenceLocation": "Language"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The programming language for syntax highlighting."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "language",
+                "defaultValue": "'js'"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the editor is read-only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "tabSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The tab size used for indentation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tab-size",
+                "defaultValue": "2"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Editor theme ('dark' or 'light')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "theme",
+                "defaultValue": "'dark'"
+            },
+            "showMinimap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the minimap (not implemented yet)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-minimap",
+                "defaultValue": "false"
+            },
+            "classNames": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CodeEditorClassNames",
+                    "resolved": "CodeEditorClassNames",
+                    "references": {
+                        "CodeEditorClassNames": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-code-editor/types.ts::CodeEditorClassNames",
+                            "referenceLocation": "CodeEditorClassNames"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom class names for editor components."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "styles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "CodeEditorStyles",
+                    "resolved": "CodeEditorStyles",
+                    "references": {
+                        "CodeEditorStyles": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-code-editor/types.ts::CodeEditorStyles",
+                            "referenceLocation": "CodeEditorStyles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Custom styles for editor components."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_value": {},
+            "_lang": {},
+            "_cursorLine": {},
+            "_cursorCol": {},
+            "_selLen": {},
+            "_extraCursors": {},
+            "_folds": {},
+            "_matches": {},
+            "_matchIdx": {},
+            "_searchQuery": {},
+            "_replaceQuery": {},
+            "_showSearch": {},
+            "_showReplace": {},
+            "_panel": {},
+            "_astRoot": {},
+            "_pluginList": {},
+            "_acItems": {},
+            "_acIndex": {},
+            "_acOpen": {},
+            "_acX": {},
+            "_acY": {},
+            "_highlighted": {},
+            "_displayLines": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "codeChange",
+                "name": "codeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CodeChangeEventDetail",
+                    "resolved": "CodeChangeEventDetail",
+                    "references": {
+                        "CodeChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-code-editor/types.ts::CodeChangeEventDetail",
+                            "referenceLocation": "CodeChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "cursorMove",
+                "name": "cursorMove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "CursorMoveEventDetail",
+                    "resolved": "CursorMoveEventDetail",
+                    "references": {
+                        "CursorMoveEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-code-editor/types.ts::CursorMoveEventDetail",
+                            "referenceLocation": "CursorMoveEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "langChange",
+                "name": "langChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "LangChangeEventDetail",
+                    "resolved": "LangChangeEventDetail",
+                    "references": {
+                        "LangChangeEventDetail": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/x-code-editor/types.ts::LangChangeEventDetail",
+                            "referenceLocation": "LangChangeEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(v: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "v",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "setLanguage": {
+                "complexType": {
+                    "signature": "(l: Language) => Promise<void>",
+                    "parameters": [{
+                            "name": "l",
+                            "type": "\"json\" | \"html\" | \"js\" | \"css\"",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Language": {
+                            "location": "import",
+                            "path": "../../utils/code-editor/tokenizer",
+                            "id": "src/utils/code-editor/tokenizer.ts::Language",
+                            "referenceLocation": "Language"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "undo": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "redo": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "format": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "foldAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "unfoldAll": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "openSearch": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getAST": {
+                "complexType": {
+                    "signature": "() => Promise<ASTNode | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ASTNode": {
+                            "location": "import",
+                            "path": "../../utils/code-editor/ast-parser",
+                            "id": "src/utils/code-editor/ast-parser.ts::ASTNode",
+                            "referenceLocation": "ASTNode"
+                        }
+                    },
+                    "return": "Promise<ASTNode>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "registerPlugin": {
+                "complexType": {
+                    "signature": "(def: Parameters<PluginSystem[\"register\"]>[0]) => Promise<void>",
+                    "parameters": [{
+                            "name": "def",
+                            "type": "PluginDef",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Parameters": {
+                            "location": "global",
+                            "id": "global::Parameters"
+                        },
+                        "PluginSystem": {
+                            "location": "import",
+                            "path": "../../utils/code-editor/plugin-system",
+                            "id": "src/utils/code-editor/plugin-system.ts::PluginSystem",
+                            "referenceLocation": "PluginSystem"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueProp"
+            }, {
+                "propName": "language",
+                "methodName": "onLangProp"
+            }];
+    }
+}