@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/metric/flash.js

@@ -0,0 +1,116 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import triangle from '@esportsplus/ui/svg/triangle.svg';
+const template_06qmwy12 = template_u1.template(`<span class='metric-flash'><span aria-hidden='true' class='metric-flash-tint '></span><span aria-hidden='true' class='metric-flash-value'></span><span aria-hidden='true' class='metric-flash-arrow  '><svg class='metric-flash-icon'><use /></svg></span><span aria-live='polite' class='metric-flash-announcement'>`);
+const template_06qmwy1a = template_u1.template(`<span class='metric-flash-text  '>`);
+class ReactiveObject_06qmwy10 extends reactivity_u0.ReactiveObject {
+    #changes = this[reactivity_u0.SIGNAL](0);
+    #direction;
+    #flashing = this[reactivity_u0.SIGNAL](false);
+    #settled;
+    constructor(_p0, _p1) {
+        super(null);
+        this.#direction = this[reactivity_u0.SIGNAL](_p0);
+        this.#settled = this[reactivity_u0.SIGNAL](_p1);
+    }
+    get changes() {
+        return reactivity_u0.read(this.#changes);
+    }
+    set changes(_v0) {
+        reactivity_u0.write(this.#changes, _v0);
+    }
+    get direction() {
+        return reactivity_u0.read(this.#direction);
+    }
+    set direction(_v1) {
+        reactivity_u0.write(this.#direction, _v1);
+    }
+    get flashing() {
+        return reactivity_u0.read(this.#flashing);
+    }
+    set flashing(_v2) {
+        reactivity_u0.write(this.#flashing, _v2);
+    }
+    get settled() {
+        return reactivity_u0.read(this.#settled);
+    }
+    set settled(_v3) {
+        reactivity_u0.write(this.#settled, _v3);
+    }
+}
+export default ({ announceAfter = 700, format = String, hold = 900, label, state: api, ...attributes }) => {
+    let announcer, holder, previous = api.value, render = new reactivity_u0.ReactiveArray(), state = new ReactiveObject_06qmwy10('', format(previous));
+    effect(() => {
+        let value = api.value;
+        untrack(() => {
+            let prior = previous, text = format(value);
+            previous = value;
+            clearTimeout(announcer);
+            announcer = setTimeout(() => state.settled = text, announceAfter);
+            if (render.$length === 0) {
+                render.push(reactivity_u0.reactive({ direction: '', leaving: false, text }));
+                return;
+            }
+            let delta = value - prior;
+            if (!delta) {
+                if (render[render.$length - 1].text !== text) {
+                    render[render.$length - 1].text = text;
+                }
+                return;
+            }
+            let direction = delta > 0 ? 'up' : 'down';
+            for (let i = 0, n = render.$length; i < n; i++) {
+                render[i].direction = direction;
+                render[i].leaving = true;
+            }
+            render.push(reactivity_u0.reactive({ direction, leaving: false, text }));
+            state.changes++;
+            state.direction = direction;
+            state.flashing = true;
+            clearTimeout(holder);
+            holder = setTimeout(() => state.flashing = false, hold);
+        });
+    });
+    function phase() {
+        return state.flashing ? (state.changes % 2 ? 'odd' : 'even') : state.changes > 0 ? 'off' : '';
+    }
+    function remove(entry) {
+        let index = render.indexOf(entry);
+        if (index !== -1) {
+            render.splice(index, 1);
+        }
+    }
+    onCleanup(() => {
+        clearTimeout(announcer);
+        clearTimeout(holder);
+    });
+    return (() => {
+        let root_06qmwy11 = template_06qmwy12(), element_06qmwy13 = root_06qmwy11.firstChild, element_06qmwy14 = element_06qmwy13.firstElementChild, element_06qmwy15 = element_06qmwy14.nextElementSibling, element_06qmwy16 = element_06qmwy15.nextElementSibling, element_06qmwy17 = element_06qmwy16.firstElementChild.firstElementChild, element_06qmwy18 = element_06qmwy16.nextElementSibling;
+        element_06qmwy15.appendChild(new template_u1.ArraySlot(render, function (entry) {
+            return (() => {
+                let root_06qmwy19 = template_06qmwy1a(), element_06qmwy1b = root_06qmwy19.firstChild;
+                new template_u1.EffectSlot(element_06qmwy1b, () => entry.text, 1);
+                template_u1.setList(element_06qmwy1b, 'class', () => entry.direction && `metric-flash-text--${entry.direction}`);
+                template_u1.setList(element_06qmwy1b, 'class', () => entry.leaving && 'metric-flash-text--leaving');
+                template_u1.delegate(element_06qmwy1b, 'animationend', () => {
+                    if (entry.leaving) {
+                        remove(entry);
+                    }
+                });
+                return root_06qmwy19;
+            })();
+        }, true).fragment);
+        new template_u1.EffectSlot(element_06qmwy18, () => label ? `${label}: ${state.settled}` : state.settled, 1);
+        template_u1.setProperty(element_06qmwy17, 'href', template_u1.interpolate(["#", (triangle)]));
+        template_u1.setList(element_06qmwy16, 'class', () => state.direction === 'down' && 'metric-flash-arrow--down');
+        template_u1.setList(element_06qmwy16, 'class', () => phase() && `metric-flash-arrow--${phase()}`);
+        template_u1.setList(element_06qmwy14, 'class', () => state.flashing && 'metric-flash-tint--flashing');
+        template_u1.setProperties(element_06qmwy13, attributes);
+        template_u1.setList(element_06qmwy13, 'class', [
+            () => state.direction && `metric-flash--${state.direction}`,
+            () => state.flashing && 'metric-flash--flashing'
+        ]);
+        return root_06qmwy11;
+    })();
+};

package/build/components/metric/index.d.ts

@@ -0,0 +1,33 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [METRIC_PLOT]?: Attributes;
+    data: Point[];
+    format?: (value: number) => string;
+    state?: State;
+    title: string;
+};
+type Point = {
+    label: string;
+    value: number;
+};
+type State = {
+    active: boolean;
+    index: number;
+};
+declare const METRIC_PLOT: unique symbol;
+declare const _default: template_u1.Factory<A, template_u1.Renderable<any>, template_u1.Renderable<any>, {
+    readonly flash: ({ announceAfter, format, hold, label, state: api, ...attributes }: Attributes & {
+        announceAfter?: number;
+        format?: (value: number) => string;
+        hold?: number;
+        label?: string;
+        state: {
+            value: number;
+        };
+    }) => DocumentFragment | Text;
+    readonly plot: typeof METRIC_PLOT;
+}>;
+export default _default;
+export type { Point as MetricPoint, State as MetricState };

package/build/components/metric/index.js

@@ -0,0 +1,271 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray, batch, computed, onCleanup, read } from '@esportsplus/reactivity';
+import { clamp } from '../../shared/clamp.js';
+import { observeSize } from '../../shared/resize.js';
+import subscribe from '../../shared/subscribe.js';
+import { onceVisible } from '../../shared/visible.js';
+import flash from './flash.js';
+import './scss/index.scss';
+const template_1v1716f4 = template_u1.template(`<tr><th scope='row'></th><td>`);
+const template_1v1716f8 = template_u1.template(`<div class='metric'><div class='metric-header'><div><div class='metric-title'></div><div class='metric-value'></div></div><div class='metric-delta'><span class='metric-delta-value'></span> vs </div></div><div aria-roledescription='line chart' class='metric-plot' role='group' tabindex='0'><svg aria-hidden='true' class='metric-svg'><path class='metric-area' /><path class='metric-line' fill='none' pathLength='1' /></svg><div aria-hidden='true' class='metric-overlay'><div class='metric-cursor'></div><div class='metric-dot'></div><div class='metric-tip'><span class='metric-tip-value'></span><span class='metric-tip-label'></span></div></div></div><span aria-live='polite' class='metric-sr'></span><div class='metric-sr'><table><caption></caption><thead><tr><th scope='col'>Day</th><th scope='col'>Value</th></tr></thead><tbody>`);
+class ReactiveObject_1v1716f0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #index;
+    constructor(_p0) {
+        super(null);
+        this.#index = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v1) {
+        reactivity_u0.write(this.#index, _v1);
+    }
+}
+class ReactiveObject_1v1716f1 extends reactivity_u0.ReactiveObject {
+    #height = this[reactivity_u0.SIGNAL](0);
+    #tip = this[reactivity_u0.SIGNAL](0);
+    #width = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get height() {
+        return reactivity_u0.read(this.#height);
+    }
+    set height(_v0) {
+        reactivity_u0.write(this.#height, _v0);
+    }
+    get tip() {
+        return reactivity_u0.read(this.#tip);
+    }
+    set tip(_v1) {
+        reactivity_u0.write(this.#tip, _v1);
+    }
+    get width() {
+        return reactivity_u0.read(this.#width);
+    }
+    set width(_v2) {
+        reactivity_u0.write(this.#width, _v2);
+    }
+}
+class ReactiveObject_1v1716f2 extends reactivity_u0.ReactiveObject {
+    #announcement = this[reactivity_u0.SIGNAL]('');
+    #revision = this[reactivity_u0.SIGNAL](0);
+    #shown = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get announcement() {
+        return reactivity_u0.read(this.#announcement);
+    }
+    set announcement(_v0) {
+        reactivity_u0.write(this.#announcement, _v0);
+    }
+    get revision() {
+        return reactivity_u0.read(this.#revision);
+    }
+    set revision(_v1) {
+        reactivity_u0.write(this.#revision, _v1);
+    }
+    get shown() {
+        return reactivity_u0.read(this.#shown);
+    }
+    set shown(_v2) {
+        reactivity_u0.write(this.#shown, _v2);
+    }
+}
+const KEYS = {
+    ArrowLeft: (index) => index - 1,
+    ArrowRight: (index) => index + 1,
+    End: (_, last) => last,
+    Home: () => 0
+};
+const METRIC_PLOT = Symbol.for('@esportsplus/ui/metric.plot');
+const PAD_X = 8;
+const PAD_Y = 10;
+function template({ data, format = String, state = new ReactiveObject_1v1716f0(data.length - 1), title, ...attributes }) {
+    let plot, size = new ReactiveObject_1v1716f1(), view = new ReactiveObject_1v1716f2();
+    let series = computed(() => {
+        void view.revision;
+        let max = -Infinity, min = Infinity, points = data.slice();
+        for (let i = 0, n = points.length; i < n; i++) {
+            max = Math.max(max, points[i].value);
+            min = Math.min(min, points[i].value);
+        }
+        return { max, min, points, span: max - min || 1 };
+    });
+    let line = computed(() => {
+        let width = size.width;
+        if (!width) {
+            return '';
+        }
+        let { min, points, span } = read(series);
+        if (!points.length) {
+            return '';
+        }
+        let dx = (width - PAD_X * 2) / Math.max(points.length - 1, 1), h = size.height - PAD_Y * 2, path = '';
+        for (let i = 0, n = points.length; i < n; i++) {
+            path += `${i ? ' L' : 'M'}${(PAD_X + i * dx).toFixed(1)} ${(PAD_Y + (1 - (points[i].value - min) / span) * h).toFixed(1)}`;
+        }
+        return path;
+    });
+    function delta() {
+        let points = read(series).points;
+        if (!points.length) {
+            return '';
+        }
+        let change = points[points.length - 1].value - points[0].value;
+        return `${change > 0 ? '+' : change < 0 ? '-' : ''}${format(Math.abs(change))}`;
+    }
+    function describe(index) {
+        let point = read(series).points[index];
+        return point ? `${point.label}: ${format(point.value)}` : '';
+    }
+    function last() {
+        return Math.max(read(series).points.length - 1, 0);
+    }
+    function nearest(clientX) {
+        if (!plot) {
+            return state.index;
+        }
+        let box = plot.getBoundingClientRect(), at = (clientX - box.left) / (box.width / plot.clientWidth || 1);
+        return clamp(Math.round((at - PAD_X) / step()), 0, last());
+    }
+    function point() {
+        return read(series).points[state.index];
+    }
+    function row(point) {
+        return (() => {
+            let root_1v1716f3 = template_1v1716f4(), element_1v1716f5 = root_1v1716f3.firstChild.firstElementChild, element_1v1716f6 = element_1v1716f5.nextElementSibling;
+            template_u1.slot(element_1v1716f5, point.label, 1);
+            template_u1.slot(element_1v1716f6, format(point.value), 1);
+            return root_1v1716f3;
+        })();
+    }
+    function step() {
+        return (size.width - PAD_X * 2) / Math.max(read(series).points.length - 1, 1);
+    }
+    function x(index) {
+        return PAD_X + index * step();
+    }
+    function y(value) {
+        let { min, span } = read(series);
+        return PAD_Y + (1 - (value - min) / span) * (size.height - PAD_Y * 2);
+    }
+    if (data instanceof ReactiveArray) {
+        onCleanup(subscribe(data, () => {
+            batch(() => {
+                view.revision++;
+                if (!state.active || state.index > last()) {
+                    state.index = last();
+                }
+            });
+        }));
+    }
+    return (() => {
+        let root_1v1716f7 = template_1v1716f8(), element_1v1716f9 = root_1v1716f7.firstChild, element_1v1716fa = element_1v1716f9.firstElementChild.firstElementChild.firstElementChild, element_1v1716fb = element_1v1716fa.nextElementSibling, element_1v1716fc = element_1v1716f9.firstElementChild.firstElementChild.nextElementSibling.firstElementChild, element_1v1716fd = element_1v1716f9.firstElementChild.firstElementChild.nextElementSibling, element_1v1716fe = element_1v1716f9.firstElementChild.nextElementSibling, element_1v1716ff = element_1v1716fe.firstElementChild.firstElementChild, element_1v1716fg = element_1v1716ff.nextElementSibling, element_1v1716fh = element_1v1716fe.firstElementChild.nextElementSibling.firstElementChild, element_1v1716fi = element_1v1716fh.nextElementSibling, element_1v1716fj = element_1v1716fi.nextElementSibling, element_1v1716fk = element_1v1716fj.firstElementChild, element_1v1716fl = element_1v1716fk.nextElementSibling, element_1v1716fm = element_1v1716fe.nextElementSibling, element_1v1716fn = element_1v1716fm.nextElementSibling.firstElementChild.firstElementChild, element_1v1716fo = element_1v1716fn.nextElementSibling.nextElementSibling;
+        template_u1.slot(element_1v1716fa, title, 1);
+        new template_u1.EffectSlot(element_1v1716fb, () => {
+            let points = read(series).points;
+            return points.length > 0 && format(points[points.length - 1].value);
+        }, 1);
+        new template_u1.EffectSlot(element_1v1716fc, () => delta(), 1);
+        new template_u1.EffectSlot(element_1v1716fd, () => read(series).points[0]?.label ?? '', 2);
+        new template_u1.EffectSlot(element_1v1716fk, () => {
+            let at = point();
+            return at && format(at.value);
+        }, 1);
+        new template_u1.EffectSlot(element_1v1716fl, () => point()?.label ?? '', 1);
+        new template_u1.EffectSlot(element_1v1716fm, () => view.announcement, 1);
+        template_u1.slot(element_1v1716fn, title, 1);
+        template_u1.slot(element_1v1716fo, data instanceof ReactiveArray ? new template_u1.ArraySlot(data, row) : data.map(row), 1);
+        template_u1.setList(element_1v1716fj, 'style', () => {
+            let half = size.tip / 2;
+            return `left: ${size.width < size.tip ? size.width / 2 : clamp(x(state.index), half, size.width - half)}px`;
+        });
+        template_u1.setProperties(element_1v1716fj, observeSize(({ width }) => {
+            size.tip = width;
+        }));
+        template_u1.setList(element_1v1716fi, 'style', () => `left: ${x(state.index)}px; top: ${y(point()?.value ?? 0)}px`);
+        template_u1.setList(element_1v1716fh, 'style', () => `left: ${x(state.index)}px`);
+        template_u1.setProperty(element_1v1716fg, 'd', () => read(line));
+        template_u1.setProperty(element_1v1716ff, 'd', () => {
+            let path = read(line);
+            return path && `${path} L${x(last()).toFixed(1)} ${size.height} L${x(0).toFixed(1)} ${size.height} Z`;
+        });
+        template_u1.setProperties(element_1v1716fe, this?.attributes?.[METRIC_PLOT]);
+        template_u1.setProperties(element_1v1716fe, attributes[METRIC_PLOT]);
+        template_u1.setProperties(element_1v1716fe, observeSize(({ height, width }) => {
+            batch(() => {
+                size.height = height;
+                size.width = width;
+            });
+        }));
+        template_u1.setProperties(element_1v1716fe, onceVisible(() => view.shown = true));
+        template_u1.setProperty(element_1v1716fe, 'aria-label', () => `${title}, ${read(series).points.length} points. Use arrow keys to read values.`);
+        template_u1.setList(element_1v1716fe, 'class', [
+            () => state.active && '--active',
+            () => view.shown && 'metric-plot--shown'
+        ]);
+        template_u1.on(element_1v1716fe, 'blur', () => {
+            state.active = false;
+        });
+        template_u1.onconnect(element_1v1716fe, (element) => {
+            plot = element;
+        });
+        template_u1.on(element_1v1716fe, 'focus', () => {
+            state.active = true;
+            view.announcement = describe(state.index);
+        });
+        template_u1.delegate(element_1v1716fe, 'keydown', (e) => {
+            let key = KEYS[e.key];
+            if (!key) {
+                return;
+            }
+            e.preventDefault();
+            let index = clamp(key(state.index, last()), 0, last());
+            state.active = true;
+            state.index = index;
+            view.announcement = describe(index);
+        });
+        template_u1.delegate(element_1v1716fe, 'pointercancel', () => {
+            state.active = false;
+        });
+        template_u1.delegate(element_1v1716fe, 'pointerdown', (e) => {
+            if (e.pointerType !== 'touch') {
+                return;
+            }
+            state.index = nearest(e.clientX);
+            state.active = true;
+        });
+        template_u1.on(element_1v1716fe, 'pointerleave', (e) => {
+            if (e.pointerType !== 'touch') {
+                state.active = false;
+            }
+        });
+        template_u1.delegate(element_1v1716fe, 'pointermove', (e) => {
+            if (e.pointerType === 'touch' && !state.active) {
+                return;
+            }
+            state.index = nearest(e.clientX);
+            state.active = true;
+        });
+        template_u1.delegate(element_1v1716fe, 'pointerup', (e) => {
+            if (e.pointerType === 'touch') {
+                state.active = false;
+            }
+        });
+        template_u1.setProperties(element_1v1716f9, this?.attributes);
+        template_u1.setProperties(element_1v1716f9, attributes);
+        return root_1v1716f7;
+    })();
+}
+export default component(template, { flash, plot: METRIC_PLOT });

package/build/components/metric/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components{.metric-overlay,.metric-flash-tint{position:absolute;inset:0}.metric-sr,.metric-flash-announcement{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.metric-line{stroke-dasharray:1;stroke-dashoffset:1px}.metric-flash-tint{border-radius:inherit;pointer-events:none}.metric-flash{border-radius:var(--border-radius);font-size:var(--font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight);align-items:center;gap:var(--gap);padding:var(--padding);transition:color var(--tone-duration) var(--transition-timing-function), scale var(--settle-duration) var(--settle);grid-auto-flow:column;display:inline-grid;position:relative}.metric-flash--flashing{color:var(--tone);scale:var(--lift-scale);transition:color var(--tone-duration) var(--transition-timing-function), scale var(--lift-duration) var(--lift)}.metric-flash-arrow{animation:none var(--pop-duration) var(--pop) both;opacity:0;place-items:center;width:1em;height:1em;display:grid;position:relative}.metric-flash-arrow--down{rotate:180deg}.metric-flash-arrow--even{animation-name:metric-flash-pop-2}.metric-flash-arrow--odd{animation-name:metric-flash-pop-1}.metric-flash-arrow--off{animation:metric-flash-clear var(--clear-duration) var(--clear) both}.metric-flash-icon{height:var(--arrow-size);width:var(--arrow-size);display:block}.metric-flash-text{grid-area:1/1}.metric-flash-text--down,.metric-flash-text--up{animation:metric-flash-roll var(--roll-duration) var(--roll) both}.metric-flash-text--leaving{animation:metric-flash-drop var(--drop-duration) var(--clear) both;position:absolute;inset-inline-start:0}.metric-flash-tint{background:color-mix(in oklch, var(--tone,transparent) var(--tint-opacity), transparent);opacity:0;transition:opacity var(--clear-duration) var(--clear)}.metric-flash-tint--flashing{opacity:1;transition:opacity var(--cell-duration) var(--cell)}.metric-flash-value{display:inline-grid;position:relative;overflow:hidden}@keyframes metric-flash-clear{0%{opacity:1;scale:1}to{opacity:0;scale:.8}}@keyframes metric-flash-drop{0%{filter:blur();opacity:1;translate:0}to{filter:blur(var(--drop-blur));opacity:0;translate:0 var(--to,0)}}@keyframes metric-flash-pop-1{0%{opacity:0;scale:.4;translate:0 var(--from)}to{opacity:1;translate:0;scale:1}}@keyframes metric-flash-pop-2{0%{opacity:0;scale:.4;translate:0 var(--from)}to{opacity:1;translate:0;scale:1}}@keyframes metric-flash-roll{0%{filter:blur(var(--roll-blur));opacity:0;translate:0 var(--from)}to{filter:blur();opacity:1;translate:0}}.metric{--area-color:color-mix(in oklab, var(--line-color) 8%, transparent);--background:var(--color-grey-400);--border-radius:var(--border-radius-700);--color:var(--color-text-500);--cursor-color:color-mix(in oklab, var(--color-text-300) 40%, transparent);--draw-duration:.7s;--draw-offset:1;--draw-opacity:0;--draw-timing-function:cubic-bezier(.23, 1, .32, 1);--dot-color:var(--line-color);--dot-ring-color:var(--background);--dot-size:12px;--focus-color:var(--color-text-500);--font-size:var(--font-size-400);--line-color:var(--color-text-500);--line-width:2.5;--muted-color:var(--color-text-300);--overlay-duration:.15s;--overlay-opacity:0;--padding:var(--size-500);--plot-height:clamp(64px, 30cqi, 160px);--plot-offset:clamp(40px, 9cqi, 48px);--tip-background:var(--color-text-500);--tip-color:var(--color-white-300);--tip-font-size:var(--font-size-300);--value-font-size:var(--font-size-700);--value-font-size-compact:var(--font-size-600);--value-font-weight:var(--font-weight-600);--width:100%}.metric--accent{--dot-color:var(--color-blue-400);--line-color:var(--color-blue-400);--tip-background:var(--color-blue-400)}.metric-plot.--active{--overlay-duration:.1s;--overlay-opacity:1}.metric-plot--shown{--draw-offset:0;--draw-opacity:1}.metric-flash{--arrow-offset:.3em;--arrow-size:.68em;--border-radius:var(--border-radius-300);--cell:linear(0, .092, .262, .426, .567, .679, .764, .827, .874, .908, .933, .951, .964, .974, .981, .986, .99, .993, .995, .996, .997, .998, .999, .999, 1);--cell-duration:.36s;--clear:cubic-bezier(.4, 0, 1, 1);--clear-duration:.16s;--color-down:var(--color-red-500);--color-up:oklch(from var(--color-green-500) .6 c h);--drop-blur:4px;--drop-duration:.14s;--drop-offset:.7em;--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--gap:6px;--lift:linear(0, .06, .193, .351, .506, .644, .758, .845, .909, .954, .983, 1.001, 1.011, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1.001, 1);--lift-duration:.39s;--lift-scale:1.05;--padding:3px 6px;--pop:linear(0, .136, .423, .722, .953, 1.092, 1.145, 1.138, 1.1, 1.055, 1.017, .992, .98, .979, .983, .99, .996, 1, 1.003, 1.003, 1.003, 1.002, 1.001, 1, 1);--pop-duration:.46s;--roll:linear(0, .065, .201, .348, .487, .606, .703, .779, .837, .881, .913, .937, .955, .968, .977, .984, .988, .992, .994, .996, .997, .998, .999, .999, 1);--roll-blur:5px;--roll-duration:.34s;--roll-offset:.85em;--settle:linear(0, .086, .242, .399, .533, .641, .725, .79, .84, .879, .908, .93, .947, .96, .969, .977, .982, .987, .99, .992, .994, .995, .997, .997, 1);--settle-duration:.66s;--tint-opacity:14%;--tone-duration:.2s}.metric-flash--down{--tone:var(--color-down)}.metric-flash--up{--tone:var(--color-up)}.metric-flash-arrow{--from:var(--arrow-offset)}.metric-flash-arrow--down{--from:calc(var(--arrow-offset) * -1)}.metric-flash-text--down{--from:calc(var(--roll-offset) * -1);--to:var(--drop-offset)}.metric-flash-text--up{--from:var(--roll-offset);--to:calc(var(--drop-offset) * -1)}@media (prefers-reduced-motion:reduce){.metric-flash{--arrow-offset:0em;--cell-duration:1ms;--clear-duration:1ms;--drop-blur:0px;--drop-duration:1ms;--drop-offset:0em;--lift-scale:1;--pop-duration:1ms;--roll-blur:0px;--roll-duration:1ms;--roll-offset:0em}}.metric{background:var(--background);border-radius:var(--border-radius);box-sizing:border-box;color:var(--color);font-size:var(--font-size);min-width:0;max-width:100%;padding:var(--padding);width:var(--width);container-type:inline-size}.metric-area{fill:var(--area-color);opacity:var(--draw-opacity);transition:opacity var(--draw-duration) var(--draw-timing-function)}.metric-cursor{background:var(--cursor-color);width:1px;height:100%;position:absolute;top:0;translate:-50%}.metric-delta{color:var(--muted-color);white-space:nowrap}.metric-delta-value{color:var(--color);font-variant-numeric:tabular-nums;font-weight:var(--font-weight-500)}.metric-dot{background:var(--dot-color);box-shadow:0 0 0 2px var(--dot-ring-color);height:var(--dot-size);width:var(--dot-size);border-radius:50%;position:absolute;translate:-50% -50%}.metric-header{align-items:baseline;gap:var(--size-200) var(--size-400);flex-wrap:wrap;justify-content:space-between;display:flex}.metric-line{opacity:var(--draw-opacity);stroke:var(--line-color);stroke-dashoffset:var(--draw-offset);stroke-linecap:round;stroke-linejoin:round;stroke-width:var(--line-width);transition:opacity 50ms var(--draw-timing-function), stroke-dashoffset var(--draw-duration) var(--draw-timing-function)}.metric-overlay{opacity:var(--overlay-opacity);pointer-events:none;transition:opacity var(--overlay-duration) ease-out}.metric-plot{border-radius:var(--border-radius-100);height:var(--plot-height);margin-top:var(--plot-offset);touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:none;width:100%;position:relative}.metric-plot:focus-visible{outline:2px solid var(--focus-color);outline-offset:4px}.metric-svg{width:100%;height:100%;display:block;overflow:visible}.metric-tip{background:var(--tip-background);color:var(--tip-color);font-size:var(--tip-font-size);align-items:baseline;gap:var(--size-300);white-space:nowrap;border-radius:999px;margin-bottom:10px;padding:6px 12px;display:flex;position:absolute;bottom:100%;translate:-50%}.metric-tip-label{opacity:.7}.metric-tip-value{font-variant-numeric:tabular-nums;font-weight:var(--font-weight-600)}.metric-title{color:var(--muted-color)}.metric-value{font-size:var(--value-font-size);font-variant-numeric:tabular-nums;font-weight:var(--value-font-weight);letter-spacing:-.025em;line-height:1.2}@container (width<320px){.metric-value{font-size:var(--value-font-size-compact)}}@media (prefers-reduced-motion:reduce){.metric-line{stroke-dashoffset:0;transition:opacity var(--draw-duration) var(--draw-timing-function)}}}
+/*$vite$:1*/

package/build/components/nav/index.d.ts

@@ -0,0 +1,13 @@
+import spy from './spy.js';
+import toc from './toc.js';
+import tree from './tree.js';
+import './scss/index.scss';
+declare const nav: {
+    spy: typeof spy;
+    toc: typeof toc;
+    tree: typeof tree;
+};
+export default nav;
+export type { Mode, Spy } from './spy.js';
+export type { TocLink } from './toc.js';
+export type { Current, TreeGroup, TreeLink, TreeSection } from './tree.js';

package/build/components/nav/index.js

@@ -0,0 +1,6 @@
+import spy from './spy.js';
+import toc from './toc.js';
+import tree from './tree.js';
+import './scss/index.scss';
+const nav = { spy, toc, tree };
+export default nav;

package/build/components/nav/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components{.nav-tree-link{--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:transparent;--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default)}.--active.nav-tree-link{--border-color:var(--border-color-active)}.nav-tree-link:not(.--active):hover{--border-color:var(--border-color-hover)}.nav-tree-link:not(.--active):active{--border-color:var(--border-color-pressed)}.nav-tree-link{--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default)}.--active.nav-tree-link{--color:var(--color-active)}.nav-tree-link:not(.--active):hover{--color:var(--color-hover)}.nav-tree-link:not(.--active):active{--color:var(--color-pressed)}.nav-tree-link,.nav-tree-title{--border-width:0px;--color:var(--color-default,inherit);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--width:auto;color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);gap:var(--gap-vertical) var(--gap-horizontal);line-height:var(--line-height);transition:color var(--transition-duration) var(--transition-timing-function);width:var(--width);display:flex;position:relative}.--text-truncate.nav-tree-link,.--text-truncate.nav-tree-title{display:block}.nav-tree-link--truncate{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.nav-tree{--focus-color:var(--color-blue-400);--focus-width:var(--border-width-400);--highlight-background-active:var(--color-black-400);--highlight-background-hover:var(--color-grey-400);--highlight-background-pressed:var(--color-grey-500);--highlight-color:var(--color-white-400);--indicator-color:var(--color-blue-400);--indicator-width:var(--border-width-400);--link-border-color:var(--color-border-400);--link-border-color-active:var(--link-border-color);--link-border-color-hover:var(--color-text-400);--link-border-radius:0px;--link-border-width:var(--border-width-400);--link-color:var(--color-text-400);--link-color-active:var(--color-black-500);--link-font-size:var(--font-size-300);--link-font-weight:var(--font-weight-300);--link-font-weight-active:var(--font-weight-500);--link-inset:0px;--link-padding-horizontal:var(--size-300);--link-padding-vertical:var(--size-100);--section-gap:var(--size-600);--title-color:var(--color-text-400);--title-font-size:var(--font-size-200);--title-font-weight:var(--font-weight-500);--title-font-weight-active:var(--font-weight-600);--title-spacing:var(--size-100)}.nav-tree--command{--highlight-background-active:var(--color-grey-400);--highlight-color:var(--color-text-500)}.nav-tree--highlight{--link-border-color:transparent;--link-border-color-active:transparent;--link-border-color-hover:transparent;--link-border-radius:var(--border-radius-300);--link-color-active:var(--highlight-color);--link-inset:var(--size-300)}.nav-tree--toc{--link-border-color-active:var(--link-color-active)}.nav-tree-highlight.highlight{--background-active:var(--highlight-background-active);--background-hover:var(--highlight-background-hover);--background-pressed:var(--highlight-background-pressed);--glide-duration:.2s;--glide-duration-active:.25s;--scale-hidden:1}.nav-tree{gap:var(--section-gap);flex-direction:column;display:flex}.nav-tree--command :is(.command-label,.command-match){color:inherit}.nav-tree-group,.nav-tree-links{flex-direction:column;display:flex}.nav-tree-group.--hidden,.nav-tree-link.--hidden,.nav-tree-links.--hidden{display:none}.nav-tree-indicator{background:var(--indicator-color);opacity:0;pointer-events:none;height:0;transition:display .16s allow-discrete, height .32s cubic-bezier(.34, 1.36, .64, 1), opacity .16s ease, transform .32s cubic-bezier(.34, 1.36, .64, 1);width:var(--indicator-width);display:none;position:absolute;top:0;left:0}.nav-tree-indicator.--active{opacity:1;display:block}@starting-style{.nav-tree-indicator.--active{opacity:0}}@media (prefers-reduced-motion:reduce){.nav-tree-indicator{transition:none}}.nav-tree-link{--border-color-active:var(--link-border-color-active);--border-color-default:var(--link-border-color);--border-color-hover:var(--link-border-color-hover);--border-color-pressed:var(--border-color-hover);--color-active:var(--link-color-active);--color-default:var(--link-color);--font-size:var(--link-font-size);--font-weight:var(--link-font-weight);border-left:var(--link-border-width) solid var(--border-color);border-radius:var(--link-border-radius);cursor:pointer;padding-block:max(0px, var(--link-padding-vertical) - var(--link-border-width));padding-inline:max(0px, var(--link-padding-horizontal) - var(--link-border-width));text-transform:capitalize;transition:border-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function);flex-wrap:wrap;place-content:center flex-start}.nav-tree-link:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:calc(var(--focus-width) * -1)}.nav-tree-link--truncate{display:block}.nav-tree-link.--active{--font-weight:var(--link-font-weight-active)}.nav-tree-links{position:relative}.nav-tree-links,.nav-tree-title.nav-tree-link{margin-inline:calc(var(--link-inset) * -1)}.nav-tree-title{--color-default:var(--title-color);--font-size:var(--title-font-size);--font-weight:var(--title-font-weight);text-transform:uppercase}.nav-tree-title.nav-tree-link.--active{--font-weight:var(--title-font-weight-active)}.nav-tree-title:not(.nav-tree-link){margin-block:var(--title-spacing)}}
+/*$vite$:1*/

package/build/components/nav/spy.d.ts

@@ -0,0 +1,9 @@
+type Mode = 'current' | 'visible';
+type Spy = ReturnType<typeof spy>;
+declare const spy: (ids: string[], mode?: Mode) => {
+    active: (index: number) => boolean;
+    connect: () => () => void;
+    navigate: (index: number) => void;
+};
+export default spy;
+export type { Mode, Spy };

package/build/components/nav/spy.js

@@ -0,0 +1,157 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { observer } from '../../shared/resize.js';
+import { viewport } from '../../shared/viewport.js';
+class ReactiveObject_0hn9rl40 extends reactivity_u0.ReactiveObject {
+    #end = this[reactivity_u0.SIGNAL](0);
+    #start = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get end() {
+        return reactivity_u0.read(this.#end);
+    }
+    set end(_v0) {
+        reactivity_u0.write(this.#end, _v0);
+    }
+    get start() {
+        return reactivity_u0.read(this.#start);
+    }
+    set start(_v1) {
+        reactivity_u0.write(this.#start, _v1);
+    }
+}
+const LOCK_TIMEOUT = 1000;
+const OVERFLOW = /auto|overlay|scroll/;
+const TOLERANCE = 8;
+function container(element) {
+    let parent = element.parentElement;
+    while (parent) {
+        if (OVERFLOW.test(getComputedStyle(parent).overflowY) && parent.scrollHeight > parent.clientHeight) {
+            return parent;
+        }
+        parent = parent.parentElement;
+    }
+    return (document.scrollingElement ?? document.documentElement);
+}
+const spy = (ids, mode = 'current') => {
+    let frame = 0, locked = false, root, state = new ReactiveObject_0hn9rl40(), timer;
+    function highlight(start, end) {
+        if (state.start !== start) {
+            state.start = start;
+        }
+        if (state.end !== end) {
+            state.end = end;
+        }
+    }
+    function lock() {
+        clearTimeout(timer);
+        locked = true;
+        timer = setTimeout(unlock, LOCK_TIMEOUT);
+    }
+    function measure() {
+        if (!root || locked) {
+            return;
+        }
+        let elements = sections();
+        if (!elements.length) {
+            return;
+        }
+        let bounds = root === document.scrollingElement
+            ? { bottom: viewport().height, top: 0 }
+            : root.getBoundingClientRect(), current = elements[0].index, end = -1, rects = elements.map((section) => section.element.getBoundingClientRect()), start = -1;
+        for (let i = 0, n = elements.length; i < n; i++) {
+            let line = bounds.top + (parseFloat(getComputedStyle(elements[i].element).scrollMarginTop) || 0) + TOLERANCE, rect = rects[i];
+            if (rect.top <= line) {
+                current = elements[i].index;
+            }
+            if (mode === 'visible' && rect.top < bounds.bottom && (i + 1 < n ? rects[i + 1].top : rect.bottom) > line) {
+                if (start === -1) {
+                    start = elements[i].index;
+                }
+                end = elements[i].index;
+            }
+        }
+        if (root.scrollTop + root.clientHeight >= root.scrollHeight - 2) {
+            current = elements[elements.length - 1].index;
+        }
+        if (start === -1) {
+            highlight(current, current);
+        }
+        else {
+            highlight(start, end);
+        }
+    }
+    function schedule() {
+        if (frame) {
+            return;
+        }
+        frame = requestAnimationFrame(() => {
+            frame = 0;
+            measure();
+        });
+    }
+    function scrollend() {
+        if (locked) {
+            unlock();
+        }
+    }
+    function sections() {
+        let elements = [];
+        for (let i = 0, n = ids.length; i < n; i++) {
+            let element = document.getElementById(ids[i]);
+            if (element) {
+                elements.push({ element, index: i });
+            }
+        }
+        return elements;
+    }
+    function unlock() {
+        clearTimeout(timer);
+        locked = false;
+        schedule();
+    }
+    return {
+        active: (index) => state.start <= index && index <= state.end,
+        connect: () => {
+            let elements = sections();
+            if (!elements.length) {
+                return () => { };
+            }
+            root = container(elements[0].element);
+            let resize = observer(schedule), target = root === document.scrollingElement ? window : root;
+            target.addEventListener('scroll', schedule, { passive: true });
+            target.addEventListener('scrollend', scrollend);
+            resize.observe(root);
+            for (let i = 0, n = elements.length; i < n; i++) {
+                resize.observe(elements[i].element);
+            }
+            measure();
+            return () => {
+                cancelAnimationFrame(frame);
+                clearTimeout(timer);
+                resize.disconnect();
+                target.removeEventListener('scroll', schedule);
+                target.removeEventListener('scrollend', scrollend);
+                frame = 0;
+                root = undefined;
+            };
+        },
+        navigate: (index) => {
+            let element = document.getElementById(ids[index]);
+            if (!element) {
+                return;
+            }
+            lock();
+            highlight(index, index);
+            if (!element.hasAttribute('tabindex')) {
+                element.setAttribute('tabindex', '-1');
+            }
+            element.focus({ preventScroll: true });
+            element.scrollIntoView({
+                behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+                block: 'start'
+            });
+        }
+    };
+};
+export default spy;

package/build/components/nav/toc.d.ts

@@ -0,0 +1,26 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+type A = Attributes & {
+    label?: string;
+    links: TocLink[];
+};
+type TocLink = {
+    active?: () => boolean;
+    attributes?: Attributes;
+    content?: Renderable<unknown>;
+    href: string;
+    label: string;
+    onclick?: (event: Event) => void;
+    visible?: () => boolean;
+};
+declare const _default: {
+    (): Renderable<any>;
+    <T extends A>(attributes: T): Renderable<any>;
+    <T extends Renderable<any>>(content: T): Renderable<any>;
+    (attributes: A, content?: Renderable<any>): Renderable<any>;
+    bind(context: {
+        attributes?: Partial<A> | undefined;
+        content?: Renderable<any>;
+    }): any;
+};
+export default _default;
+export type { TocLink };