@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/code-morph/index.js

@@ -1,401 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { ReactiveArray, effect, onCleanup } from '@esportsplus/reactivity';
-import { write } from '../clipboard/index.js';
-import './scss/index.scss';
-const template_13tkti96 = template_u1.template(`<div class='code-morph'><div class='code-morph-header'><div class='code-morph-tabs' role='tablist'><span aria-hidden='true' class='code-morph-pill'></span></div><button aria-label='Copy this step' class='code-morph-copy ' type='button'><svg aria-hidden='true' class='code-morph-icon code-morph-icon--copy' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><rect height='8' rx='1.75' width='8' x='5.25' y='5.25' /><path d='M10.75 5.25V4a1.25 1.25 0 0 0-1.25-1.25H4A1.25 1.25 0 0 0 2.75 4v5.5A1.25 1.25 0 0 0 4 10.75h1.25' /></svg><svg aria-hidden='true' class='code-morph-icon code-morph-icon--check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='M3.5 8.5 6.5 11.5 12.5 4.5' /></svg></button><span class='code-morph-sr' role='status'></span></div><div class='code-morph-panel' role='tabpanel' tabindex='0'><pre class='code-morph-sr'></pre><div aria-hidden='true' class='code-morph-code'><!--$--><div class='code-morph-gutter'></div><div class='code-morph-tokens'></div></div></div><div class='code-morph-footer'><span class='code-morph-count'></span><div class='code-morph-titles'>`);
-const template_13tkti9l = template_u1.template(`<button class='code-morph-tab ' role='tab' type='button'><span class='code-morph-tab-label'>`);
-const template_13tkti9p = template_u1.template(`<span class='code-morph-added '>`);
-const template_13tkti9s = template_u1.template(`<div class='code-morph-number '>`);
-const template_13tkti9v = template_u1.template(`<span class='code-morph-token   '>`);
-const template_13tkti9y = template_u1.template(`<span class='code-morph-title '>`);
-class ReactiveObject_13tkti90 extends reactivity_u0.ReactiveObject {
-    #step = this[reactivity_u0.SIGNAL](0);
-    constructor() {
-        super(null);
-    }
-    get step() {
-        return reactivity_u0.read(this.#step);
-    }
-    set step(_v0) {
-        reactivity_u0.write(this.#step, _v0);
-    }
-}
-class ReactiveObject_13tkti91 extends reactivity_u0.ReactiveObject {
-    #status;
-    constructor(_p0) {
-        super(null);
-        this.#status = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get status() {
-        return reactivity_u0.read(this.#status);
-    }
-    set status(_v0) {
-        reactivity_u0.write(this.#status, _v0);
-    }
-}
-class ReactiveObject_13tkti92 extends reactivity_u0.ReactiveObject {
-    #added;
-    #step = this[reactivity_u0.SIGNAL](0);
-    constructor(_p0) {
-        super(null);
-        this.#added = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get added() {
-        return reactivity_u0.read(this.#added);
-    }
-    set added(_v0) {
-        reactivity_u0.write(this.#added, _v0);
-    }
-    get step() {
-        return reactivity_u0.read(this.#step);
-    }
-    set step(_v1) {
-        reactivity_u0.write(this.#step, _v1);
-    }
-}
-class ReactiveObject_13tkti93 extends reactivity_u0.ReactiveObject {
-    #col;
-    #kind;
-    #phase;
-    #row;
-    #text;
-    constructor(_p0, _p1, _p2, _p3, _p4) {
-        super(null);
-        this.#col = this[reactivity_u0.SIGNAL](_p0);
-        this.#kind = this[reactivity_u0.SIGNAL](_p1);
-        this.#phase = this[reactivity_u0.SIGNAL](_p2);
-        this.#row = this[reactivity_u0.SIGNAL](_p3);
-        this.#text = this[reactivity_u0.SIGNAL](_p4);
-    }
-    get col() {
-        return reactivity_u0.read(this.#col);
-    }
-    set col(_v0) {
-        reactivity_u0.write(this.#col, _v0);
-    }
-    get kind() {
-        return reactivity_u0.read(this.#kind);
-    }
-    set kind(_v1) {
-        reactivity_u0.write(this.#kind, _v1);
-    }
-    get phase() {
-        return reactivity_u0.read(this.#phase);
-    }
-    set phase(_v2) {
-        reactivity_u0.write(this.#phase, _v2);
-    }
-    get row() {
-        return reactivity_u0.read(this.#row);
-    }
-    set row(_v3) {
-        reactivity_u0.write(this.#row, _v3);
-    }
-    get text() {
-        return reactivity_u0.read(this.#text);
-    }
-    set text(_v4) {
-        reactivity_u0.write(this.#text, _v4);
-    }
-}
-class ReactiveObject_13tkti94 extends reactivity_u0.ReactiveObject {
-    #col;
-    #kind;
-    #phase;
-    #row;
-    #text;
-    constructor(_p0, _p1, _p2, _p3, _p4) {
-        super(null);
-        this.#col = this[reactivity_u0.SIGNAL](_p0);
-        this.#kind = this[reactivity_u0.SIGNAL](_p1);
-        this.#phase = this[reactivity_u0.SIGNAL](_p2);
-        this.#row = this[reactivity_u0.SIGNAL](_p3);
-        this.#text = this[reactivity_u0.SIGNAL](_p4);
-    }
-    get col() {
-        return reactivity_u0.read(this.#col);
-    }
-    set col(_v0) {
-        reactivity_u0.write(this.#col, _v0);
-    }
-    get kind() {
-        return reactivity_u0.read(this.#kind);
-    }
-    set kind(_v1) {
-        reactivity_u0.write(this.#kind, _v1);
-    }
-    get phase() {
-        return reactivity_u0.read(this.#phase);
-    }
-    set phase(_v2) {
-        reactivity_u0.write(this.#phase, _v2);
-    }
-    get row() {
-        return reactivity_u0.read(this.#row);
-    }
-    set row(_v3) {
-        reactivity_u0.write(this.#row, _v3);
-    }
-    get text() {
-        return reactivity_u0.read(this.#text);
-    }
-    set text(_v4) {
-        reactivity_u0.write(this.#text, _v4);
-    }
-}
-const CODE_MORPH_TAB = Symbol.for('@esportsplus/ui/code-morph.tab');
-const KEYWORDS = new Set('import from export default function return const let var if else new true false null undefined async await try catch finally throw typeof'.split(' '));
-const LINE = 22;
-const PAD = 16;
-const PATTERN = /(\/\/[^\n]*)|("[^"\n]*"|'[^'\n]*'|`[^`]*`)|(\b\d+(?:\.\d+)?\b)|([A-Za-z_$][\w$]*)|(=>|===|!==|&&|\|\||\?\.|\.\.\.|[^\s\w])/g;
-const RESET = 1600;
-let uid = 0;
-function instant(element, update) {
-    element.classList.add('--instant');
-    update();
-    getComputedStyle(element).opacity;
-    element.classList.remove('--instant');
-}
-function match(a, b) {
-    let m = b.length, n = a.length, w = m + 1, dp = new Uint16Array((n + 1) * w), pairs = new Array(m).fill(-1);
-    function same(i, j) {
-        return a[i].text === b[j].text && a[i].kind === b[j].kind;
-    }
-    for (let i = n - 1; i >= 0; i--) {
-        for (let j = m - 1; j >= 0; j--) {
-            dp[i * w + j] = same(i, j) ? dp[(i + 1) * w + j + 1] + 1 : Math.max(dp[(i + 1) * w + j], dp[i * w + j + 1]);
-        }
-    }
-    let i = 0, j = 0;
-    while (i < n && j < m) {
-        if (same(i, j)) {
-            pairs[j] = i;
-            i++;
-            j++;
-        }
-        else if (dp[(i + 1) * w + j] >= dp[i * w + j + 1]) {
-            i++;
-        }
-        else {
-            j++;
-        }
-    }
-    return pairs;
-}
-function tokenize(code) {
-    let col = 0, last = 0, row = 0, tokens = [];
-    function advance(text) {
-        for (let i = 0, n = text.length; i < n; i++) {
-            if (text[i] === '\n') {
-                col = 0;
-                row++;
-            }
-            else {
-                col++;
-            }
-        }
-    }
-    for (let m of code.matchAll(PATTERN)) {
-        let index = m.index ?? 0, kind = 'plain', text = m[0];
-        advance(code.slice(last, index));
-        if (m[1]) {
-            kind = 'comment';
-        }
-        else if (m[2]) {
-            kind = 'string';
-        }
-        else if (m[3]) {
-            kind = 'number';
-        }
-        else if (m[5]) {
-            kind = 'punct';
-        }
-        else if (KEYWORDS.has(text)) {
-            kind = 'keyword';
-        }
-        else if (code[index + text.length] === '(') {
-            kind = 'fn';
-        }
-        else if (/^[A-Z]/.test(text)) {
-            kind = 'type';
-        }
-        tokens.push({ col, kind, row, text });
-        advance(text);
-        last = index + text.length;
-    }
-    return tokens;
-}
-function template({ label = 'Tutorial steps', state = new ReactiveObject_13tkti90(), steps, ...attributes }) {
-    let applied = -1, attempt = 0, cols = 0, copy = new ReactiveObject_13tkti91('idle'), id = `code-morph-${++uid}`, items = new ReactiveArray(), observer, ordered = [], pill, rows = [], sources = steps.map((step) => step.code.trim()), tabs = [], timer, tokens = sources.map(tokenize), view = new ReactiveObject_13tkti92(new Set());
-    for (let i = 0, n = sources.length; i < n; i++) {
-        let lines = sources[i].split('\n');
-        rows.push(lines.length);
-        for (let j = 0, o = lines.length; j < o; j++) {
-            cols = Math.max(cols, lines[j].length);
-        }
-    }
-    let height = Math.max(...rows);
-    function apply(next) {
-        if (next === applied || !tokens[next]) {
-            return;
-        }
-        let initial = applied === -1;
-        applied = next;
-        view.step = next;
-        place();
-        if (initial) {
-            ordered = tokens[next].map((token) => new ReactiveObject_13tkti93(token.col, token.kind, 'idle', token.row, token.text));
-            items.push(...ordered);
-            return;
-        }
-        for (let i = items.$length - 1; i >= 0; i--) {
-            if (items[i].phase === 'exit') {
-                items.splice(i, 1);
-            }
-        }
-        let added = new Set(), previous = ordered, target = tokens[next], pairs = match(previous, target), used = new Set();
-        ordered = [];
-        for (let j = 0, n = target.length; j < n; j++) {
-            let partner = pairs[j], token = target[j];
-            if (partner >= 0) {
-                let item = previous[partner];
-                item.col = token.col;
-                item.phase = 'stay';
-                item.row = token.row;
-                ordered.push(item);
-                used.add(partner);
-                continue;
-            }
-            let item = new ReactiveObject_13tkti94(token.col, token.kind, 'enter', token.row, token.text);
-            added.add(token.row);
-            items.push(item);
-            ordered.push(item);
-        }
-        for (let i = 0, n = previous.length; i < n; i++) {
-            if (!used.has(i)) {
-                previous[i].phase = 'exit';
-            }
-        }
-        view.added = added;
-    }
-    async function clip() {
-        let n = ++attempt;
-        show('copied');
-        if (!(await write(sources[view.step])) && n === attempt) {
-            show('failed');
-        }
-    }
-    function place() {
-        let tab = tabs[applied];
-        if (!pill || !tab) {
-            return;
-        }
-        pill.style.translate = `${tab.offsetLeft}px 0`;
-        pill.style.width = `${tab.offsetWidth}px`;
-    }
-    function show(status) {
-        clearTimeout(timer);
-        copy.status = status;
-        timer = setTimeout(() => {
-            copy.status = 'idle';
-        }, RESET);
-    }
-    let stop = effect(() => {
-        apply(state.step);
-    });
-    onCleanup(() => {
-        clearTimeout(timer);
-        observer?.disconnect();
-        stop();
-    });
-    return (() => {
-        let root_13tkti95 = template_13tkti96(), element_13tkti97 = root_13tkti95.firstChild, element_13tkti98 = element_13tkti97.firstElementChild.firstElementChild, element_13tkti99 = element_13tkti98.firstElementChild, element_13tkti9a = element_13tkti98.nextElementSibling, element_13tkti9b = element_13tkti9a.nextElementSibling, element_13tkti9c = element_13tkti97.firstElementChild.nextElementSibling, element_13tkti9d = element_13tkti9c.firstElementChild, element_13tkti9e = element_13tkti9d.nextElementSibling, element_13tkti9f = element_13tkti9e.firstChild, element_13tkti9g = element_13tkti9e.firstElementChild, element_13tkti9h = element_13tkti9g.nextElementSibling, element_13tkti9i = element_13tkti9c.nextElementSibling.firstElementChild, element_13tkti9j = element_13tkti9i.nextElementSibling;
-        template_u1.setProperties(element_13tkti97, this?.attributes);
-        template_u1.setProperties(element_13tkti97, attributes);
-        template_u1.setProperty(element_13tkti98, 'aria-label', label);
-        template_u1.onconnect(element_13tkti98, (element) => {
-            if (pill) {
-                instant(pill, place);
-            }
-            observer = new ResizeObserver(() => {
-                if (pill) {
-                    instant(pill, place);
-                }
-            });
-            observer.observe(element);
-        });
-        template_u1.delegate(element_13tkti98, 'keydown', (e) => {
-            let end = steps.length - 1, next = {
-                ArrowLeft: applied === 0 ? end : applied - 1,
-                ArrowRight: applied === end ? 0 : applied + 1,
-                End: end,
-                Home: 0
-            }[e.key];
-            if (next === undefined) {
-                return;
-            }
-            e.preventDefault();
-            state.step = next;
-            tabs[next]?.focus();
-        });
-        template_u1.onrender(element_13tkti99, (element) => { pill = element; });
-        template_u1.slot(element_13tkti98, steps.map((step, i) => {
-            let root_13tkti9k = template_13tkti9l(), element_13tkti9m = root_13tkti9k.firstChild, element_13tkti9n = element_13tkti9m.firstElementChild;
-            template_u1.setList(element_13tkti9m, 'class', () => view.step === i && '--active');
-            template_u1.setProperty(element_13tkti9m, 'id', template_u1.interpolate([(id), "-tab-", (i)]));
-            template_u1.setProperties(element_13tkti9m, this?.attributes?.[CODE_MORPH_TAB]);
-            template_u1.setProperties(element_13tkti9m, attributes[CODE_MORPH_TAB]);
-            template_u1.setProperty(element_13tkti9m, 'aria-controls', `${id}-panel`);
-            template_u1.setProperty(element_13tkti9m, 'aria-selected', () => String(view.step === i));
-            template_u1.delegate(element_13tkti9m, 'click', () => {
-                state.step = i;
-            });
-            template_u1.onrender(element_13tkti9m, (element) => {
-                tabs[i] = element;
-            });
-            template_u1.setProperty(element_13tkti9m, 'tabindex', () => view.step === i ? 0 : -1);
-            template_u1.slot(element_13tkti9n, step.label, 1);
-            return root_13tkti9k;
-        }), 2);
-        template_u1.setList(element_13tkti9a, 'class', () => copy.status === 'copied' && '--copied');
-        template_u1.delegate(element_13tkti9a, 'click', clip);
-        new template_u1.EffectSlot(element_13tkti9b, () => copy.status === 'copied' ? 'Copied' : copy.status === 'failed' ? "Couldn't copy" : '', 1);
-        template_u1.setProperty(element_13tkti9c, 'id', template_u1.interpolate([(id), "-panel"]));
-        template_u1.setProperty(element_13tkti9c, 'aria-labelledby', () => `${id}-tab-${view.step}`);
-        new template_u1.EffectSlot(element_13tkti9d, () => sources[view.step], 1);
-        template_u1.setList(element_13tkti9e, 'style', () => `height: ${rows[view.step] * LINE + PAD * 2}px`);
-        template_u1.slot(element_13tkti9f, Array.from({ length: height }, (_, row) => {
-            let root_13tkti9o = template_13tkti9p(), element_13tkti9q = root_13tkti9o.firstChild;
-            template_u1.setList(element_13tkti9q, 'class', () => view.added.has(row) && '--active');
-            template_u1.setList(element_13tkti9q, 'style', template_u1.interpolate(["top: ", (PAD + row * LINE), "px"]));
-            return root_13tkti9o;
-        }));
-        template_u1.slot(element_13tkti9g, Array.from({ length: height }, (_, row) => {
-            let root_13tkti9r = template_13tkti9s(), element_13tkti9t = root_13tkti9r.firstChild;
-            template_u1.setList(element_13tkti9t, 'class', () => row >= rows[view.step] && '--hidden');
-            template_u1.slot(element_13tkti9t, row + 1, 1);
-            return root_13tkti9r;
-        }), 1);
-        template_u1.setList(element_13tkti9h, 'style', template_u1.interpolate(["width: calc(", (cols), "ch + 20px)"]));
-        element_13tkti9h.appendChild(new template_u1.ArraySlot(items, (item) => {
-            let root_13tkti9u = template_13tkti9v(), element_13tkti9w = root_13tkti9u.firstChild;
-            template_u1.setList(element_13tkti9w, 'class', template_u1.interpolate(["code-morph-token--", (item.kind)]));
-            template_u1.setList(element_13tkti9w, 'class', () => item.phase === 'enter' && '--enter');
-            template_u1.setList(element_13tkti9w, 'class', () => item.phase === 'exit' && '--exit');
-            template_u1.setList(element_13tkti9w, 'style', () => `transform: translate(${item.col}ch, ${item.row * LINE}px)`);
-            template_u1.slot(element_13tkti9w, item.text, 1);
-            return root_13tkti9u;
-        }, true).fragment);
-        new template_u1.EffectSlot(element_13tkti9i, () => `${view.step + 1}/${steps.length}`, 1);
-        template_u1.slot(element_13tkti9j, steps.map((step, i) => {
-            let root_13tkti9x = template_13tkti9y(), element_13tkti9z = root_13tkti9x.firstChild;
-            template_u1.setProperty(element_13tkti9z, 'aria-hidden', () => String(view.step !== i));
-            template_u1.setList(element_13tkti9z, 'class', () => view.step === i && '--active');
-            template_u1.slot(element_13tkti9z, step.title, 1);
-            return root_13tkti9x;
-        }), 1);
-        return root_13tkti95;
-    })();
-}
-export default Object.assign(template, { tab: CODE_MORPH_TAB });

package/build/components/code-morph/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.code-morph{--background:var(--color-grey-400);--border-color:var(--color-border-300);--box-shadow:0 0 0 1px oklch(0% 0 0/.06), var(--box-shadow-200);--color:var(--color-text-500);--exit-color:var(--color-red-500);--focus-color:var(--color-text-500);--font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--font-size:var(--font-size-300);--muted-color:var(--color-text-300);--move-duration:.48s;--move-timing-function:cubic-bezier(.77, 0, .175, 1);--pill-background:var(--color-white-300);--pill-box-shadow:0 0 0 1px oklch(0% 0 0/.06), var(--box-shadow-100);--pill-duration:.3s;--pill-timing-function:linear(0, .0432 4.2%, .1402 8.3%, .2575 12.5%, .3764 16.7%, .4867 20.8%, .584 25%, .667 29.2%, .7361 33.3%, .7925 37.5%, .838 41.7%, .8743 45.8%, .9029 50%, .9254 54.2%, .9428 58.3%, .9564 62.5%, .9668 66.7%, .9748 70.8%, .9809 75%, .9856 79.2%, .9892 83.3%, .9918 87.5%, .9939 91.7%, .9954 95.8%, 1);--radius:var(--border-radius-700);--row-height:22px;--syntax-comment:var(--color-text-300);--syntax-fn:oklch(from var(--color-blue-400) .5 .14 255);--syntax-keyword:oklch(from var(--color-purple-400) .5 .15 300);--syntax-number:oklch(from var(--color-red-400) .54 .14 50);--syntax-plain:var(--color);--syntax-punct:color-mix(in oklab, var(--color-text-500) 55%, transparent);--syntax-string:oklch(from var(--color-green-500) .5 .11 150);--syntax-type:oklch(from var(--color-blue-400) .5 .1 200);--tab-radius:var(--border-radius-400);--width:580px;background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);color:var(--color);max-width:100%;width:var(--width);overflow:hidden}.code-morph-added{background:color-mix(in oklab, var(--color-text-500) 4%, transparent);border-left:2px solid color-mix(in oklab, var(--color-text-500) 25%, transparent);height:var(--row-height);opacity:0;pointer-events:none;z-index:2;transition:opacity .15s ease-out;position:absolute;inset-inline:0}.code-morph-added.--active{opacity:1;transition:opacity .3s ease-out .3s}.code-morph-code{font-family:var(--font-family);font-size:var(--font-size);line-height:var(--row-height);transition:height var(--move-duration) var(--move-timing-function);padding-block:16px;display:flex;position:relative}.code-morph-copy{border-radius:var(--tab-radius);color:var(--muted-color);cursor:pointer;touch-action:manipulation;background:0 0;border:0;outline:none;flex-shrink:0;place-items:center;width:36px;height:36px;transition:color .15s ease-out,scale .15s ease-out;display:grid}.code-morph-copy:active{scale:.96}.code-morph-copy:focus-visible{outline:2px solid var(--focus-color);outline-offset:1px}.code-morph-copy:hover{color:var(--color)}.code-morph-count{color:var(--muted-color);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500);flex-shrink:0}.code-morph-footer{border-top:1px solid var(--border-color);font-size:var(--font-size-400);height:48px;padding-inline:var(--size-400);align-items:center;gap:12px;display:flex}.code-morph-gutter{background:var(--background);color:color-mix(in oklab, var(--muted-color) 60%, transparent);font-variant-numeric:tabular-nums;padding-inline:var(--size-400);text-align:right;-webkit-user-select:none;user-select:none;z-index:1;flex-shrink:0;position:sticky;left:0}.code-morph-header{border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;gap:12px;padding:8px;display:flex}.code-morph-icon{filter:blur();grid-area:1/1;width:16px;height:16px;transition:filter .3s cubic-bezier(.25,1,.5,1),opacity .3s cubic-bezier(.25,1,.5,1),scale .3s cubic-bezier(.25,1,.5,1)}.code-morph-icon--check,.code-morph-copy.--copied .code-morph-icon--copy{filter:blur(4px);opacity:0;scale:.25}.code-morph-copy.--copied .code-morph-icon--check{filter:blur();opacity:1;scale:1}.code-morph-number{height:var(--row-height);transition:opacity .2s ease-out}.code-morph-number.--hidden{opacity:0}.code-morph-panel{outline:none;overflow:auto hidden}.code-morph-panel:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px}.code-morph-pill{background:var(--pill-background);border-radius:var(--tab-radius);box-shadow:var(--pill-box-shadow);pointer-events:none;height:100%;transition:translate var(--pill-duration) var(--pill-timing-function), width var(--pill-duration) var(--pill-timing-function);position:absolute;top:0;left:0}.code-morph-pill.--instant{transition:none}.code-morph-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:0;position:absolute;overflow:hidden}.code-morph-tab{border-radius:var(--tab-radius);color:var(--muted-color);cursor:pointer;font-size:var(--font-size-300);font-weight:var(--font-weight-500);touch-action:manipulation;-webkit-user-select:none;user-select:none;background:0 0;border:0;outline:none;height:36px;padding-inline:12px;transition:color .15s ease-out,scale .15s ease-out;position:relative}.code-morph-tab:active{scale:.96}.code-morph-tab:focus-visible{outline:2px solid var(--focus-color);outline-offset:1px}.code-morph-tab:hover,.code-morph-tab.--active{color:var(--color)}.code-morph-tab-label{position:relative}.code-morph-tabs{align-items:center;gap:4px;display:flex;position:relative}.code-morph-title{opacity:0;text-overflow:ellipsis;white-space:nowrap;grid-area:1/1;transition:filter .12s cubic-bezier(.23,1,.32,1),opacity .12s cubic-bezier(.23,1,.32,1);overflow:hidden}.code-morph-title:not(.--active){filter:blur(2px)}.code-morph-title.--active{opacity:1;animation:.24s cubic-bezier(.23,1,.32,1) code-morph-title}.code-morph-titles{flex:1;min-width:0;display:grid}.code-morph-token{color:var(--syntax-plain);transition:background-color .2s ease, color .2s ease, transform var(--move-duration) var(--move-timing-function);white-space:pre;border-radius:3px;position:absolute;top:0;left:0}.code-morph-token--comment{color:var(--syntax-comment)}.code-morph-token--fn{color:var(--syntax-fn)}.code-morph-token--keyword{color:var(--syntax-keyword)}.code-morph-token--number{color:var(--syntax-number)}.code-morph-token--punct{color:var(--syntax-punct)}.code-morph-token--string{color:var(--syntax-string)}.code-morph-token--type{color:var(--syntax-type)}.code-morph-token.--enter{animation:.26s cubic-bezier(.23,1,.32,1) .3s both code-morph-enter}.code-morph-token.--exit{background-color:color-mix(in oklab, var(--exit-color) 12%, transparent);color:var(--exit-color);animation:.36s cubic-bezier(.23,1,.32,1) both code-morph-exit}.code-morph-tokens{white-space:pre;flex-shrink:0;position:relative}@media (prefers-reduced-motion:reduce){.code-morph-code,.code-morph-pill{transition:none}.code-morph-copy,.code-morph-tab{transition:color .15s ease-out}.code-morph-title.--active{animation-name:code-morph-fade-in}.code-morph-token{transition:background-color .2s,color .2s}.code-morph-token.--enter{animation:.2s .12s both code-morph-fade-in}.code-morph-token.--exit{animation:.16s both code-morph-fade-out}}@keyframes code-morph-enter{0%{filter:blur(4px);opacity:0;translate:0 4px}to{filter:none;opacity:1;translate:0}}@keyframes code-morph-exit{0%,40%{filter:none;opacity:1;translate:0}to{filter:blur(2px);opacity:0;translate:0 -3px}}@keyframes code-morph-fade-in{0%{opacity:0}to{opacity:1}}@keyframes code-morph-fade-out{0%{opacity:1}to{opacity:0}}@keyframes code-morph-title{0%{filter:blur(4px);opacity:0;translate:0 4px}to{filter:blur();opacity:1;translate:0}}}
-/*$vite$:1*/

package/build/components/collapsible-sidebar/index.d.ts

@@ -1,41 +0,0 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
-import '../tooltip/index.js';
-import './scss/index.scss';
-type A = Attributes & {
-    [COLLAPSIBLE_SIDEBAR_ITEM]?: Attributes;
-    [COLLAPSIBLE_SIDEBAR_NAV]?: Attributes;
-    [COLLAPSIBLE_SIDEBAR_TOGGLE]?: Attributes;
-    expanded?: boolean;
-    items: Item[];
-    label?: string;
-    selected?: string;
-    state?: State;
-};
-type Item = {
-    icon: Renderable<unknown>;
-    id: string;
-    label: string;
-};
-type State = {
-    expanded: boolean;
-    selected: string;
-};
-declare const COLLAPSIBLE_SIDEBAR_ITEM: unique symbol;
-declare const COLLAPSIBLE_SIDEBAR_NAV: unique symbol;
-declare const COLLAPSIBLE_SIDEBAR_TOGGLE: unique symbol;
-declare const _default: {
-    (): Renderable<any>;
-    <T extends A>(attributes: T): Renderable<any>;
-    <T extends Renderable<any>>(content: T): Renderable<any>;
-    (attributes: A, content?: Renderable<any>): Renderable<any>;
-    bind(context: {
-        attributes?: Partial<A> | undefined;
-        content?: Renderable<any>;
-    }): any;
-} & {
-    readonly item: typeof COLLAPSIBLE_SIDEBAR_ITEM;
-    readonly nav: typeof COLLAPSIBLE_SIDEBAR_NAV;
-    readonly toggle: typeof COLLAPSIBLE_SIDEBAR_TOGGLE;
-};
-export default _default;
-export type { Item, State };

package/build/components/collapsible-sidebar/index.js

@@ -1,105 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import { component } from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import '../tooltip/index.js';
-import './scss/index.scss';
-const template_1ti86962 = template_u1.template(`<div class='collapsible-sidebar'><nav class='collapsible-sidebar-nav'><span aria-hidden='true' class='collapsible-sidebar-highlight'></span><ul class='collapsible-sidebar-list'></ul></nav><div aria-hidden='true' class='collapsible-sidebar-tip tooltip'><span class='collapsible-sidebar-tip-message tooltip-message tooltip-message--e'></span></div><div class='collapsible-sidebar-main'><div class='collapsible-sidebar-header'><button class='collapsible-sidebar-toggle' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><rect height='10.5' rx='2' width='11.5' x='2.25' y='2.75' /><path d='M6.25 2.75v10.5' />`);
-const template_1ti8696c = template_u1.template(`<li><button class='collapsible-sidebar-item' type='button'><span class='collapsible-sidebar-icon'></span><span class='collapsible-sidebar-label'>`);
-class ReactiveObject_1ti86960 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](false);
-    #index = this[reactivity_u0.SIGNAL](0);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-    get index() {
-        return reactivity_u0.read(this.#index);
-    }
-    set index(_v1) {
-        reactivity_u0.write(this.#index, _v1);
-    }
-}
-const COLLAPSIBLE_SIDEBAR_ITEM = Symbol.for('@esportsplus/ui/collapsible-sidebar.item');
-const COLLAPSIBLE_SIDEBAR_NAV = Symbol.for('@esportsplus/ui/collapsible-sidebar.nav');
-const COLLAPSIBLE_SIDEBAR_TOGGLE = Symbol.for('@esportsplus/ui/collapsible-sidebar.toggle');
-const TOOLTIP_DELAY = 400;
-let uid = 0;
-export default Object.assign(component(function ({ expanded = true, items, label = 'Main', selected, state = reactivity_u0.reactive({ expanded, selected: selected ?? items[0]?.id ?? '' }), ...attributes }, content) {
-    let id = `collapsible-sidebar-${++uid}`, timer, tip = new ReactiveObject_1ti86960();
-    function hide() {
-        clearTimeout(timer);
-        tip.active = false;
-    }
-    function show(index, immediate) {
-        if (state.expanded) {
-            return;
-        }
-        clearTimeout(timer);
-        if (immediate || tip.active) {
-            tip.active = true;
-            tip.index = index;
-            return;
-        }
-        timer = setTimeout(() => {
-            tip.active = true;
-            tip.index = index;
-        }, TOOLTIP_DELAY);
-    }
-    return (() => {
-        let root_1ti86961 = template_1ti86962(), element_1ti86963 = root_1ti86961.firstChild, element_1ti86964 = element_1ti86963.firstElementChild, element_1ti86965 = element_1ti86964.firstElementChild, element_1ti86966 = element_1ti86965.nextElementSibling, element_1ti86967 = element_1ti86964.nextElementSibling, element_1ti86968 = element_1ti86967.firstElementChild, element_1ti86969 = element_1ti86967.nextElementSibling.firstElementChild.firstElementChild, element_1ti8696a = element_1ti86967.nextElementSibling;
-        template_u1.setProperties(element_1ti86963, this?.attributes);
-        template_u1.setProperties(element_1ti86963, attributes);
-        template_u1.setList(element_1ti86963, 'class', () => state.expanded && '--active');
-        template_u1.ondisconnect(element_1ti86963, () => clearTimeout(timer));
-        template_u1.setProperties(element_1ti86964, this?.attributes?.[COLLAPSIBLE_SIDEBAR_NAV]);
-        template_u1.setProperties(element_1ti86964, attributes[COLLAPSIBLE_SIDEBAR_NAV]);
-        template_u1.setProperty(element_1ti86964, 'aria-label', label);
-        template_u1.setProperty(element_1ti86964, 'id', id);
-        template_u1.on(element_1ti86964, 'pointerleave', hide);
-        template_u1.setProperty(element_1ti86965, 'hidden', () => !items.some((item) => item.id === state.selected));
-        template_u1.setList(element_1ti86965, 'style', () => `--index: ${items.findIndex((item) => item.id === state.selected)}`);
-        template_u1.slot(element_1ti86966, items.map((item, index) => {
-            let root_1ti8696b = template_1ti8696c(), element_1ti8696d = root_1ti8696b.firstChild.firstElementChild, element_1ti8696e = element_1ti8696d.firstElementChild, element_1ti8696f = element_1ti8696e.nextElementSibling;
-            template_u1.setProperties(element_1ti8696d, this?.attributes?.[COLLAPSIBLE_SIDEBAR_ITEM]);
-            template_u1.setProperties(element_1ti8696d, attributes[COLLAPSIBLE_SIDEBAR_ITEM]);
-            template_u1.setProperty(element_1ti8696d, 'aria-current', () => state.selected === item.id && 'page');
-            template_u1.setList(element_1ti8696d, 'class', () => state.selected === item.id && '--active');
-            template_u1.on(element_1ti8696d, 'blur', hide);
-            template_u1.delegate(element_1ti8696d, 'click', () => {
-                state.selected = item.id;
-            });
-            template_u1.on(element_1ti8696d, 'focus', (e) => {
-                if (e.currentTarget.matches(':focus-visible')) {
-                    show(index, true);
-                }
-            });
-            template_u1.on(element_1ti8696d, 'pointerenter', (e) => {
-                if (e.pointerType !== 'touch') {
-                    show(index, false);
-                }
-            });
-            template_u1.slot(element_1ti8696e, item.icon, 1);
-            template_u1.slot(element_1ti8696f, item.label, 1);
-            return root_1ti8696b;
-        }), 1);
-        template_u1.setList(element_1ti86967, 'class', () => tip.active && !state.expanded && '--active');
-        template_u1.setList(element_1ti86967, 'style', () => `--index: ${tip.index}`);
-        new template_u1.EffectSlot(element_1ti86968, () => items[tip.index]?.label ?? '', 1);
-        template_u1.setProperty(element_1ti86969, 'aria-controls', id);
-        template_u1.setProperties(element_1ti86969, this?.attributes?.[COLLAPSIBLE_SIDEBAR_TOGGLE]);
-        template_u1.setProperties(element_1ti86969, attributes[COLLAPSIBLE_SIDEBAR_TOGGLE]);
-        template_u1.setProperty(element_1ti86969, 'aria-expanded', () => String(state.expanded));
-        template_u1.setProperty(element_1ti86969, 'aria-label', () => state.expanded ? 'Collapse sidebar' : 'Expand sidebar');
-        template_u1.delegate(element_1ti86969, 'click', () => {
-            hide();
-            state.expanded = !state.expanded;
-        });
-        template_u1.slot(element_1ti8696a, content, 2);
-        return root_1ti86961;
-    })();
-}), { item: COLLAPSIBLE_SIDEBAR_ITEM, nav: COLLAPSIBLE_SIDEBAR_NAV, toggle: COLLAPSIBLE_SIDEBAR_TOGGLE });

package/build/components/collapsible-sidebar/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.collapsible-sidebar{--background:var(--color-white-300);--border-color:var(--color-border-300);--border-radius:var(--border-radius-700);--box-shadow:0 0 0 var(--border-width-400) var(--border-color), var(--box-shadow-200);--color:var(--color-text-300);--color-active:var(--color-text-500);--focus-color:var(--color-text-500);--font-size:var(--font-size-400);--font-weight:var(--font-weight-500);--gap:4px;--header-height:56px;--highlight-background:var(--color-grey-400);--highlight-duration:.31s;--highlight-timing-function:var(--spring);--icon-size:20px;--item-border-radius:var(--border-radius-400);--item-height:40px;--label-blur:4px;--label-delay:.12s;--label-duration-in:.2s;--label-duration-out:.1s;--padding:8px;--spring:linear(0, .0432 4.2%, .1402 8.3%, .2575 12.5%, .3764 16.7%, .4867 20.8%, .584 25%, .667 29.2%, .7361 33.3%, .7925 37.5%, .838 41.7%, .8743 45.8%, .9029 50%, .9254 54.2%, .9428 58.3%, .9564 62.5%, .9668 66.7%, .9748 70.8%, .9809 75%, .9856 79.2%, .9892 83.3%, .9918 87.5%, .9939 91.7%, .9954 95.8%, 1);--tip-duration-in:.125s;--tip-duration-out:.1s;--tip-timing-function:cubic-bezier(.23, 1, .32, 1);--width:var(--width-expanded);--width-collapsed:64px;--width-duration:.38s;--width-expanded:240px;--width-timing-function:var(--spring)}.collapsible-sidebar--dense{--gap:2px;--item-height:36px;--width-collapsed:56px}.collapsible-sidebar{background:var(--background);border-radius:var(--border-radius);box-shadow:var(--box-shadow);display:flex;position:relative;overflow:hidden}.collapsible-sidebar:not(.--active){--width:var(--width-collapsed)}.collapsible-sidebar:not(.--active) .collapsible-sidebar-label{filter:blur(var(--label-blur));opacity:0;transition-delay:0s;transition-duration:var(--label-duration-out)}.collapsible-sidebar-header{align-items:center;gap:var(--padding);height:var(--header-height);padding-inline:var(--padding);flex-shrink:0;display:flex}.collapsible-sidebar-highlight{background:var(--highlight-background);border-radius:var(--item-border-radius);height:var(--item-height);inset-inline:var(--padding);pointer-events:none;top:var(--padding);transition:translate var(--highlight-duration) var(--highlight-timing-function);translate:0 calc(var(--index) * (var(--item-height) + var(--gap)));position:absolute}.collapsible-sidebar-icon,.collapsible-sidebar-toggle svg{flex:0 0 var(--icon-size);height:var(--icon-size);width:var(--icon-size)}.collapsible-sidebar-icon{transition:scale .15s ease-out;display:flex;position:relative}.collapsible-sidebar-icon svg{width:100%;height:100%}.collapsible-sidebar-item{border-radius:var(--item-border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);height:var(--item-height);padding:0 0 0 calc((var(--width-collapsed) - var(--padding) * 2 - var(--icon-size)) / 2);touch-action:manipulation;-webkit-user-select:none;user-select:none;white-space:nowrap;background:0 0;border:0;outline:none;align-items:center;gap:12px;width:100%;transition:color .15s ease-out;display:flex;position:relative}.collapsible-sidebar-item:active .collapsible-sidebar-icon{scale:.96}.collapsible-sidebar-item:focus-visible{outline:2px solid var(--focus-color);outline-offset:-2px}.collapsible-sidebar-item:hover,.collapsible-sidebar-item.--active{color:var(--color-active)}.collapsible-sidebar-label{filter:blur();opacity:1;transition:filter var(--label-duration-in) ease-out var(--label-delay), opacity var(--label-duration-in) ease-out var(--label-delay);position:relative}.collapsible-sidebar-list{gap:var(--gap);padding:var(--padding);flex-direction:column;margin:0;list-style:none;display:flex}.collapsible-sidebar-main{flex-direction:column;flex:auto;min-width:0;display:flex}.collapsible-sidebar-nav{border-inline-end:var(--border-width-400) solid var(--border-color);transition:width var(--width-duration) var(--width-timing-function);width:var(--width);flex-shrink:0;position:relative;overflow:hidden}.collapsible-sidebar-tip.tooltip{height:var(--item-height);pointer-events:none;left:0;top:calc(var(--padding) + var(--index) * (var(--item-height) + var(--gap)));width:var(--width-collapsed);z-index:1;position:absolute}.collapsible-sidebar-tip-message.tooltip-message{--border-radius:var(--border-radius-300);--box-shadow:none;--font-weight:var(--font-weight-500);--offset:4px;--padding-horizontal:10px;--padding-vertical:0px;--scale:.97;--spacer:8px;--transition-duration:var(--tip-duration-out);--transition-timing-function:var(--tip-timing-function);align-items:center;height:32px;display:flex}.tooltip.--active>.collapsible-sidebar-tip-message.tooltip-message{--transition-duration:var(--tip-duration-in)}.collapsible-sidebar-toggle{border-radius:var(--item-border-radius);color:var(--color);cursor:pointer;height:var(--item-height);touch-action:manipulation;width:var(--item-height);background:0 0;border:0;outline:none;flex-shrink:0;justify-content:center;align-items:center;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out;display:flex}.collapsible-sidebar-toggle:active{scale:.96}.collapsible-sidebar-toggle:focus-visible{outline:2px solid var(--focus-color)}.collapsible-sidebar-toggle:hover{background:var(--highlight-background);color:var(--color-active)}@media (prefers-reduced-motion:reduce){.collapsible-sidebar-highlight,.collapsible-sidebar-icon,.collapsible-sidebar-nav{transition:none}.collapsible-sidebar-tip-message.tooltip-message{--offset:0px;--scale:1}.collapsible-sidebar-toggle{transition:background-color .15s ease-out,color .15s ease-out}}}
-/*$vite$:1*/

package/build/components/command/constants.d.ts

@@ -1,3 +0,0 @@
-declare const COMMAND_INPUT: unique symbol;
-declare const COMMAND_ITEM: unique symbol;
-export { COMMAND_INPUT, COMMAND_ITEM };

package/build/components/command/constants.js

@@ -1,3 +0,0 @@
-const COMMAND_INPUT = Symbol.for('@esportsplus/ui/command.input');
-const COMMAND_ITEM = Symbol.for('@esportsplus/ui/command.item');
-export { COMMAND_INPUT, COMMAND_ITEM };

package/build/components/command-palette/index.d.ts

@@ -1,51 +0,0 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    [COMMAND_PALETTE_DIALOG]?: Dialog;
-    [COMMAND_PALETTE_INPUT]?: Field;
-    [COMMAND_PALETTE_OPTION]?: Attributes;
-    [COMMAND_PALETTE_TRIGGER]?: Attributes;
-    commands: Command[];
-    label?: Renderable<unknown>;
-    onrun?: (command: Command) => void;
-    placeholder?: string;
-    state?: State;
-};
-type Command = {
-    group: string;
-    icon?: Renderable<unknown>;
-    id: string;
-    label: string;
-    shortcut?: string[];
-};
-type Dialog = Attributes<HTMLDialogElement> & {
-    oncancel?: never;
-    onclick?: never;
-    onclose?: never;
-    onconnect?: never;
-    ondisconnect?: never;
-};
-type Field = Attributes & {
-    onfocusin?: never;
-    onfocusout?: never;
-    onrender?: never;
-};
-type State = {
-    active: boolean;
-    index: number;
-    query: string;
-};
-declare const COMMAND_PALETTE_DIALOG: unique symbol;
-declare const COMMAND_PALETTE_INPUT: unique symbol;
-declare const COMMAND_PALETTE_OPTION: unique symbol;
-declare const COMMAND_PALETTE_TRIGGER: unique symbol;
-declare const _default: ((this: {
-    attributes?: A;
-} | void, { commands, label, onrun, placeholder, state, ...attributes }: A) => DocumentFragment | Text) & {
-    readonly dialog: typeof COMMAND_PALETTE_DIALOG;
-    readonly input: typeof COMMAND_PALETTE_INPUT;
-    readonly option: typeof COMMAND_PALETTE_OPTION;
-    readonly trigger: typeof COMMAND_PALETTE_TRIGGER;
-};
-export default _default;
-export type { Command, State };