@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/expanding-card/index.js

@@ -1,265 +0,0 @@
-import * as template_u1 from '@esportsplus/template';
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect } from '@esportsplus/reactivity';
-import modal from '../modal/index.js';
-import './scss/index.scss';
-const template_1vq1dko4 = template_u1.template(`<span class='expanding-card-face'><span class='expanding-card-row'><span class='expanding-card-title'></span><span class='expanding-card-meta'></span></span><span class='expanding-card-summary'>`);
-const template_1vq1dko9 = template_u1.template(`<div class='expanding-card'><ul class='expanding-card-list'>`);
-const template_1vq1dkod = template_u1.template(`<li><button aria-haspopup='dialog' class='expanding-card-card ' type='button'>`);
-const template_1vq1dkog = template_u1.template(`<!--$-->`);
-const template_1vq1dkoj = template_u1.template(`<div class='expanding-card-panel' hidden><div class='expanding-card-dialog-face'><div class='expanding-card-header'><div class='expanding-card-heading'><h2 class='expanding-card-title'></h2><p class='expanding-card-meta'></p></div><div class='expanding-card-delayed'><button aria-label='Close' class='expanding-card-close' type='button'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='m4.5 4.5 7 7M11.5 4.5l-7 7' /></svg></button></div></div><div class='expanding-card-body expanding-card-delayed'><p class='expanding-card-summary-full'></p><p class='expanding-card-detail'></p></div></div><div aria-hidden='true' class='expanding-card-dialog-card'>`);
-class ReactiveObject_1vq1dko0 extends reactivity_u0.ReactiveObject {
-    #open;
-    constructor(_p0) {
-        super(null);
-        this.#open = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get open() {
-        return reactivity_u0.read(this.#open);
-    }
-    set open(_v0) {
-        reactivity_u0.write(this.#open, _v0);
-    }
-}
-class ReactiveObject_1vq1dko1 extends reactivity_u0.ReactiveObject {
-    #shown;
-    constructor(_p0) {
-        super(null);
-        this.#shown = this[reactivity_u0.SIGNAL](_p0);
-    }
-    get shown() {
-        return reactivity_u0.read(this.#shown);
-    }
-    set shown(_v0) {
-        reactivity_u0.write(this.#shown, _v0);
-    }
-}
-class ReactiveObject_1vq1dko2 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](false);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-}
-const EXPANDING_CARD_CARD = Symbol.for('@esportsplus/ui/expanding-card.card');
-const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
-const MORPH = {
-    duration: 350,
-    easing: 'linear(0, 0.0575, 0.1803, 0.3208, 0.4551, 0.5729, 0.6711, 0.7501, 0.8122, 0.8601, 0.8966, 0.924, 0.9445, 0.9596, 0.9708, 0.9789, 0.9848, 0.9891, 0.9922, 0.9944, 0.996, 0.9972, 0.998, 0.9986, 1)'
-};
-const REDUCED = '(prefers-reduced-motion: reduce)';
-let uid = 0;
-function box(element, rect) {
-    let style = element.style;
-    style.height = `${rect.height}px`;
-    style.left = `${rect.left}px`;
-    style.margin = '0';
-    style.top = `${rect.top}px`;
-    style.width = `${rect.width}px`;
-}
-function fly(element, from, fromBox, toBox) {
-    if (!element || !from) {
-        return;
-    }
-    let to = element.getBoundingClientRect(), x = (from.left - fromBox.left) - (to.left - toBox.left), y = (from.top - fromBox.top) - (to.top - toBox.top);
-    element.animate([{ translate: `${x}px ${y}px` }, { translate: '0 0' }], MORPH);
-}
-function rect(root, selector) {
-    return root.querySelector(selector)?.getBoundingClientRect();
-}
-function unbox(element) {
-    let style = element.style;
-    style.height = '';
-    style.left = '';
-    style.margin = '';
-    style.top = '';
-    style.width = '';
-}
-function template({ items, state = new ReactiveObject_1vq1dko0(null), ...attributes }) {
-    let bound = this?.attributes, bridge = {
-        get active() {
-            return visible.active;
-        },
-        set active(value) {
-            if (!value) {
-                close();
-            }
-        }
-    }, closing = false, current = null, dialog = null, id = `expanding-card-${++uid}`, list = null, stop, view = new ReactiveObject_1vq1dko1(null), visible = new ReactiveObject_1vq1dko2();
-    function card(key) {
-        return list?.querySelector(`[data-id="${CSS.escape(key)}"]`) ?? null;
-    }
-    function close() {
-        let origin = current === null ? null : card(current), panel = current === null ? null : section(current);
-        if (!dialog || !origin || !panel || closing) {
-            return;
-        }
-        let element = dialog;
-        closing = true;
-        element.style.setProperty('--transition-duration', '0.15s');
-        if (matchMedia(REDUCED).matches) {
-            element.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 100, easing: EASE_OUT, fill: 'forwards' });
-            visible.active = false;
-            return;
-        }
-        let first = element.getBoundingClientRect(), meta = rect(panel, '.expanding-card-dialog-face .expanding-card-meta'), radius = getComputedStyle(element).borderRadius, target = origin.getBoundingClientRect(), title = rect(panel, '.expanding-card-dialog-face .expanding-card-title');
-        for (let animation of element.getAnimations({ subtree: true })) {
-            animation.cancel();
-        }
-        element.classList.add('--returning', '--morphing');
-        box(element, target);
-        panel.querySelector('.expanding-card-dialog-card').style.width = `${target.width}px`;
-        let last = element.getBoundingClientRect();
-        fly(panel.querySelector('.expanding-card-dialog-card .expanding-card-title'), title, first, last);
-        fly(panel.querySelector('.expanding-card-dialog-card .expanding-card-meta'), meta, first, last);
-        element.animate([
-            { borderRadius: radius, height: `${first.height}px`, translate: `${first.left - last.left}px ${first.top - last.top}px`, width: `${first.width}px` },
-            { borderRadius: getComputedStyle(origin).borderRadius, height: `${last.height}px`, translate: '0 0', width: `${last.width}px` }
-        ], { ...MORPH, fill: 'forwards' });
-        panel.querySelector('.expanding-card-dialog-card .expanding-card-summary')?.animate([{ filter: 'blur(4px)', opacity: 0 }, { filter: 'blur(0)', opacity: 1 }], { delay: 200, duration: 200, easing: EASE_OUT, fill: 'backwards' });
-        visible.active = false;
-    }
-    function face(item) {
-        return (() => {
-            let root_1vq1dko3 = template_1vq1dko4(), element_1vq1dko5 = root_1vq1dko3.firstChild.firstElementChild.firstElementChild, element_1vq1dko6 = element_1vq1dko5.nextElementSibling, element_1vq1dko7 = root_1vq1dko3.firstChild.firstElementChild.nextElementSibling;
-            template_u1.slot(element_1vq1dko5, item.title, 1);
-            template_u1.slot(element_1vq1dko6, item.meta, 1);
-            template_u1.slot(element_1vq1dko7, item.summary, 1);
-            return root_1vq1dko3;
-        })();
-    }
-    function open(key) {
-        let origin = card(key), panel = section(key);
-        if (!dialog || !origin || !panel || current !== null) {
-            return;
-        }
-        let element = dialog, first = origin.getBoundingClientRect(), meta = rect(origin, '.expanding-card-meta'), radius = getComputedStyle(origin).borderRadius, title = rect(origin, '.expanding-card-title');
-        current = key;
-        state.open = key;
-        view.shown = key;
-        visible.active = true;
-        for (let other of element.querySelectorAll('.expanding-card-panel')) {
-            other.hidden = other !== panel;
-        }
-        element.setAttribute('aria-labelledby', panel.querySelector('h2').id);
-        element.style.removeProperty('--transition-duration');
-        if (!element.open) {
-            element.showModal();
-        }
-        panel.querySelector('.expanding-card-close')?.focus({ preventScroll: true });
-        if (matchMedia(REDUCED).matches) {
-            element.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 150, easing: EASE_OUT });
-            return;
-        }
-        let last = element.getBoundingClientRect();
-        element.classList.add('--morphing');
-        box(element, last);
-        panel.querySelector('.expanding-card-dialog-face').style.width = `${last.width}px`;
-        fly(panel.querySelector('.expanding-card-dialog-face .expanding-card-title'), title, first, last);
-        fly(panel.querySelector('.expanding-card-dialog-face .expanding-card-meta'), meta, first, last);
-        let animation = element.animate([
-            { borderRadius: radius, height: `${first.height}px`, translate: `${first.left - last.left}px ${first.top - last.top}px`, width: `${first.width}px` },
-            { borderRadius: getComputedStyle(element).borderRadius, height: `${last.height}px`, translate: '0 0', width: `${last.width}px` }
-        ], MORPH);
-        animation.onfinish = () => {
-            if (closing) {
-                return;
-            }
-            element.classList.remove('--morphing');
-            unbox(element);
-            panel.querySelector('.expanding-card-dialog-face').style.width = '';
-        };
-        for (let delayed of panel.querySelectorAll('.expanding-card-delayed')) {
-            delayed.animate([{ filter: 'blur(4px)', opacity: 0, translate: '0 4px' }, { filter: 'blur(0)', opacity: 1, translate: '0 0' }], { delay: 250, duration: 250, easing: EASE_OUT, fill: 'backwards' });
-        }
-    }
-    function section(key) {
-        return dialog?.querySelector(`[data-panel="${CSS.escape(key)}"]`) ?? null;
-    }
-    function settle() {
-        let element = dialog, key = current;
-        if (!element) {
-            return;
-        }
-        for (let animation of element.getAnimations({ subtree: true })) {
-            animation.cancel();
-        }
-        element.classList.remove('--morphing', '--returning');
-        unbox(element);
-        for (let part of element.querySelectorAll('.expanding-card-dialog-card, .expanding-card-dialog-face')) {
-            part.style.width = '';
-        }
-        closing = false;
-        current = null;
-        visible.active = false;
-        view.shown = null;
-        state.open = null;
-        if (key !== null) {
-            card(key)?.focus({ preventScroll: true });
-        }
-    }
-    return (() => {
-        let root_1vq1dko8 = template_1vq1dko9(), element_1vq1dkoa = root_1vq1dko8.firstChild, element_1vq1dkob = element_1vq1dkoa.firstElementChild;
-        template_u1.setProperties(element_1vq1dkoa, bound);
-        template_u1.setProperties(element_1vq1dkoa, attributes);
-        template_u1.onconnect(element_1vq1dkoa, (element) => {
-            dialog = element.querySelector('dialog');
-            list = element.querySelector('.expanding-card-list');
-            dialog?.addEventListener('close', settle);
-            stop = effect(() => {
-                let key = state.open;
-                if (key === current) {
-                    return;
-                }
-                queueMicrotask(() => {
-                    if (key === null) {
-                        close();
-                    }
-                    else {
-                        open(key);
-                    }
-                });
-            });
-        });
-        template_u1.ondisconnect(element_1vq1dkoa, () => {
-            dialog?.removeEventListener('close', settle);
-            stop?.();
-        });
-        template_u1.slot(element_1vq1dkob, items.map((item) => {
-            let root_1vq1dkoc = template_1vq1dkod(), element_1vq1dkoe = root_1vq1dkoc.firstChild.firstElementChild;
-            template_u1.setList(element_1vq1dkoe, 'class', () => view.shown === item.id && '--open');
-            template_u1.setProperty(element_1vq1dkoe, 'data-id', item.id);
-            template_u1.setProperties(element_1vq1dkoe, bound?.[EXPANDING_CARD_CARD]);
-            template_u1.setProperties(element_1vq1dkoe, attributes[EXPANDING_CARD_CARD]);
-            template_u1.delegate(element_1vq1dkoe, 'click', () => open(item.id));
-            template_u1.slot(element_1vq1dkoe, face(item), 1);
-            return root_1vq1dkoc;
-        }), 1);
-        template_u1.slot(element_1vq1dkoa, modal({
-            class: 'expanding-card-dialog',
-            state: bridge
-        }, (() => {
-            let root_1vq1dkof = template_1vq1dkog(), element_1vq1dkoh = root_1vq1dkof.firstChild;
-            template_u1.slot(element_1vq1dkoh, items.map((item, i) => {
-                let root_1vq1dkoi = template_1vq1dkoj(), element_1vq1dkok = root_1vq1dkoi.firstChild, element_1vq1dkol = element_1vq1dkok.firstElementChild.firstElementChild.firstElementChild.firstElementChild, element_1vq1dkom = element_1vq1dkol.nextElementSibling, element_1vq1dkon = element_1vq1dkok.firstElementChild.firstElementChild.firstElementChild.nextElementSibling.firstElementChild, element_1vq1dkoo = element_1vq1dkok.firstElementChild.firstElementChild.nextElementSibling.firstElementChild, element_1vq1dkop = element_1vq1dkoo.nextElementSibling, element_1vq1dkoq = element_1vq1dkok.firstElementChild.nextElementSibling;
-                template_u1.setProperty(element_1vq1dkok, 'data-panel', item.id);
-                template_u1.setProperty(element_1vq1dkol, 'id', `${id}-${i}`);
-                template_u1.slot(element_1vq1dkol, item.title, 1);
-                template_u1.slot(element_1vq1dkom, item.meta, 1);
-                template_u1.delegate(element_1vq1dkon, 'click', close);
-                template_u1.slot(element_1vq1dkoo, item.summary, 1);
-                template_u1.slot(element_1vq1dkop, item.detail, 1);
-                template_u1.slot(element_1vq1dkoq, face(item), 1);
-                return root_1vq1dkoi;
-            }));
-            return root_1vq1dkof;
-        })()), 2);
-        return root_1vq1dko8;
-    })();
-}
-export default Object.assign(template, { card: EXPANDING_CARD_CARD });

