@esportsplus/ui 0.55.0 → 0.56.2

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

@@ -0,0 +1,265 @@
+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

@@ -0,0 +1,2 @@
+@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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,248 @@
+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

@@ -0,0 +1,2 @@
+@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

@@ -0,0 +1,31 @@
+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 };