@esportsplus/ui 0.57.0 → 0.58.0

package/build/components/editor/viewer/index.d.ts

@@ -0,0 +1,27 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import { type Language } from '../code/syntax.js';
+import './scss/index.scss';
+type CodeViewerAttributes = Attributes & {
+    copy?: boolean;
+    filename?: string;
+    fold?: boolean;
+    language?: Language;
+    lineNumbers?: boolean;
+    minimap?: boolean;
+    value: string | (() => string);
+    whitespace?: boolean;
+    wrap?: boolean;
+};
+declare const _default: {
+    (): template_u1.Renderable<any>;
+    <T extends CodeViewerAttributes>(attributes: T): template_u1.Renderable<any>;
+    <T extends template_u1.Renderable<any>>(content: T): template_u1.Renderable<any>;
+    (attributes: CodeViewerAttributes, content?: template_u1.Renderable<any>): template_u1.Renderable<any>;
+    bind(context: {
+        attributes?: Partial<CodeViewerAttributes> | undefined;
+        content?: template_u1.Renderable<any>;
+    }): any;
+};
+export default _default;
+export type { CodeViewerAttributes };

package/build/components/editor/viewer/index.js

@@ -0,0 +1,250 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { untrack } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import copy from '../../copy/index.js';
+import icon from '../../icon/index.js';
+import scrollbar from '../../../modifiers/scrollbar/index.js';
+import { observeSize } from '../../../shared/resize.js';
+import { minimap } from '../code/minimap.js';
+import { languageFor } from '../code/syntax.js';
+import { hidden, outline } from './model.js';
+import chevron from '@esportsplus/ui/svg/chevron-down.svg';
+import './scss/index.scss';
+const template_05hfnt92 = template_u1.template(`<div class='code-viewer-lines' style=';'>`);
+const template_05hfnt95 = template_u1.template(`<div class='code-viewer-line'><!--$--><code class='code-viewer-code'>`);
+const template_05hfnt9a = template_u1.template(`<span class='code-viewer-gutter'><!--$-->`);
+const template_05hfnt9e = template_u1.template(`<span class='code-viewer-number'>`);
+const template_05hfnt9h = template_u1.template(`<button class='code-viewer-fold' type='button'>`);
+const template_05hfnt9j = template_u1.template(`<span class='code-viewer-fold'>`);
+const template_05hfnt9l = template_u1.template(`<button class='code-viewer-placeholder' type='button'>…`);
+const template_05hfnt9o = template_u1.template(`<div class='code-viewer '><!--$--><div class='code-viewer-body'><div class='code-viewer-scroller' role='region' tabindex='0'>`);
+const template_05hfnt9u = template_u1.template(`<div class='code-viewer-header'><!--$-->`);
+const template_05hfnt9y = template_u1.template(`<span class='code-viewer-filename'>`);
+class ReactiveObject_05hfnt90 extends reactivity_u0.ReactiveObject {
+    #folded = this[reactivity_u0.SIGNAL](false);
+    #hidden = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get folded() {
+        return reactivity_u0.read(this.#folded);
+    }
+    set folded(_v0) {
+        reactivity_u0.write(this.#folded, _v0);
+    }
+    get hidden() {
+        return reactivity_u0.read(this.#hidden);
+    }
+    set hidden(_v1) {
+        reactivity_u0.write(this.#hidden, _v1);
+    }
+}
+const NO_BREAKS = [];
+const TOKEN_COLORS = [
+    'color',
+    'comment',
+    'function',
+    'keyword',
+    'number',
+    'operator',
+    'property',
+    'regexp',
+    'selector',
+    'string',
+    'tag',
+    'type',
+    'variable'
+];
+function pixels(value) {
+    return parseFloat(value) || 0;
+}
+function range(index, end) {
+    return end - index === 2 ? `line ${end}` : `lines ${index + 2}–${end}`;
+}
+export default component(function (input) {
+    let { copy: copyable = false, filename, fold = true, language, lineNumbers = true, minimap: overview = false, value, whitespace = false, wrap = false, ...attributes } = untrack(() => ({ ...this?.attributes, ...input })), current = () => {
+        let next = input.value ?? this?.attributes?.value;
+        return (typeof next === 'function' ? next() : next) ?? '';
+    }, frame = 0, lexer = language ?? languageFor(filename), lines = [], palette = {}, rail, scroller, source = null, stale = false;
+    let map = overview && minimap({
+        focus: () => scroller?.focus({ preventScroll: true }),
+        name: 'code-viewer',
+        scroll: (top, relative) => {
+            if (scroller) {
+                scroller.scrollTop = relative ? scroller.scrollTop + top : top;
+            }
+        }
+    });
+    let size = observeSize((_, element) => {
+        scroller = element;
+        update(true);
+    });
+    function measure() {
+        let content = scroller?.firstElementChild, elements = content?.children;
+        if (!map || !content || !elements?.length) {
+            source = null;
+            return;
+        }
+        let computed = getComputedStyle(content), fallback = computed.getPropertyValue('--color').trim() || 'currentColor', heights = [], lineHeight = pixels(getComputedStyle(elements[0]).lineHeight) || 20, tops = [];
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let element = elements[i];
+            if (element.hidden) {
+                heights.push(0);
+                tops.push(i ? tops[i - 1] + heights[i - 1] : 0);
+            }
+            else {
+                heights.push(element.offsetHeight);
+                tops.push(element.offsetTop);
+            }
+        }
+        palette = {};
+        for (let i = 0, n = TOKEN_COLORS.length; i < n; i++) {
+            let kind = TOKEN_COLORS[i];
+            palette[kind] = computed.getPropertyValue(`--${kind === 'color' ? 'literal' : kind}-color`).trim() || fallback;
+        }
+        source = {
+            breaks: () => NO_BREAKS,
+            count: tops.length,
+            height: content.offsetHeight,
+            indexAt: (y) => {
+                let hi = tops.length - 1, lo = 0;
+                while (lo < hi) {
+                    let mid = (lo + hi + 1) >>> 1;
+                    if (tops[mid] <= y) {
+                        lo = mid;
+                    }
+                    else {
+                        hi = mid - 1;
+                    }
+                }
+                return lo;
+            },
+            lineHeight,
+            rows: (index) => Math.max(1, Math.round(heights[index] / lineHeight)),
+            tabSize: pixels(computed.tabSize) || 4,
+            text: (index) => heights[index] ? lines[index].text : '',
+            tokens: (index) => lines[index].tokens,
+            top: (index) => tops[index]
+        };
+        map.invalidate();
+    }
+    function render(text) {
+        let folded = new Set(), rows;
+        lines = outline(text, lexer, { fold, whitespace });
+        rows = lines.map(() => new ReactiveObject_05hfnt90());
+        let foldable = lines.some((line) => line.end !== -1);
+        function toggle(index) {
+            if (folded.has(index)) {
+                folded.delete(index);
+            }
+            else {
+                folded.add(index);
+            }
+            let next = hidden(lines, folded);
+            for (let i = 0, n = rows.length; i < n; i++) {
+                rows[i].folded = folded.has(i);
+                rows[i].hidden = next[i];
+            }
+            update(true);
+        }
+        update(true);
+        return (() => {
+            let root_05hfnt91 = template_05hfnt92(), element_05hfnt93 = root_05hfnt91.firstChild;
+            template_u1.slot(element_05hfnt93, lines.map((line, index) => {
+                let root_05hfnt94 = template_05hfnt95(), element_05hfnt96 = root_05hfnt94.firstChild, element_05hfnt97 = element_05hfnt96.firstChild, element_05hfnt98 = element_05hfnt96.firstElementChild;
+                template_u1.slot(element_05hfnt97, (lineNumbers || foldable) && (() => {
+                    let root_05hfnt99 = template_05hfnt9a(), element_05hfnt9b = root_05hfnt99.firstChild.firstChild, element_05hfnt9c = root_05hfnt99.firstChild;
+                    template_u1.slot(element_05hfnt9b, lineNumbers && (() => {
+                        let root_05hfnt9d = template_05hfnt9e(), element_05hfnt9f = root_05hfnt9d.firstChild;
+                        template_u1.slot(element_05hfnt9f, index + 1, 1);
+                        return root_05hfnt9d;
+                    })());
+                    element_05hfnt9c.appendChild(line.end > index
+                        ? (() => {
+                            let root_05hfnt9g = template_05hfnt9h(), element_05hfnt9i = root_05hfnt9g.firstChild;
+                            template_u1.slot(element_05hfnt9i, icon({ 'aria-hidden': 'true', class: 'code-viewer-fold-icon' }, chevron), 1);
+                            template_u1.setProperty(element_05hfnt9i, 'aria-expanded', () => String(!rows[index].folded));
+                            template_u1.setProperty(element_05hfnt9i, 'aria-label', () => `${rows[index].folded ? 'Unfold' : 'Fold'} ${range(index, line.end)}`);
+                            template_u1.delegate(element_05hfnt9i, 'click', () => toggle(index));
+                            return root_05hfnt9g;
+                        })()
+                        : template_05hfnt9j());
+                    return root_05hfnt99;
+                })());
+                template_u1.slot(element_05hfnt96, line.end > index && (() => {
+                    let root_05hfnt9k = template_05hfnt9l(), element_05hfnt9m = root_05hfnt9k.firstChild;
+                    template_u1.setProperty(element_05hfnt9m, 'aria-label', template_u1.interpolate(["Unfold ", (range(index, line.end))]));
+                    template_u1.setProperty(element_05hfnt9m, 'hidden', () => !rows[index].folded);
+                    template_u1.delegate(element_05hfnt9m, 'click', () => toggle(index));
+                    return root_05hfnt9k;
+                })(), 2);
+                template_u1.setProperty(element_05hfnt98, 'innerHTML', line.html);
+                template_u1.setProperty(element_05hfnt96, 'hidden', () => rows[index].hidden);
+                return root_05hfnt94;
+            }), 1);
+            template_u1.setList(element_05hfnt93, 'style', template_u1.interpolate(["--digits: ", (Math.max(3, String(lines.length).length))]));
+            return root_05hfnt91;
+        })();
+    }
+    function update(remeasure = false) {
+        if (!map) {
+            return;
+        }
+        stale ||= remeasure;
+        if (frame) {
+            return;
+        }
+        frame = requestAnimationFrame(() => {
+            frame = 0;
+            if (stale) {
+                stale = false;
+                measure();
+            }
+            if (map && rail && scroller && source) {
+                map.paint(source, { clientHeight: scroller.clientHeight, scrollHeight: scroller.scrollHeight, scrollTop: scroller.scrollTop }, palette, rail.clientWidth);
+            }
+        });
+    }
+    return (() => {
+        let root_05hfnt9n = template_05hfnt9o(), element_05hfnt9p = root_05hfnt9n.firstChild, element_05hfnt9q = element_05hfnt9p.firstChild, element_05hfnt9r = element_05hfnt9p.firstElementChild.firstElementChild, element_05hfnt9s = element_05hfnt9p.firstElementChild;
+        template_u1.slot(element_05hfnt9q, (filename || copyable) && (() => {
+            let root_05hfnt9t = template_05hfnt9u(), element_05hfnt9v = root_05hfnt9t.firstChild.firstChild, element_05hfnt9w = root_05hfnt9t.firstChild;
+            template_u1.slot(element_05hfnt9v, filename && (() => {
+                let root_05hfnt9x = template_05hfnt9y(), element_05hfnt9z = root_05hfnt9x.firstChild;
+                template_u1.slot(element_05hfnt9z, filename, 1);
+                template_u1.setProperty(element_05hfnt9z, 'title', filename);
+                return root_05hfnt9x;
+            })());
+            template_u1.slot(element_05hfnt9w, copyable && copy({
+                class: 'code-viewer-copy',
+                error: 'Copy unavailable. Select and copy the code.',
+                label: 'Copy code',
+                success: 'Code copied',
+                value: current
+            }), 2);
+            return root_05hfnt9t;
+        })());
+        new template_u1.EffectSlot(element_05hfnt9r, () => {
+            let text = current();
+            return untrack(() => render(text));
+        }, 1);
+        template_u1.slot(element_05hfnt9s, map && map.template({
+            onconnect: (element) => {
+                rail = element;
+                update(true);
+            }
+        }), 2);
+        template_u1.setProperty(element_05hfnt9r, 'aria-label', filename ?? 'Code');
+        template_u1.setProperties(element_05hfnt9r, scrollbar({ hover: true }));
+        template_u1.setProperties(element_05hfnt9r, size);
+        template_u1.on(element_05hfnt9r, 'scroll', () => update());
+        template_u1.setList(element_05hfnt9p, 'class', wrap ? 'code-viewer--wrap' : '');
+        template_u1.setProperties(element_05hfnt9p, attributes);
+        template_u1.ondisconnect(element_05hfnt9p, () => {
+            cancelAnimationFrame(frame);
+            frame = 0;
+        });
+        return root_05hfnt9n;
+    })();
+});

package/build/components/editor/viewer/model.d.ts

@@ -0,0 +1,15 @@
+import { type Language, type Token } from '../code/syntax.js';
+type Line = {
+    end: number;
+    html: string;
+    text: string;
+    tokens: readonly Token[];
+};
+type Options = {
+    fold?: boolean;
+    whitespace?: boolean;
+};
+declare const outline: (source: string, language: Language, { fold, whitespace }?: Options) => Line[];
+declare const hidden: (lines: readonly Line[], folded: ReadonlySet<number>) => boolean[];
+export { hidden, outline };
+export type { Line, Options };

package/build/components/editor/viewer/model.js

@@ -0,0 +1,73 @@
+import { EditorDocument } from '../code/document.js';
+import { structureOf } from '../code/folding.js';
+import { SyntaxCache } from '../code/syntax.js';
+const BUDGET = 3000;
+const ESCAPE = /[&<>"]/;
+const ESCAPES = { '"': '&quot;', '&': '&amp;', '<': '&lt;', '>': '&gt;' };
+const LONG = 10000;
+const NO_TOKENS = [];
+function escape(text) {
+    return ESCAPE.test(text) ? text.replace(/[&<>"]/g, (character) => ESCAPES[character]) : text;
+}
+function markup(text, tokens, whitespace) {
+    if (text.length > LONG || tokens.length > BUDGET) {
+        return escape(text);
+    }
+    let at = 0, out = '';
+    for (let i = 0, n = tokens.length; i < n; i++) {
+        let { from, kind, to } = tokens[i];
+        if (to <= at) {
+            continue;
+        }
+        from = Math.max(from, at);
+        if (from > at) {
+            out += piece(text.slice(at, from), whitespace);
+        }
+        out += `<span class="code-viewer-token--${kind}">${piece(text.slice(from, to), whitespace)}</span>`;
+        at = to;
+    }
+    return at < text.length ? out + piece(text.slice(at), whitespace) : out;
+}
+function piece(text, whitespace) {
+    if (!whitespace) {
+        return escape(text);
+    }
+    let out = '', start = 0;
+    for (let i = 0, n = text.length; i < n; i++) {
+        let code = text.charCodeAt(i);
+        if (code !== 32 && code !== 9) {
+            continue;
+        }
+        out += escape(text.slice(start, i)) + (code === 9 ? '<span class="code-viewer-tab">\t</span>' : '<span class="code-viewer-space"> </span>');
+        start = i + 1;
+    }
+    return out + escape(text.slice(start));
+}
+const outline = (source, language, { fold = true, whitespace = false } = {}) => {
+    let cache = new SyntaxCache(new EditorDocument(source), language), document = cache.document, lines = [];
+    for (let i = 0, n = document.lineCount; i < n; i++) {
+        let text = document.lineText(i), tokens = language === 'plain' ? NO_TOKENS : cache.lineTokens(i);
+        lines.push({ end: -1, html: markup(text, tokens, whitespace), text, tokens });
+    }
+    if (!fold) {
+        return lines;
+    }
+    let folds = structureOf(cache).folds;
+    for (let i = 0, n = folds.length; i < n; i++) {
+        let range = folds[i], end = range.close === undefined && range.to === document.value.length ? range.endLine : range.endLine - 1, line = lines[range.line - 1];
+        if (line.end === -1 && end > range.line) {
+            line.end = end;
+        }
+    }
+    return lines;
+};
+const hidden = (lines, folded) => {
+    let out = new Array(lines.length).fill(false);
+    for (let i = 0, n = lines.length; i < n; i++) {
+        if (!out[i] && folded.has(i) && lines[i].end > i) {
+            out.fill(true, i + 1, lines[i].end);
+        }
+    }
+    return out;
+};
+export { hidden, outline };

package/build/components/editor/workspace/index.d.ts

@@ -1,4 +1,5 @@
 import { type Attributes, type Renderable } from '@esportsplus/template';
+import { FileTreeDecorations } from '../tree/index.js';
 import { type CodeEditorAttributes } from '../code/editor.js';
 import type { Controller as EditorController, Options as EditorOptions } from '../code/view.js';
 import { EditorWorkspaceModel, type WorkspaceHost, type WorkspaceTab, type WorkspaceTarget } from './model.js';
@@ -9,6 +10,7 @@ type CodeEditorWorkspaceAttributes = Attributes & {
     addons?: (context: WorkspaceEditorContext) => void | VoidFunction;
     controller?: (controller: CodeEditorWorkspaceController) => void;
     cwd?: string;
+    decorations?: FileTreeDecorations | FileTreeDecorations[];
     editor?: (tab: WorkspaceTab) => WorkspaceEditor | undefined;
     editorOptions?: EditorOptions | ((tab: WorkspaceTab) => EditorOptions);
     host?: WorkspaceHost;
@@ -22,7 +24,9 @@ type CodeEditorWorkspaceController = {
     dispose(): void;
     readonly editor: WorkspaceEditorController | undefined;
     focus(): void;
+    keybindings(): void;
     readonly model: EditorWorkspaceModel;
+    navigate(kind: 'change' | 'problem', backward?: boolean): Promise<boolean>;
     open(path: string, line?: number, column?: number): ReturnType<EditorWorkspaceModel['open']>;
     quickOpen(query?: string): void;
     refresh(): Promise<void>;
@@ -46,7 +50,7 @@ type WorkspaceEditorContext = {
     tab: WorkspaceTab;
     workspace: EditorWorkspaceModel;
 };
-type WorkspaceEditorController = Pick<EditorController, 'dispose' | 'document' | 'focus' | 'host' | 'scroller' | 'select' | 'textarea'> & Partial<Pick<EditorController, 'setDocument'>>;
+type WorkspaceEditorController = Pick<EditorController, 'dispose' | 'document' | 'focus' | 'host' | 'scroller' | 'select'> & Partial<Pick<EditorController, 'setDocument'>>;
 declare const isWorkspaceCodeEditor: (controller: WorkspaceEditorController) => controller is EditorController;
 declare const _default: {
     (): Renderable<any>;
@@ -61,4 +65,4 @@ declare const _default: {
 export default _default;
 export { EditorWorkspaceModel, isWorkspaceCodeEditor };
 export type { CodeEditorWorkspaceAttributes, CodeEditorWorkspaceController, WorkspaceEditor, WorkspaceEditorAttributes, WorkspaceEditorContext, WorkspaceEditorController };
-export type { WorkspaceAction, WorkspaceConfirmation, WorkspaceDecision, WorkspaceEntry, WorkspaceHost, WorkspacePreferences, WorkspaceTab, WorkspaceTarget } from './model.js';
+export type { WorkspaceAction, WorkspaceCompare, WorkspaceConfirmation, WorkspaceDecision, WorkspaceEntry, WorkspaceHost, WorkspacePreferences, WorkspaceSession, WorkspaceSessionTab, WorkspaceTab, WorkspaceTarget } from './model.js';