@esportsplus/ui 0.54.0 → 0.56.2

package/src/components/autosave/index.ts

@@ -0,0 +1,113 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type State = {
+    savedAt: number | null;
+    status: Status;
+};
+
+type Status = 'saved' | 'saving' | 'unsaved';
+
+
+const MINUTE = 60_000;
+
+
+// Reads like a person would say it, and only changes when those words would.
+function text({ savedAt, status }: State, now: number) {
+    if (status === 'saving') {
+        return 'Saving';
+    }
+
+    if (status === 'unsaved') {
+        return 'Unsaved changes';
+    }
+
+    if (savedAt === null) {
+        return 'Saved';
+    }
+
+    let ago = now - savedAt;
+
+    if (ago < 45_000) {
+        return 'Saved just now';
+    }
+
+    if (ago < 60 * MINUTE) {
+        return `Saved ${Math.max(1, Math.floor(ago / MINUTE))} min ago`;
+    }
+
+    return `Saved at ${new Date(savedAt).toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}`;
+}
+
+
+export default ({ state = reactive<State>({ savedAt: null, status: 'saved' }), ...attributes }: Attributes & { state?: State }) => {
+    let clock = reactive({ now: Date.now() }),
+        current = 0,
+        slots = [
+            reactive({ phase: '', text: '' }),
+            reactive({ phase: '', text: '' })
+        ],
+        stopLabel = effect(
+            () => text(state, clock.now),
+            (value, previous) => {
+                if (previous === undefined) {
+                    slots[current].text = value;
+                    return;
+                }
+
+                if (value === previous) {
+                    return;
+                }
+
+                // Two stacked slots let the old words leave while the new ones arrive in the same spot.
+                slots[current].phase = 'exit';
+                current = current === 0 ? 1 : 0;
+                slots[current].phase = 'enter';
+                slots[current].text = value;
+            }
+        ),
+        stopTick = effect(() => {
+            if (state.status !== 'saved' || state.savedAt === null) {
+                return;
+            }
+
+            let timer = setInterval(() => clock.now = Date.now(), MINUTE / 2);
+
+            onCleanup(() => clearInterval(timer));
+        });
+
+    onCleanup(() => {
+        stopLabel();
+        stopTick();
+    });
+
+    return html`
+        <div class='autosave' ${attributes} ${{ 'data-status': () => state.status }}>
+            <span aria-hidden='true' class='autosave-icon'>
+                <span class='autosave-dot' style='--i: 0;'></span>
+                <span class='autosave-dot' style='--i: 1;'></span>
+                <span class='autosave-dot' style='--i: 2;'></span>
+                <svg class='autosave-check' viewBox='0 0 16 16'>
+                    <path d='M3.75 8.25l2.75 2.75 5.75-6' pathLength='1' />
+                </svg>
+            </span>
+            <span class='autosave-label'>
+                ${slots.map((slot) => html`
+                    <span
+                        aria-hidden='${() => slot.phase === 'exit' ? 'true' : 'false'}'
+                        data-phase='${() => slot.phase}'
+                    >
+                        ${() => slot.text}
+                    </span>
+                `)}
+            </span>
+            <span aria-live='polite' class='autosave-announcement'>
+                ${() => state.status === 'saved' && state.savedAt !== null ? 'All changes saved' : ''}
+            </span>
+        </div>
+    `;
+};
+
+export type { State, Status };

package/src/components/autosave/scss/index.scss

