@esportsplus/ui 0.56.3 → 0.57.0

package/src/shared/fuzzy.ts

@@ -0,0 +1,263 @@
+type Match = {
+    // Positions in the text of the matched characters, ascending.
+    indices: number[];
+    score: number;
+};
+
+
+// After fzf's weights, but for a gap's length: names are short and skimmed by their words, so reaching a boundary
+// outweighs the letters skipped on the way, while a gap still costs less than a match earns.
+const BOUNDARY = 8;
+
+const CAMEL = 7;
+
+// A run carries at least this much, so 'ind' in 'index' beats three scattered letters.
+const CONSECUTIVE = 4;
+
+// Flags in 'steps': how a cell's skipped score was reached, extending the gap before it rather than opening one.
+const EXTENDED = 2;
+
+// The first query character leans hardest on landing at a boundary, where names are skimmed from.
+const FIRST = 2;
+
+const GAP_EXTEND = -0.25;
+
+const GAP_START = -3;
+
+// Flags in 'steps': how a cell's matched score was reached, following on from the previous character's match.
+const JOINED = 1;
+
+// Tie-breakers kept under a gap's start for ordinary names: earlier first match, then fewer spare characters.
+const LEADING = 0.02;
+
+const LENGTH = 0.01;
+
+const MATCH = 16;
+
+
+// Scratch reused across calls, grown on demand, so matching thousands of names per keystroke allocates only results.
+// 'folds' caches lowercase forms of non-ASCII code units, 0 meaning not looked up yet.
+let bonuses = new Int32Array(64),
+    folds = new Uint16Array(65536),
+    lowers = new Uint16Array(64),
+    matched = new Float64Array(256),
+    runs = new Int32Array(256),
+    skipped = new Float64Array(256),
+    starts = new Int32Array(16),
+    steps = new Uint8Array(256),
+    texts = new Uint16Array(64);
+
+
+function fold(code: number) {
+    if (code < 128) {
+        return code >= 65 && code <= 90 ? code + 32 : code;
+    }
+
+    let known = folds[code];
+
+    if (known === 0) {
+        let lower = String.fromCharCode(code).toLowerCase();
+
+        // Some characters lowercase to several, like 'İ'; they stay as they are so positions keep lining up.
+        known = folds[code] = lower.length === 1 ? lower.charCodeAt(0) : code;
+    }
+
+    return known;
+}
+
+// 0 separator or other, 1 lowercase, 2 uppercase, 3 digit.
+function kind(code: number) {
+    if (code >= 97 && code <= 122) {
+        return 1;
+    }
+
+    if (code >= 65 && code <= 90) {
+        return 2;
+    }
+
+    if (code >= 48 && code <= 57) {
+        return 3;
+    }
+
+    if (code < 128) {
+        return 0;
+    }
+
+    return fold(code) === code ? 1 : 2;
+}
+
+
+// Subsequence match of 'query' in 'text', best alignment first. A lowercase query character matches either case; an
+// uppercase one only itself.
+export default (query: string, text: string): Match | null => {
+    let m = query.length,
+        n = text.length;
+
+    if (m === 0) {
+        return { indices: [], score: 0 };
+    }
+
+    if (m > n) {
+        return null;
+    }
+
+    if (m > starts.length) {
+        starts = new Int32Array(m * 2);
+    }
+
+    if (n > texts.length) {
+        bonuses = new Int32Array(n * 2);
+        lowers = new Uint16Array(n * 2);
+        texts = new Uint16Array(n * 2);
+    }
+
+    // The earliest place each query character can match, which also rejects most names before any scoring.
+    for (let i = 0, j = 0; i < m; i++, j++) {
+        let q = query.charCodeAt(i),
+            lower = fold(q),
+            exact = lower !== q;
+
+        while (j < n) {
+            let t = text.charCodeAt(j);
+
+            if (exact ? t === q : fold(t) === lower) {
+                break;
+            }
+
+            j++;
+        }
+
+        if (j === n) {
+            return null;
+        }
+
+        starts[i] = j;
+    }
+
+    for (let j = 0, previous = 0; j < n; j++) {
+        let code = text.charCodeAt(j),
+            current = kind(code);
+
+        // The name's start counts as a word's start and no more, so '.env' still ranks above 'environment.ts'.
+        bonuses[j] = j === 0 || (previous === 0 && current !== 0)
+            ? BOUNDARY
+            : (previous === 1 && current === 2) || (previous !== 3 && current === 3)
+                ? CAMEL
+                : 0;
+        lowers[j] = fold(code);
+        previous = current;
+        texts[j] = code;
+    }
+
+    if (m * n > matched.length) {
+        matched = new Float64Array(m * n * 2);
+        runs = new Int32Array(m * n * 2);
+        skipped = new Float64Array(m * n * 2);
+        steps = new Uint8Array(m * n * 2);
+    }
+
+    // At row i, column j: matched, the best with query[i] on text[j]; skipped, the best with query[i] earlier and
+    // text[j] skipped after it; runs, how many query characters in a row end on text[j]. Kept apart, a gap's start and
+    // its extension each cost what they should. A row spans starts[i] to the last column leaving room for the rest of
+    // the query, so every cell a row reads from the one above was written by this call.
+    for (let i = 0; i < m; i++) {
+        let q = query.charCodeAt(i),
+            lower = fold(q),
+            exact = lower !== q,
+            end = n - m + i,
+            row = i * n,
+            up = row - n;
+
+        for (let j = starts[i]; j <= end; j++) {
+            let cell = row + j,
+                run = 0,
+                score = -Infinity,
+                step = 0;
+
+            if (j === starts[i]) {
+                skipped[cell] = -Infinity;
+            }
+            else {
+                let extend = skipped[cell - 1] + GAP_EXTEND,
+                    open = matched[cell - 1] + GAP_START;
+
+                if (extend > open) {
+                    skipped[cell] = extend;
+                    step = EXTENDED;
+                }
+                else {
+                    skipped[cell] = open;
+                }
+            }
+
+            if (exact ? texts[j] === q : lowers[j] === lower) {
+                let bonus = bonuses[j];
+
+                if (i === 0) {
+                    run = 1;
+                    score = MATCH + bonus * FIRST;
+                }
+                else {
+                    let before = runs[up + j - 1],
+                        joined = -Infinity,
+                        length = before + 1;
+
+                    if (before > 0) {
+                        let head = bonuses[j - before],
+                            carried = bonus;
+
+                        // A run takes the bonus it started on, unless a fresh boundary inside it is worth more.
+                        if (bonus >= BOUNDARY && bonus > head) {
+                            length = 1;
+                        }
+                        else {
+                            carried = Math.max(bonus, head, CONSECUTIVE);
+                        }
+
+                        joined = matched[up + j - 1] + MATCH + carried;
+                    }
+
+                    score = skipped[up + j - 1] + MATCH + bonus;
+                    run = 1;
+
+                    if (joined >= score) {
+                        run = length;
+                        score = joined;
+                        step |= JOINED;
+                    }
+                }
+            }
+
+            matched[cell] = score;
+            runs[cell] = run;
+            steps[cell] = step;
+        }
+    }
+
+    let best = -Infinity,
+        last = n - 1,
+        row = (m - 1) * n;
+
+    for (let j = starts[m - 1]; j < n; j++) {
+        if (matched[row + j] > best) {
+            best = matched[row + j];
+            last = j;
+        }
+    }
+
+    let indices = new Array<number>(m);
+
+    for (let i = m - 1, j = last, skipping = false; i >= 0; j--) {
+        let step = steps[i * n + j];
+
+        if (skipping) {
+            skipping = (step & EXTENDED) !== 0;
+            continue;
+        }
+
+        indices[i--] = j;
+        skipping = (step & JOINED) === 0;
+    }
+
+    return { indices, score: best - indices[0] * LEADING - (n - m) * LENGTH };
+};

