@esportsplus/ui 0.56.3 → 0.57.0

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

@@ -0,0 +1,296 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+const template_1qld5f52 = template_u1.template(`<div class='code-editor-line'>`);
+class ReactiveObject_1qld5f50 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #change = this[reactivity_u0.SIGNAL]('');
+    #fold;
+    #height = this[reactivity_u0.SIGNAL](0);
+    #html = this[reactivity_u0.SIGNAL]('');
+    #line = this[reactivity_u0.SIGNAL](-1);
+    #number = this[reactivity_u0.SIGNAL](0);
+    #tint = this[reactivity_u0.SIGNAL]('');
+    #top = this[reactivity_u0.SIGNAL](0);
+    constructor(_p0) {
+        super(null);
+        this.#fold = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get change() {
+        return reactivity_u0.read(this.#change);
+    }
+    set change(_v1) {
+        reactivity_u0.write(this.#change, _v1);
+    }
+    get fold() {
+        return reactivity_u0.read(this.#fold);
+    }
+    set fold(_v2) {
+        reactivity_u0.write(this.#fold, _v2);
+    }
+    get height() {
+        return reactivity_u0.read(this.#height);
+    }
+    set height(_v3) {
+        reactivity_u0.write(this.#height, _v3);
+    }
+    get html() {
+        return reactivity_u0.read(this.#html);
+    }
+    set html(_v4) {
+        reactivity_u0.write(this.#html, _v4);
+    }
+    get line() {
+        return reactivity_u0.read(this.#line);
+    }
+    set line(_v5) {
+        reactivity_u0.write(this.#line, _v5);
+    }
+    get number() {
+        return reactivity_u0.read(this.#number);
+    }
+    set number(_v6) {
+        reactivity_u0.write(this.#number, _v6);
+    }
+    get tint() {
+        return reactivity_u0.read(this.#tint);
+    }
+    set tint(_v7) {
+        reactivity_u0.write(this.#tint, _v7);
+    }
+    get top() {
+        return reactivity_u0.read(this.#top);
+    }
+    set top(_v8) {
+        reactivity_u0.write(this.#top, _v8);
+    }
+}
+const BUDGET = 3000;
+const ESCAPE = /[&<>]/;
+const ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;' };
+const LONG = 10000;
+const PER_LINE = 200;
+function escape(text) {
+    return ESCAPE.test(text) ? text.replace(/[&<>]/g, (character) => ESCAPES[character]) : text;
+}
+function walker(element) {
+    return element.ownerDocument.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+}
+const marks = (projection, from, to, paint) => {
+    let { diagnostics, index, matches, occurrences, pair, placeholders } = paint, length = to - from, out = [], sourceFrom = projection.toSource(from), sourceTo = projection.toSource(to);
+    for (let i = 0, n = placeholders.length; i < n; i++) {
+        let at = placeholders[i].at;
+        if (at >= from && at < to) {
+            out.push({ from: at - from, kind: 'code-editor-placeholder', to: at - from + 1 });
+        }
+    }
+    for (let j = index, count = 0; j < matches.length && matches[j].from <= sourceTo && count < PER_LINE; j++) {
+        if (matches[j].to < sourceFrom) {
+            continue;
+        }
+        let end = Math.min(length, projection.toNative(matches[j].to) - from), start = Math.max(0, projection.toNative(matches[j].from) - from);
+        if (end > start) {
+            out.push({ from: start, kind: j === paint.active ? 'code-editor-match --active' : 'code-editor-match', to: end });
+            count++;
+        }
+    }
+    for (let i = 0, n = diagnostics.length, count = 0; i < n && count < PER_LINE; i++) {
+        let mark = diagnostics[i];
+        if (mark.to <= sourceFrom || mark.from >= sourceTo) {
+            continue;
+        }
+        let end = Math.min(length, projection.toNative(mark.to) - from), start = Math.max(0, projection.toNative(mark.from) - from);
+        if (end > start) {
+            out.push({ from: start, kind: mark.kind, to: end });
+            count++;
+        }
+    }
+    for (let i = 0, n = occurrences.length, count = 0; i < n && count < PER_LINE; i++) {
+        let mark = occurrences[i];
+        if (mark.to > from && mark.from < to) {
+            out.push({ from: Math.max(0, mark.from - from), kind: 'code-editor-occurrence', to: Math.min(length, mark.to - from) });
+            count++;
+        }
+    }
+    if (pair) {
+        for (let at of [pair.from, pair.to]) {
+            let native = projection.toNative(at);
+            if (native >= from && native < to && projection.toSource(native) === at) {
+                out.push({ from: native - from, kind: 'code-editor-bracket', to: native - from + 1 });
+            }
+        }
+    }
+    return out;
+};
+const markup = (text, colors, highlights, whitespace) => {
+    if (!text.length) {
+        return '';
+    }
+    if (text.length > LONG || colors.length > BUDGET) {
+        return escape(text);
+    }
+    let points = [0, text.length];
+    for (let i = 0, n = colors.length; i < n; i++) {
+        points.push(colors[i].from, colors[i].to);
+    }
+    for (let i = 0, n = highlights.length; i < n; i++) {
+        points.push(highlights[i].from, highlights[i].to);
+    }
+    if (whitespace) {
+        for (let i = 0, n = text.length; i < n; i++) {
+            let code = text.charCodeAt(i);
+            if (code === 32 || code === 9) {
+                points.push(i, i + 1);
+            }
+        }
+    }
+    if (points.length > BUDGET) {
+        return escape(text);
+    }
+    points.sort((a, b) => a - b);
+    let out = '', t = 0;
+    for (let i = 0, n = points.length - 1; i < n; i++) {
+        let from = points[i], to = points[i + 1];
+        if (to <= from || from >= text.length) {
+            continue;
+        }
+        while (t < colors.length && colors[t].to <= from) {
+            t++;
+        }
+        let classes = t < colors.length && colors[t].from <= from ? `code-editor-token--${colors[t].kind}` : '', piece = text.slice(from, Math.min(to, text.length)), style = '';
+        for (let j = 0, m = highlights.length; j < m; j++) {
+            let mark = highlights[j];
+            if (mark.from <= from && mark.to > from) {
+                classes += (classes ? ' ' : '') + mark.kind;
+                if (mark.style && mark.from === from) {
+                    style += mark.style;
+                }
+            }
+        }
+        if (whitespace && to === from + 1) {
+            let code = text.charCodeAt(from);
+            if (code === 32 || code === 9) {
+                classes += (classes ? ' ' : '') + (code === 9 ? 'code-editor-tab' : 'code-editor-space');
+            }
+        }
+        out += classes ? `<span class="${classes}"${style && ` style="${style.replace(/"/g, '&quot;')}"`}>${escape(piece)}</span>` : escape(piece);
+    }
+    return out;
+};
+const pool = () => {
+    let slots = new reactivity_u0.ReactiveArray();
+    return {
+        resize: (size) => {
+            while (slots.$length < size) {
+                slots.push(new ReactiveObject_1qld5f50(0));
+            }
+            if (slots.$length > size) {
+                slots.splice(size, slots.$length - size);
+            }
+        },
+        slots,
+        template: () => new template_u1.ArraySlot(slots, (slot) => {
+            let root_1qld5f51 = template_1qld5f52(), element_1qld5f53 = root_1qld5f51.firstChild;
+            template_u1.setList(element_1qld5f53, 'class', [() => slot.active && '--active', () => slot.line < 0 && 'code-editor-line--unused', () => slot.tint]);
+            template_u1.setProperty(element_1qld5f53, 'innerHTML', () => slot.html);
+            template_u1.setList(element_1qld5f53, 'style', () => `height: ${slot.height}px; top: ${slot.top}px;`);
+            return root_1qld5f51;
+        })
+    };
+};
+const rowBreaks = (element, length, half) => {
+    let base = 0, breaks = [], last = null, range = element.ownerDocument.createRange(), texts = walker(element), y = 0;
+    for (let text = texts.nextNode(); text && base < length; text = texts.nextNode()) {
+        let start = last ? 1 : 0;
+        last = text;
+        for (let offset = start, n = Math.min(text.length, length - base); offset <= n; offset++) {
+            range.setStart(text, offset);
+            range.setEnd(text, offset);
+            let rect = range.getClientRects()[0];
+            if (base + offset === 0) {
+                y = rect?.top ?? 0;
+            }
+            else if (rect && rect.top > y + half) {
+                breaks.push(base + offset);
+                y = rect.top;
+            }
+        }
+        base += text.length;
+    }
+    if (last && base < length) {
+        range.setStart(last, last.length);
+        range.setEnd(last, last.length);
+        let rect = range.getClientRects()[0];
+        if (rect && rect.top > y + half) {
+            breaks.push(base + 1);
+        }
+    }
+    return breaks;
+};
+const rowOffset = (element, x, y) => {
+    let doc = element.ownerDocument, point = doc.caretPositionFromPoint?.(x, y), range = point ? null : doc.caretRangeFromPoint?.(x, y), node = point?.offsetNode ?? range?.startContainer, offset = point?.offset ?? range?.startOffset ?? 0;
+    if (!node || !element.contains(node)) {
+        return null;
+    }
+    let texts = walker(element), total = 0;
+    for (let text = texts.nextNode(); text; text = texts.nextNode()) {
+        if (text === node) {
+            return total + offset;
+        }
+        total += text.length;
+    }
+    return null;
+};
+const rowRect = (element, offset) => {
+    let range = element.ownerDocument.createRange(), texts = walker(element), last = null;
+    for (let text = texts.nextNode(); text; text = texts.nextNode()) {
+        last = text;
+        if (offset <= text.length) {
+            range.setStart(text, offset);
+            range.setEnd(text, offset);
+            return range.getClientRects()[0] ?? null;
+        }
+        offset -= text.length;
+    }
+    if (!last) {
+        return null;
+    }
+    range.setStart(last, last.length);
+    range.setEnd(last, last.length);
+    return range.getClientRects()[0] ?? null;
+};
+const tokens = (cache, document, projection, folded, index, from, to) => {
+    if (!folded.length) {
+        return cache.lineTokens(index);
+    }
+    let f = 0, first = document.lineAt(projection.toSource(from)), last = document.lineAt(projection.toSource(to)), out = [];
+    for (let line = first; line <= last; line++) {
+        let start = document.lineStart(line), list = cache.lineTokens(line);
+        for (let i = 0, n = list.length; i < n; i++) {
+            let a = start + list[i].from, b = start + list[i].to, hidden = false;
+            while (f < folded.length && folded[f].to < a) {
+                f++;
+            }
+            for (let k = f, m = folded.length; k < m && folded[k].from <= a; k++) {
+                if (b <= folded[k].to) {
+                    hidden = true;
+                    break;
+                }
+            }
+            if (hidden) {
+                continue;
+            }
+            let left = Math.max(0, projection.toNative(a) - from), right = Math.min(to - from, projection.toNative(b) - from);
+            if (right > left) {
+                out.push({ from: left, kind: list[i].kind, to: right });
+            }
+        }
+    }
+    return out;
+};
+export { marks, markup, pool, rowBreaks, rowOffset, rowRect, tokens };

package/build/components/editor/code/search.d.ts

@@ -0,0 +1,24 @@
+import type { EditorDocument } from './document.js';
+type Match = Readonly<{
+    from: number;
+    replacement: string;
+    text: string;
+    to: number;
+}>;
+type SearchOptions = {
+    caseSensitive?: boolean;
+    regex?: boolean;
+    wholeWord?: boolean;
+};
+type SearchResult = Readonly<{
+    error: string;
+    matches: readonly Match[];
+    truncated: boolean;
+}>;
+declare const MATCH_LIMIT = 10000;
+declare const nextMatch: (matches: readonly Match[], start: number, end: number, backwards?: boolean, current?: number) => number;
+declare const replaceMatches: (doc: EditorDocument, result: SearchResult, all?: boolean, index?: number) => boolean;
+declare const search: (text: string, query: string, options?: SearchOptions, replacement?: string, limit?: number) => SearchResult;
+declare const searchDocument: (doc: EditorDocument, query: string, options?: SearchOptions, replacement?: string, limit?: number) => SearchResult;
+export { MATCH_LIMIT, nextMatch, replaceMatches, search, searchDocument };
+export type { Match, SearchOptions, SearchResult };

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

@@ -0,0 +1,231 @@
+const ESCAPE = /[.*+?^${}()|[\]\\]/g;
+const MATCH_LIMIT = 10000;
+const MEMO_LIMIT = 4;
+const MEMOS = new WeakMap();
+const TOKENS = /\$(\$|&|`|'|\d{1,2}|<[^>]*>)/g;
+const WORD = /[\p{L}\p{N}_$]/u;
+function compile(query, options) {
+    return new RegExp(options.regex ? query : query.replace(ESCAPE, '\\$&'), options.caseSensitive ? 'gu' : 'giu');
+}
+function expandReplacement(template, match, text) {
+    return template.replace(TOKENS, (token, key) => {
+        if (key === '$') {
+            return '$';
+        }
+        if (key === '&') {
+            return match[0];
+        }
+        if (key === '`') {
+            return text.slice(0, match.index);
+        }
+        if (key === "'") {
+            return text.slice(match.index + match[0].length);
+        }
+        if (key.startsWith('<')) {
+            return match.groups ? (match.groups[key.slice(1, -1)] ?? '') : token;
+        }
+        let index = Number(key);
+        if (index > 0 && index < match.length) {
+            return match[index] ?? '';
+        }
+        if (key.length === 2 && Number(key[0]) > 0 && Number(key[0]) < match.length) {
+            return (match[Number(key[0])] ?? '') + key[1];
+        }
+        return token;
+    });
+}
+function incremental(query, options) {
+    if (options.regex || !query) {
+        return false;
+    }
+    let folded = options.caseSensitive ? query : query.toLowerCase();
+    for (let length = 1; length < folded.length; length++) {
+        if (folded.startsWith(folded.slice(folded.length - length))) {
+            return false;
+        }
+    }
+    return true;
+}
+function isWholeWord(text, from, to) {
+    let left = Array.from(text.slice(Math.max(0, from - 2), from)).at(-1) ?? '', right = Array.from(text.slice(to, to + 2))[0] ?? '';
+    return (!left || !WORD.test(left)) && (!right || !WORD.test(right));
+}
+function key(query, options, replacement, limit) {
+    let flags = `${+!!options.caseSensitive}${+!!options.regex}${+!!options.wholeWord}`;
+    return [flags, limit, query.length, query, replacement].join('\u0000');
+}
+function update(text, previous, deltas, query, options, replacement, limit) {
+    if (previous.error || previous.truncated) {
+        return null;
+    }
+    let dirty = [], margin = query.length + 2, matches = [...previous.matches];
+    for (let i = 0, n = deltas.length; i < n; i++) {
+        let edits = deltas[i].edits, kept = [];
+        for (let j = 0, m = matches.length; j < m; j++) {
+            let match = matches[j];
+            if (!touches(edits, match.from - 2, match.to + 2)) {
+                kept.push({ ...match, from: shift(edits, match.from), to: shift(edits, match.to) });
+            }
+        }
+        for (let j = 0, m = dirty.length; j < m; j++) {
+            dirty[j] = [shift(edits, dirty[j][0]), shift(edits, dirty[j][1])];
+        }
+        let delta = 0;
+        for (let j = 0, m = edits.length; j < m; j++) {
+            let edit = edits[j];
+            dirty.push([edit.from + delta, edit.from + delta + edit.insert.length]);
+            delta += edit.insert.length - (edit.to - edit.from);
+        }
+        matches = kept;
+    }
+    dirty.sort((a, b) => a[0] - b[0]);
+    let expression = compile(query, options), found = [], windows = [];
+    for (let i = 0, n = dirty.length; i < n; i++) {
+        let from = Math.max(0, dirty[i][0] - margin), last = windows[windows.length - 1], to = Math.min(text.length, dirty[i][1] + margin);
+        if (last && from <= last[1]) {
+            last[1] = Math.max(last[1], to);
+        }
+        else {
+            windows.push([from, to]);
+        }
+    }
+    for (let i = 0, n = windows.length; i < n; i++) {
+        let [from, to] = windows[i], match, slice = text.slice(from, to);
+        expression.lastIndex = 0;
+        while ((match = expression.exec(slice))) {
+            let at = from + match.index, end = at + match[0].length;
+            if (!options.wholeWord || isWholeWord(text, at, end)) {
+                found.push(Object.freeze({ from: at, replacement, text: match[0], to: end }));
+            }
+        }
+    }
+    let merged = [], seen = new Set(), all = matches.concat(found).sort((a, b) => a.from - b.from);
+    for (let i = 0, n = all.length; i < n; i++) {
+        if (!seen.has(all[i].from)) {
+            seen.add(all[i].from);
+            merged.push(Object.isFrozen(all[i]) ? all[i] : Object.freeze(all[i]));
+        }
+    }
+    if (merged.length > limit) {
+        return null;
+    }
+    return { error: '', matches: merged, truncated: false };
+}
+function shift(edits, offset) {
+    let delta = 0;
+    for (let i = 0, n = edits.length; i < n; i++) {
+        let edit = edits[i];
+        if (edit.to > offset) {
+            return edit.from < offset ? edit.from + delta : offset + delta;
+        }
+        delta += edit.insert.length - (edit.to - edit.from);
+    }
+    return offset + delta;
+}
+function touches(edits, from, to) {
+    for (let i = 0, n = edits.length; i < n; i++) {
+        if (edits[i].from <= to && edits[i].to >= from) {
+            return true;
+        }
+    }
+    return false;
+}
+const nextMatch = (matches, start, end, backwards = false, current = -1) => {
+    let n = matches.length;
+    if (!n) {
+        return -1;
+    }
+    if (current >= 0 && matches[current]?.from === start && matches[current]?.to === end) {
+        return (current + (backwards ? -1 : 1) + n) % n;
+    }
+    let hi = n, lo = 0;
+    while (lo < hi) {
+        let mid = (lo + hi) >>> 1;
+        if (backwards ? matches[mid].to <= start : matches[mid].from < end) {
+            lo = mid + 1;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    if (backwards) {
+        return lo > 0 ? lo - 1 : n - 1;
+    }
+    return lo < n ? lo : 0;
+};
+const replaceMatches = (doc, result, all = true, index = 0) => {
+    if (result.error || (all && result.truncated)) {
+        return false;
+    }
+    let matches = all ? result.matches : result.matches.slice(index, index + 1), value = doc.value;
+    if (!matches.length) {
+        return false;
+    }
+    for (let i = 0, n = matches.length; i < n; i++) {
+        let match = matches[i];
+        if (match.to - match.from !== match.text.length || !value.startsWith(match.text, match.from)) {
+            return false;
+        }
+    }
+    let edits = matches.map((match) => ({ from: match.from, insert: match.replacement, to: match.to })), first = edits[0];
+    return doc.transact(edits, {
+        selection: { end: first.from + first.insert.length, start: first.from },
+        source: all ? 'replaceAll' : 'replace'
+    }).changed;
+};
+const search = (text, query, options = {}, replacement = '', limit = MATCH_LIMIT) => {
+    let matches = [];
+    if (!query) {
+        return { error: '', matches, truncated: false };
+    }
+    let expression;
+    try {
+        expression = compile(query, options);
+    }
+    catch (error) {
+        return { error: error instanceof Error ? error.message : String(error), matches, truncated: false };
+    }
+    let match;
+    while ((match = expression.exec(text))) {
+        let from = match.index, to = from + match[0].length;
+        if (!options.wholeWord || isWholeWord(text, from, to)) {
+            if (matches.length >= limit) {
+                return { error: '', matches, truncated: true };
+            }
+            matches.push(Object.freeze({
+                from,
+                replacement: options.regex ? expandReplacement(replacement, match, text) : replacement,
+                text: match[0],
+                to
+            }));
+        }
+        if (match[0].length === 0) {
+            if (expression.lastIndex >= text.length) {
+                break;
+            }
+            expression.lastIndex += (text.codePointAt(expression.lastIndex) ?? 0) > 0xffff ? 2 : 1;
+        }
+    }
+    return { error: '', matches, truncated: false };
+};
+const searchDocument = (doc, query, options = {}, replacement = '', limit = MATCH_LIMIT) => {
+    let id = key(query, options, replacement, limit), memos = MEMOS.get(doc);
+    if (!memos) {
+        MEMOS.set(doc, memos = []);
+    }
+    let index = memos.findIndex((memo) => memo.key === id), memo = index >= 0 ? memos.splice(index, 1)[0] : null, result = null;
+    if (memo && memo.revision === doc.revision) {
+        result = memo.result;
+    }
+    else if (memo && incremental(query, options)) {
+        let deltas = doc.deltas(memo.revision);
+        result = deltas && update(doc.value, memo.result, deltas, query, options, replacement, limit);
+    }
+    result ??= search(doc.value, query, options, replacement, limit);
+    memos.unshift({ key: id, revision: doc.revision, result });
+    if (memos.length > MEMO_LIMIT) {
+        memos.length = MEMO_LIMIT;
+    }
+    return result;
+};
+export { MATCH_LIMIT, nextMatch, replaceMatches, search, searchDocument };

package/build/components/editor/code/selection.d.ts

@@ -0,0 +1,2 @@
+declare const stepCharacter: (value: string, offset: number, backwards?: boolean) => number;
+export { stepCharacter };

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

@@ -0,0 +1,53 @@
+import { clamp } from '../../../shared/clamp.js';
+const SEGMENTER = typeof Intl.Segmenter === 'function' ? new Intl.Segmenter(undefined, { granularity: 'grapheme' }) : null;
+function isBreak(code) {
+    return code === 10 || code === 13;
+}
+const stepCharacter = (value, offset, backwards = false) => {
+    let n = value.length;
+    offset = clamp(offset, 0, n);
+    if ((backwards && offset === 0) || (!backwards && offset === n)) {
+        return offset;
+    }
+    let from = offset, to = offset;
+    while (from > 0 && !isBreak(value.charCodeAt(from - 1))) {
+        from--;
+    }
+    while (to < n && !isBreak(value.charCodeAt(to))) {
+        to++;
+    }
+    if (backwards && from === offset) {
+        let crlf = value.charCodeAt(offset - 1) === 10 && value.charCodeAt(offset - 2) === 13;
+        return Math.max(0, offset - (crlf ? 2 : 1));
+    }
+    if (!backwards && to === offset) {
+        return Math.min(n, offset + (value.charCodeAt(offset) === 13 && value.charCodeAt(offset + 1) === 10 ? 2 : 1));
+    }
+    let previous = from;
+    if (SEGMENTER) {
+        for (let part of SEGMENTER.segment(value.slice(from, to))) {
+            let start = from + part.index, end = start + part.segment.length;
+            if (backwards && end >= offset) {
+                return start;
+            }
+            if (!backwards && end > offset) {
+                return end;
+            }
+            previous = end;
+        }
+    }
+    else {
+        for (let character of value.slice(from, to)) {
+            let end = previous + character.length;
+            if (backwards && end >= offset) {
+                return previous;
+            }
+            if (!backwards && end > offset) {
+                return end;
+            }
+            previous = end;
+        }
+    }
+    return backwards ? previous : to;
+};
+export { stepCharacter };

package/build/components/editor/code/services/completion.d.ts

@@ -0,0 +1,27 @@
+import { ReactiveArray } from '@esportsplus/reactivity';
+import type { CompletionItem } from './protocol.js';
+type Completion = {
+    aria: {
+        'aria-activedescendant': () => false | string;
+        'aria-controls': () => false | string;
+    };
+    attach: (element: HTMLElement) => void;
+    hide: VoidFunction;
+    id: string;
+    item: (index?: number) => CompletionItem | undefined;
+    move: (step: number) => void;
+    rows: ReactiveArray<Row>;
+    show: (items: CompletionItem[]) => void;
+    state: {
+        open: boolean;
+        selected: number;
+    };
+};
+type Row = {
+    detail: string;
+    index: number;
+    label: string;
+};
+declare const completion: (id: string) => Completion;
+export { completion };
+export type { Completion, Row };