package/build/components/expanding-card/scss/index.scss

@@ -1,2 +0,0 @@
-@layer components {.expanding-card{--card-background:var(--color-grey-400);--card-border-radius:18px;--card-pressed-scale:.96;--dialog-backdrop:oklch(from var(--color-text-500) l c h / .15);--dialog-background:var(--color-grey-400);--dialog-border-radius:24px;--dialog-width:440px;--ease-out:cubic-bezier(.23, 1, .32, 1);--focus-ring-color:oklch(from var(--color-text-500) l c h / .38);--list-gap:12px;--max-width:400px;--muted-color:var(--color-text-300);--shadow-raised:0 0 0 var(--border-width-400) oklch(from var(--color-black-500) l c h / .06), 0 1px 2px oklch(from var(--color-black-500) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-500) l c h / .12);--slot-background:oklch(from var(--color-text-500) l c h / .03);--slot-border-color:var(--color-border-300);--text-color:var(--color-text-500);color:var(--text-color);max-width:100%;width:var(--max-width);position:relative}.expanding-card-body{color:var(--muted-color);font-size:15px}.expanding-card-card{background:var(--card-background);border-radius:var(--card-border-radius);box-shadow:var(--shadow-raised);color:inherit;cursor:pointer;font:inherit;text-align:left;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;width:100%;padding:0;transition:scale .15s ease-out;display:block;position:relative}.expanding-card-card:active{scale:var(--card-pressed-scale)}.expanding-card-card:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.expanding-card-card.--open{background:var(--slot-background);box-shadow:inset 0 0 0 var(--border-width-400) var(--slot-border-color);cursor:default;scale:1}.expanding-card-card.--open .expanding-card-face{visibility:hidden}.expanding-card-close{color:var(--muted-color);cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:999px;outline:none;justify-content:center;align-items:center;width:32px;height:32px;margin:-8px -8px 0 0;padding:0;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out;display:flex;position:relative}.expanding-card-close:after{content:"";border-radius:999px;position:absolute;inset:-6px}.expanding-card-close:active{scale:.96}.expanding-card-close:focus-visible{outline:2px solid var(--focus-ring-color);outline-offset:2px}.expanding-card-close:hover{background:var(--color-white-300);color:var(--text-color)}.expanding-card-close svg{width:18px;height:18px}.expanding-card-detail{text-wrap:pretty;margin:10px 0 0;line-height:24px}.expanding-card-dialog.modal{--backdrop:var(--dialog-backdrop);--margin-horizontal:1rem;--max-width:var(--dialog-width);--transition-duration:.2s;--transition-timing-function:var(--ease-out);background:var(--dialog-background);border-radius:var(--dialog-border-radius);box-shadow:var(--shadow-raised);color:var(--text-color);transition:none;overflow:auto}.expanding-card-dialog.modal:not(.--active){opacity:1;translate:none;scale:1}.expanding-card-dialog.--morphing{overflow:hidden}.expanding-card-dialog-card{display:none}.expanding-card-dialog-face{box-sizing:border-box;padding:24px}.expanding-card-dialog.--returning .expanding-card-dialog-card{display:block}.expanding-card-dialog.--returning .expanding-card-dialog-face{display:none}.expanding-card-face{flex-direction:column;align-items:flex-start;gap:6px;padding:16px 18px;display:flex}.expanding-card-header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.expanding-card-heading{flex-direction:column;align-items:flex-start;gap:4px;display:flex}.expanding-card-heading .expanding-card-meta,.expanding-card-heading .expanding-card-title{margin:0}.expanding-card-list{gap:var(--list-gap);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.expanding-card-meta{color:var(--muted-color);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:13px}.expanding-card-row{justify-content:space-between;align-items:baseline;gap:16px;width:100%;display:flex}.expanding-card-summary{color:var(--muted-color);text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:14px;overflow:hidden}.expanding-card-summary-full{margin:16px 0 0}.expanding-card-title{color:var(--text-color);text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:500;overflow:hidden}@media (prefers-reduced-motion:reduce){.expanding-card-card,.expanding-card-close{transition:none}}}
-/*$vite$:1*/

