@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,164 @@
+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>
+    `;
+};

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

@@ -0,0 +1,142 @@
+@use 'variables';
+
+.typewriter-retype {
+    display: inline-grid;
+    text-shadow: var(--glow);
+    white-space: pre;
+
+    // A macOS-length blink with short fades rather than a hard flash; solid while keys move and hidden while a
+    // selection is up, as in a real text field.
+    &-line::after,
+    &-sizer::after {
+        background: var(--caret-background);
+        border-radius: var(--caret-radius);
+        box-shadow: var(--glow);
+        color: var(--caret-color);
+        content: var(--caret);
+        display: inline-block;
+        height: var(--caret-height);
+        margin-inline-start: var(--caret-offset);
+        vertical-align: var(--caret-align);
+        width: var(--caret-width);
+    }
+
+    &-letter {
+        animation: typewriter-retype--ink var(--ink-duration) var(--ease-out);
+    }
+
+    &-line {
+        grid-area: 1 / 1;
+        text-align: left;
+
+        &::after {
+            animation: typewriter-retype--blink var(--caret-duration) var(--caret-timing-function) infinite;
+        }
+    }
+
+    &-option {
+        grid-area: 1 / 1;
+        opacity: 0;
+        transition: opacity var(--swap-duration) ease-in-out;
+
+        &.--active {
+            opacity: 1;
+        }
+    }
+
+    // The ink stays and a tinted block sits behind it, slightly taller than the glyphs like the line box a browser
+    // paints. It sweeps in from the word's end but vanishes the instant a key replaces it.
+    &-selection {
+        background: var(--selection-color);
+        border-radius: var(--selection-radius);
+        inset: -0.06em -1px;
+        position: absolute;
+        scale: 0 1;
+        transform-origin: right;
+    }
+
+    &-sizer {
+        grid-area: 1 / 1;
+        visibility: hidden;
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-swap {
+        display: none;
+    }
+
+    &-text {
+        position: relative;
+    }
+
+    &-word {
+        display: inline-block;
+        position: relative;
+    }
+
+    &.--reduced {
+        .typewriter-retype-line::after,
+        .typewriter-retype-word {
+            display: none;
+        }
+
+        .typewriter-retype-swap {
+            display: inline-grid;
+        }
+    }
+
+    &.--selecting {
+        .typewriter-retype-line::after {
+            visibility: hidden;
+        }
+
+        .typewriter-retype-selection {
+            scale: 1 1;
+            transition: scale var(--select-duration) var(--ease-out);
+        }
+    }
+
+    &.--typing .typewriter-retype-line::after {
+        animation: none;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-letter,
+        &-line::after {
+            animation: none;
+        }
+
+        &.--selecting .typewriter-retype-selection {
+            transition: none;
+        }
+    }
+}
+
+@keyframes typewriter-retype--blink {
+    0%, 45% {
+        opacity: 1;
+    }
+
+    55%, 95% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+@keyframes typewriter-retype--ink {
+    from {
+        filter: blur(2px);
+        opacity: 0;
+    }
+}

package/src/components/typewriter-retype/scss/variables.scss

@@ -0,0 +1,46 @@
+.typewriter-retype {
+    --caret: '';
+    --caret-align: -0.18em;
+    --caret-background: var(--caret-color);
+    --caret-color: currentColor;
+    --caret-duration: 1.06s;
+    --caret-height: 1.1em;
+    --caret-offset: 2px;
+    --caret-radius: 999px;
+    --caret-timing-function: linear;
+    --caret-width: 2px;
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --glow: 0 0 0 transparent;
+    --ink-duration: 140ms;
+    --select-duration: 220ms;
+    --selection-color: oklch(from var(--color-text-500) l c h / 0.15);
+    --selection-radius: 3px;
+    --swap-duration: 500ms;
+
+    &--block {
+        --caret-align: bottom;
+        --caret-height: 1lh;
+        --caret-offset: 0.08em;
+        --caret-radius: 0;
+        --caret-width: 0.56em;
+    }
+
+    &--glow {
+        --glow: 0 0 0.4em var(--caret-color);
+    }
+
+    &--hard {
+        --caret-duration: 1s;
+        --caret-timing-function: steps(1, end);
+    }
+
+    &--underscore {
+        --caret: '_';
+        --caret-align: baseline;
+        --caret-background: transparent;
+        --caret-height: auto;
+        --caret-offset: 0.04em;
+        --caret-radius: 0;
+        --caret-width: auto;
+    }
+}

package/src/components/undo-toast/index.ts

@@ -0,0 +1,359 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { reactive } from '@esportsplus/reactivity';
+import { toast } from '~/components/toast';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    [UNDO_TOAST_ROW]?: Attributes;
+    duration?: number;
+    emptyLabel?: string;
+    items: Item[];
+    label?: string;
+    onconnect?: never;
+    ondelete?: (items: Item[]) => void;
+    ondocumentkeydown?: never;
+    restoreLabel?: string;
+    state?: State;
+};
+
+type Item = { id: string, meta: string, name: string };
+
+type State = { empty: boolean, pending: number };
+
+
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+
+const UNDO_TOAST_ROW = Symbol.for('@esportsplus/ui/undo-toast.row');
+
+
+function editable(target: EventTarget | null) {
+    return target instanceof HTMLElement && (target.isContentEditable || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA');
+}
+
+function enter(row: HTMLElement) {
+    let reduce = reduced();
+
+    row.hidden = false;
+    row.animate(
+        [
+            reduce ? { opacity: 0 } : { filter: 'blur(4px)', opacity: 0, scale: 0.98 },
+            reduce ? { opacity: 1 } : { filter: 'blur(0px)', opacity: 1, scale: 1 }
+        ],
+        // Waits 50ms for its neighbours to open the gap first.
+        { delay: 50, duration: 250, easing: EASE_OUT, fill: 'backwards' }
+    );
+}
+
+function leave(row: HTMLElement) {
+    let { offsetLeft, offsetTop, offsetWidth } = row;
+
+    // Popped out of flow so survivors slide into its place while it fades.
+    row.classList.add('undo-toast-row--leaving');
+    row.style.left = `${offsetLeft}px`;
+    row.style.top = `${offsetTop}px`;
+    row.style.width = `${offsetWidth}px`;
+
+    row.animate(
+        [{}, reduced() ? { opacity: 0 } : { opacity: 0, scale: 0.98 }],
+        { duration: 150, easing: EASE_OUT, fill: 'forwards' }
+    ).finished.then((animation) => {
+        row.classList.remove('undo-toast-row--leaving');
+        row.hidden = true;
+        row.style.left = '';
+        row.style.top = '';
+        row.style.width = '';
+        animation.cancel();
+    }, () => {});
+}
+
+function measure(rows: HTMLElement[]) {
+    let rects = new Map<HTMLElement, DOMRect>();
+
+    for (let row of rows) {
+        if (!row.hidden) {
+            rects.set(row, row.getBoundingClientRect());
+        }
+    }
+
+    return rects;
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function shortcut() {
+    return /Mac|iPhone|iPad/.test(navigator.platform) ? 'Command Z' : 'Control Z';
+}
+
+
+export default Object.assign(
+    function(this: { attributes?: Partial<A> } | void, { duration = 5000, emptyLabel = 'No files left', items, label = 'Files', ondelete, restoreLabel, state = reactive({ empty: false, pending: 0 }), ...attributes }: A) {
+        let gone = new Set<string>(),
+            live = reactive({ text: '' }),
+            message: HTMLElement | undefined,
+            pending: string[] = [],
+            root: HTMLElement | undefined,
+            rows = new Map<string, HTMLElement>(),
+            slides = new WeakMap<HTMLElement, Animation>(),
+            toastId: string | undefined;
+
+        function commit() {
+            toastId = undefined;
+            message = undefined;
+
+            if (pending.length === 0) {
+                return;
+            }
+
+            let committed = items.filter((item) => pending.includes(item.id)),
+                target = inside() ? visible()[0] : undefined;
+
+            for (let id of pending) {
+                gone.add(id);
+            }
+
+            pending = [];
+            state.pending = 0;
+            state.empty = visible().length === 0;
+            ondelete?.(committed);
+            focus(target ? target.id : 'list');
+        }
+
+        function focus(target: string | undefined) {
+            if (!target || !root) {
+                return;
+            }
+
+            if (target === 'list') {
+                root.querySelector<HTMLElement>('.undo-toast-list')?.focus();
+                return;
+            }
+
+            rows.get(target)?.querySelector<HTMLElement>('.undo-toast-delete')?.focus();
+        }
+
+        function inside() {
+            return !!root?.contains(document.activeElement);
+        }
+
+        function notify(text: string) {
+            if (!message) {
+                message = document.createElement('span');
+                message.className = 'undo-toast-message';
+                toastId = toast.message(message, {
+                    action: { label: 'Undo', onclick: undo },
+                    countdown: true,
+                    dismissible: false,
+                    duration,
+                    ondismiss: commit
+                });
+            }
+            else if (toastId) {
+                // A second delete stacks into this batch and restarts its timer instead of
+                // replacing it, which would make the first delete permanent unseen.
+                toast.update(toastId, { duration });
+            }
+
+            let next = document.createElement('span');
+
+            next.className = 'undo-toast-message-text';
+            next.textContent = text;
+
+            for (let old of [...message.children] as HTMLElement[]) {
+                old.classList.add('undo-toast-message-text--leaving');
+                old.animate([{}, { opacity: 0 }], { duration: 120, fill: 'forwards' })
+                    .finished.then(() => old.remove(), () => old.remove());
+            }
+
+            message.append(next);
+
+            if (message.children.length > 1) {
+                next.animate(
+                    [
+                        reduced() ? { opacity: 0 } : { filter: 'blur(4px)', opacity: 0, translate: '0 4px' },
+                        { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+                    ],
+                    { duration: 200, easing: EASE_OUT }
+                );
+            }
+        }
+
+        function remove(item: Item) {
+            let list = visible(),
+                index = list.findIndex((i) => i.id === item.id),
+                row = rows.get(item.id);
+
+            if (!row || index === -1) {
+                return;
+            }
+
+            let before = measure([...rows.values()].filter((r) => r !== row)),
+                neighbour = list[index + 1] ?? list[index - 1],
+                refocus = inside();
+
+            leave(row);
+            slide(before);
+            pending.push(item.id);
+            state.pending = pending.length;
+            notify(pending.length === 1 ? `Deleted ‘${item.name}’` : `${pending.length} items deleted`);
+            live.text = `Deleted ${item.name}. Press Undo or ${shortcut()} to restore.`;
+
+            // Hands focus to a neighbour so it isn't dropped on the body.
+            if (refocus) {
+                focus(neighbour ? neighbour.id : 'list');
+            }
+        }
+
+        function restore(ids: string[]) {
+            let before = measure([...rows.values()]);
+
+            for (let id of ids) {
+                let row = rows.get(id);
+
+                if (row) {
+                    row.getAnimations().forEach((animation) => animation.cancel());
+                    row.classList.remove('undo-toast-row--leaving');
+                    row.style.left = '';
+                    row.style.top = '';
+                    row.style.width = '';
+                    enter(row);
+                }
+            }
+
+            slide(before);
+        }
+
+        function slide(before: Map<HTMLElement, DOMRect>) {
+            for (let [row, rect] of before) {
+                if (row.hidden || row.classList.contains('undo-toast-row--leaving')) {
+                    continue;
+                }
+
+                let delta = rect.top - row.getBoundingClientRect().top;
+
+                slides.get(row)?.cancel();
+
+                if (delta === 0 || reduced()) {
+                    continue;
+                }
+
+                slides.set(row, row.animate(
+                    [{ translate: `0 ${delta}px` }, { translate: '0 0' }],
+                    { duration: 250, easing: EASE_OUT }
+                ));
+            }
+        }
+
+        function undo() {
+            if (pending.length === 0) {
+                return;
+            }
+
+            let restored = pending,
+                refocus = inside();
+
+            pending = [];
+            state.pending = 0;
+            restore(restored);
+            live.text = restored.length === 1 ? 'Restored' : `Restored ${restored.length} items`;
+
+            if (refocus) {
+                focus(restored[0]);
+            }
+        }
+
+        function visible() {
+            return items.filter((item) => !gone.has(item.id) && !pending.includes(item.id));
+        }
+
+        return html`
+            <div
+                class='undo-toast'
+                ${this?.attributes}
+                ${attributes}
+                ${{
+                    onconnect: (element: HTMLElement) => {
+                        root = element;
+
+                        for (let row of element.querySelectorAll<HTMLElement>('.undo-toast-row')) {
+                            rows.set(row.dataset.id ?? '', row);
+                        }
+                    },
+                    ondisconnect: () => {
+                        if (toastId) {
+                            toast.dismiss(toastId);
+                        }
+                    },
+                    // Ctrl/Cmd+Z undoes while the toast shows, unless a text field wants it.
+                    ondocumentkeydown: (e: KeyboardEvent) => {
+                        if (pending.length === 0 || e.key.toLowerCase() !== 'z' || !(e.metaKey || e.ctrlKey)) {
+                            return;
+                        }
+
+                        if (e.shiftKey || e.altKey || editable(e.target) || root?.closest('[inert]')) {
+                            return;
+                        }
+
+                        e.preventDefault();
+                        undo();
+
+                        if (toastId) {
+                            toast.dismiss(toastId);
+                        }
+                    }
+                }}
+            >
+                <ul aria-label='${label}' class='undo-toast-list' tabindex='-1'>
+                    ${items.map((item) => html`
+                        <li
+                            class='undo-toast-row'
+                            data-id='${item.id}'
+                            ${this?.attributes?.[UNDO_TOAST_ROW]}
+                            ${attributes[UNDO_TOAST_ROW]}
+                        >
+                            <div class='undo-toast-row-text'>
+                                <span class='undo-toast-row-name'>${item.name}</span>
+                                <span class='undo-toast-row-meta'>${item.meta}</span>
+                            </div>
+                            <button
+                                aria-label='Delete ${item.name}'
+                                class='button undo-toast-delete'
+                                type='button'
+                                onclick=${() => remove(item)}
+                            >
+                                <svg aria-hidden='true' viewBox='0 0 16 16'>
+                                    <path d='M2.75 4.25h10.5M6.25 4.25v-1.5h3.5v1.5M4 4.25l.6 8.1a1 1 0 0 0 1 .9h4.8a1 1 0 0 0 1-.9l.6-8.1M6.75 7v3.75M9.25 7v3.75' />
+                                </svg>
+                            </button>
+                        </li>
+                    `)}
+                </ul>
+
+                <div class='undo-toast-empty ${() => state.empty && '--active'}' ${{ inert: () => !state.empty }}>
+                    <span class='undo-toast-empty-label'>${emptyLabel}</span>
+                    ${restoreLabel && html`
+                        <button
+                            class='button undo-toast-restore'
+                            type='button'
+                            onclick=${() => {
+                                let ids = [...gone];
+
+                                gone.clear();
+                                state.empty = false;
+                                restore(ids);
+                                focus(ids[0]);
+                            }}
+                        >
+                            ${restoreLabel}
+                        </button>
+                    `}
+                </div>
+
+                <span aria-live='polite' class='undo-toast-live'>${() => live.text}</span>
+            </div>
+        `;
+    },
+    { row: UNDO_TOAST_ROW } as const
+);