package/src/shared/keystep.ts

@@ -0,0 +1,28 @@
+// How far a slider key moves its value: arrows one step, Shift or the Page keys ten, Home and End to either end.
+// Null for any other key, which the slider leaves alone.
+const keystep = (e: KeyboardEvent, step: number) => {
+    let big = step * 10,
+        unit = e.shiftKey ? big : step;
+
+    switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+            return unit;
+        case 'ArrowDown':
+        case 'ArrowLeft':
+            return -unit;
+        case 'End':
+            return Infinity;
+        case 'Home':
+            return -Infinity;
+        case 'PageDown':
+            return -big;
+        case 'PageUp':
+            return big;
+    }
+
+    return null;
+};
+
+
+export { keystep };

package/src/shared/platform.ts

@@ -0,0 +1,10 @@
+const APPLE_PLATFORM = /mac|iphone|ipad/i;
+
+
+// userAgentData is Chromium-only; the deprecated platform string still covers Safari and Firefox.
+const mac = () => APPLE_PLATFORM.test(
+    (navigator as Navigator & { userAgentData?: { platform: string } }).userAgentData?.platform || navigator.platform
+);
+
+
+export { mac };

package/src/shared/press.ts

@@ -0,0 +1,144 @@
+import type { Attributes } from '@esportsplus/template';
+
+
+// A press that turns into a drag: a mouse's once it moves past a few pixels, a touch's once it has held still for the
+// delay, since a touch that moves sooner is a scroll and is let go. While a press lasts nothing on the page can be
+// selected, dragged natively or long-pressed for a menu, and once it is a drag a touch can't scroll the page; the
+// click that follows its release is swallowed.
+
+
+type Handlers = {
+    // The press is over: released or cancelled by the browser ('e'), or dropped by 'cancel()' (null).
+    end: (e: PointerEvent | null, started: boolean) => void;
+    // Every move of its pointer, before the drag starts too.
+    move: (e: PointerEvent) => void;
+    start: VoidFunction;
+};
+
+type Session = Handlers & {
+    // Ends the touch's listener with the press.
+    listening: AbortController | null;
+    originX: number;
+    originY: number;
+    pointer: number;
+    started: boolean;
+    // The node a touch landed on: its touch events keep going there, even once a drag has moved it out of the DOM.
+    target: Element | null;
+    timer?: ReturnType<typeof setTimeout>;
+};
+
+
+const THRESHOLD = 4;
+
+
+function stop(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+
+// One press at a time. Spread 'attributes' on the element presses start in, call 'begin()' from its pointerdown and
+// 'cancel()' when it goes.
+export default (delay: number) => {
+    let session: Session | null = null;
+
+    function finish(e: PointerEvent | null) {
+        let current = session!;
+
+        session = null;
+        clearTimeout(current.timer);
+        current.listening?.abort();
+
+        if (current.started && e) {
+            swallow();
+        }
+
+        current.end(e, current.started);
+    }
+
+    function prevent(e: Event) {
+        if (session) {
+            e.preventDefault();
+        }
+    }
+
+    function release(e: PointerEvent) {
+        if (session && e.pointerId === session.pointer) {
+            finish(e);
+        }
+    }
+
+    // Cancels the page's scroll under a touch drag. Not a template listener: those go with their node, and a touch's
+    // events stay with the node it landed on.
+    function scroll(e: Event) {
+        if (session?.started) {
+            e.preventDefault();
+        }
+    }
+
+    function start() {
+        let current = session!;
+
+        clearTimeout(current.timer);
+        current.started = true;
+        getSelection()?.removeAllRanges();
+        current.start();
+    }
+
+    return {
+        attributes: {
+            ondocumentcontextmenu: prevent,
+            ondocumentdragstart: prevent,
+            ondocumentpointercancel: release,
+            ondocumentpointermove: (e: PointerEvent) => {
+                if (!session || e.pointerId !== session.pointer) {
+                    return;
+                }
+
+                session.move(e);
+
+                if (session.started || Math.hypot(e.clientX - session.originX, e.clientY - session.originY) < THRESHOLD) {
+                    return;
+                }
+
+                if (session.target) {
+                    finish(null);
+                }
+                else {
+                    start();
+                }
+            },
+            ondocumentpointerup: release,
+            ondocumentselectstart: prevent
+        } as Attributes,
+        begin: (e: PointerEvent, handlers: Handlers) => {
+            let target = e.pointerType === 'touch' ? e.target as Element : null,
+                listening = target && new AbortController();
+
+            session = { ...handlers, listening, originX: e.clientX, originY: e.clientY, pointer: e.pointerId, started: false, target };
+
+            // On the document, which a scroll container needs to hold its scroll for the press, and on the node the
+            // touch landed on, which keeps getting its events once a drag moves it out of the DOM.
+            if (target && listening) {
+                document.addEventListener('touchmove', scroll, { passive: false, signal: listening.signal });
+                target.addEventListener('touchmove', scroll, { passive: false, signal: listening.signal });
+                session.timer = setTimeout(start, delay);
+            }
+        },
+        busy: () => session !== null,
+        cancel: () => {
+            if (session) {
+                finish(null);
+            }
+        }
+    };
+};
+
+// The pointerup that ends a drag is followed by a click on whatever sits under the pointer; touch sends none, so it
+// lapses with the task.
+const swallow = () => {
+    addEventListener('click', stop, { capture: true, once: true, signal: AbortSignal.timeout(0) });
+};
+
+
+export { swallow };

package/src/shared/resize.ts

@@ -0,0 +1,232 @@
+type Handler = (entries: ResizeObserverEntry[]) => void;
+
+type Observation = {
+    // The size 'change' last received, and the one the next frame applies.
+    applied?: Size;
+    change: (size: Size, element: HTMLElement) => void;
+    element: HTMLElement;
+    pending?: Size;
+    vertical: boolean;
+};
+
+type Observer = {
+    disconnect: VoidFunction;
+    observe: (element: Element, options?: ResizeObserverOptions) => void;
+    unobserve: (element: Element) => void;
+};
+
+type Size = { height: number; width: number };
+
+
+// Elements connected this tick, measured together once it ends, and size changes waiting for the next frame.
+let connecting = new Set<Observation>(),
+    frame = 0,
+    handlers = new WeakMap<Element, Set<Handler>>(),
+    queued = new Set<Observation>(),
+    shared: ResizeObserver | undefined;
+
+
+// One callback per delivery: each handler receives the entries of its own elements together, as from a ResizeObserver
+// of its own. An element unobserved by an earlier handler in the same delivery is not reported.
+function dispatch(entries: ResizeObserverEntry[]) {
+    let batches = new Map<Handler, ResizeObserverEntry[]>();
+
+    for (let i = 0, n = entries.length; i < n; i++) {
+        let entry = entries[i],
+            listeners = handlers.get(entry.target);
+
+        if (!listeners) {
+            continue;
+        }
+
+        for (let handler of listeners) {
+            let batch = batches.get(handler);
+
+            if (batch) {
+                batch.push(entry);
+            }
+            else {
+                batches.set(handler, [entry]);
+            }
+        }
+    }
+
+    for (let [handler, batch] of batches) {
+        let live = batch.filter((entry) => handlers.get(entry.target)?.has(handler));
+
+        if (live.length) {
+            handler(live);
+        }
+    }
+}
+
+function equal(a: Size | undefined, b: Size | undefined) {
+    return a?.height === b?.height && a?.width === b?.width;
+}
+
+// Reads every element connected this tick before any change writes, so a tick costs one layout however many connect.
+function flush() {
+    let observations = [...connecting],
+        sizes = observations.map(({ element }) => measure(element));
+
+    connecting.clear();
+
+    for (let i = 0, n = observations.length; i < n; i++) {
+        let { height, vertical, width } = sizes[i],
+            observation = observations[i];
+
+        observation.applied = { height, width };
+        observation.vertical = vertical;
+
+        // As a ResizeObserver's first delivery: an element without a box has nothing to report yet.
+        if (height || width) {
+            observation.change(observation.applied, observation.element);
+        }
+    }
+}
+
+// The border box, as a ResizeObserver delivers it. A transform (a collapsed scale) skews the client rect, so the
+// layout box stands in, rounded, once the two disagree.
+function measure(element: HTMLElement) {
+    let height = element.offsetHeight,
+        rect = element.getBoundingClientRect(),
+        vertical = getComputedStyle(element).writingMode !== 'horizontal-tb',
+        width = element.offsetWidth;
+
+    if (Math.abs(rect.height - height) < 1 && Math.abs(rect.width - width) < 1) {
+        return { height: rect.height, vertical, width: rect.width };
+    }
+
+    return { height, vertical, width };
+}
+
+function render() {
+    let observations = [...queued];
+
+    frame = 0;
+    queued.clear();
+
+    for (let i = 0, n = observations.length; i < n; i++) {
+        let observation = observations[i],
+            size = observation.pending;
+
+        if (size && !equal(size, observation.applied)) {
+            observation.applied = size;
+            observation.change(size, observation.element);
+        }
+    }
+}
+
+
+// Every resize in the library goes through one shared ResizeObserver. Observing an element another handler already
+// observes delivers its current size to both again, as a second observer's first delivery would.
+const observe = (element: Element, handler: Handler, options?: ResizeObserverOptions) => {
+    let listeners = handlers.get(element);
+
+    if (!listeners) {
+        handlers.set(element, listeners = new Set());
+    }
+
+    listeners.add(handler);
+    (shared ??= new ResizeObserver(dispatch)).observe(element, options);
+
+    return () => unobserve(element, handler);
+};
+
+// A ResizeObserver's interface over the shared one, for handlers watching several elements at once.
+const observer = (handler: Handler): Observer => {
+    let elements = new Set<Element>();
+
+    return {
+        disconnect: () => {
+            for (let element of elements) {
+                unobserve(element, handler);
+            }
+
+            elements.clear();
+        },
+        observe: (element: Element, options?: ResizeObserverOptions) => {
+            elements.add(element);
+            observe(element, handler, options);
+        },
+        unobserve: (element: Element) => {
+            elements.delete(element);
+            unobserve(element, handler);
+        }
+    };
+};
+
+// Observe natural content, separately from the box whose height CSS animates. The size on connect is measured before
+// the frame paints, so the first paint is already sized and the observer's first delivery finds nothing new. Later
+// changes apply in the next frame: writing inside the observer's callback would resize what it observes in the same
+// frame, which the browser reports as a ResizeObserver loop.
+const observeSize = (change: (size: Size, element: HTMLElement) => void) => {
+    let current: Observation | undefined,
+        release: VoidFunction | undefined;
+
+    function disconnect() {
+        if (current) {
+            connecting.delete(current);
+            queued.delete(current);
+            current = undefined;
+        }
+
+        release?.();
+        release = undefined;
+    }
+
+    return {
+        onconnect: (element: HTMLElement) => {
+            disconnect();
+
+            let observation: Observation = current = { change, element, vertical: false };
+
+            if (!connecting.size) {
+                queueMicrotask(flush);
+            }
+
+            connecting.add(observation);
+            release = observe(element, ([entry]) => {
+                // Not yet measured: the flush reads a newer layout than this delivery.
+                if (!entry || connecting.has(observation)) {
+                    return;
+                }
+
+                let box = entry.borderBoxSize[0],
+                    vertical = observation.vertical,
+                    size = {
+                        height: vertical ? box.inlineSize : box.blockSize,
+                        width: vertical ? box.blockSize : box.inlineSize
+                    };
+
+                observation.pending = size;
+
+                if (equal(size, observation.applied)) {
+                    queued.delete(observation);
+                    return;
+                }
+
+                queued.add(observation);
+                frame ||= requestAnimationFrame(render);
+            }, { box: 'border-box' });
+        },
+        ondisconnect: disconnect
+    };
+};
+
+const unobserve = (element: Element, handler: Handler) => {
+    let listeners = handlers.get(element);
+
+    if (!listeners?.delete(handler)) {
+        return;
+    }
+
+    if (!listeners.size) {
+        handlers.delete(element);
+        shared?.unobserve(element);
+    }
+};
+
+
+export { observe, observer, observeSize };
+export type { Observer, Size };

package/src/shared/scss/absolute.scss

@@ -0,0 +1,28 @@
+@use 'position';
+
+@each $direction in 'bottom' 'center' 'full' 'horizontal' 'left' 'right' 'top' 'vertical' {
+    %absolute-#{$direction} {
+        @include position.position(absolute, $direction);
+    }
+}
+
+// Centered along one axis and pinned to an edge of the other.
+%absolute-horizontal-bottom {
+    @extend %absolute-horizontal;
+    bottom: 0;
+}
+
+%absolute-horizontal-top {
+    @extend %absolute-horizontal;
+    top: 0;
+}
+
+%absolute-vertical-left {
+    @extend %absolute-vertical;
+    left: 0;
+}
+
+%absolute-vertical-right {
+    @extend %absolute-vertical;
+    right: 0;
+}