@esportsplus/ui 0.55.0 → 0.56.2

package/src/components/web-search/index.ts

@@ -0,0 +1,316 @@
+import { flush, onCleanup, reactive } from '@esportsplus/reactivity';
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import { bridge, chevron, guide, progress, working, type Progress } from '~/components/log';
+import { logo, type Brand } from './brands';
+import './scss/index.scss';
+
+
+type Context = {
+    revealed: () => number;
+    total: number;
+};
+
+type Source = {
+    brand?: Brand;
+    domain: string;
+    href?: string;
+    icon?: Renderable<unknown>;
+    title: string;
+};
+
+type Step = {
+    brand?: Brand;
+    dwell?: number;
+    heading?: boolean;
+    icon?: Renderable<unknown>;
+    label: string;
+    meta?: string;
+    query?: string;
+    sources?: Source[];
+};
+
+
+// The step lands, then its Sources row follows this much later.
+const SOURCES_DELAY = 900;
+
+// Stiffness 420, damping 36: settles in ~0.45s with a hair of overshoot.
+const SPRING = 'linear(0, 0.04, 0.132, 0.249, 0.371, 0.488, 0.594, 0.684, 0.76, 0.822, 0.87, 0.908, 0.937, 0.958, 0.974, 0.985, 0.992, 0.997, 1, 1.002, 1.003, 1.003, 1.003, 1.002, 1.002, 1.001, 1)';
+
+const SPRING_DURATION = 450;
+
+const STACK_LIMIT = 6;
+
+const STAGGER = 100;
+
+
+function badge({ brand, icon }: Source) {
+    if (icon) {
+        return html`<span class='web-search-badge-icon' aria-hidden='true'>${icon}</span>`;
+    }
+
+    if (brand) {
+        return logo(brand);
+    }
+
+    return html`<span class='web-search-badge-dot' aria-hidden='true'></span>`;
+}
+
+function content({ brand, icon, label, meta, query }: Step, active: () => boolean) {
+    return html`
+        <div class='web-search-step'>
+            <span class='web-search-glyph' aria-hidden='true'>${brand ? logo(brand) : icon}</span>
+            <div class='web-search-label'><span class='${() => active() && 'log-shimmer'}'>${label}</span>${query && html`<span class='web-search-query'>${query}</span>`}</div>
+            ${meta && html`<span class='web-search-meta'>${meta}</span>`}
+        </div>
+    `;
+}
+
+function heading(context: Context, step: Step) {
+    return html`
+        <div class='log-unit web-search-heading ${() => context.revealed() > 0 && '--active'}' ${{ inert: () => context.revealed() === 0 }}>
+            <div class='log-unit-content'>
+                <div class='web-search-heading-content'>
+                    ${content(step, () => context.revealed() === 1 && context.total > 1)}
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function row(context: Context, step: Step, unit: number, next: number, sourcesUnit: number) {
+    let active = () => {
+        let revealed = context.revealed();
+
+        return revealed > unit && revealed <= next && revealed < context.total;
+    };
+
+    return html`
+        <li class='log-row log-unit web-search-row ${() => context.revealed() > unit && '--active'}' ${{ inert: () => context.revealed() <= unit }}>
+            ${guide()}
+            <div class='log-unit-content'>
+                <div class='web-search-row-content'>
+                    ${content(step, active)}
+                    ${sourcesUnit !== -1 && sources(() => context.revealed() > sourcesUnit, step.sources!)}
+                </div>
+            </div>
+        </li>
+    `;
+}
+
+function sources(shown: () => boolean, list: Source[]) {
+    let count = list.length,
+        items: HTMLElement[] = [],
+        marks: HTMLElement[] = [],
+        stack = list.slice(0, STACK_LIMIT),
+        state = reactive({ moved: 0, open: false }),
+        timer: ReturnType<typeof setTimeout> | undefined;
+
+    // Sources move one at a time: the last leaves the stack first, the first returns first.
+    let listed = (index: number) => state.moved > count - 1 - index,
+        stacked = () => {
+            let n = 0;
+
+            for (let i = 0, m = stack.length; i < m; i++) {
+                if (!listed(i)) {
+                    n++;
+                }
+            }
+
+            return n;
+        };
+
+    function move(delta: 1 | -1) {
+        let index = delta > 0 ? count - 1 - state.moved : count - state.moved,
+            from = (delta > 0 ? marks : items)[index],
+            rect = from?.getBoundingClientRect(),
+            to = (delta > 0 ? items : marks)[index];
+
+        state.moved += delta;
+
+        if (!rect || !to || reduced()) {
+            return;
+        }
+
+        flush();
+
+        let target = to.getBoundingClientRect();
+
+        to.animate(
+            [
+                { transform: `translate(${rect.left - target.left}px, ${rect.top - target.top}px)` },
+                { transform: 'none' }
+            ],
+            { duration: SPRING_DURATION, easing: SPRING }
+        );
+    }
+
+    function schedule() {
+        let delta: 1 | -1 = state.open ? 1 : -1,
+            next = state.moved + delta;
+
+        if (next < 0 || next > count) {
+            return;
+        }
+
+        timer = setTimeout(() => {
+            move(delta);
+            schedule();
+        }, reduced() ? 0 : STAGGER);
+    }
+
+    onCleanup(() => clearTimeout(timer));
+
+    return html`
+        <div class='web-search-sources ${() => shown() && '--active'}'>
+            ${bridge(shown, 5, 7)}
+            <ul class='web-search-sources-list'>
+                <li class='log-row log-unit ${() => shown() && '--active'}' ${{ inert: () => !shown() }}>
+                    ${guide()}
+                    <div class='log-unit-content'>
+                        <div class='web-search-sources-content'>
+                            <button
+                                class='web-search-sources-toggle'
+                                aria-expanded='${() => String(state.open)}'
+                                type='button'
+                                onclick='${() => {
+                                    state.open = !state.open;
+                                    clearTimeout(timer);
+                                    schedule();
+                                }}'
+                            >
+                                <span>Sources</span>
+                                <span class='web-search-stack' style='${() => `width: ${stacked() > 0 ? 14 * stacked() + 6 : 0}px;`}'>
+                                    ${stack.map((source, i) => html`
+                                        <span
+                                            class='web-search-mark ${() => listed(i) && '--hidden'}'
+                                            style='--z: ${stack.length - i};'
+                                            title='${source.title} · ${source.domain}'
+                                            ${{ onconnect: (element: HTMLElement) => { marks[i] = element; } }}
+                                        >
+                                            ${badge(source)}
+                                        </span>
+                                    `)}
+                                </span>
+                                ${count > STACK_LIMIT && html`
+                                    <span class='web-search-more ${() => state.moved !== 0 && '--hidden'}'>+${count - STACK_LIMIT}</span>
+                                `}
+                                ${chevron()}
+                            </button>
+
+                            <ul class='web-search-source-list'>
+                                ${list.map((source, i) => {
+                                    let inner = () => html`
+                                        <span
+                                            class='web-search-mark'
+                                            style='--z: ${count - i};'
+                                            ${{ onconnect: (element: HTMLElement) => { items[i] = element; } }}
+                                        >
+                                            ${badge(source)}
+                                        </span>
+                                        <span class='web-search-source-text'>
+                                            <span class='web-search-source-title'>${source.title}</span>
+                                            <span class='web-search-source-domain'>${source.domain}</span>
+                                        </span>
+                                    `;
+
+                                    return html`
+                                        <li class='web-search-source ${() => listed(i) && '--active'}' ${{ inert: () => !listed(i) }}>
+                                            <div class='web-search-source-content'>
+                                                ${source.href
+                                                    ? html`<a class='web-search-source-link' href='${source.href}' rel='noreferrer' target='_blank'>${inner()}</a>`
+                                                    : html`<div class='web-search-source-link'>${inner()}</div>`}
+                                            </div>
+                                        </li>
+                                    `;
+                                })}
+                            </ul>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    `;
+}
+
+
+const webSearch = ({
+    onComplete,
+    startDelay = 320,
+    state,
+    stepInterval = 850,
+    steps,
+    working: label = 'Working',
+    ...attributes
+}: Attributes & {
+    onComplete?: VoidFunction;
+    startDelay?: number;
+    state?: Progress;
+    stepInterval?: number;
+    steps: Step[];
+    working?: false | string;
+}) => {
+    let head = steps[0]?.heading ? steps[0] : undefined,
+        owners: number[] = [],
+        sourcesAt: number[] = [],
+        stepAt: number[] = [];
+
+    // One unit per row, so a step that found sources is two: the step, then its Sources row.
+    for (let i = 0, n = steps.length; i < n; i++) {
+        stepAt.push(owners.length);
+        owners.push(i);
+
+        if (steps[i].sources?.length && !steps[i].heading) {
+            sourcesAt.push(owners.length);
+            owners.push(i);
+        }
+        else {
+            sourcesAt.push(-1);
+        }
+    }
+
+    let { revealed, start, total } = progress({
+            delay: (index) => {
+                if (index === 0) {
+                    return startDelay;
+                }
+
+                let owner = owners[index - 1];
+
+                if (owner === undefined) {
+                    return stepInterval;
+                }
+
+                if (stepAt[owner] === index - 1 && sourcesAt[owner] !== -1) {
+                    return SOURCES_DELAY;
+                }
+
+                return steps[owner].dwell ?? stepInterval;
+            },
+            onComplete,
+            state,
+            units: owners.length
+        }),
+        context: Context = { revealed, total },
+        offset = head ? 1 : 0;
+
+    return html`
+        <div class='log web-search ${head && 'web-search--heading'}' ${attributes} ${{ onconnect: start }}>
+            ${head && heading(context, head)}
+            <div class='web-search-trail'>
+                ${head && bridge(() => revealed() > 1, 6, 7)}
+                <ul class='web-search-rows' aria-live='polite'>
+                    ${steps.slice(offset).map((step, i) => row(context, step, stepAt[i + offset], stepAt[i + offset + 1] ?? Infinity, sourcesAt[i + offset]))}
+                </ul>
+            </div>
+            ${label !== false && working(label, () => revealed() > 0 && revealed() < total)}
+        </div>
+    `;
+};
+
+
+export default webSearch;
+export type { Brand, Source, Step };

package/src/components/web-search/scss/index.scss

@@ -0,0 +1,270 @@
+@use 'variables';
+
+.web-search {
+    display: flex;
+    flex-direction: column;
+
+    &:not(.web-search--heading) > .log-working {
+        padding-inline-start: 14px;
+    }
+
+    &--heading .web-search-rows {
+        margin-inline-start: 7px;
+    }
+
+    &-badge-dot {
+        background: var(--dot-color);
+        border-radius: 50%;
+        height: 8px;
+        width: 8px;
+    }
+
+    &-badge-icon {
+        align-items: center;
+        display: flex;
+        height: 12px;
+        justify-content: center;
+        width: 12px;
+
+        > * {
+            height: 100%;
+            width: 100%;
+        }
+    }
+
+    &-glyph {
+        align-items: center;
+        color: var(--icon-color);
+        display: flex;
+        flex-shrink: 0;
+        height: 16px;
+        justify-content: center;
+        margin-top: 2px;
+        width: 16px;
+
+        > * {
+            height: 100%;
+            width: 100%;
+        }
+
+        > .web-search-logo {
+            color: var(--text-primary);
+            height: 13px;
+            width: 13px;
+        }
+    }
+
+    &-heading-content,
+    &-row-content,
+    &-sources-content {
+        padding-block: 4px;
+    }
+
+    &-label {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &-logo {
+        flex-shrink: 0;
+    }
+
+    &-mark {
+        align-items: center;
+        background: var(--mark-background);
+        border: 1px solid var(--mark-border);
+        border-radius: 50%;
+        display: flex;
+        flex-shrink: 0;
+        height: 20px;
+        justify-content: center;
+        position: relative;
+        transition: translate 0.15s ease;
+        width: 20px;
+        z-index: var(--z);
+
+        > .web-search-logo {
+            color: var(--text-primary);
+            height: 12px;
+            width: 12px;
+        }
+    }
+
+    &-meta {
+        color: var(--text-tertiary);
+        flex-shrink: 0;
+        font-variant-numeric: tabular-nums;
+        padding-top: 1px;
+    }
+
+    &-more {
+        color: var(--text-tertiary);
+        font-variant-numeric: tabular-nums;
+        margin-inline-start: 8px;
+
+        &.--hidden {
+            display: none;
+        }
+    }
+
+    &-query {
+        color: var(--text-tertiary);
+        font-family: var(--font-family-mono);
+        font-size: var(--font-size-small);
+        margin-inline-start: 6px;
+    }
+
+    &-row {
+        padding-inline-start: 14px;
+    }
+
+    &-source {
+        display: grid;
+        grid-template-rows: 0fr;
+        overflow: hidden;
+        transition: grid-template-rows 0.28s var(--soft);
+
+        &.--active {
+            grid-template-rows: 1fr;
+        }
+
+        // The grid item carries no padding, so a folded row collapses to nothing.
+        &-content {
+            min-height: 0;
+            min-width: 0;
+        }
+
+        &-domain {
+            color: var(--text-tertiary);
+            flex-shrink: 0;
+            font-size: var(--font-size-small);
+
+            @media (max-width: 639px) {
+                display: none;
+            }
+        }
+
+        &-link {
+            align-items: center;
+            border-radius: 6px;
+            color: inherit;
+            display: flex;
+            gap: 8px;
+            padding: 4px;
+
+            &:is(a) {
+                transition: background-color 0.15s ease;
+
+                &:hover {
+                    background: var(--source-hover);
+                }
+            }
+        }
+
+        &:not(.--active) .web-search-mark {
+            visibility: hidden;
+        }
+
+        &-text {
+            align-items: center;
+            display: flex;
+            flex: 1;
+            gap: 8px;
+            min-width: 0;
+            opacity: 0;
+            transition: opacity 0.16s;
+        }
+
+        &.--active .web-search-source-text {
+            opacity: 1;
+            transition-delay: 0.05s;
+        }
+
+        &-title {
+            flex: 1;
+            min-width: 0;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    // Branches off its step, so it reserves no room until it lands.
+    &-sources {
+        margin-top: 0;
+        position: relative;
+        transition: margin-top 0.38s var(--soft);
+
+        &.--active {
+            margin-top: 2px;
+        }
+
+        &-list {
+            margin-inline-start: 7px;
+        }
+
+        // Always follows its step, so its curve waits for the bridge.
+        .log-row:first-child .log-guide path {
+            transition-delay: 0.12s;
+        }
+
+        &-toggle {
+            align-items: center;
+            border-radius: 6px;
+            display: flex;
+
+            &:focus-visible {
+                outline: 2px solid var(--color-primary-400, var(--color-blue-400));
+                outline-offset: 2px;
+            }
+
+            > .log-chevron {
+                margin-inline-start: 4px;
+            }
+        }
+    }
+
+    // Marks overlap in the stack and lift clear of their neighbours on hover.
+    &-stack {
+        align-items: center;
+        display: flex;
+        margin-inline-start: 8px;
+        transition: width 0.45s var(--spring) 0.07s;
+
+        > .web-search-mark {
+            &:hover {
+                translate: 0 -2px;
+                z-index: 10;
+            }
+
+            &.--hidden {
+                display: none;
+            }
+
+            + .web-search-mark {
+                margin-inline-start: -6px;
+            }
+        }
+    }
+
+    &-step {
+        align-items: flex-start;
+        display: flex;
+        gap: 8px;
+    }
+
+    &-trail {
+        position: relative;
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-mark,
+        &-source,
+        &-source-text,
+        &-sources,
+        &-stack {
+            transition: none;
+        }
+    }
+}

package/src/components/web-search/scss/variables.scss

@@ -0,0 +1,8 @@
+.web-search {
+    --dot-color: var(--color-grey-500);
+    --icon-color: var(--color-text-300);
+    --mark-background: var(--background);
+    --mark-border: var(--color-border-400);
+    --source-hover: var(--color-grey-400);
+    --spring: linear(0, 0.04, 0.132, 0.249, 0.371, 0.488, 0.594, 0.684, 0.76, 0.822, 0.87, 0.908, 0.937, 0.958, 0.974, 0.985, 0.992, 0.997, 1, 1.002, 1.003, 1.003, 1.003, 1.002, 1.002, 1.001, 1);
+}