@esportsplus/ui 0.55.0 → 0.56.3

package/src/components/feature-spotlight/scss/index.scss

@@ -0,0 +1,254 @@
+@use 'variables';
+
+// Laid out by its own width, not the viewport's, so it works in a column as well as full bleed.
+.feature-spotlight {
+    container-type: inline-size;
+    display: block;
+    // Where the pinned screenshot comes to rest, so it stops clear of whatever follows the section.
+    padding-bottom: calc(var(--size-400) * 2.5);
+    // Keeps the live region inside whatever scrolls the section instead of stretching the page.
+    position: relative;
+    width: 100%;
+
+
+    &-body {
+        color: var(--color-muted);
+        font-size: var(--body-font-size);
+        line-height: 1.625;
+        opacity: 0.6;
+        text-wrap: pretty;
+        transition: opacity var(--text-duration) ease-out;
+
+        .--active > * > * > & {
+            opacity: 1;
+        }
+    }
+
+    &-button {
+        align-items: flex-start;
+        background: none;
+        border: 0;
+        border-radius: var(--border-radius-600);
+        color: inherit;
+        cursor: pointer;
+        display: flex;
+        flex-direction: column;
+        font: inherit;
+        gap: var(--size-100);
+        outline: none;
+        padding: calc(var(--size-100) / 2) 0 calc(var(--size-100) / 2) var(--size-400);
+        position: relative;
+        text-align: left;
+        touch-action: manipulation;
+        transition: scale 0.15s ease-out;
+        width: 100%;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: var(--border-width-500) solid var(--color);
+            outline-offset: calc(var(--size-100) / 2);
+        }
+    }
+
+    &-camera {
+        left: 0;
+        position: absolute;
+        top: 0;
+        transform-origin: top left;
+    }
+
+    &-chrome {
+        align-items: center;
+        background: var(--chrome-background);
+        border-bottom: var(--border-width-400) solid var(--divider-color);
+        display: flex;
+        gap: 6px;
+        height: var(--chrome-height);
+        padding-inline: var(--size-300);
+
+        span {
+            background: var(--chrome-dot);
+            border-radius: 50%;
+            height: var(--size-100);
+            width: var(--size-100);
+        }
+    }
+
+    // The spotlight: a rounded hole whose giant shadow dims the rest. Sized with width and height rather than
+    // scale so its corners stay round. The dim trails on the way out, so the pull back reads as the room lights
+    // coming up after the camera leaves.
+    &-hole {
+        border-radius: var(--hole-radius);
+        box-shadow:
+            0 0 0 var(--border-width-500) var(--ring-color),
+            0 0 0 2000px var(--dim-color);
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        transition: opacity var(--dim-out-duration) var(--ease);
+
+        &.--active {
+            opacity: 1;
+            transition: opacity var(--dim-in-duration) var(--ease) var(--dim-in-delay);
+        }
+    }
+
+    &-item {
+        padding-block: var(--size-700);
+
+        &:first-child {
+            padding-top: var(--size-400);
+        }
+
+        &:last-child {
+            padding-bottom: calc(var(--size-400) * 4);
+        }
+    }
+
+    &-layout {
+        column-gap: var(--column-gap);
+        display: grid;
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    &-list {
+        display: flex;
+        flex-direction: column;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    &-number {
+        color: var(--color-muted);
+        font-size: var(--number-font-size);
+        font-variant-numeric: tabular-nums;
+        font-weight: var(--font-weight-500);
+        transition: color var(--text-duration) ease-out;
+
+        .--active > * > * > & {
+            color: var(--color);
+        }
+    }
+
+    &-pin {
+        background: var(--pin-background);
+        padding: var(--size-300) 0 var(--size-400);
+        position: sticky;
+        top: 0;
+        z-index: 10;
+    }
+
+    // A rail beside each feature: the lit one is what the screenshot is showing.
+    &-rail {
+        background: var(--rail-background);
+        border-radius: 999px;
+        bottom: calc(var(--size-100) / 2);
+        left: 0;
+        overflow: hidden;
+        position: absolute;
+        top: calc(var(--size-100) / 2);
+        width: 2px;
+
+        span {
+            background: var(--rail-fill);
+            border-radius: inherit;
+            display: block;
+            height: 100%;
+            scale: 1 0;
+            transform-origin: top;
+            transition: scale var(--rail-duration) var(--ease);
+            width: 100%;
+
+            .--active & {
+                scale: 1;
+            }
+        }
+    }
+
+    // Positioned, so measured spots add their offsets up to here.
+    &-shot {
+        position: relative;
+        transform-origin: top left;
+    }
+
+    &-sr {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-stage {
+        background: var(--stage-background);
+        border-radius: var(--stage-radius);
+        box-shadow: var(--stage-shadow);
+        margin: 0;
+        overflow: hidden;
+    }
+
+    &-title {
+        color: var(--color-muted);
+        font-size: var(--title-font-size);
+        font-weight: var(--font-weight-600, var(--font-weight-500));
+        line-height: 1.375;
+        text-wrap: balance;
+        transition: color var(--text-duration) ease-out;
+
+        .--active > * > * > &,
+        .feature-spotlight-button:hover > & {
+            color: var(--color);
+        }
+    }
+
+    &-view {
+        overflow: hidden;
+        position: relative;
+    }
+
+    @container (min-width: 34rem) {
+        &-item:first-child {
+            padding-top: calc(var(--size-400) * 1.5);
+        }
+
+        &-layout {
+            grid-template-columns: minmax(0, 1fr) minmax(0, var(--stage-width));
+        }
+
+        &-list {
+            order: 1;
+        }
+
+        &-pin {
+            align-self: start;
+            background: transparent;
+            order: 2;
+            padding: 0;
+            top: var(--sticky-top, var(--size-500));
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-button:active {
+            scale: 1;
+        }
+
+        &-hole {
+            &,
+            &.--active {
+                transition: opacity 0.2s linear;
+            }
+        }
+
+        &-rail span {
+            transition: none;
+        }
+    }
+}

package/src/components/feature-spotlight/scss/variables.scss

@@ -0,0 +1,36 @@
+.feature-spotlight {
+    --body-font-size: calc(var(--font-size-400) * 0.875);
+    --chrome-background: var(--color-grey-400);
+    --chrome-dot: var(--color-border-300);
+    --chrome-height: 28px;
+    --color: var(--color-text-500);
+    --color-muted: var(--color-text-300);
+    --column-gap: 28px;
+    --dim-color: color-mix(in oklab, var(--color-white-300) 70%, transparent);
+    --dim-in-delay: 0.15s;
+    --dim-in-duration: 0.35s;
+    --dim-out-duration: 0.5s;
+    --divider-color: var(--color-border-300);
+    --ease: cubic-bezier(0.23, 1, 0.32, 1);
+    --hole-radius: var(--border-radius-600);
+    --number-font-size: calc(var(--font-size-400) * 0.8125);
+    --pin-background: var(--color-white-300);
+    --rail-background: var(--color-border-300);
+    --rail-duration: 0.5s;
+    --rail-fill: var(--color-text-500);
+    --ring-color: color-mix(in oklab, var(--color-text-500) 22%, transparent);
+    --stage-background: var(--color-white-300);
+    --stage-radius: 14px;
+    --stage-shadow:
+        0 0 0 1px oklch(from var(--color-black-300) l c h / 0.06),
+        0 1px 2px oklch(from var(--color-black-300) l c h / 0.06),
+        0 6px 16px -6px oklch(from var(--color-black-300) l c h / 0.12);
+    --stage-width: 360px;
+    --text-duration: 0.3s;
+    --title-font-size: calc(var(--font-size-400) * 1.0625);
+
+    &--dark-dim {
+        --dim-color: color-mix(in oklab, var(--color-black-500) 55%, transparent);
+        --ring-color: color-mix(in oklab, var(--color-white-300) 60%, transparent);
+    }
+}

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

@@ -0,0 +1,319 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html, type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type A = Attributes & {
+    elements: Element[];
+    // Folder ids open on mount; the selected item's folders open as well.
+    expanded?: string[];
+    icons?: {
+        close?: () => Renderable<unknown>;
+        file?: () => Renderable<unknown>;
+        open?: () => Renderable<unknown>;
+    };
+    // Draws a guide line down each open folder.
+    indicator?: boolean;
+    select?: (id: string) => void;
+    selected?: string;
+    sort?: Sort;
+    state?: State;
+    // Adds a corner button that opens every folder, or closes them all when any are open.
+    toggle?: boolean;
+};
+
+type Element = {
+    children?: Element[];
+    id: string;
+    name: string;
+    // Shown but inert, like a locked file.
+    selectable?: boolean;
+    type?: 'file' | 'folder';
+};
+
+type Sort = 'default' | 'none' | ((a: Element, b: Element) => number);
+
+type State = {
+    selected: string;
+};
+
+
+const collator = new Intl.Collator('en', { numeric: true, sensitivity: 'base' });
+
+
+function arrange(elements: Element[], sort: Sort): Element[] {
+    let compare = sort === 'none' ? undefined : sort === 'default' ? byDefault : sort,
+        next = elements.map((element) => element.children ? { ...element, children: arrange(element.children, sort) } : element);
+
+    return compare ? next.sort(compare) : next;
+}
+
+// Folders first, then names in natural order, so file2 sorts before file10.
+function byDefault(a: Element, b: Element) {
+    let x = folder(a),
+        y = folder(b);
+
+    if (x !== y) {
+        return x ? -1 : 1;
+    }
+
+    return collator.compare(a.name, b.name);
+}
+
+function folder(element: Element) {
+    return element.type ? element.type === 'folder' : Array.isArray(element.children);
+}
+
+function folders(elements: Element[], out: Element[] = []) {
+    for (let i = 0, n = elements.length; i < n; i++) {
+        let element = elements[i];
+
+        if (folder(element)) {
+            out.push(element);
+            folders(element.children ?? [], out);
+        }
+    }
+
+    return out;
+}
+
+// Ids of the folders leading to 'id', and 'id' itself when it can be opened.
+function path(elements: Element[], id: string, trail: string[] = []): string[] | null {
+    for (let i = 0, n = elements.length; i < n; i++) {
+        let element = elements[i],
+            next = [...trail, element.id];
+
+        if (element.id === id) {
+            return element.selectable === false ? trail : next;
+        }
+
+        if (element.children) {
+            let found = path(element.children, id, next);
+
+            if (found) {
+                return found;
+            }
+        }
+    }
+
+    return null;
+}
+
+
+const ICONS = {
+    close: () => html`
+        <svg aria-hidden='true' class='file-tree-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'>
+            <path d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' />
+        </svg>
+    `,
+    file: () => html`
+        <svg aria-hidden='true' class='file-tree-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'>
+            <path d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' />
+            <path d='M14 2v4a2 2 0 0 0 2 2h4' />
+        </svg>
+    `,
+    open: () => html`
+        <svg aria-hidden='true' class='file-tree-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'>
+            <path d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2' />
+        </svg>
+    `
+};
+
+
+export default ({
+    elements,
+    expanded = [],
+    icons = {},
+    indicator = true,
+    select,
+    selected,
+    sort = 'default',
+    state = reactive({ selected: selected ?? '' }),
+    toggle,
+    ...attributes
+}: A) => {
+    let all = folders(elements),
+        initial = new Set([...expanded, ...(state.selected ? path(elements, state.selected) ?? [] : [])]),
+        close = icons.close ?? ICONS.close,
+        file = icons.file ?? ICONS.file,
+        open = reactive(
+            Object.fromEntries( all.map((element) => [element.id, initial.has(element.id)]) ) as Record<string, boolean>
+        ),
+        opened = icons.open ?? ICONS.open,
+        root: HTMLElement | undefined,
+        ui = reactive({ any: initial.size > 0 });
+
+    function choose(element: Element) {
+        state.selected = element.id;
+        select?.(element.id);
+    }
+
+    function flip(id: string, value: boolean) {
+        open[id] = value;
+        ui.any = all.some((element) => open[element.id]);
+    }
+
+    function render(elements: Element[]): Renderable<unknown> {
+        return elements.map((element) => {
+            let disabled = element.selectable === false,
+                id = element.id;
+
+            if (!folder(element)) {
+                return html`
+                    <button
+                        class='file-tree-trigger file-tree-file ${() => state.selected === id && '--active'}'
+                        data-id='${id}'
+                        disabled='${disabled}'
+                        onclick='${() => choose(element)}'
+                        type='button'
+                        ${{ 'aria-current': () => state.selected === id && 'true' }}
+                    >
+                        ${file()}
+                        <span class='file-tree-name'>${element.name}</span>
+                    </button>
+                `;
+            }
+
+            return html`
+                <div class='file-tree-folder'>
+                    <button
+                        class='file-tree-trigger ${() => state.selected === id && '--active'}'
+                        data-id='${id}'
+                        disabled='${disabled}'
+                        onclick='${() => {
+                            choose(element);
+                            flip(id, !open[id]);
+                        }}'
+                        type='button'
+                        ${{
+                            'aria-current': () => state.selected === id && 'true',
+                            'aria-expanded': () => open[id] ? 'true' : 'false'
+                        }}
+                    >
+                        ${() => open[id] ? opened() : close()}
+                        <span class='file-tree-name'>${element.name}</span>
+                    </button>
+
+                    <div class='file-tree-content ${() => open[id] && '--active'}' ${{ inert: () => !open[id] }}>
+                        <div class='file-tree-clip'>
+                            ${indicator && html`<div aria-hidden='true' class='file-tree-indicator'></div>`}
+                            <div class='file-tree-group' role='group'>
+                                ${render(element.children ?? [])}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+        });
+    }
+
+    // Every trigger a user can currently reach, in visual order.
+    function reachable() {
+        if (!root) {
+            return [];
+        }
+
+        return Array.from(root.querySelectorAll<HTMLButtonElement>('.file-tree-trigger'))
+            .filter((button) => !button.disabled && !button.closest('[inert]'));
+    }
+
+    return html`
+        <div
+            class='file-tree'
+            ${attributes}
+            ${{
+                onkeydown: (event: KeyboardEvent) => {
+                    let current = (event.target as HTMLElement).closest<HTMLButtonElement>('.file-tree-trigger');
+
+                    if (!current) {
+                        return;
+                    }
+
+                    let buttons = reachable(),
+                        id = current.dataset.id!,
+                        index = buttons.indexOf(current),
+                        target: HTMLButtonElement | undefined;
+
+                    switch (event.key) {
+                        case 'ArrowDown':
+                            target = buttons[index + 1];
+                            break;
+                        case 'ArrowUp':
+                            target = buttons[index - 1];
+                            break;
+                        case 'End':
+                            target = buttons[buttons.length - 1];
+                            break;
+                        case 'Home':
+                            target = buttons[0];
+                            break;
+                        case 'ArrowLeft':
+                        case 'ArrowRight': {
+                            // Arrows point into and out of folders; flipped for right-to-left layouts.
+                            let rtl = getComputedStyle(current).direction === 'rtl',
+                                inward = (event.key === 'ArrowRight') !== rtl;
+
+                            if (id in open && inward) {
+                                if (open[id]) {
+                                    target = buttons[index + 1];
+                                }
+                                else {
+                                    flip(id, true);
+                                }
+                            }
+                            else if (id in open && open[id]) {
+                                flip(id, false);
+                            }
+                            else if (!inward) {
+                                target = current.parentElement?.closest('.file-tree-folder')?.querySelector<HTMLButtonElement>(':scope > .file-tree-trigger') ?? undefined;
+                            }
+                            break;
+                        }
+                        default:
+                            return;
+                    }
+
+                    event.preventDefault();
+                    target?.focus();
+                },
+                onrender: (element: HTMLElement) => {
+                    root = element;
+                }
+            }}
+        >
+            <div class='file-tree-viewport'>
+                <div class='file-tree-group'>
+                    ${render(arrange(elements, sort))}
+                </div>
+            </div>
+
+            ${toggle && html`
+                <button
+                    class='file-tree-toggle'
+                    onclick='${() => {
+                        let value = !ui.any;
+
+                        for (let i = 0, n = all.length; i < n; i++) {
+                            let element = all[i];
+
+                            // Locked folders stay shut, matching how a click on them does nothing.
+                            if (element.selectable !== false && element.children?.length) {
+                                open[element.id] = value;
+                            }
+                            else if (!value) {
+                                open[element.id] = false;
+                            }
+                        }
+
+                        ui.any = all.some((element) => open[element.id]);
+                    }}'
+                    type='button'
+                >
+                    ${() => ui.any ? 'Collapse all' : 'Expand all'}
+                </button>
+            `}
+        </div>
+    `;
+};
+
+export type { Element as FileTreeElement, Sort as FileTreeSort, State as FileTreeState };