@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/editor/code/view.js

@@ -0,0 +1,1560 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { flush } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { clamp } from '../../../shared/clamp.js';
+import { mac } from '../../../shared/platform.js';
+import { observeSize } from '../../../shared/resize.js';
+import { copied, read, write } from './clipboard.js';
+import { addNextOccurrence, bracket, closeIndent, deleteCharacter, deletePair, detectIndent, indent, insertText, lineCommand, newline, toggleComment } from './commands.js';
+import { composition } from './composition.js';
+import { features } from './features.js';
+import { RANGES, write as writeField } from './field.js';
+import { find } from './find.js';
+import { enclosingFold, foldAt, mapFolds, outerFolds, pairAt, structureOf } from './folding.js';
+import { goto } from './goto.js';
+import { gutter } from './gutter.js';
+import { commands, keymap } from './keymap.js';
+import { EditorLayout, irregular } from './layout.js';
+import { minimap } from './minimap.js';
+import { move } from './navigation.js';
+import { pointer } from './pointer.js';
+import { inputEdit, NativeText } from './projection.js';
+import { markup, marks, pool, rowBreaks, rowOffset, rowRect, tokens } from './rows.js';
+import { search as scan } from './search.js';
+import { services } from './services/index.js';
+import { commentSyntax, languageFor, syntaxCache } from './syntax.js';
+const template_0psre1t3 = template_u1.template(`<div class='code-editor'><!--$--><!--$--><div class='code-editor-surface'><div aria-hidden='true' class='code-editor-overlay'><div class='code-editor-rulers'></div><div class='code-editor-lines'></div><div class='code-editor-decorations'><!--$--></div></div><div aria-hidden='true' class='code-editor-gutter'><div class='code-editor-numbers'></div></div><!--$--><!--$--><!--$--><textarea autocapitalize='off' autocomplete='off' autocorrect='off' class='code-editor-input --scrollbar' dir='ltr' spellcheck='false'></textarea><span aria-hidden='true' class='code-editor-ruler'>0000000000000000000000000000000000000000000000000000000000000000</span></div><!--$--><span class='code-editor-help'>Press Escape then Tab to move focus out of the editor.`);
+const template_0psre1tl = template_u1.template(`<div>`);
+class ReactiveObject_0psre1t0 extends reactivity_u0.ReactiveObject {
+    #digits;
+    #fold = this[reactivity_u0.SIGNAL](true);
+    #highlight = this[reactivity_u0.SIGNAL](true);
+    #label = this[reactivity_u0.SIGNAL]('Code editor');
+    #lineNumbers = this[reactivity_u0.SIGNAL](true);
+    #minimap = this[reactivity_u0.SIGNAL](false);
+    #name = this[reactivity_u0.SIGNAL]('');
+    #placeholder = this[reactivity_u0.SIGNAL]('');
+    #readonly = this[reactivity_u0.SIGNAL](false);
+    #tabSize = this[reactivity_u0.SIGNAL](4);
+    #trackHeight = this[reactivity_u0.SIGNAL](0);
+    #trackWidth = this[reactivity_u0.SIGNAL](0);
+    #whitespace = this[reactivity_u0.SIGNAL](false);
+    #width = this[reactivity_u0.SIGNAL](0);
+    #wrap = this[reactivity_u0.SIGNAL](false);
+    #x = this[reactivity_u0.SIGNAL](12);
+    #y = this[reactivity_u0.SIGNAL](12);
+    constructor(_p0) {
+        super(null);
+        this.#digits = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get digits() {
+        return reactivity_u0.read(this.#digits);
+    }
+    set digits(_v0) {
+        reactivity_u0.write(this.#digits, _v0);
+    }
+    get fold() {
+        return reactivity_u0.read(this.#fold);
+    }
+    set fold(_v1) {
+        reactivity_u0.write(this.#fold, _v1);
+    }
+    get highlight() {
+        return reactivity_u0.read(this.#highlight);
+    }
+    set highlight(_v2) {
+        reactivity_u0.write(this.#highlight, _v2);
+    }
+    get label() {
+        return reactivity_u0.read(this.#label);
+    }
+    set label(_v3) {
+        reactivity_u0.write(this.#label, _v3);
+    }
+    get lineNumbers() {
+        return reactivity_u0.read(this.#lineNumbers);
+    }
+    set lineNumbers(_v4) {
+        reactivity_u0.write(this.#lineNumbers, _v4);
+    }
+    get minimap() {
+        return reactivity_u0.read(this.#minimap);
+    }
+    set minimap(_v5) {
+        reactivity_u0.write(this.#minimap, _v5);
+    }
+    get name() {
+        return reactivity_u0.read(this.#name);
+    }
+    set name(_v6) {
+        reactivity_u0.write(this.#name, _v6);
+    }
+    get placeholder() {
+        return reactivity_u0.read(this.#placeholder);
+    }
+    set placeholder(_v7) {
+        reactivity_u0.write(this.#placeholder, _v7);
+    }
+    get readonly() {
+        return reactivity_u0.read(this.#readonly);
+    }
+    set readonly(_v8) {
+        reactivity_u0.write(this.#readonly, _v8);
+    }
+    get tabSize() {
+        return reactivity_u0.read(this.#tabSize);
+    }
+    set tabSize(_v9) {
+        reactivity_u0.write(this.#tabSize, _v9);
+    }
+    get trackHeight() {
+        return reactivity_u0.read(this.#trackHeight);
+    }
+    set trackHeight(_v10) {
+        reactivity_u0.write(this.#trackHeight, _v10);
+    }
+    get trackWidth() {
+        return reactivity_u0.read(this.#trackWidth);
+    }
+    set trackWidth(_v11) {
+        reactivity_u0.write(this.#trackWidth, _v11);
+    }
+    get whitespace() {
+        return reactivity_u0.read(this.#whitespace);
+    }
+    set whitespace(_v12) {
+        reactivity_u0.write(this.#whitespace, _v12);
+    }
+    get width() {
+        return reactivity_u0.read(this.#width);
+    }
+    set width(_v13) {
+        reactivity_u0.write(this.#width, _v13);
+    }
+    get wrap() {
+        return reactivity_u0.read(this.#wrap);
+    }
+    set wrap(_v14) {
+        reactivity_u0.write(this.#wrap, _v14);
+    }
+    get x() {
+        return reactivity_u0.read(this.#x);
+    }
+    set x(_v15) {
+        reactivity_u0.write(this.#x, _v15);
+    }
+    get y() {
+        return reactivity_u0.read(this.#y);
+    }
+    set y(_v16) {
+        reactivity_u0.write(this.#y, _v16);
+    }
+}
+class ReactiveObject_0psre1t1 extends reactivity_u0.ReactiveObject {
+    #kind = this[reactivity_u0.SIGNAL]('');
+    #style = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get kind() {
+        return reactivity_u0.read(this.#kind);
+    }
+    set kind(_v0) {
+        reactivity_u0.write(this.#kind, _v0);
+    }
+    get style() {
+        return reactivity_u0.read(this.#style);
+    }
+    set style(_v1) {
+        reactivity_u0.write(this.#style, _v1);
+    }
+}
+const NAVIGATION = /^(ArrowDown|ArrowLeft|ArrowRight|ArrowUp|End|Home|PageDown|PageUp)$/;
+const OCCURRENCE_LIMIT = 10000;
+const OVERSCAN = 4;
+const TOKEN_COLORS = [
+    'color',
+    'comment',
+    'function',
+    'keyword',
+    'number',
+    'operator',
+    'property',
+    'regexp',
+    'selector',
+    'string',
+    'tag',
+    'type',
+    'variable'
+];
+let uid = 0;
+function ending(model) {
+    return model.eol === '\r\n' ? 'crlf' : 'lf';
+}
+function pixels(value) {
+    return parseFloat(value) || 0;
+}
+const view = (model, callbacks, receive) => {
+    let accepting = -1, apple = mac(), before = null, beforeRanges = [], beforeSelection, bound = {}, bracketPair = { cache: null, offset: -1, pair: null, revision: -1 }, breaks = { key: '', map: new Map() }, cache = syntaxCache(model, 'plain'), decorations = new reactivity_u0.ReactiveArray(), disposed = false, drop = null, escapeTab = false, folded = [], foldedLines = new Map(), foldMarks = new Map(), foldRevision = -1, frame = 0, goals = [], help = `code-editor-help-${++uid}`, host, inputData = null, inputType = '', keys = keymap(apple), language = 'plain', layout = null, lines, metrics = { charWidth: 7.8, clientWidth: 0, lineHeight: 20, minimap: 0, padLeft: 12, padRight: 12, padTop: 12, width: 0 }, occurrences = { key: '', marks: [] }, options = {}, palette = {}, pending = null, pendingValue, projection = new NativeText(model.value), rows = pool(), ruler, state = reactivity_u0.reactive({
+        ...model.state,
+        indent: { size: 4, tabs: false },
+        language: 'plain',
+        lineEnding: ending(model),
+        problems: { errors: 0, warnings: 0 },
+        selection: { ...model.selection },
+        selections: model.selections.length
+    }), textarea, ui = new ReactiveObject_0psre1t0(Math.max(3, String(model.lineCount).length)), unsubscribe, unit, visited = new WeakMap(), writing = false, written = '';
+    let ime = composition({
+        begin: () => {
+            capture();
+            reveal(true);
+            beforeRanges = model.selections;
+            beforeSelection = model.selection;
+            model.breakHistory();
+        },
+        commit: (conflict) => {
+            if (conflict) {
+                reset();
+                written = '';
+                sync();
+            }
+            else {
+                accept('composition', true);
+            }
+            if (pendingValue !== undefined) {
+                let value = pendingValue;
+                pendingValue = undefined;
+                model.setValue(value, { source: 'external' });
+            }
+        }
+    });
+    let gestures = pointer({
+        busy: ime.busy,
+        capture,
+        get document() {
+            return model;
+        },
+        drop: (offset) => {
+            drop = offset;
+            schedule();
+        },
+        focus: () => textarea?.focus(),
+        insert: (text) => controller.insert(text),
+        offsetAt,
+        placeholder: placeholderAt,
+        readonly: () => !!options.readonly,
+        rows: rowsBetween,
+        select: (ranges, revealing = false) => {
+            model.selectMany(ranges);
+            sync(revealing);
+        },
+        transact: (edits, caret) => {
+            model.transact(edits, { selection: { start: caret }, source: 'drop' });
+            sync(true);
+        },
+        unfold: (placeholder) => {
+            unfold(folded.filter((fold) => fold.from !== placeholder.from));
+        }
+    });
+    let jump = goto({
+        focus: () => textarea?.focus(),
+        go: (line, column) => controller.goToLine(line, column)
+    });
+    let map = minimap({
+        focus: () => textarea?.focus(),
+        scroll: (top, relative) => {
+            if (!textarea) {
+                return;
+            }
+            textarea.scrollTop = relative ? textarea.scrollTop + top : top;
+            schedule();
+        }
+    });
+    let search = find({
+        get document() {
+            return model;
+        },
+        edit: editable,
+        focus: () => textarea?.focus(),
+        readonly: () => !!options.readonly,
+        reveal: (match) => {
+            model.select({ end: match.to, start: match.from });
+            sync(true);
+        },
+        selection: () => {
+            capture();
+            return model.selection;
+        },
+        update: schedule
+    });
+    let size = observeSize(() => measure());
+    let source = {
+        breaks: (index) => layout.breaksOf(index),
+        get count() {
+            return layout.count;
+        },
+        get height() {
+            return layout.height;
+        },
+        indexAt: (y) => layout.indexAt(y),
+        get lineHeight() {
+            return metrics.lineHeight;
+        },
+        rows: (index) => layout.rows(index),
+        get tabSize() {
+            return options.tabSize ?? 4;
+        },
+        text: (index) => projection.value.slice(layout.lineFrom(index), layout.end(index)),
+        tokens: tokensOf,
+        top: (index) => layout.top(index)
+    };
+    function accept(group, composed = false) {
+        if (disposed || !textarea) {
+            return;
+        }
+        if (options.readonly) {
+            reset();
+            written = '';
+            sync();
+            return;
+        }
+        let after = { end: textarea.selectionEnd, length: textarea.textLength, start: textarea.selectionStart }, direction = textarea.selectionDirection, native = before && !composed ? inputEdit(before, after, inputType, inputData) : null, ranges = beforeRanges.length ? beforeRanges : model.selections, edit, value;
+        if (native) {
+            edit = projection.toSourceEdit(model.value, native.from, native.to, native.insert);
+        }
+        else {
+            value = textarea.value;
+            if (composed &&
+                value === projection.value &&
+                beforeSelection &&
+                beforeSelection.start < beforeSelection.end &&
+                beforeRanges.length > 1 &&
+                after.start === after.end &&
+                after.start === projection.toNative(beforeSelection.end)) {
+                let text = model.value.slice(beforeSelection.start, beforeSelection.end);
+                reset();
+                insertText(model, text, 'composition');
+                sync();
+                return;
+            }
+            if (value === projection.value) {
+                reset();
+                capture();
+                return;
+            }
+            edit = projection.edit(model.value, value, beforeSelection, inputType);
+        }
+        let source = composed ? 'composition' : 'input';
+        if (edit.from === edit.to && !edit.insert) {
+            reset();
+            written = '';
+            sync();
+            return;
+        }
+        if (ranges.length > 1) {
+            let primary = ranges[0], left = edit.from - primary.start, right = edit.to - primary.end, edits = ranges.map((range) => ({
+                from: Math.max(0, range.start + left),
+                insert: edit.insert,
+                to: Math.min(model.value.length, range.end + right)
+            })), sorted = [...edits].sort((a, b) => a.from - b.from), carets = edits.map((item) => {
+                let shift = 0;
+                for (let i = 0, n = sorted.length; i < n && sorted[i].from < item.from; i++) {
+                    shift += sorted[i].insert.length - (sorted[i].to - sorted[i].from);
+                }
+                return { start: item.from + shift + item.insert.length };
+            });
+            written = value ?? textarea.value;
+            reset();
+            if (!model.transact(edits, { selections: carets, source }).accepted) {
+                sync();
+            }
+            return;
+        }
+        let caret = native
+            ? { direction, end: edit.from + edit.insert.length, start: edit.from + edit.insert.length }
+            : selectionAfter(edit, after, direction);
+        if (native) {
+            accepting = projection.value.length - (native.to - native.from) + native.insert.length;
+            written = projection.value;
+        }
+        else {
+            written = value;
+        }
+        reset();
+        model.replace(edit.from, edit.to, edit.insert, { group: composed ? undefined : group, selection: caret, source });
+        accepting = -1;
+    }
+    function activeLines(first, last) {
+        let geometry = layout, lines = new Set(), ranges = model.selections;
+        for (let i = 0, n = ranges.length; i < n; i++) {
+            let head = ranges[i].direction === 'backward' ? ranges[i].start : ranges[i].end, line = geometry.lineAt(projection.toNative(head));
+            if (line >= first && line < last) {
+                lines.add(line);
+            }
+        }
+        return lines;
+    }
+    function adopt() {
+        let memo = visited.get(model), { selections, ...single } = model.state;
+        reset();
+        accepting = -1;
+        cache = syntaxCache(model, language);
+        drop = null;
+        escapeTab = false;
+        folded = memo?.revision === model.revision ? memo.folded : [];
+        foldMarks.clear();
+        foldRevision = -1;
+        goals = [];
+        occurrences = { key: '', marks: [] };
+        pendingValue = undefined;
+        written = '';
+        Object.assign(state, single, { lineEnding: ending(model), selection: { ...single.selection }, selections: selections.length });
+        ui.digits = Math.max(3, String(model.lineCount).length);
+        gestures.reset();
+        jump.state.open = false;
+        extras.reset();
+        detect();
+        if (unsubscribe) {
+            subscribe();
+        }
+        flush();
+        rebuild({ left: memo?.left ?? 0, top: memo?.top ?? 0 });
+        search.result();
+    }
+    function capture() {
+        if (disposed || !textarea || ime.busy() || written !== projection.value) {
+            return;
+        }
+        let next = {
+            direction: textarea.selectionDirection,
+            end: projection.toSource(textarea.selectionEnd),
+            start: projection.toSource(textarea.selectionStart)
+        }, primary = model.selection;
+        if (next.start === primary.start &&
+            next.end === primary.end &&
+            (next.start === next.end || next.direction === primary.direction || primary.direction === 'none')) {
+            return;
+        }
+        model.selectMany([next, ...model.selections.slice(1)]);
+    }
+    function changeFold(line, close) {
+        if (disposed || ime.busy() || options.fold === false) {
+            return false;
+        }
+        if (!close) {
+            let next = folded.filter((fold) => fold.line !== line);
+            if (next.length === folded.length) {
+                return false;
+            }
+            unfold(next);
+            return true;
+        }
+        let range = foldAt(cache, line);
+        if (!range || foldedLines.has(line)) {
+            return false;
+        }
+        foldWith(range);
+        return true;
+    }
+    function clip(e, cut) {
+        if (disposed || ime.busy() || !e.clipboardData) {
+            return;
+        }
+        capture();
+        let ranges = copied(model);
+        write(e.clipboardData, model, ranges);
+        e.preventDefault();
+        if (cut && !options.readonly) {
+            model.selectMany(ranges);
+            controller.insert('');
+        }
+    }
+    function contentWidth(next) {
+        let field = textarea;
+        return field.getBoundingClientRect().width - (field.offsetWidth - field.clientWidth) - next.padLeft - next.padRight;
+    }
+    function deleteVisible(backwards, word = false) {
+        let affected = folded.filter((fold) => model.selections.some((range) => range.start === range.end && range.start === (backwards ? fold.to : fold.from)));
+        if (affected.length) {
+            unfold(folded.filter((fold) => !affected.includes(fold)));
+            return true;
+        }
+        return deleteCharacter(model, backwards, word);
+    }
+    function detect() {
+        let found = unit ? null : detectIndent(model.value), tabSize = options.tabSize ?? 4;
+        options.indent = unit ?? (found ? (found.tabs ? '\t' : ' '.repeat(found.size)) : '    ');
+        let tabs = options.indent.includes('\t'), size = tabs ? tabSize : options.indent.length;
+        if (state.indent.size !== size || state.indent.tabs !== tabs) {
+            state.indent = { size, tabs };
+        }
+    }
+    function editable(run) {
+        if (disposed || options.readonly || ime.busy()) {
+            return false;
+        }
+        capture();
+        reveal();
+        let changed = run();
+        sync(true);
+        return changed;
+    }
+    function element(line) {
+        let size = rows.slots.$length;
+        if (!lines || !size || rows.slots[line % size]?.line !== line) {
+            return null;
+        }
+        return lines.children[line % size] ?? null;
+    }
+    function foldState(line) {
+        if (foldRevision !== model.revision) {
+            foldMarks.clear();
+            foldRevision = model.revision;
+        }
+        if (foldedLines.has(line)) {
+            return 2;
+        }
+        let mark = foldMarks.get(line);
+        if (mark === undefined) {
+            foldMarks.set(line, mark = foldAt(cache, line) ? 1 : 0);
+        }
+        return mark;
+    }
+    function foldWith(range) {
+        folded = outerFolds([...folded, range]);
+        if (model.selections.some((selection) => selection.start > range.from && selection.start < range.to)) {
+            model.select({ start: Math.max(0, range.from - 1) });
+        }
+        rebuild();
+    }
+    function measure() {
+        if (disposed || !textarea || !host || !ruler) {
+            return;
+        }
+        let computed = getComputedStyle(textarea), style = getComputedStyle(host), fallback = style.getPropertyValue('--color').trim() || 'currentColor', colors = {}, next = {
+            charWidth: ruler.getBoundingClientRect().width / (ruler.textContent?.length || 1) || 7.8,
+            clientWidth: textarea.clientWidth,
+            lineHeight: pixels(computed.lineHeight) || 20,
+            minimap: pixels(style.getPropertyValue('--minimap-width')),
+            padLeft: pixels(computed.paddingLeft),
+            padRight: pixels(computed.paddingRight),
+            padTop: pixels(computed.paddingTop),
+            width: 0
+        };
+        next.width = contentWidth(next);
+        for (let i = 0, n = TOKEN_COLORS.length; i < n; i++) {
+            let kind = TOKEN_COLORS[i];
+            colors[kind] = style.getPropertyValue(`--${kind === 'color' ? 'literal' : kind}-color`).trim() || fallback;
+        }
+        let changed = !layout ||
+            next.charWidth !== metrics.charWidth ||
+            next.clientWidth !== metrics.clientWidth ||
+            next.lineHeight !== metrics.lineHeight ||
+            next.padLeft !== metrics.padLeft ||
+            next.padRight !== metrics.padRight ||
+            next.width !== metrics.width;
+        metrics = next;
+        palette = colors;
+        extras.measure();
+        if (changed) {
+            relayout();
+        }
+        schedule();
+    }
+    function moveSelection(key, extend, word = false, add = false, boundary = false) {
+        if (!layout) {
+            return;
+        }
+        if (!/^(ArrowDown|ArrowUp|PageDown|PageUp)$/.test(key) || boundary || add) {
+            goals = [];
+        }
+        let lineHeight = metrics.lineHeight, ranges = move(model, layout, projection, lineHeight, {
+            boundary,
+            extend,
+            goals,
+            key,
+            page: Math.max(lineHeight, (textarea?.clientHeight ?? 0) - lineHeight),
+            word
+        });
+        model.selectMany(add ? [...model.selections, ...ranges] : ranges, 'navigation');
+        sync(true);
+    }
+    function offsetAt(clientX, clientY) {
+        if (disposed || !textarea || !layout) {
+            return null;
+        }
+        let box = textarea.getBoundingClientRect(), x = clientX - box.left - metrics.padLeft + textarea.scrollLeft, y = clientY - box.top - metrics.padTop + textarea.scrollTop, index = layout.indexAt(y), row = element(index);
+        if (row && irregular(projection.value.slice(layout.lineFrom(index), layout.end(index)))) {
+            let local = rowOffset(row, clientX, clientY);
+            if (local !== null) {
+                return projection.toSource(layout.lineFrom(index) + local);
+            }
+        }
+        return projection.toSource(layout.offset(x, y));
+    }
+    function paint() {
+        frame = 0;
+        if (disposed || !textarea || !layout) {
+            return;
+        }
+        let clientHeight = textarea.clientHeight, clientWidth = textarea.clientWidth, scrollLeft = textarea.scrollLeft, scrollTop = textarea.scrollTop;
+        if (clientWidth !== metrics.clientWidth) {
+            metrics.clientWidth = clientWidth;
+            metrics.width = contentWidth(metrics);
+            relayout();
+        }
+        let trackHeight = textarea.offsetHeight - clientHeight, trackWidth = textarea.scrollHeight > clientHeight ? textarea.offsetWidth - clientWidth : 0;
+        if (trackHeight !== ui.trackHeight || trackWidth !== ui.trackWidth) {
+            ui.trackHeight = trackHeight;
+            ui.trackWidth = trackWidth;
+        }
+        let geometry = layout, lineHeight = metrics.lineHeight, first = geometry.indexAt(Math.max(0, scrollTop - metrics.padTop - OVERSCAN * lineHeight)), size = Math.ceil(clientHeight / lineHeight) + OVERSCAN * 2 + 1, last = Math.min(geometry.count, first + size), active = activeLines(first, last), context = prepare(first, last), slots = rows.slots, whitespace = !!options.whitespace;
+        rows.resize(size);
+        for (let line = first; line < last; line++) {
+            let from = geometry.lineFrom(line), number = geometry.number(line), slot = slots[line % size], to = geometry.end(line), text = projection.value.slice(from, to), highlights = marks(projection, from, to, context);
+            extras.decorate(line, from, to, text, highlights);
+            slot.active = active.has(line);
+            slot.change = extras.change(number);
+            slot.fold = ui.fold ? foldState(number) : 0;
+            slot.height = geometry.rows(line) * lineHeight;
+            slot.html = markup(text, tokensOf(line), highlights, whitespace);
+            slot.line = line;
+            slot.number = number;
+            slot.tint = extras.tint(number);
+            slot.top = geometry.top(line);
+        }
+        for (let line = last; line < first + size; line++) {
+            let slot = slots[line % size];
+            slot.active = false;
+            slot.change = '';
+            slot.html = '';
+            slot.line = -1;
+            slot.tint = '';
+        }
+        ui.x = metrics.padLeft - scrollLeft;
+        ui.y = metrics.padTop - scrollTop;
+        paintDecorations(scrollTop, clientHeight);
+        extras.paint(first, last, scrollTop, metrics.padTop);
+        lsp.paint();
+        if (options.minimap) {
+            map.paint(source, { clientHeight, scrollHeight: Math.max(textarea.scrollHeight, geometry.height + 2 * metrics.padTop), scrollTop }, palette, metrics.minimap);
+        }
+        if (geometry.wrap) {
+            settle(first, last);
+        }
+    }
+    function paintDecorations(scrollTop, clientHeight) {
+        let geometry = layout, items = [], lineHeight = metrics.lineHeight, ranges = model.selections, top = scrollTop - metrics.padTop, bottom = top + clientHeight;
+        for (let i = 1, n = ranges.length; i < n && items.length < 1000; i++) {
+            let range = ranges[i], end = geometry.rect(projection.toNative(range.end)), start = geometry.rect(projection.toNative(range.start));
+            if (end.top + lineHeight < top || start.top > bottom) {
+                continue;
+            }
+            for (let y = Math.max(start.top, top - ((top - start.top) % lineHeight)); range.start !== range.end && y <= Math.min(end.top, bottom) && items.length < 1000; y += lineHeight) {
+                let left = y === start.top ? start.left : 0, right = y === end.top ? end.left : geometry.width;
+                items.push({
+                    kind: 'code-editor-decoration code-editor-decoration--selection',
+                    style: `height: ${lineHeight}px; left: ${left}px; top: ${y}px; width: ${Math.max(1, right - left)}px;`
+                });
+            }
+            let caret = range.direction === 'backward' ? start : end;
+            items.push({
+                kind: 'code-editor-decoration code-editor-decoration--caret',
+                style: `height: ${lineHeight}px; left: ${caret.left}px; top: ${caret.top}px;`
+            });
+        }
+        if (drop !== null) {
+            let caret = geometry.rect(projection.toNative(drop));
+            items.push({
+                kind: 'code-editor-decoration code-editor-decoration--drop',
+                style: `height: ${lineHeight}px; left: ${caret.left}px; top: ${caret.top}px;`
+            });
+        }
+        while (decorations.$length < items.length) {
+            decorations.push(new ReactiveObject_0psre1t1());
+        }
+        if (decorations.$length > items.length) {
+            decorations.splice(items.length, decorations.$length - items.length);
+        }
+        for (let i = 0, n = items.length; i < n; i++) {
+            decorations[i].kind = items[i].kind;
+            decorations[i].style = items[i].style;
+        }
+    }
+    function placeholderAt(clientX, clientY) {
+        if (!folded.length || !textarea || !layout) {
+            return null;
+        }
+        let box = textarea.getBoundingClientRect(), placeholders = projection.placeholders(), x = clientX - box.left - metrics.padLeft + textarea.scrollLeft, y = clientY - box.top - metrics.padTop + textarea.scrollTop;
+        for (let i = 0, n = placeholders.length; i < n; i++) {
+            let end = layout.rect(placeholders[i].at + 1), start = layout.rect(placeholders[i].at), right = end.top === start.top ? end.left : start.left + metrics.charWidth;
+            if (y >= start.top && y < start.top + start.height && x >= start.left && x < right) {
+                return placeholders[i];
+            }
+        }
+        return null;
+    }
+    function prepare(first, last) {
+        let geometry = layout, from = geometry.lineFrom(first), selection = model.selection, to = last > first ? geometry.end(last - 1) : from, selected = selection.end - selection.start <= OCCURRENCE_LIMIT ? model.value.slice(selection.start, selection.end) : '', key = selected && !/[\r\n]/.test(selected) ? `${model.revision}\u0000${from}\u0000${to}\u0000${selected}` : '';
+        if (key !== occurrences.key) {
+            let found = key ? scan(projection.value.slice(from, to), selected, {}, '', 2000).matches : [], list = [];
+            for (let i = 0, n = found.length; i < n; i++) {
+                list.push({ from: found[i].from + from, to: found[i].to + from });
+            }
+            occurrences = { key, marks: list };
+        }
+        let head = selection.direction === 'backward' ? selection.start : selection.end, { index, matches } = search.matches(projection.toSource(from));
+        if (bracketPair.cache !== cache || bracketPair.offset !== head || bracketPair.revision !== model.revision) {
+            bracketPair = { cache, offset: head, pair: pairAt(cache, head), revision: model.revision };
+        }
+        return {
+            active: search.state.index,
+            diagnostics: lsp.marks(projection.toSource(from), projection.toSource(to)),
+            index,
+            matches,
+            occurrences: occurrences.marks,
+            pair: bracketPair.pair,
+            placeholders: folded.length ? projection.placeholders() : []
+        };
+    }
+    function rebuild(position) {
+        foldedLines = new Map(folded.map((fold) => [fold.line, fold]));
+        pending = null;
+        projection = new NativeText(model.value, folded);
+        relayout();
+        sync(false, position);
+    }
+    function relayout() {
+        if (!textarea) {
+            return;
+        }
+        let key = `${metrics.width}:${metrics.charWidth}:${options.tabSize}`, tabSize = options.tabSize ?? 4;
+        if (key !== breaks.key) {
+            breaks = { key, map: new Map() };
+        }
+        ui.width = Math.max(1, metrics.width);
+        layout = new EditorLayout(projection, model, ui.width, metrics.lineHeight, metrics.charWidth, tabSize, !!options.wrap, breaks.map);
+        map.invalidate();
+        schedule();
+    }
+    function reset() {
+        before = null;
+        beforeRanges = [];
+        beforeSelection = undefined;
+        inputData = null;
+        inputType = '';
+    }
+    function reveal(editing = false) {
+        let next = folded.filter((fold) => !model.selections.some((range) => (range.start > fold.from && range.start < fold.to) ||
+            (range.end > fold.from && range.end < fold.to) ||
+            (editing && range.start < fold.to && range.end > fold.from)));
+        if (next.length !== folded.length) {
+            unfold(next);
+        }
+    }
+    function revealSelection() {
+        if (!textarea || !layout) {
+            return;
+        }
+        let selection = model.selection, offset = selection.direction === 'backward' ? selection.start : selection.end;
+        if (folded.some((fold) => offset > fold.from && offset < fold.to)) {
+            unfold(folded.filter((fold) => offset <= fold.from || offset >= fold.to));
+        }
+        let { lineHeight, padLeft, padRight, padTop } = metrics, rect = layout.rect(projection.toNative(offset)), top = rect.top + padTop;
+        if (top < textarea.scrollTop) {
+            textarea.scrollTop = Math.max(0, top - padTop);
+        }
+        else if (top + lineHeight > textarea.scrollTop + textarea.clientHeight) {
+            textarea.scrollTop = Math.max(0, top + lineHeight + padTop - textarea.clientHeight);
+        }
+        if (!options.wrap) {
+            let x = rect.left + padLeft;
+            if (x < textarea.scrollLeft + padLeft) {
+                textarea.scrollLeft = Math.max(0, x - padLeft);
+            }
+            else if (x + padRight > textarea.scrollLeft + textarea.clientWidth) {
+                textarea.scrollLeft = x + padRight - textarea.clientWidth;
+            }
+        }
+        schedule();
+    }
+    function rowsBetween(from, to) {
+        let out = [];
+        if (!textarea) {
+            return out;
+        }
+        let lineHeight = metrics.lineHeight, origin = textarea.getBoundingClientRect().top + metrics.padTop - textarea.scrollTop, a = Math.floor((from - origin) / lineHeight), b = Math.floor((to - origin) / lineHeight);
+        for (let row = Math.max(0, Math.min(a, b)), n = Math.max(a, b); row <= n; row++) {
+            out.push(origin + row * lineHeight + lineHeight / 2);
+        }
+        return out;
+    }
+    function schedule() {
+        if (!disposed && !frame && textarea) {
+            frame = requestAnimationFrame(paint);
+        }
+    }
+    function selectionAfter(edit, after, direction) {
+        let value = model.value.slice(0, edit.from) + edit.insert + model.value.slice(edit.to), next = new NativeText(value, mapFolds(folded, [[edit]], value));
+        return { direction, end: next.toSource(after.end), start: next.toSource(after.start) };
+    }
+    function settle(first, last) {
+        let geometry = layout, changed = false, flushed = false, half = metrics.lineHeight / 2;
+        for (let line = first; line < last; line++) {
+            if (!geometry.estimated(line)) {
+                continue;
+            }
+            let row = element(line);
+            if (!row) {
+                continue;
+            }
+            if (!flushed) {
+                flush();
+                flushed = true;
+            }
+            changed = geometry.measure(line, rowBreaks(row, geometry.end(line) - geometry.lineFrom(line), half)) || changed;
+        }
+        if (changed) {
+            schedule();
+        }
+    }
+    function subscribe() {
+        unsubscribe?.();
+        unsubscribe = model.subscribe((snapshot, change) => {
+            if (change.source !== 'navigation') {
+                goals = [];
+            }
+            let { selections, ...single } = snapshot;
+            Object.assign(state, single, { selection: { ...snapshot.selection }, selections: selections.length });
+            if (change.textChanged) {
+                let eol = ending(model);
+                if (state.lineEnding !== eol) {
+                    state.lineEnding = eol;
+                }
+                ime.conflict();
+                textChanged(change);
+                extras.changed();
+                if (change.source === 'external' || change.source === 'reset' || change.source === 'setValue') {
+                    detect();
+                }
+            }
+            if (change.selectionChanged) {
+                reveal();
+            }
+            sync();
+            if (change.selectionChanged) {
+                callbacks.onSelection?.(snapshot.selection, model.position());
+            }
+            if (change.textChanged) {
+                callbacks.onChange?.(snapshot.value, change, snapshot);
+            }
+        });
+    }
+    function sync(revealing = false, position) {
+        if (disposed || !textarea || ime.busy()) {
+            return;
+        }
+        let changed = !!position, { left, top } = position ?? { left: textarea.scrollLeft, top: textarea.scrollTop };
+        if (written !== projection.value) {
+            update();
+            changed = true;
+        }
+        else {
+            written = projection.value;
+        }
+        let { direction, end, start } = model.selection, nativeEnd = projection.toNative(end), nativeStart = projection.toNative(start);
+        if (textarea.selectionStart !== nativeStart || textarea.selectionEnd !== nativeEnd || textarea.selectionDirection !== direction) {
+            textarea.setSelectionRange(nativeStart, nativeEnd, direction);
+            changed = true;
+        }
+        if (changed) {
+            textarea.scrollLeft = left;
+            textarea.scrollTop = top;
+        }
+        if (revealing) {
+            revealSelection();
+        }
+        schedule();
+    }
+    function textChanged(change) {
+        let batches = change.editBatches, batch = batches && batches.length === 1 ? batches[0] : null, edit = batch && batch.length === 1 ? batch[0] : null, next = batches && folded.length ? mapFolds(folded, batches, model) : [], kept = next.length === folded.length, previous = projection, incremental = edit && kept ? previous.apply(model.value, edit) : null;
+        folded = next;
+        if (!kept) {
+            foldedLines = new Map(folded.map((fold) => [fold.line, fold]));
+        }
+        projection = incremental ?? new NativeText(model.value, folded);
+        pending = null;
+        if (incremental && edit && layout) {
+            let from = previous.toNative(edit.from), to = previous.toNative(edit.to), end = to + projection.value.length - previous.value.length, { first, inserted, removed } = layout.edit(projection, from, to, end);
+            map.invalidate(inserted === removed ? first : null, first + inserted);
+            pending = { base: previous.value, edits: [{ from, insert: projection.value.slice(from, end), to }] };
+        }
+        else if (batch && kept && layout && previous.identity && projection.identity && batch.length <= RANGES) {
+            let count = layout.count, first = Number.MAX_SAFE_INTEGER, last = 0, shift = 0;
+            for (let i = 0, n = batch.length; i < n; i++) {
+                let { from, insert, to } = batch[i], step = layout.edit(projection, from + shift, to + shift, from + shift + insert.length);
+                first = Math.min(first, step.first);
+                last = Math.max(last, step.first + step.inserted);
+                shift += insert.length - (to - from);
+            }
+            map.invalidate(layout.count === count ? first : null, last);
+            pending = { base: previous.value, edits: batch.map(({ from, insert, to }) => ({ from, insert, to })) };
+        }
+        else {
+            relayout();
+        }
+        if (accepting >= 0 && written === previous.value) {
+            pending = null;
+            written = projection.value.length === accepting ? projection.value : '';
+        }
+        ui.digits = Math.max(3, String(model.lineCount).length);
+    }
+    function tokensOf(index) {
+        if (language === 'plain' || !ui.highlight) {
+            return [];
+        }
+        return tokens(cache, model, projection, folded, index, layout.lineFrom(index), layout.end(index));
+    }
+    function unfold(next) {
+        folded = next;
+        rebuild();
+    }
+    function update() {
+        writing = true;
+        try {
+            writeField(textarea, written, projection.value, pending);
+        }
+        finally {
+            pending = null;
+            writing = false;
+        }
+        written = projection.value;
+    }
+    let controller = {
+        addNextOccurrence: (all = false) => {
+            if (disposed || ime.busy()) {
+                return false;
+            }
+            capture();
+            let changed = addNextOccurrence(model, all);
+            sync(true);
+            return changed;
+        },
+        closeFind: () => search.close(),
+        conflicts: () => extras.conflicts(),
+        dispose: () => {
+            if (disposed) {
+                return;
+            }
+            try {
+                ime.flush();
+            }
+            finally {
+                disposed = true;
+                if (frame) {
+                    cancelAnimationFrame(frame);
+                    frame = 0;
+                }
+                unsubscribe?.();
+                unsubscribe = undefined;
+                size.ondisconnect();
+                extras.dispose();
+                lsp.dispose();
+                pendingValue = undefined;
+            }
+        },
+        get document() {
+            return model;
+        },
+        find: (query, next) => search.find(query, next),
+        findNext: () => search.next(),
+        findPrevious: () => search.previous(),
+        focus: () => {
+            if (!disposed) {
+                textarea?.focus();
+            }
+        },
+        fold: (line) => {
+            if (line !== undefined) {
+                return changeFold(line, true);
+            }
+            let current = model.position().line;
+            if (changeFold(current, true)) {
+                return true;
+            }
+            if (disposed || ime.busy() || options.fold === false) {
+                return false;
+            }
+            let range = enclosingFold(cache, current);
+            if (!range || folded.some((fold) => fold.from === range.from && fold.to === range.to)) {
+                return false;
+            }
+            foldWith(range);
+            return true;
+        },
+        foldAll: () => {
+            if (disposed || ime.busy() || options.fold === false) {
+                return;
+            }
+            folded = outerFolds(structureOf(cache).folds);
+            model.select({ start: 0 });
+            rebuild();
+        },
+        goToLine: (line, column = 1) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            model.select({ start: model.offset(line, column) });
+            sync(true);
+            textarea?.focus();
+        },
+        get host() {
+            return host;
+        },
+        indent: () => editable(() => indent(model, options.indent)),
+        insert: (text) => editable(() => insertText(model, text)),
+        lineCommand: (command) => editable(() => lineCommand(model, command)),
+        newline: () => editable(() => newline(model, options.indent, language)),
+        nextChange: () => !disposed && extras.navigate('change', false),
+        nextConflict: () => !disposed && extras.navigate('conflict', false),
+        nextProblem: () => !disposed && extras.navigate('problem', false),
+        offsetAt,
+        openFind: (replace = false) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            jump.state.open = false;
+            search.open(replace);
+            schedule();
+        },
+        openGoToLine: () => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            capture();
+            search.state.open = false;
+            jump.open(model.position().line);
+        },
+        outdent: () => editable(() => indent(model, options.indent, true)),
+        previousChange: () => !disposed && extras.navigate('change', true),
+        previousConflict: () => !disposed && extras.navigate('conflict', true),
+        previousProblem: () => !disposed && extras.navigate('problem', true),
+        rectAt: (offset) => {
+            if (disposed || !textarea || !layout || offset < 0 || offset > model.value.length || folded.some((fold) => offset > fold.from && offset < fold.to)) {
+                return null;
+            }
+            let native = projection.toNative(offset), index = layout.lineAt(native), row = element(index);
+            if (row && irregular(projection.value.slice(layout.lineFrom(index), layout.end(index)))) {
+                let rect = rowRect(row, native - layout.lineFrom(index));
+                if (rect) {
+                    return { height: metrics.lineHeight, left: rect.left, top: rect.top, width: 1 };
+                }
+            }
+            let box = textarea.getBoundingClientRect(), rect = layout.rect(native);
+            return {
+                height: rect.height,
+                left: box.left + metrics.padLeft + rect.left - textarea.scrollLeft,
+                top: box.top + metrics.padTop + rect.top - textarea.scrollTop,
+                width: rect.width
+            };
+        },
+        redo: () => editable(() => model.redo()),
+        redoSelection: () => {
+            if (disposed || ime.busy()) {
+                return false;
+            }
+            let changed = model.redoSelection();
+            sync(true);
+            return changed;
+        },
+        refresh: () => {
+            if (disposed) {
+                return;
+            }
+            measure();
+            relayout();
+        },
+        replace: (replacement) => search.replace(replacement),
+        replaceAll: (replacement) => search.replaceAll(replacement),
+        resolveConflict: (conflict, resolution) => !disposed && extras.resolve(conflict, resolution),
+        save: () => {
+            if (!disposed && !ime.busy()) {
+                callbacks.onSave?.(model.value, model.state);
+            }
+        },
+        select: (next, revealing = true) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            model.select(next);
+            sync(revealing);
+        },
+        selectMany: (ranges, revealing = true) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            model.selectMany(ranges);
+            sync(revealing);
+        },
+        setBaseline: (text) => {
+            if (!disposed) {
+                extras.baseline(text);
+            }
+        },
+        setDocument: (next, settings) => {
+            if (disposed) {
+                return;
+            }
+            if (next !== model) {
+                ime.flush();
+                if (textarea) {
+                    visited.set(model, { folded, left: textarea.scrollLeft, revision: model.revision, top: textarea.scrollTop });
+                }
+                model = next;
+                lsp.retarget();
+                adopt();
+            }
+            controller.setOptions(settings ?? {}, !!settings);
+        },
+        setOptions: (next, replace = false) => {
+            if (disposed) {
+                return;
+            }
+            if (replace || 'indent' in next) {
+                unit = next.indent && /^[\t ]+$/.test(next.indent) ? next.indent : undefined;
+            }
+            options = { ...(replace ? {} : options), ...next };
+            options.tabSize = clamp(Math.trunc(options.tabSize ?? 4) || 4, 1, 16);
+            detect();
+            let geometry = !!options.wrap !== ui.wrap || options.tabSize !== ui.tabSize, nextLanguage = options.language ?? languageFor(options.fileName);
+            if (nextLanguage !== language) {
+                cache = syntaxCache(model, nextLanguage);
+                foldMarks.clear();
+                language = nextLanguage;
+                state.language = language;
+                map.invalidate();
+            }
+            if (options.keybindings !== bound.keybindings) {
+                bound.keybindings = options.keybindings;
+                keys = keymap(apple, options.keybindings);
+            }
+            extras.configure(options);
+            if (options.baseline !== bound.baseline) {
+                bound.baseline = options.baseline;
+                extras.baseline(options.baseline ?? null);
+            }
+            ui.fold = options.fold !== false;
+            ui.highlight = options.highlight !== false;
+            ui.label = options.label ?? 'Code editor';
+            ui.lineNumbers = options.lineNumbers !== false;
+            ui.minimap = !!options.minimap;
+            ui.name = options.name ?? '';
+            ui.placeholder = options.placeholder ?? '';
+            ui.readonly = !!options.readonly;
+            ui.tabSize = options.tabSize;
+            ui.whitespace = !!options.whitespace;
+            ui.wrap = !!options.wrap;
+            search.status();
+            lsp.configure(options);
+            if (options.fold === false && folded.length) {
+                unfold([]);
+            }
+            else if (geometry) {
+                flush();
+                relayout();
+            }
+            schedule();
+        },
+        setValue: (value) => {
+            if (disposed) {
+                return false;
+            }
+            if (ime.busy()) {
+                pendingValue = value;
+                return false;
+            }
+            return model.setValue(value);
+        },
+        get scroller() {
+            return textarea;
+        },
+        get state() {
+            return state;
+        },
+        get textarea() {
+            return textarea;
+        },
+        toggleComment: () => editable(() => {
+            let syntax = commentSyntax(language);
+            return toggleComment(model, options.lineComment ?? syntax.line, options.blockComment ?? syntax.block);
+        }),
+        undo: () => editable(() => model.undo()),
+        undoSelection: () => {
+            if (disposed || ime.busy()) {
+                return false;
+            }
+            let changed = model.undoSelection();
+            sync(true);
+            return changed;
+        },
+        unfold: (line = model.position().line) => changeFold(line, false),
+        unfoldAll: () => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            unfold([]);
+        }
+    };
+    let run = commands({
+        cache: () => cache,
+        capture,
+        controller,
+        deleteVisible,
+        get document() {
+            return model;
+        },
+        edit: editable,
+        language: () => language,
+        move: moveSelection,
+        navigate: (kind, backward) => {
+            extras.navigate(kind, backward);
+        },
+        options: () => options,
+        select: (selection) => {
+            model.select(selection);
+            sync(true);
+        }
+    });
+    let lsp = services({
+        busy: ime.busy,
+        controller,
+        problems: (entries) => {
+            let errors = 0, warnings = 0;
+            for (let i = 0, n = entries.length; i < n; i++) {
+                if (entries[i].severity === 'error') {
+                    errors++;
+                }
+                else if (entries[i].severity === 'warning') {
+                    warnings++;
+                }
+            }
+            if (state.problems.errors !== errors || state.problems.warnings !== warnings) {
+                state.problems = { errors, warnings };
+            }
+        },
+        rect: (offset) => {
+            if (!layout || folded.some((fold) => offset > fold.from && offset < fold.to)) {
+                return null;
+            }
+            return layout.rect(projection.toNative(offset));
+        },
+        schedule
+    });
+    let extras = features({
+        busy: ime.busy,
+        cache: () => cache,
+        charWidth: () => metrics.charWidth,
+        document: () => model,
+        edit: (edit, caret) => editable(() => model.transact([edit], { selection: { start: caret } }).changed),
+        focus: () => textarea?.focus(),
+        folded: () => folded,
+        hide: lsp.leave,
+        language: () => language,
+        layout: () => layout,
+        lineHeight: () => metrics.lineHeight,
+        notice: lsp.notice,
+        offsetAt,
+        problems: lsp.list,
+        projection: () => projection,
+        readonly: () => !!options.readonly,
+        rectAt: controller.rectAt,
+        reveal: (offset) => {
+            if (disposed || ime.busy()) {
+                return;
+            }
+            model.select({ start: offset });
+            sync(true);
+        },
+        schedule,
+        scrollTo: (top) => {
+            if (textarea) {
+                textarea.scrollTop = top + metrics.padTop;
+                schedule();
+            }
+        },
+        tokens: tokensOf,
+        x: () => ui.x
+    }, apple);
+    let field = {
+        'aria-describedby': help,
+        'aria-label': () => ui.label,
+        name: () => ui.name,
+        onbeforeinput: (e) => {
+            if (writing || ime.busy() || e.isComposing || !textarea) {
+                return;
+            }
+            capture();
+            reveal(!e.inputType.startsWith('history') && !options.readonly);
+            if (e.cancelable && !options.readonly && e.inputType.startsWith('delete')) {
+                let end = textarea.selectionEnd, start = textarea.selectionStart, affected = projection.placeholders().filter((range) => start === end
+                    ? (e.inputType.endsWith('Backward') ? start === range.at + 1 : start === range.at)
+                    : start <= range.at && end > range.at);
+                if (affected.length) {
+                    e.preventDefault();
+                    unfold(folded.filter((fold) => !affected.some((range) => range.from === fold.from)));
+                    return;
+                }
+            }
+            before = { end: textarea.selectionEnd, length: textarea.textLength, start: textarea.selectionStart };
+            beforeRanges = model.selections;
+            beforeSelection = model.selection;
+            inputData = e.data;
+            inputType = e.inputType;
+            if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
+                if (e.cancelable) {
+                    e.preventDefault();
+                    e.inputType === 'historyUndo' ? controller.undo() : controller.redo();
+                }
+                return;
+            }
+            if (!e.cancelable || options.readonly) {
+                return;
+            }
+            let character = e.data?.length === 1 ? e.data : '';
+            if (model.selections.length > 1) {
+                if (e.inputType === 'insertText' && e.data !== null) {
+                    e.preventDefault();
+                    if (!character ||
+                        !((options.autoIndent !== false && editable(() => closeIndent(model, character, language))) ||
+                            (options.autoBrackets !== false && editable(() => bracket(model, character, language))))) {
+                        editable(() => insertText(model, e.data, 'input'));
+                    }
+                    return;
+                }
+                if (/^delete(?:Content|Word)(?:Backward|Forward)$/.test(e.inputType)) {
+                    e.preventDefault();
+                    editable(() => deleteVisible(e.inputType.endsWith('Backward'), e.inputType.startsWith('deleteWord')));
+                    return;
+                }
+            }
+            if (e.inputType === 'insertLineBreak' || e.inputType === 'insertParagraph') {
+                if (options.autoIndent !== false) {
+                    e.preventDefault();
+                    controller.newline();
+                }
+            }
+            else if (e.inputType === 'insertText' && character && options.autoBrackets !== false) {
+                if (editable(() => bracket(model, character, language)) ||
+                    (options.autoIndent !== false && editable(() => closeIndent(model, character, language)))) {
+                    e.preventDefault();
+                }
+            }
+            else if (e.inputType === 'deleteContentBackward' && options.autoBrackets !== false) {
+                if (editable(() => deletePair(model))) {
+                    e.preventDefault();
+                }
+            }
+        },
+        onblur: () => {
+            capture();
+            gestures.reset();
+            lsp.dismiss();
+        },
+        oncompositionend: ime.attributes.oncompositionend,
+        oncompositionstart: () => {
+            lsp.dismiss();
+            ime.attributes.oncompositionstart();
+        },
+        oncopy: (e) => clip(e, false),
+        oncut: (e) => clip(e, true),
+        ondragend: gestures.ondragend,
+        ondragleave: gestures.ondragleave,
+        ondragover: gestures.ondragover,
+        ondragstart: gestures.ondragstart,
+        ondrop: gestures.ondrop,
+        onfocus: capture,
+        oninput: (e) => {
+            if (writing || ime.input(e)) {
+                return;
+            }
+            if (e.inputType === 'historyUndo' || e.inputType === 'historyRedo') {
+                e.inputType === 'historyUndo' ? controller.undo() : controller.redo();
+                return;
+            }
+            accept(/^(deleteContentBackward|deleteContentForward|insertText)$/.test(e.inputType) ? e.inputType : undefined);
+        },
+        onkeydown: (e) => {
+            gestures.alt(e);
+            extras.key(e);
+            if (ime.busy() || e.isComposing || e.keyCode === 229) {
+                return;
+            }
+            if (lsp.keydown(e) || options.onCompletionKey?.(e, controller)) {
+                e.preventDefault();
+                return;
+            }
+            if (e.key === 'Escape') {
+                escapeTab = true;
+                if (model.selections.length > 1) {
+                    e.preventDefault();
+                    model.select(model.selection);
+                    sync();
+                }
+                return;
+            }
+            if (e.key === 'Tab' && escapeTab) {
+                escapeTab = false;
+                return;
+            }
+            escapeTab = false;
+            let command = keys(e);
+            if (command) {
+                e.preventDefault();
+                run(command, e);
+                return;
+            }
+            if (apple ? e.metaKey : e.ctrlKey) {
+                if (!e.altKey && model.selections.length > 1 && NAVIGATION.test(e.key) && !e.key.startsWith('Page')) {
+                    e.preventDefault();
+                    moveSelection(e.key, e.shiftKey, e.ctrlKey, false, /^(End|Home)$/.test(e.key) || (apple && /^Arrow(Down|Up)$/.test(e.key)));
+                }
+                return;
+            }
+            if (e.key === 'Tab' && !e.altKey && options.captureTab !== false && !options.readonly) {
+                e.preventDefault();
+                e.shiftKey ? controller.outdent() : controller.indent();
+            }
+            else if (e.key === 'Enter' && !e.altKey && !options.readonly && options.autoIndent !== false) {
+                e.preventDefault();
+                controller.newline();
+            }
+            else if ((model.selections.length > 1 || e.key === 'Home') && NAVIGATION.test(e.key)) {
+                e.preventDefault();
+                moveSelection(e.key, e.shiftKey, e.altKey);
+            }
+            else if ((e.key === 'Backspace' || e.key === 'Delete') && model.selections.length > 1) {
+                e.preventDefault();
+                editable(() => deleteVisible(e.key === 'Backspace', e.altKey));
+            }
+        },
+        onkeyup: (e) => {
+            gestures.alt(e);
+            extras.key(e);
+            capture();
+        },
+        onlostpointercapture: gestures.onlostpointercapture,
+        onpaste: (e) => {
+            if (ime.busy() || options.readonly || !e.clipboardData) {
+                return;
+            }
+            e.preventDefault();
+            let text = read(e.clipboardData, model.selections.length);
+            editable(() => insertText(model, text, 'paste'));
+        },
+        onpointercancel: gestures.onpointercancel,
+        onpointerdown: (e) => {
+            goals = [];
+            if (!extras.pointerdown(e)) {
+                gestures.onpointerdown(e);
+            }
+        },
+        onpointerleave: () => {
+            extras.leave();
+            lsp.leave();
+        },
+        onpointermove: (e) => {
+            gestures.onpointermove(e);
+            if (!extras.pointermove(e)) {
+                lsp.pointer(e);
+            }
+        },
+        onpointerup: () => {
+            gestures.end();
+            capture();
+        },
+        onscroll: schedule,
+        onselect: capture,
+        onselectionchange: capture,
+        placeholder: () => ui.placeholder,
+        readOnly: () => ui.readonly,
+        wrap: () => ui.wrap ? 'soft' : 'off'
+    };
+    let template = (attributes) => {
+        let root_0psre1t2 = template_0psre1t3(), element_0psre1t4 = root_0psre1t2.firstChild, element_0psre1t5 = element_0psre1t4.firstChild, element_0psre1t6 = element_0psre1t5.nextSibling, element_0psre1t7 = element_0psre1t4.firstElementChild, element_0psre1t8 = element_0psre1t7.firstElementChild.firstElementChild, element_0psre1t9 = element_0psre1t8.nextElementSibling, element_0psre1ta = element_0psre1t9.nextElementSibling, element_0psre1tb = element_0psre1ta.firstChild, element_0psre1tc = element_0psre1t7.firstElementChild.nextElementSibling.firstElementChild, element_0psre1td = element_0psre1t7.firstChild.nextSibling.nextSibling, element_0psre1te = element_0psre1td.nextSibling, element_0psre1tf = element_0psre1te.nextSibling, element_0psre1tg = element_0psre1t7.firstElementChild.nextElementSibling.nextElementSibling, element_0psre1th = element_0psre1tg.nextElementSibling, element_0psre1ti = element_0psre1t6.nextSibling.nextSibling, element_0psre1tj = element_0psre1t7.nextElementSibling;
+        template_u1.slot(element_0psre1t5, search.template());
+        template_u1.slot(element_0psre1t6, jump.template());
+        template_u1.slot(element_0psre1t9, rows.template(), 1);
+        element_0psre1tb.parentNode.insertBefore(new template_u1.ArraySlot(decorations, (decoration) => {
+            let root_0psre1tk = template_0psre1tl(), element_0psre1tm = root_0psre1tk.firstChild;
+            template_u1.setList(element_0psre1tm, 'class', () => decoration.kind);
+            template_u1.setList(element_0psre1tm, 'style', () => decoration.style);
+            return root_0psre1tk;
+        }).fragment, element_0psre1tb);
+        template_u1.slot(element_0psre1ta, lsp.anchors(), 2);
+        template_u1.slot(element_0psre1tc, gutter(rows.slots, (slot) => {
+            if (slot.line < 0 || !slot.fold) {
+                return;
+            }
+            if (slot.fold === 2) {
+                controller.unfold(slot.number);
+            }
+            else {
+                controller.fold(slot.number);
+            }
+            controller.focus();
+        }, (slot) => {
+            if (slot.line >= 0 && slot.change) {
+                extras.peek(slot.number);
+            }
+        }), 1);
+        template_u1.slot(element_0psre1td, extras.sticky());
+        template_u1.slot(element_0psre1te, extras.widgets(() => ui.y));
+        template_u1.slot(element_0psre1tf, map.template());
+        template_u1.slot(element_0psre1ti, lsp.template());
+        template_u1.setProperty(element_0psre1tj, 'id', help);
+        template_u1.onconnect(element_0psre1th, (element) => {
+            ruler = element;
+        });
+        template_u1.setProperties(element_0psre1tg, field);
+        template_u1.setProperties(element_0psre1tg, lsp.aria);
+        template_u1.onconnect(element_0psre1tg, (element) => {
+            textarea = element;
+        });
+        template_u1.setList(element_0psre1tc, 'style', () => `transform: translateY(${ui.y}px);`);
+        template_u1.setList(element_0psre1ta, 'style', () => `transform: translate(${ui.x}px, ${ui.y}px);`);
+        template_u1.onconnect(element_0psre1t9, (element) => {
+            lines = element;
+        });
+        template_u1.setList(element_0psre1t9, 'style', () => `transform: translate(${ui.x}px, ${ui.y}px);`);
+        template_u1.setList(element_0psre1t8, 'style', () => `transform: translateX(${ui.x}px); ${extras.rulers()}`);
+        template_u1.setProperties(element_0psre1t7, size);
+        template_u1.setProperties(element_0psre1t4, attributes);
+        template_u1.setList(element_0psre1t4, 'class', [
+            () => ime.state.composing && 'code-editor--composing',
+            () => gestures.state.crosshair && 'code-editor--crosshair',
+            () => !ui.fold && 'code-editor--foldless',
+            () => ui.minimap && 'code-editor--minimap',
+            () => !ui.lineNumbers && 'code-editor--numberless',
+            () => extras.state.pointer && 'code-editor--pointer',
+            () => ui.wrap && 'code-editor--wrap'
+        ]);
+        template_u1.onconnect(element_0psre1t4, (element) => {
+            host = element;
+            measure();
+            subscribe();
+            written = '';
+            sync();
+            void element.ownerDocument.fonts?.ready.then(() => {
+                if (!disposed) {
+                    measure();
+                }
+            });
+            receive?.(controller);
+        });
+        template_u1.ondisconnect(element_0psre1t4, () => controller.dispose());
+        template_u1.setList(element_0psre1t4, 'style', () => `--content-width: ${ui.width}px; --digits: ${ui.digits}; --tab-size: ${ui.tabSize}; --track-height: ${ui.trackHeight}px; --track-width: ${ui.trackWidth}px;`);
+        return root_0psre1t2;
+    };
+    return { controller, template };
+};
+export { view };