package/build/components/feature-spotlight/index.d.ts

@@ -1,37 +0,0 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    [FEATURE_SPOTLIGHT_ITEM]?: Attributes;
-    [FEATURE_SPOTLIGHT_STAGE]?: Attributes;
-    features: Feature[];
-    screenshot: Renderable<unknown>;
-    size: {
-        height: number;
-        width: number;
-    };
-    state?: {
-        active: number;
-    };
-};
-type Feature = {
-    body: string;
-    region?: Region;
-    spot?: string;
-    title: string;
-};
-type Region = {
-    h: number;
-    w: number;
-    x: number;
-    y: number;
-};
-declare const FEATURE_SPOTLIGHT_ITEM: unique symbol;
-declare const FEATURE_SPOTLIGHT_STAGE: unique symbol;
-declare const _default: ((this: {
-    attributes?: A;
-} | void, { features, screenshot, size, state, ...attributes }: A) => DocumentFragment | Text) & {
-    readonly item: typeof FEATURE_SPOTLIGHT_ITEM;
-    readonly stage: typeof FEATURE_SPOTLIGHT_STAGE;
-};
-export default _default;
-export type { Feature, Region };

package/build/components/feature-spotlight/index.js

@@ -1,248 +0,0 @@
-import * as reactivity_u0 from '@esportsplus/reactivity';
-import { effect } from '@esportsplus/reactivity';
-import * as template_u1 from '@esportsplus/template';
-import './scss/index.scss';
-const template_1lxhfpg3 = template_u1.template(`<section class='feature-spotlight'><div class='feature-spotlight-layout'><div class='feature-spotlight-pin'><figure aria-hidden='true' class='feature-spotlight-stage'><div class='feature-spotlight-chrome'><span></span><span></span><span></span></div><div class='feature-spotlight-view' style=';'><div class='feature-spotlight-camera'><div class='feature-spotlight-shot'><!--$--><div class='feature-spotlight-hole' style=';;'></div></div></div></div></figure></div><ol class='feature-spotlight-list'></ol></div><p aria-live='polite' class='feature-spotlight-sr'>`);
-const template_1lxhfpge = template_u1.template(`<li class='feature-spotlight-item '><div><button class='feature-spotlight-button' type='button'><span aria-hidden='true' class='feature-spotlight-rail'><span></span></span><span class='feature-spotlight-number'></span><span class='feature-spotlight-title'></span><span class='feature-spotlight-body'>`);
-class ReactiveObject_1lxhfpg0 extends reactivity_u0.ReactiveObject {
-    #active = this[reactivity_u0.SIGNAL](-1);
-    constructor() {
-        super(null);
-    }
-    get active() {
-        return reactivity_u0.read(this.#active);
-    }
-    set active(_v0) {
-        reactivity_u0.write(this.#active, _v0);
-    }
-}
-class ReactiveObject_1lxhfpg1 extends reactivity_u0.ReactiveObject {
-    #value = this[reactivity_u0.SIGNAL](0.5);
-    constructor() {
-        super(null);
-    }
-    get value() {
-        return reactivity_u0.read(this.#value);
-    }
-    set value(_v0) {
-        reactivity_u0.write(this.#value, _v0);
-    }
-}
-const CAMERA = 11.5;
-const CATCH = 28;
-const FEATURE_SPOTLIGHT_ITEM = Symbol.for('@esportsplus/ui/feature-spotlight.item');
-const FEATURE_SPOTLIGHT_STAGE = Symbol.for('@esportsplus/ui/feature-spotlight.stage');
-const MAX_ZOOM = 2.2;
-const PAD = 18;
-const REST = 0.01;
-function measure(root, spot) {
-    let element = root.querySelector(`[data-spot="${CSS.escape(spot)}"]`);
-    if (!element) {
-        return null;
-    }
-    let node = element, x = 0, y = 0;
-    while (node && node !== root) {
-        x += node.offsetLeft;
-        y += node.offsetTop;
-        node = node.offsetParent;
-    }
-    return { h: element.offsetHeight, w: element.offsetWidth, x, y };
-}
-function reduced() {
-    return matchMedia('(prefers-reduced-motion: reduce)').matches;
-}
-function scroller(element) {
-    let node = element.parentElement;
-    while (node) {
-        let overflow = getComputedStyle(node).overflowY;
-        if ((overflow === 'auto' || overflow === 'scroll') && node.scrollHeight > node.clientHeight) {
-            return node;
-        }
-        node = node.parentElement;
-    }
-    return null;
-}
-function spring(value) {
-    return { target: value, value, velocity: 0 };
-}
-function viewport(root) {
-    if (!root || root === document.body || root === document.documentElement) {
-        return { bottom: innerHeight, top: 0 };
-    }
-    return root.getBoundingClientRect();
-}
-export default Object.assign(function ({ features, screenshot, size, state = new ReactiveObject_1lxhfpg0(), ...attributes }) {
-    let camera, fit = new ReactiveObject_1lxhfpg1(), frame = 0, hole, list, lockedUntil = 0, observer, root, shot, springs = {
-        h: spring(size.height),
-        holeX: spring(0),
-        holeY: spring(0),
-        scale: spring(1),
-        w: spring(size.width),
-        x: spring(0),
-        y: spring(0)
-    }, stage, stop, texts = [], tick = 0, time = 0, view;
-    function apply() {
-        if (!camera || !hole) {
-            return;
-        }
-        camera.style.transform = `translate(${springs.x.value}px, ${springs.y.value}px) scale(${springs.scale.value})`;
-        hole.style.height = `${springs.h.value}px`;
-        hole.style.translate = `${springs.holeX.value}px ${springs.holeY.value}px`;
-        hole.style.width = `${springs.w.value}px`;
-    }
-    function aim(feature) {
-        let region = feature && shot && feature.spot ? measure(shot, feature.spot) : (feature?.region ?? null), { height: H, width: W } = size, box = { h: H, w: W, x: 0, y: 0 }, x = 0, y = 0, zoom = 1;
-        if (region) {
-            box = { h: region.h + 12, w: region.w + 12, x: region.x - 6, y: region.y - 6 };
-            zoom = Math.min(W / (region.w + PAD * 2), H / (region.h + PAD * 2), MAX_ZOOM);
-            x = Math.min(0, Math.max(W - W * zoom, W / 2 - (region.x + region.w / 2) * zoom));
-            y = Math.min(0, Math.max(H - H * zoom, H / 2 - (region.y + region.h / 2) * zoom));
-        }
-        hole?.classList.toggle('--active', region !== null);
-        springs.h.target = box.h;
-        springs.holeX.target = box.x;
-        springs.holeY.target = box.y;
-        springs.w.target = box.w;
-        if (reduced()) {
-            springs.scale.target = 1;
-            springs.x.target = 0;
-            springs.y.target = 0;
-            for (let key in springs) {
-                let s = springs[key];
-                s.value = s.target;
-                s.velocity = 0;
-            }
-            apply();
-            return;
-        }
-        springs.scale.target = zoom;
-        springs.x.target = x * fit.value;
-        springs.y.target = y * fit.value;
-        if (!tick) {
-            time = 0;
-            tick = requestAnimationFrame(step);
-        }
-    }
-    function detect() {
-        frame = 0;
-        if (performance.now() < lockedUntil || !list || !stage || !root) {
-            return;
-        }
-        let bounds = viewport(scroller(root)), l = list.getBoundingClientRect(), s = stage.getBoundingClientRect(), top = s.left < l.right - 1 ? Math.max(bounds.top, s.bottom) : bounds.top, line = (top + bounds.bottom) / 2, best = Infinity, found = -1;
-        for (let i = 0, n = texts.length; i < n; i++) {
-            let r = texts[i].getBoundingClientRect(), d = line < r.top ? r.top - line : line > r.bottom ? line - r.bottom : 0, outside = (i === 0 && line < r.top - CATCH) || (i === n - 1 && line > r.bottom + CATCH);
-            if (!outside && d < best) {
-                best = d;
-                found = i;
-            }
-        }
-        state.active = found;
-    }
-    function layout() {
-        if (!root || !stage) {
-            return;
-        }
-        let bounds = viewport(scroller(root));
-        root.style.setProperty('--sticky-top', `${Math.max(16, (bounds.bottom - bounds.top - stage.offsetHeight) / 2)}px`);
-        onscroll();
-    }
-    function onscroll() {
-        if (!frame) {
-            frame = requestAnimationFrame(detect);
-        }
-    }
-    function select(i, now) {
-        let text = texts[i];
-        if (!text || !list || !stage || !root) {
-            return;
-        }
-        state.active = i;
-        let element = scroller(root), bounds = viewport(element), l = list.getBoundingClientRect(), s = stage.getBoundingClientRect(), top = s.left < l.right - 1 ? bounds.top + s.height : bounds.top, r = text.getBoundingClientRect(), delta = r.top + r.height / 2 - (top + bounds.bottom) / 2, still = reduced();
-        lockedUntil = now + (still ? 50 : 900);
-        (element ?? document.scrollingElement ?? document.documentElement).scrollBy({ behavior: still ? 'auto' : 'smooth', top: delta });
-    }
-    function step(now) {
-        let elapsed = time ? Math.min((now - time) / 1000, 0.25) : 1 / 60, moving = false, steps = Math.max(1, Math.ceil(elapsed * 60)), dt = elapsed / steps;
-        time = now;
-        for (let key in springs) {
-            let s = springs[key], tolerance = key === 'scale' ? REST / 100 : REST;
-            for (let i = 0; i < steps; i++) {
-                s.velocity += (CAMERA * CAMERA * (s.target - s.value) - 2 * CAMERA * s.velocity) * dt;
-                s.value += s.velocity * dt;
-            }
-            if (Math.abs(s.target - s.value) < tolerance && Math.abs(s.velocity) < tolerance) {
-                s.value = s.target;
-                s.velocity = 0;
-            }
-            else {
-                moving = true;
-            }
-        }
-        apply();
-        tick = moving ? requestAnimationFrame(step) : 0;
-    }
-    return (() => {
-        let root_1lxhfpg2 = template_1lxhfpg3(), element_1lxhfpg4 = root_1lxhfpg2.firstChild, element_1lxhfpg5 = element_1lxhfpg4.firstElementChild.firstElementChild.firstElementChild, element_1lxhfpg6 = element_1lxhfpg5.firstElementChild.nextElementSibling, element_1lxhfpg7 = element_1lxhfpg6.firstElementChild, element_1lxhfpg8 = element_1lxhfpg7.firstElementChild, element_1lxhfpg9 = element_1lxhfpg8.firstChild, element_1lxhfpga = element_1lxhfpg8.firstElementChild, element_1lxhfpgb = element_1lxhfpg4.firstElementChild.firstElementChild.nextElementSibling, element_1lxhfpgc = element_1lxhfpg4.firstElementChild.nextElementSibling;
-        template_u1.setProperties(element_1lxhfpg4, this?.attributes);
-        template_u1.setProperties(element_1lxhfpg4, attributes);
-        template_u1.onconnect(element_1lxhfpg4, (element) => {
-            root = element;
-            addEventListener('scroll', onscroll, true);
-            addEventListener('resize', layout);
-            observer = new ResizeObserver(() => {
-                if (view) {
-                    fit.value = view.offsetWidth / size.width;
-                }
-                layout();
-            });
-            if (view) {
-                observer.observe(view);
-            }
-            let parent = scroller(element);
-            if (parent) {
-                observer.observe(parent);
-            }
-            stop = effect(() => {
-                aim(features[state.active] ?? null);
-            });
-        });
-        template_u1.ondisconnect(element_1lxhfpg4, () => {
-            cancelAnimationFrame(frame);
-            cancelAnimationFrame(tick);
-            removeEventListener('scroll', onscroll, true);
-            removeEventListener('resize', layout);
-            observer?.disconnect();
-            stop?.();
-        });
-        template_u1.setProperties(element_1lxhfpg5, this?.attributes?.[FEATURE_SPOTLIGHT_STAGE]);
-        template_u1.setProperties(element_1lxhfpg5, attributes[FEATURE_SPOTLIGHT_STAGE]);
-        template_u1.onrender(element_1lxhfpg5, (element) => { stage = element; });
-        template_u1.setList(element_1lxhfpg6, 'style', template_u1.interpolate(["aspect-ratio: ", (size.width), " / ", (size.height)]));
-        template_u1.onrender(element_1lxhfpg6, (element) => { view = element; });
-        template_u1.onrender(element_1lxhfpg7, (element) => { camera = element; });
-        template_u1.onrender(element_1lxhfpg8, (element) => {
-            shot = element;
-        });
-        template_u1.setList(element_1lxhfpg8, 'style', () => `height: ${size.height}px; scale: ${fit.value}; width: ${size.width}px;`);
-        template_u1.slot(element_1lxhfpg9, screenshot);
-        template_u1.setList(element_1lxhfpga, 'style', template_u1.interpolate(["height: ", (size.height), "px"]));
-        template_u1.setList(element_1lxhfpga, 'style', template_u1.interpolate([" width: ", (size.width), "px"]));
-        template_u1.onrender(element_1lxhfpga, (element) => { hole = element; });
-        template_u1.onrender(element_1lxhfpgb, (element) => { list = element; });
-        template_u1.slot(element_1lxhfpgb, features.map((feature, i) => {
-            let root_1lxhfpgd = template_1lxhfpge(), element_1lxhfpgf = root_1lxhfpgd.firstChild, element_1lxhfpgg = element_1lxhfpgf.firstElementChild, element_1lxhfpgh = element_1lxhfpgg.firstElementChild, element_1lxhfpgi = element_1lxhfpgh.firstElementChild.nextElementSibling, element_1lxhfpgj = element_1lxhfpgi.nextElementSibling, element_1lxhfpgk = element_1lxhfpgj.nextElementSibling;
-            template_u1.setList(element_1lxhfpgf, 'class', () => state.active === i && '--active');
-            template_u1.setProperties(element_1lxhfpgf, this?.attributes?.[FEATURE_SPOTLIGHT_ITEM]);
-            template_u1.setProperties(element_1lxhfpgf, attributes[FEATURE_SPOTLIGHT_ITEM]);
-            template_u1.onrender(element_1lxhfpgg, (element) => { texts[i] = element; });
-            template_u1.setProperty(element_1lxhfpgh, 'aria-pressed', () => state.active === i ? 'true' : 'false');
-            template_u1.delegate(element_1lxhfpgh, 'click', (e) => select(i, e.timeStamp));
-            template_u1.slot(element_1lxhfpgi, String(i + 1).padStart(2, '0'), 1);
-            template_u1.slot(element_1lxhfpgj, feature.title, 1);
-            template_u1.slot(element_1lxhfpgk, feature.body, 1);
-            return root_1lxhfpgd;
-        }), 1);
-        new template_u1.EffectSlot(element_1lxhfpgc, () => state.active >= 0 && features[state.active] ? `Showing: ${features[state.active].title}` : '', 1);
-        return root_1lxhfpg2;
-    })();
-}, { item: FEATURE_SPOTLIGHT_ITEM, stage: FEATURE_SPOTLIGHT_STAGE });

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

@@ -1,2 +0,0 @@
-@layer components {.feature-spotlight{--body-font-size:calc(var(--font-size-400) * .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:.15s;--dim-in-duration:.35s;--dim-out-duration:.5s;--divider-color:var(--color-border-300);--ease:cubic-bezier(.23, 1, .32, 1);--hole-radius:var(--border-radius-600);--number-font-size:calc(var(--font-size-400) * .8125);--pin-background:var(--color-white-300);--rail-background:var(--color-border-300);--rail-duration:.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 / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--stage-width:360px;--text-duration:.3s;--title-font-size:calc(var(--font-size-400) * 1.0625)}.feature-spotlight--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)}.feature-spotlight{padding-bottom:calc(var(--size-400) * 2.5);width:100%;display:block;position:relative;container-type:inline-size}.feature-spotlight-body{color:var(--color-muted);font-size:var(--body-font-size);opacity:.6;text-wrap:pretty;transition:opacity var(--text-duration) ease-out;line-height:1.625}.--active>*>*>.feature-spotlight-body{opacity:1}.feature-spotlight-button{border-radius:var(--border-radius-600);color:inherit;cursor:pointer;font:inherit;align-items:flex-start;gap:var(--size-100);padding:calc(var(--size-100) / 2) 0 calc(var(--size-100) / 2) var(--size-400);text-align:left;touch-action:manipulation;background:0 0;border:0;outline:none;flex-direction:column;width:100%;transition:scale .15s ease-out;display:flex;position:relative}.feature-spotlight-button:active{scale:.96}.feature-spotlight-button:focus-visible{outline:var(--border-width-500) solid var(--color);outline-offset:calc(var(--size-100) / 2)}.feature-spotlight-camera{transform-origin:0 0;position:absolute;top:0;left:0}.feature-spotlight-chrome{background:var(--chrome-background);border-bottom:var(--border-width-400) solid var(--divider-color);height:var(--chrome-height);padding-inline:var(--size-300);align-items:center;gap:6px;display:flex}.feature-spotlight-chrome span{background:var(--chrome-dot);height:var(--size-100);width:var(--size-100);border-radius:50%}.feature-spotlight-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);opacity:0;pointer-events:none;transition:opacity var(--dim-out-duration) var(--ease);position:absolute;top:0;left:0}.feature-spotlight-hole.--active{opacity:1;transition:opacity var(--dim-in-duration) var(--ease) var(--dim-in-delay)}.feature-spotlight-item{padding-block:var(--size-700)}.feature-spotlight-item:first-child{padding-top:var(--size-400)}.feature-spotlight-item:last-child{padding-bottom:calc(var(--size-400) * 4)}.feature-spotlight-layout{column-gap:var(--column-gap);grid-template-columns:minmax(0,1fr);display:grid}.feature-spotlight-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.feature-spotlight-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>*>*>.feature-spotlight-number{color:var(--color)}.feature-spotlight-pin{background:var(--pin-background);padding:var(--size-300) 0 var(--size-400);z-index:10;position:sticky;top:0}.feature-spotlight-rail{background:var(--rail-background);bottom:calc(var(--size-100) / 2);left:0;top:calc(var(--size-100) / 2);border-radius:999px;width:2px;position:absolute;overflow:hidden}.feature-spotlight-rail span{background:var(--rail-fill);border-radius:inherit;transform-origin:top;height:100%;transition:scale var(--rail-duration) var(--ease);width:100%;display:block;scale:1 0}.--active .feature-spotlight-rail span{scale:1}.feature-spotlight-shot{transform-origin:0 0;position:relative}.feature-spotlight-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.feature-spotlight-stage{background:var(--stage-background);border-radius:var(--stage-radius);box-shadow:var(--stage-shadow);margin:0;overflow:hidden}.feature-spotlight-title{color:var(--color-muted);font-size:var(--title-font-size);font-weight:var(--font-weight-600,var(--font-weight-500));text-wrap:balance;transition:color var(--text-duration) ease-out;line-height:1.375}.--active>*>*>.feature-spotlight-title,.feature-spotlight-button:hover>.feature-spotlight-title{color:var(--color)}.feature-spotlight-view{position:relative;overflow:hidden}@container (width>=34rem){.feature-spotlight-item:first-child{padding-top:calc(var(--size-400) * 1.5)}.feature-spotlight-layout{grid-template-columns:minmax(0, 1fr) minmax(0, var(--stage-width))}.feature-spotlight-list{order:1}.feature-spotlight-pin{top:var(--sticky-top,var(--size-500));background:0 0;order:2;align-self:start;padding:0}}@media (prefers-reduced-motion:reduce){.feature-spotlight-button:active{scale:1}.feature-spotlight-hole,.feature-spotlight-hole.--active{transition:opacity .2s linear}.feature-spotlight-rail span{transition:none}}}
-/*$vite$:1*/

package/build/components/file-tree/index.d.ts

@@ -1,31 +0,0 @@
-import { type Attributes, type Renderable } from '@esportsplus/template';
-import './scss/index.scss';
-type A = Attributes & {
-    elements: Element[];
-    expanded?: string[];
-    icons?: {
-        close?: () => Renderable<unknown>;
-        file?: () => Renderable<unknown>;
-        open?: () => Renderable<unknown>;
-    };
-    indicator?: boolean;
-    select?: (id: string) => void;
-    selected?: string;
-    sort?: Sort;
-    state?: State;
-    toggle?: boolean;
-};
-type Element = {
-    children?: Element[];
-    id: string;
-    name: string;
-    selectable?: boolean;
-    type?: 'file' | 'folder';
-};
-type Sort = 'default' | 'none' | ((a: Element, b: Element) => number);
-type State = {
-    selected: string;
-};
-export default _default;
-declare function _default({ elements, expanded, icons, indicator, select, selected, sort, state, toggle, ...attributes }: A): DocumentFragment | Text;
-export type { Element as FileTreeElement, Sort as FileTreeSort, State as FileTreeState };