@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/clipboard/index.js

@@ -1,5 +1,4 @@
 import copy from './copy.js';
-import onclick from './onclick.js';
 import write from './write.js';
-export default { copy, onclick, write };
-export { copy, onclick, write };
+export default { copy, write };
+export { copy, write };

package/build/components/code-morph/index.d.ts

@@ -0,0 +1,25 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [CODE_MORPH_TAB]?: Attributes;
+    label?: string;
+    state?: State;
+    steps: Step[];
+};
+type State = {
+    step: number;
+};
+type Step = {
+    code: string;
+    label: string;
+    title: string;
+};
+declare const CODE_MORPH_TAB: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { label, state, steps, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly tab: typeof CODE_MORPH_TAB;
+};
+export default _default;
+export type { State as CodeMorphState, Step as CodeMorphStep };

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

@@ -0,0 +1,401 @@
+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

@@ -0,0 +1,2 @@
+@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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,2 @@
+@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/color-picker/index.d.ts

@@ -0,0 +1,19 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [COLOR_PICKER_SWATCH]?: Attributes;
+    recent?: string[];
+    state?: {
+        error: string;
+        value: string;
+    };
+    value?: string;
+};
+declare const COLOR_PICKER_SWATCH: unique symbol;
+declare function template(this: {
+    attributes?: Pick<A, typeof COLOR_PICKER_SWATCH>;
+} | void, { recent: initial, value, state, ...attributes }?: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly swatch: typeof COLOR_PICKER_SWATCH;
+};
+export default _default;