@@ -0,0 +1,155 @@
+@use 'variables';
+
+// One set of three dots throughout: a single dot means there are changes, it splits into three
+// that pulse while saving, and the three gather back into the middle as the check draws.
+.autosave {
+    align-items: center;
+    color: var(--color);
+    display: flex;
+    flex-shrink: 0;
+    font-size: var(--font-size);
+    gap: var(--gap);
+    white-space: nowrap;
+    width: var(--width);
+
+    &-announcement {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        width: 1px;
+    }
+
+    &-check {
+        fill: none;
+        height: 100%;
+        inset: 0;
+        opacity: 0;
+        position: absolute;
+        stroke: var(--check-color);
+        stroke-dasharray: 1;
+        stroke-dashoffset: 1;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: var(--check-stroke-width);
+        transition:
+            opacity var(--exit-duration) var(--timing-function),
+            stroke-dashoffset var(--exit-duration) var(--timing-function);
+        width: 100%;
+    }
+
+    &-dot {
+        height: var(--dot-size);
+        opacity: 0;
+        position: absolute;
+        scale: 0.5;
+        transition:
+            opacity var(--move-duration) var(--timing-function),
+            scale var(--move-duration) var(--timing-function),
+            translate var(--move-duration) var(--timing-function);
+        width: var(--dot-size);
+
+        &::before {
+            background: currentColor;
+            border-radius: 100%;
+            content: '';
+            display: block;
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    &-icon {
+        display: grid;
+        flex-shrink: 0;
+        height: var(--icon-size);
+        place-items: center;
+        position: relative;
+        width: var(--icon-size);
+    }
+
+    &-label {
+        display: grid;
+        flex: 1;
+        min-width: 0;
+
+        [data-phase='enter'] {
+            animation: autosave-enter var(--enter-duration) var(--timing-function) both;
+        }
+
+        [data-phase='exit'] {
+            animation: autosave-exit var(--exit-duration) var(--timing-function) both;
+            opacity: 0;
+        }
+
+        span {
+            grid-area: 1 / 1;
+        }
+    }
+
+    &[data-status='saved'] .autosave-check {
+        opacity: 1;
+        stroke-dashoffset: 0;
+        transition:
+            opacity var(--check-duration) var(--timing-function) var(--check-delay),
+            stroke-dashoffset var(--check-duration) var(--timing-function) var(--check-delay);
+    }
+
+    &[data-status='saving'] .autosave-dot {
+        opacity: 1;
+        scale: 1;
+        translate: calc((var(--i) - 1) * var(--dot-gap));
+
+        &::before {
+            animation: autosave-pulse var(--pulse-duration) ease-in-out calc(var(--i) * var(--pulse-stagger)) infinite;
+        }
+    }
+
+    &[data-status='unsaved'] .autosave-dot:nth-child(2) {
+        opacity: 1;
+        scale: 1.5;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-check,
+        &-dot,
+        &[data-status='saved'] .autosave-check {
+            transition: none;
+        }
+
+        &-label [data-phase],
+        &[data-status='saving'] .autosave-dot::before {
+            animation: none;
+        }
+    }
+}
+
+@keyframes autosave-enter {
+    from {
+        filter: blur(var(--blur));
+        opacity: 0;
+        translate: 0 var(--shift);
+    }
+}
+
+@keyframes autosave-exit {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        filter: blur(var(--blur));
+        opacity: 0;
+        translate: 0 calc(var(--shift) * -1);
+    }
+}
+
+@keyframes autosave-pulse {
+    0%, 100% {
+        opacity: 0.25;
+    }
+
+    40% {
+        opacity: 1;
+    }
+}

package/src/components/autosave/scss/variables.scss

@@ -0,0 +1,22 @@
+.autosave {
+    --blur: 3px;
+    --check-color: var(--color-text-500);
+    --check-delay: 0.12s;
+    --check-duration: 0.35s;
+    --check-stroke-width: 1.6;
+    --color: var(--color-text-300);
+    --dot-gap: calc(var(--icon-size) * 0.3125);
+    --dot-size: calc(var(--icon-size) / 4);
+    --enter-duration: 0.22s;
+    --exit-duration: 0.12s;
+    --font-size: var(--font-size-300);
+    --gap: 0.5rem;
+    --icon-size: 1.25em;
+    --move-duration: 0.4s;
+    --pulse-duration: 1s;
+    --pulse-stagger: 0.16s;
+    --shift: 3px;
+    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    // As wide as the longest label, so the icon never shifts and old and new words cross in the same spot.
+    --width: 11em;
+}

package/src/components/back-to-top/index.ts

@@ -0,0 +1,293 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    // How far through (0 to 1) before the button offers itself.
+    showAfter?: number;
+    state?: State;
+    // The element that scrolls; the page itself when omitted.
+    target?: HTMLElement | (() => HTMLElement | null | undefined);
+};
+
+type State = {
+    // Changing this number sends the reader to the top, as a click would.
+    jump: number;
+    visible: boolean;
+};
+
+
+const ARRIVE: KeyframeAnimationOptions = { duration: 300, easing: 'cubic-bezier(0.23, 1, 0.32, 1)' };
+
+// A gentle start that keeps moving to the end, like something taking off.
+const LIFT: KeyframeAnimationOptions = { duration: 400, easing: 'cubic-bezier(0.4, 0, 0.6, 1)', fill: 'forwards' };
+
+const TRIP = { x1: 0.65, x2: 0.35, y1: 0, y2: 1 };
+
+// Driven here rather than by the browser's smooth scroll, whose speed varies wildly.
+const EASE = bezier(TRIP);
+
+
+// Solves a CSS cubic-bezier for y at time x, the same curve 'cubic-bezier()' would draw.
+function bezier({ x1, x2, y1, y2 }: typeof TRIP) {
+    let ax = 1 - 3 * x2 + 3 * x1,
+        ay = 1 - 3 * y2 + 3 * y1,
+        bx = 3 * x2 - 6 * x1,
+        by = 3 * y2 - 6 * y1,
+        cx = 3 * x1,
+        cy = 3 * y1;
+
+    return (x: number) => {
+        let high = 1,
+            low = 0,
+            t = x;
+
+        for (let i = 0; i < 20; i++) {
+            let current = ((ax * t + bx) * t + cx) * t;
+
+            if (Math.abs(current - x) < 1e-5) {
+                break;
+            }
+
+            if (current < x) {
+                low = t;
+            }
+            else {
+                high = t;
+            }
+
+            t = (low + high) / 2;
+        }
+
+        return ((ay * t + by) * t + cy) * t;
+    };
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+
+function template(
+    this: { attributes?: Partial<A> } | void,
+    { showAfter = 0.12, state = reactive({ jump: 0, visible: false }), target, ...attributes }: A
+) {
+    let arrow: SVGElement | undefined,
+        cleanup: VoidFunction | undefined,
+        frame = 0,
+        jump = state.jump,
+        launched = false,
+        lift: Animation | undefined,
+        pending: { abort: VoidFunction; source: HTMLElement | Window } | undefined,
+        ring: SVGCircleElement | undefined,
+        // True while heading up: the button stays to show the ring draining, and bows out only once you've arrived.
+        returning = false,
+        scroller: HTMLElement | undefined,
+        timeline: Animation | undefined,
+        trip = 0;
+
+    function go() {
+        let from = top();
+
+        launch();
+        stop();
+
+        if (reduced()) {
+            write(0);
+            return;
+        }
+
+        let duration = Math.min(900, 450 + from / 4),
+            source: HTMLElement | Window = scroller ?? window,
+            start = performance.now();
+
+        // Any wheel or touch on the way hands control straight back.
+        function abort() {
+            stop();
+            returning = false;
+            land(true);
+        }
+
+        // Longer trips take a little longer, never more than 0.9s.
+        function step(now: number) {
+            let t = Math.min((now - start) / duration, 1);
+
+            write(from * (1 - EASE(t)));
+
+            if (t < 1) {
+                trip = requestAnimationFrame(step);
+            }
+            else {
+                stop();
+            }
+        }
+
+        pending = { abort, source };
+        returning = true;
+        source.addEventListener('touchstart', abort, { once: true, passive: true });
+        source.addEventListener('wheel', abort, { once: true, passive: true });
+        trip = requestAnimationFrame(step);
+    }
+
+    // The arrow is gone once lifted: it stays away while the page rises and only returns if the trip is cut short.
+    function land(animate: boolean) {
+        if (!launched || !arrow) {
+            return;
+        }
+
+        launched = false;
+        lift?.cancel();
+        lift = undefined;
+
+        if (animate && !reduced()) {
+            arrow.animate([
+                { filter: 'blur(2px)', opacity: 0, transform: 'translateY(10px)' },
+                { filter: 'blur(0px)', opacity: 1, transform: 'translateY(0px)' }
+            ], ARRIVE);
+        }
+    }
+
+    function launch() {
+        if (launched || !arrow) {
+            return;
+        }
+
+        launched = true;
+        lift = arrow.animate([
+            { filter: 'blur(0px)', opacity: 1, transform: 'translateY(0px)' },
+            { filter: 'blur(2px)', opacity: 0, transform: 'translateY(-20px)' }
+        ], reduced() ? { ...LIFT, duration: 0 } : LIFT);
+    }
+
+    function onscroll() {
+        if (!frame) {
+            frame = requestAnimationFrame(read);
+        }
+    }
+
+    // One style write per frame at most; only crossing the threshold touches reactive state.
+    function read() {
+        frame = 0;
+
+        let room = scroller
+                ? scroller.scrollHeight - scroller.clientHeight
+                : document.documentElement.scrollHeight - innerHeight,
+            p = room > 0 ? Math.min(1, Math.max(0, top() / room)) : 0;
+
+        if (!timeline) {
+            ring?.style.setProperty('stroke-dashoffset', String(1 - p));
+        }
+
+        if (returning) {
+            if (p > 0) {
+                return;
+            }
+
+            returning = false;
+        }
+
+        state.visible = p > showAfter;
+
+        // Hidden again: the next time it shows, it brings its arrow.
+        if (p <= showAfter) {
+            land(false);
+        }
+    }
+
+    function stop() {
+        cancelAnimationFrame(trip);
+        trip = 0;
+
+        if (!pending) {
+            return;
+        }
+
+        pending.source.removeEventListener('touchstart', pending.abort);
+        pending.source.removeEventListener('wheel', pending.abort);
+        pending = undefined;
+    }
+
+    function top() {
+        return scroller ? scroller.scrollTop : scrollY;
+    }
+
+    function write(value: number) {
+        // Instant, so a 'scroll-behavior: smooth' on the scroller can't turn every frame's write into its own animation.
+        (scroller ?? window).scrollTo({ behavior: 'instant', top: value });
+    }
+
+    onCleanup(effect(() => {
+        if (state.jump === jump) {
+            return;
+        }
+
+        jump = state.jump;
+        go();
+    }));
+
+    return html`
+        <button
+            aria-label='Back to top'
+            class='back-to-top ${() => state.visible && '--active'}'
+            type='button'
+            ${this?.attributes}
+            ${attributes}
+            ${{
+                onclick: go,
+                onconnect: (el: HTMLElement) => {
+                    let source = typeof target === 'function' ? target() : target;
+
+                    arrow = el.querySelector<SVGElement>('.back-to-top-arrow') ?? undefined;
+                    ring = el.querySelector<SVGCircleElement>('.back-to-top-progress') ?? undefined;
+                    scroller = source ?? undefined;
+
+                    if (ring && typeof ScrollTimeline === 'function') {
+                        // The ring follows the scroll on the compositor where scroll-driven animations exist.
+                        timeline = ring.animate(
+                            [{ strokeDashoffset: 1 }, { strokeDashoffset: 0 }],
+                            { fill: 'both', timeline: new ScrollTimeline({ axis: 'block', source: scroller ?? document.documentElement }) }
+                        );
+                    }
+
+                    (scroller ?? window).addEventListener('scroll', onscroll, { passive: true });
+                    cleanup = () => (scroller ?? window).removeEventListener('scroll', onscroll);
+                    read();
+                },
+                ondisconnect: () => {
+                    cancelAnimationFrame(frame);
+                    cleanup?.();
+                    stop();
+                    timeline?.cancel();
+                }
+            }}
+        >
+            <svg aria-hidden='true' class='back-to-top-ring' fill='none' viewBox='0 0 44 44'>
+                <circle class='back-to-top-track' cx='22' cy='22' r='20.5' />
+                <circle
+                    class='back-to-top-progress'
+                    cx='22'
+                    cy='22'
+                    pathLength='1'
+                    r='20.5'
+                />
+            </svg>
+            <svg
+                aria-hidden='true'
+                class='back-to-top-arrow'
+                fill='none'
+                stroke='currentColor'
+                stroke-linecap='round'
+                stroke-linejoin='round'
+                stroke-width='1.7'
+                viewBox='0 0 16 16'
+            >
+                <path d='M8 12.5v-9M4 7l4-4 4 4' />
+            </svg>
+        </button>
+    `;
+}
+
+
+export default template;
+export type { State };

package/src/components/back-to-top/scss/index.scss

@@ -0,0 +1,111 @@
+@use 'variables';
+
+.back-to-top {
+    background: var(--background);
+    border: 0;
+    border-radius: 999px;
+    box-shadow: var(--box-shadow);
+    color: var(--color);
+    cursor: pointer;
+    display: grid;
+    filter: blur(var(--hidden-blur));
+    height: var(--size);
+    opacity: 0;
+    outline: none;
+    overflow: hidden;
+    padding: 0;
+    place-items: center;
+    position: relative;
+    transform: scale(var(--hidden-scale));
+    transition:
+        filter var(--exit-duration) var(--enter-timing-function),
+        opacity var(--exit-duration) var(--enter-timing-function),
+        scale var(--transition-duration) var(--transition-timing-function),
+        transform var(--exit-duration) var(--enter-timing-function),
+        visibility 0s linear var(--exit-duration);
+    visibility: hidden;
+    width: var(--size);
+
+    &.--active {
+        filter: blur(0);
+        opacity: 1;
+        transform: none;
+        transition:
+            filter var(--enter-duration) var(--enter-timing-function),
+            opacity var(--enter-duration) var(--enter-timing-function),
+            scale var(--transition-duration) var(--transition-timing-function),
+            transform var(--enter-duration) var(--enter-timing-function),
+            visibility 0s;
+        visibility: visible;
+    }
+
+    &:active {
+        scale: var(--pressed-scale);
+    }
+
+    &:focus-visible {
+        outline: var(--border-width-500) solid var(--focus-color);
+        outline-offset: 2px;
+    }
+
+    &-arrow {
+        grid-area: 1 / 1;
+        height: 16px;
+        transition: translate var(--transition-duration) var(--transition-timing-function);
+        width: 16px;
+    }
+
+    // How far you've read, drawn around the edge.
+    &-progress,
+    &-track {
+        stroke-width: var(--ring-width);
+    }
+
+    &-progress {
+        stroke: var(--ring-color);
+        stroke-dasharray: 1;
+        stroke-dashoffset: 1;
+        stroke-linecap: round;
+    }
+
+    &-ring {
+        height: 100%;
+        inset: 0;
+        pointer-events: none;
+        position: absolute;
+        rotate: -90deg;
+        width: 100%;
+    }
+
+    &-track {
+        stroke: var(--track-color);
+    }
+
+    &--fixed {
+        bottom: var(--offset);
+        position: fixed;
+        right: var(--offset);
+        z-index: var(--z-index);
+    }
+
+    @media (hover: hover) {
+        &:hover &-arrow {
+            translate: 0 var(--hover-lift);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &,
+        &.--active {
+            transition: none;
+        }
+
+        &:active {
+            scale: none;
+        }
+
+        &-arrow {
+            transition: none;
+        }
+    }
+}