@esportsplus/ui 0.56.4 → 0.57.0

package/src/components/tree-view/index.ts

@@ -1,285 +0,0 @@
-import { reactive } from '@esportsplus/reactivity';
-import { component, html, type Attributes, type Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-
-
-type A = Attributes & {
-    nodes: Node[];
-    open?: string[];
-    selected?: string;
-    state?: { selected: string };
-};
-
-type Item = {
-    folder: boolean;
-    id: string;
-    name: string;
-    parent: string | null;
-};
-
-type Node = {
-    children?: Node[];
-    name: string;
-};
-
-
-// Long enough to type "pa" at a normal pace, short enough that a fresh
-// letter a moment later starts a new search.
-const TYPEAHEAD_RESET = 500;
-
-
-function folders(nodes: Node[], parent: string | null, out: string[]) {
-    for (let i = 0, n = nodes.length; i < n; i++) {
-        let node = nodes[i];
-
-        if (node.children) {
-            let id = join(parent, node.name);
-
-            out.push(id);
-            folders(node.children, id, out);
-        }
-    }
-
-    return out;
-}
-
-function join(parent: string | null, name: string) {
-    return parent ? `${parent}/${name}` : name;
-}
-
-function parentOf(id: string) {
-    let i = id.lastIndexOf('/');
-
-    return i === -1 ? null : id.slice(0, i);
-}
-
-// The rows a keyboard user can reach: everything not inside a closed folder.
-function visible(nodes: Node[], open: Record<string, boolean>, parent: string | null, out: Item[]) {
-    for (let i = 0, n = nodes.length; i < n; i++) {
-        let node = nodes[i],
-            id = join(parent, node.name);
-
-        out.push({ folder: !!node.children, id, name: node.name, parent });
-
-        if (node.children && open[id]) {
-            visible(node.children, open, id, out);
-        }
-    }
-
-    return out;
-}
-
-
-export default component<A>(
-    function({ nodes, open: initial = [], selected, state = reactive({ selected: selected ?? '' }), ...attributes }: A) {
-        let highlights = new Map<string, HTMLElement>(),
-            ids = folders(nodes, null, []),
-            items = new Map<string, HTMLElement>(),
-            open = reactive(
-                Object.fromEntries( ids.map((id) => [id, initial.includes(id)]) )
-            ),
-            // A folder clips its rows only while they move; once open it stops
-            // clipping so the highlight can glide in from a row outside it.
-            settled = reactive(
-                Object.fromEntries( ids.map((id) => [id, initial.includes(id)]) )
-            ),
-            reachable = visible(nodes, open, null, []),
-            typed = '',
-            typedAt = 0,
-            ui = reactive({
-                focused: reachable.some((item) => item.id === state.selected) ? state.selected : (reachable[0]?.id ?? '')
-            });
-
-        function activate(item: Item) {
-            if (item.folder) {
-                toggle(item.id, !open[item.id]);
-                return;
-            }
-
-            glide(state.selected, item.id);
-            state.selected = item.id;
-        }
-
-        function focus(id: string) {
-            ui.focused = id;
-            items.get(id)?.focus();
-        }
-
-        // FLIP: start the new highlight where the old one sits, then let it
-        // transition home. Rows share one width, so it is a pure translate.
-        function glide(from: string, to: string) {
-            let a = highlights.get(from),
-                b = highlights.get(to);
-
-            if (!a || !b || a === b) {
-                return;
-            }
-
-            b.style.transition = 'none';
-            b.style.translate = `0 ${a.getBoundingClientRect().top - b.getBoundingClientRect().top}px`;
-            b.getBoundingClientRect();
-            b.style.transition = '';
-            b.style.translate = '';
-        }
-
-        function render(nodes: Node[], depth: number, parent: string | null): Renderable<unknown> {
-            return nodes.map((node) => {
-                let id = join(parent, node.name),
-                    item: Item = { folder: !!node.children, id, name: node.name, parent };
-
-                return html`
-                    <li
-                        class='tree-view-item'
-                        role='treeitem'
-                        style='--tree-view-depth: ${depth}'
-                        ${item.folder
-                            ? { 'aria-expanded': () => open[id] ? 'true' : 'false' }
-                            : { 'aria-selected': () => state.selected === id ? 'true' : 'false' }}
-                        ${{
-                            onfocus: () => {
-                                ui.focused = id;
-                            },
-                            onrender: (element: HTMLElement) => {
-                                items.set(id, element);
-                            },
-                            tabindex: () => ui.focused === id ? 0 : -1
-                        }}
-                    >
-                        <div
-                            class='tree-view-row ${item.folder ? 'tree-view-row--folder' : ''} ${() => state.selected === id && '--active'}'
-                            onclick='${() => activate(item)}'
-                        >
-                            <span class='tree-view-highlight' ${{ onrender: (element: HTMLElement) => { highlights.set(id, element); } }}></span>
-                            <span class='tree-view-chevron ${() => item.folder && open[id] && '--active'}'>
-                                ${item.folder && html`
-                                    <svg viewBox='0 0 16 16' aria-hidden='true' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'>
-                                        <path d='m6 4 4 4-4 4' />
-                                    </svg>
-                                `}
-                            </span>
-                            <svg class='tree-view-icon' viewBox='0 0 16 16' aria-hidden='true' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'>
-                                <path d='${item.folder
-                                    ? 'M2.25 4.5A1.25 1.25 0 0 1 3.5 3.25h2.6l1.4 1.5h5a1.25 1.25 0 0 1 1.25 1.25v5.5a1.25 1.25 0 0 1-1.25 1.25h-9A1.25 1.25 0 0 1 2.25 11.5z'
-                                    : 'M4.25 2.25h4.5l3 3v7.25a1.25 1.25 0 0 1-1.25 1.25h-6.25A1.25 1.25 0 0 1 3 12.5v-9a1.25 1.25 0 0 1 1.25-1.25zM8.5 2.5v3h3'}' />
-                            </svg>
-                            <span class='tree-view-name'>${node.name}</span>
-                        </div>
-
-                        ${node.children && html`
-                            <div
-                                class='tree-view-group ${() => open[id] && '--active'} ${() => settled[id] && '--settled'}'
-                                ${{
-                                    inert: () => !open[id],
-                                    ontransitionend: function(this: HTMLElement, event: TransitionEvent) {
-                                        if (event.target === this && event.propertyName === 'grid-template-rows' && open[id]) {
-                                            settled[id] = true;
-                                        }
-                                    }
-                                }}
-                            >
-                                <ul class='tree-view-group-content ${() => parentOf(state.selected) === id && '--active'}' role='group'>
-                                    ${render(node.children, depth + 1, id)}
-                                </ul>
-                            </div>
-                        `}
-                    </li>
-                `;
-            });
-        }
-
-        function toggle(id: string, value: boolean) {
-            open[id] = value;
-            settled[id] = false;
-        }
-
-        function typeahead(key: string, from: number, reachable: Item[]) {
-            let now = performance.now(),
-                next = (now - typedAt > TYPEAHEAD_RESET ? '' : typed) + key.toLowerCase(),
-                // Repeating one letter cycles through the items that start with it.
-                repeat = [...next].every((c) => c === next[0]),
-                start = repeat ? from + 1 : from;
-
-            typed = repeat ? next[0] : next;
-            typedAt = now;
-
-            for (let i = 0, n = reachable.length; i < n; i++) {
-                let item = reachable[(start + i) % n];
-
-                if (item.name.toLowerCase().startsWith(typed)) {
-                    focus(item.id);
-                    return;
-                }
-            }
-        }
-
-        return html`
-            <ul
-                class='tree-view'
-                role='tree'
-                ${attributes}
-                ${{
-                    onkeydown: (event: KeyboardEvent) => {
-                        let reachable = visible(nodes, open, null, []),
-                            index = reachable.findIndex((item) => item.id === ui.focused),
-                            item = reachable[index];
-
-                        if (!item) {
-                            return;
-                        }
-
-                        let target: Item | undefined;
-
-                        switch (event.key) {
-                            case 'ArrowDown':
-                                target = reachable[index + 1];
-                                break;
-                            case 'ArrowUp':
-                                target = reachable[index - 1];
-                                break;
-                            case 'Home':
-                                target = reachable[0];
-                                break;
-                            case 'End':
-                                target = reachable[reachable.length - 1];
-                                break;
-                            case 'ArrowRight':
-                                if (item.folder && open[item.id]) {
-                                    target = reachable[index + 1];
-                                }
-                                else if (item.folder) {
-                                    toggle(item.id, true);
-                                }
-                                break;
-                            case 'ArrowLeft':
-                                if (item.folder && open[item.id]) {
-                                    toggle(item.id, false);
-                                }
-                                else if (item.parent) {
-                                    focus(item.parent);
-                                }
-                                break;
-                            case 'Enter':
-                            case ' ':
-                                activate(item);
-                                break;
-                            default:
-                                if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey) {
-                                    return;
-                                }
-
-                                typeahead(event.key, index, reachable);
-                        }
-
-                        if (target) {
-                            focus(target.id);
-                        }
-
-                        event.preventDefault();
-                    }
-                }}
-            >
-                ${render(nodes, 0, null)}
-            </ul>
-        `;
-    }
-);

package/src/components/tree-view/scss/index.scss

@@ -1,169 +0,0 @@
-@use '/tokens';
-@use 'variables';
-
-.tree-view {
-    display: flex;
-    flex-direction: column;
-    font-size: var(--font-size);
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    &-chevron {
-        align-items: center;
-        color: var(--color-default);
-        display: flex;
-        flex: 0 0 var(--indent);
-        height: var(--indent);
-        justify-content: center;
-        position: relative;
-
-        svg {
-            height: var(--chevron-size);
-            transition: rotate 0.2s var(--transition-ease-out);
-            width: var(--chevron-size);
-        }
-
-        @include tokens.state(active) {
-            svg {
-                rotate: 90deg;
-            }
-        }
-    }
-
-    &-group {
-        display: grid;
-        grid-template-rows: 0fr;
-        transition: grid-template-rows 0.2s var(--transition-ease-out);
-
-        @include tokens.state(active) {
-            grid-template-rows: 1fr;
-            transition-duration: 0.25s;
-
-            > .tree-view-group-content {
-                filter: blur(0px);
-                opacity: 1;
-                transition-delay: 0.05s;
-                transition-duration: 0.2s;
-            }
-        }
-
-        &.--settled > .tree-view-group-content {
-            overflow: visible;
-        }
-
-        // Rows fade in a beat behind the opening and leave at once, so text is
-        // never seen squeezed by a closing folder.
-        &-content {
-            filter: blur(2px);
-            list-style: none;
-            margin: 0;
-            min-height: 0;
-            opacity: 0;
-            overflow: hidden;
-            padding: 0;
-            position: relative;
-            transition:
-                filter 0.12s ease-out,
-                opacity 0.12s ease-out;
-
-            // Drawn after the rows so it paints over the highlight, the way an
-            // editor draws its guides, centred under the parent's chevron column.
-            &::after {
-                background: var(--guide-color);
-                bottom: 0;
-                content: '';
-                left: calc(var(--padding-horizontal) + var(--tree-view-depth) * var(--indent) + (var(--indent) - 1px) / 2);
-                pointer-events: none;
-                position: absolute;
-                top: 0;
-                transition: background-color 0.15s ease-out;
-                width: 1px;
-            }
-
-            @include tokens.state(active) {
-                &::after {
-                    background: var(--guide-color-active);
-                }
-            }
-        }
-    }
-
-    &-highlight {
-        background: var(--background-active);
-        border-radius: var(--border-radius);
-        inset: 0;
-        opacity: 0;
-        position: absolute;
-        transition: translate 0.25s var(--transition-ease-out);
-    }
-
-    &-icon {
-        color: var(--color-default);
-        flex: 0 0 var(--icon-size);
-        height: var(--icon-size);
-        position: relative;
-    }
-
-    &-item {
-        outline: none;
-
-        // The item holds its children too, so the ring goes on the row alone.
-        &:focus-visible > .tree-view-row {
-            outline: 2px solid var(--outline-color);
-            outline-offset: -2px;
-        }
-    }
-
-    &-name {
-        overflow: hidden;
-        position: relative;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    &-row {
-        align-items: center;
-        border-radius: var(--border-radius);
-        color: var(--color-default);
-        cursor: default;
-        display: flex;
-        gap: var(--gap);
-        height: var(--height);
-        padding: 0 var(--padding-horizontal) 0 calc(var(--padding-horizontal) + var(--tree-view-depth) * var(--indent));
-        position: relative;
-        transition:
-            background-color 0.15s ease-out,
-            color 0.15s ease-out;
-        user-select: none;
-
-        &:hover {
-            background: var(--background-hover);
-            color: var(--color-active);
-        }
-
-        &--folder {
-            color: var(--color-active);
-        }
-
-        @include tokens.state(active) {
-            color: var(--color-active);
-
-            .tree-view-highlight {
-                opacity: 1;
-            }
-        }
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-        &-chevron svg,
-        &-group,
-        &-highlight {
-            transition: none;
-        }
-
-        &-group-content {
-            transition-property: opacity;
-        }
-    }
-}

package/src/components/tree-view/scss/variables.scss

@@ -1,18 +0,0 @@
-.tree-view {
-    --background-active: var(--color-grey-500);
-    --background-hover: color-mix(in oklab, var(--background-active) 60%, transparent);
-    --border-radius: var(--border-radius-300);
-    --chevron-size: 14px;
-    --color-active: var(--color-text-500);
-    --color-default: var(--color-text-300);
-    --font-size: var(--font-size-400);
-    --gap: 6px;
-    --guide-color: var(--color-border-400);
-    --guide-color-active: color-mix(in oklab, var(--color-active) 35%, transparent);
-    --height: 32px;
-    --icon-size: var(--size-400);
-    --indent: var(--size-400);
-    --outline-color: var(--color-active);
-    --padding-horizontal: 8px;
-    --transition-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
-}

package/src/components/typewriter-retype/index.ts

@@ -1,164 +0,0 @@
-import { html, type Attributes } from '@esportsplus/template';
-import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
-import './scss/index.scss';
-
-
-type A = Attributes & {
-    prefix?: string;
-    words: string[];
-};
-
-
-// Long enough to read the finished sentence once.
-const HOLD = 1800;
-
-const REDUCED = '(prefers-reduced-motion: reduce)';
-
-// How long the word sits selected before the first key replaces it: the beat where a person decides on the new
-// word. Includes the selection sweep.
-const SELECTED_FOR = 620;
-
-// Reduced motion swaps whole words on this interval instead of typing.
-const SWAP_EVERY = 2800;
-
-// Per-character typing delay: a base plus up to this much jitter, which lands around 8 to 14 keys a second, the pace
-// of someone who knows the word.
-const TYPE_BASE = 62;
-
-const TYPE_JITTER = 64;
-
-
-// Deterministic, and smooth from key to key: a slow wave carries a rhythm through the word and a small hash roughens
-// it, so delays vary the way a hand does instead of jumping between extremes.
-function jitter(word: number, char: number) {
-    let n = Math.sin(char * 12.9898 + word * 78.233) * 43758.5453,
-        wave = Math.sin(char * 1.9 + word * 2.7) * 0.5 + 0.5;
-
-    return wave * 0.7 + (n - Math.floor(n)) * 0.3;
-}
-
-function type(root: HTMLElement, text: HTMLElement, words: string[]) {
-    let length = words[0].length,
-        timer: ReturnType<typeof setTimeout> | undefined,
-        word = 0;
-
-    function key() {
-        let target = words[word];
-
-        if (length < target.length) {
-            strike(target[length++]);
-        }
-
-        let finished = length === target.length;
-
-        // Solid while keys are moving, blinking while it waits.
-        root.classList.toggle('--typing', !finished);
-        timer = finished
-            ? setTimeout(select, HOLD)
-            : setTimeout(key, TYPE_BASE + jitter(word, length) * TYPE_JITTER);
-    }
-
-    // Rewrites the way people do: select the word, then type over it. The first key replaces the whole selection
-    // at once.
-    function select() {
-        if (words.length < 2) {
-            return;
-        }
-
-        root.classList.add('--selecting');
-        timer = setTimeout(() => {
-            length = 0;
-            text.textContent = '';
-            word = (word + 1) % words.length;
-            root.classList.remove('--selecting');
-            key();
-        }, SELECTED_FOR);
-    }
-
-    function strike(char: string) {
-        let letter = document.createElement('span');
-
-        letter.className = 'typewriter-retype-letter';
-        letter.textContent = char;
-        text.append(letter);
-    }
-
-    timer = setTimeout(select, HOLD);
-
-    return () => {
-        clearTimeout(timer);
-        root.classList.remove('--selecting', '--typing');
-        // Leaves the DOM as rendered, so a remount or motion change starts clean instead of from a half typed,
-        // selected word.
-        text.textContent = words[0];
-    };
-}
-
-
-export default ({ prefix = '', words, ...attributes }: A) => {
-    let lead = prefix ? `${prefix} ` : '',
-        longest = words.reduce((a, b) => b.length > a.length ? b : a, ''),
-        media: MediaQueryList | undefined,
-        stop: VoidFunction | undefined,
-        view = reactive({ index: 0, reduced: false });
-
-    function change() {
-        view.reduced = media?.matches ?? false;
-    }
-
-    return html`
-        <span
-            class='typewriter-retype ${() => view.reduced && '--reduced'}'
-            ${attributes}
-            ${{
-                onconnect: (element: HTMLElement) => {
-                    let text = element.querySelector<HTMLElement>('.typewriter-retype-text');
-
-                    media = matchMedia(REDUCED);
-                    media.addEventListener('change', change);
-                    change();
-
-                    if (!text || words.length === 0) {
-                        return;
-                    }
-
-                    stop = effect(() => {
-                        if (!view.reduced) {
-                            onCleanup(type(element, text, words));
-                            return;
-                        }
-
-                        if (words.length < 2) {
-                            return;
-                        }
-
-                        let interval = setInterval(() => {
-                            view.index = (view.index + 1) % words.length;
-                        }, SWAP_EVERY);
-
-                        onCleanup(() => clearInterval(interval));
-                    });
-                },
-                ondisconnect: () => {
-                    media?.removeEventListener('change', change);
-                    stop?.();
-                }
-            }}
-        >
-            <span class='typewriter-retype-sr'>${`${lead}${new Intl.ListFormat('en', { type: 'disjunction' }).format(words)}.`}</span>
-            <span aria-hidden='true' class='typewriter-retype-sizer'>${`${lead}${longest}`}</span>
-            <span aria-hidden='true' class='typewriter-retype-line'>
-                <span class='typewriter-retype-prefix'>${lead}</span>
-                <span class='typewriter-retype-swap'>
-                    ${words.map((word, i) => html`
-                        <span class='typewriter-retype-option ${() => view.index === i && '--active'}'>${word}</span>
-                    `)}
-                </span>
-                <span class='typewriter-retype-word'>
-                    <span class='typewriter-retype-selection'></span>
-                    <span class='typewriter-retype-text'>${words[0] ?? ''}</span>
-                </span>
-            </span>
-        </span>
-    `;
-};