@esportsplus/ui 0.55.0 → 0.56.2

package/build/components/undo-toast/index.js

@@ -0,0 +1,262 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { toast } from '../toast/index.js';
+import './scss/index.scss';
+const template_0m6zol33 = template_u1.template(`<div class='undo-toast'><ul class='undo-toast-list' tabindex='-1'></ul><div class='undo-toast-empty '><span class='undo-toast-empty-label'></span></div><span aria-live='polite' class='undo-toast-live'>`);
+const template_0m6zol3a = template_u1.template(`<li class='undo-toast-row'><div class='undo-toast-row-text'><span class='undo-toast-row-name'></span><span class='undo-toast-row-meta'></span></div><button class='button undo-toast-delete' type='button'><svg aria-hidden='true' viewBox='0 0 16 16'><path d='M2.75 4.25h10.5M6.25 4.25v-1.5h3.5v1.5M4 4.25l.6 8.1a1 1 0 0 0 1 .9h4.8a1 1 0 0 0 1-.9l.6-8.1M6.75 7v3.75M9.25 7v3.75' />`);
+const template_0m6zol3g = template_u1.template(`<button class='button undo-toast-restore' type='button'>`);
+class ReactiveObject_0m6zol30 extends reactivity_u0.ReactiveObject {
+    #empty = this[reactivity_u0.SIGNAL](false);
+    #pending = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get empty() {
+        return reactivity_u0.read(this.#empty);
+    }
+    set empty(_v0) {
+        reactivity_u0.write(this.#empty, _v0);
+    }
+    get pending() {
+        return reactivity_u0.read(this.#pending);
+    }
+    set pending(_v1) {
+        reactivity_u0.write(this.#pending, _v1);
+    }
+}
+class ReactiveObject_0m6zol31 extends reactivity_u0.ReactiveObject {
+    #text = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get text() {
+        return reactivity_u0.read(this.#text);
+    }
+    set text(_v0) {
+        reactivity_u0.write(this.#text, _v0);
+    }
+}
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const UNDO_TOAST_ROW = Symbol.for('@esportsplus/ui/undo-toast.row');
+function editable(target) {
+    return target instanceof HTMLElement && (target.isContentEditable || target.tagName === 'INPUT' || target.tagName === 'TEXTAREA');
+}
+function enter(row) {
+    let reduce = reduced();
+    row.hidden = false;
+    row.animate([
+        reduce ? { opacity: 0 } : { filter: 'blur(4px)', opacity: 0, scale: 0.98 },
+        reduce ? { opacity: 1 } : { filter: 'blur(0px)', opacity: 1, scale: 1 }
+    ], { delay: 50, duration: 250, easing: EASE_OUT, fill: 'backwards' });
+}
+function leave(row) {
+    let { offsetLeft, offsetTop, offsetWidth } = row;
+    row.classList.add('undo-toast-row--leaving');
+    row.style.left = `${offsetLeft}px`;
+    row.style.top = `${offsetTop}px`;
+    row.style.width = `${offsetWidth}px`;
+    row.animate([{}, reduced() ? { opacity: 0 } : { opacity: 0, scale: 0.98 }], { duration: 150, easing: EASE_OUT, fill: 'forwards' }).finished.then((animation) => {
+        row.classList.remove('undo-toast-row--leaving');
+        row.hidden = true;
+        row.style.left = '';
+        row.style.top = '';
+        row.style.width = '';
+        animation.cancel();
+    }, () => { });
+}
+function measure(rows) {
+    let rects = new Map();
+    for (let row of rows) {
+        if (!row.hidden) {
+            rects.set(row, row.getBoundingClientRect());
+        }
+    }
+    return rects;
+}
+function reduced() {
+    return matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+function shortcut() {
+    return /Mac|iPhone|iPad/.test(navigator.platform) ? 'Command Z' : 'Control Z';
+}
+export default Object.assign(function ({ duration = 5000, emptyLabel = 'No files left', items, label = 'Files', ondelete, restoreLabel, state = new ReactiveObject_0m6zol30(), ...attributes }) {
+    let gone = new Set(), live = new ReactiveObject_0m6zol31(), message, pending = [], root, rows = new Map(), slides = new WeakMap(), toastId;
+    function commit() {
+        toastId = undefined;
+        message = undefined;
+        if (pending.length === 0) {
+            return;
+        }
+        let committed = items.filter((item) => pending.includes(item.id)), target = inside() ? visible()[0] : undefined;
+        for (let id of pending) {
+            gone.add(id);
+        }
+        pending = [];
+        state.pending = 0;
+        state.empty = visible().length === 0;
+        ondelete?.(committed);
+        focus(target ? target.id : 'list');
+    }
+    function focus(target) {
+        if (!target || !root) {
+            return;
+        }
+        if (target === 'list') {
+            root.querySelector('.undo-toast-list')?.focus();
+            return;
+        }
+        rows.get(target)?.querySelector('.undo-toast-delete')?.focus();
+    }
+    function inside() {
+        return !!root?.contains(document.activeElement);
+    }
+    function notify(text) {
+        if (!message) {
+            message = document.createElement('span');
+            message.className = 'undo-toast-message';
+            toastId = toast.message(message, {
+                action: { label: 'Undo', onclick: undo },
+                countdown: true,
+                dismissible: false,
+                duration,
+                ondismiss: commit
+            });
+        }
+        else if (toastId) {
+            toast.update(toastId, { duration });
+        }
+        let next = document.createElement('span');
+        next.className = 'undo-toast-message-text';
+        next.textContent = text;
+        for (let old of [...message.children]) {
+            old.classList.add('undo-toast-message-text--leaving');
+            old.animate([{}, { opacity: 0 }], { duration: 120, fill: 'forwards' })
+                .finished.then(() => old.remove(), () => old.remove());
+        }
+        message.append(next);
+        if (message.children.length > 1) {
+            next.animate([
+                reduced() ? { opacity: 0 } : { filter: 'blur(4px)', opacity: 0, translate: '0 4px' },
+                { filter: 'blur(0px)', opacity: 1, translate: '0 0' }
+            ], { duration: 200, easing: EASE_OUT });
+        }
+    }
+    function remove(item) {
+        let list = visible(), index = list.findIndex((i) => i.id === item.id), row = rows.get(item.id);
+        if (!row || index === -1) {
+            return;
+        }
+        let before = measure([...rows.values()].filter((r) => r !== row)), neighbour = list[index + 1] ?? list[index - 1], refocus = inside();
+        leave(row);
+        slide(before);
+        pending.push(item.id);
+        state.pending = pending.length;
+        notify(pending.length === 1 ? `Deleted ‘${item.name}’` : `${pending.length} items deleted`);
+        live.text = `Deleted ${item.name}. Press Undo or ${shortcut()} to restore.`;
+        if (refocus) {
+            focus(neighbour ? neighbour.id : 'list');
+        }
+    }
+    function restore(ids) {
+        let before = measure([...rows.values()]);
+        for (let id of ids) {
+            let row = rows.get(id);
+            if (row) {
+                row.getAnimations().forEach((animation) => animation.cancel());
+                row.classList.remove('undo-toast-row--leaving');
+                row.style.left = '';
+                row.style.top = '';
+                row.style.width = '';
+                enter(row);
+            }
+        }
+        slide(before);
+    }
+    function slide(before) {
+        for (let [row, rect] of before) {
+            if (row.hidden || row.classList.contains('undo-toast-row--leaving')) {
+                continue;
+            }
+            let delta = rect.top - row.getBoundingClientRect().top;
+            slides.get(row)?.cancel();
+            if (delta === 0 || reduced()) {
+                continue;
+            }
+            slides.set(row, row.animate([{ translate: `0 ${delta}px` }, { translate: '0 0' }], { duration: 250, easing: EASE_OUT }));
+        }
+    }
+    function undo() {
+        if (pending.length === 0) {
+            return;
+        }
+        let restored = pending, refocus = inside();
+        pending = [];
+        state.pending = 0;
+        restore(restored);
+        live.text = restored.length === 1 ? 'Restored' : `Restored ${restored.length} items`;
+        if (refocus) {
+            focus(restored[0]);
+        }
+    }
+    function visible() {
+        return items.filter((item) => !gone.has(item.id) && !pending.includes(item.id));
+    }
+    return (() => {
+        let root_0m6zol32 = template_0m6zol33(), element_0m6zol34 = root_0m6zol32.firstChild, element_0m6zol35 = element_0m6zol34.firstElementChild, element_0m6zol36 = element_0m6zol35.nextElementSibling, element_0m6zol37 = element_0m6zol36.firstElementChild, element_0m6zol38 = element_0m6zol36.nextElementSibling;
+        template_u1.setProperties(element_0m6zol34, this?.attributes);
+        template_u1.setProperties(element_0m6zol34, attributes);
+        template_u1.onconnect(element_0m6zol34, (element) => {
+            root = element;
+            for (let row of element.querySelectorAll('.undo-toast-row')) {
+                rows.set(row.dataset.id ?? '', row);
+            }
+        });
+        template_u1.ondisconnect(element_0m6zol34, () => {
+            if (toastId) {
+                toast.dismiss(toastId);
+            }
+        });
+        template_u1.ondocument(element_0m6zol34, 'keydown', (e) => {
+            if (pending.length === 0 || e.key.toLowerCase() !== 'z' || !(e.metaKey || e.ctrlKey)) {
+                return;
+            }
+            if (e.shiftKey || e.altKey || editable(e.target) || root?.closest('[inert]')) {
+                return;
+            }
+            e.preventDefault();
+            undo();
+            if (toastId) {
+                toast.dismiss(toastId);
+            }
+        });
+        template_u1.setProperty(element_0m6zol35, 'aria-label', label);
+        template_u1.slot(element_0m6zol35, items.map((item) => {
+            let root_0m6zol39 = template_0m6zol3a(), element_0m6zol3b = root_0m6zol39.firstChild, element_0m6zol3c = element_0m6zol3b.firstElementChild.firstElementChild, element_0m6zol3d = element_0m6zol3c.nextElementSibling, element_0m6zol3e = element_0m6zol3b.firstElementChild.nextElementSibling;
+            template_u1.setProperty(element_0m6zol3b, 'data-id', item.id);
+            template_u1.setProperties(element_0m6zol3b, this?.attributes?.[UNDO_TOAST_ROW]);
+            template_u1.setProperties(element_0m6zol3b, attributes[UNDO_TOAST_ROW]);
+            template_u1.slot(element_0m6zol3c, item.name, 1);
+            template_u1.slot(element_0m6zol3d, item.meta, 1);
+            template_u1.setProperty(element_0m6zol3e, 'aria-label', template_u1.interpolate(["Delete ", (item.name)]));
+            template_u1.delegate(element_0m6zol3e, 'click', () => remove(item));
+            return root_0m6zol39;
+        }), 1);
+        template_u1.setList(element_0m6zol36, 'class', () => state.empty && '--active');
+        template_u1.setProperty(element_0m6zol36, 'inert', () => !state.empty);
+        template_u1.slot(element_0m6zol37, emptyLabel, 1);
+        template_u1.slot(element_0m6zol36, restoreLabel && (() => {
+            let root_0m6zol3f = template_0m6zol3g(), element_0m6zol3h = root_0m6zol3f.firstChild;
+            template_u1.delegate(element_0m6zol3h, 'click', () => {
+                let ids = [...gone];
+                gone.clear();
+                state.empty = false;
+                restore(ids);
+                focus(ids[0]);
+            });
+            template_u1.slot(element_0m6zol3h, restoreLabel, 1);
+            return root_0m6zol3f;
+        })(), 2);
+        new template_u1.EffectSlot(element_0m6zol38, () => live.text, 1);
+        return root_0m6zol32;
+    })();
+}, { row: UNDO_TOAST_ROW });

package/build/components/undo-toast/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.undo-toast{--undo-toast-background:var(--color-grey-400);--undo-toast-box-shadow:0 0 0 1px color-mix(in oklab, var(--color-black-300) 6%, transparent), 0 1px 2px color-mix(in oklab, var(--color-black-300) 6%, transparent), 0 6px 16px -6px color-mix(in oklab, var(--color-black-300) 12%, transparent);--undo-toast-color:var(--color-text-500);--undo-toast-color-muted:var(--color-text-300);--undo-toast-ease:cubic-bezier(.23, 1, .32, 1);--undo-toast-focus-color:color-mix(in oklab, var(--color-text-500) 38%, transparent);--undo-toast-height:240px;--undo-toast-row-background-hover:var(--color-white-300);--undo-toast-row-height:56px}.undo-toast--white{--undo-toast-background:var(--color-white-300);--undo-toast-row-background-hover:var(--color-grey-400)}.undo-toast{background:var(--undo-toast-background);box-shadow:var(--undo-toast-box-shadow);height:var(--undo-toast-height);border-radius:24px;padding:8px;position:relative}.undo-toast-delete.button{--background-default:transparent;--background-hover:color-mix(in oklab, var(--undo-toast-color) 5%, transparent);--border-radius:999px;--color-default:var(--undo-toast-color-muted);--color-hover:var(--undo-toast-color);--padding-horizontal:0px;--padding-vertical:0px;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:0;outline:none;flex-shrink:0;width:36px;height:36px;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out}.undo-toast-delete.button:active{scale:.96}.undo-toast-delete.button:focus-visible{outline:2px solid var(--undo-toast-focus-color)}.undo-toast-delete.button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;width:16px;height:16px}.undo-toast-empty{filter:blur(4px);opacity:0;pointer-events:none;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex;position:absolute;inset:0}.undo-toast-empty.--active{filter:blur();opacity:1;pointer-events:auto;transition:filter .25s var(--undo-toast-ease) 50ms, opacity .25s var(--undo-toast-ease) 50ms}.undo-toast-empty-label{color:var(--undo-toast-color-muted);font-size:15px}.undo-toast-list{outline:none;margin:0;padding:0;list-style:none;position:relative}.undo-toast-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.undo-toast-restore.button{--background-default:var(--color-white-300);--border-radius:999px;--box-shadow-default:var(--undo-toast-box-shadow);--color-default:var(--undo-toast-color);--font-size:14px;--font-weight:var(--font-weight-500);--padding-horizontal:16px;--padding-vertical:0px;border:0;outline:none;height:36px;transition:scale .15s ease-out}.undo-toast-restore.button:active{scale:.96}.undo-toast-restore.button:focus-visible{outline:2px solid var(--undo-toast-focus-color)}.undo-toast-row{height:var(--undo-toast-row-height);border-radius:16px;align-items:center;gap:12px;padding-inline:14px 10px;transition:background-color .15s ease-out;display:flex}.undo-toast-row:hover{background:var(--undo-toast-row-background-hover)}.undo-toast-row[hidden]{display:none}.undo-toast-row--leaving{pointer-events:none;position:absolute}.undo-toast-row-meta,.undo-toast-row-name{text-overflow:ellipsis;white-space:nowrap;line-height:20px;overflow:hidden}.undo-toast-row-meta{color:var(--undo-toast-color-muted);font-size:13px}.undo-toast-row-name{color:var(--undo-toast-color);font-size:15px;font-weight:var(--font-weight-500)}.undo-toast-row-text{flex-direction:column;flex:1;min-width:0;display:flex}@media (prefers-reduced-motion:reduce){.undo-toast-delete.button{transition:background-color .15s ease-out,color .15s ease-out}.undo-toast-delete.button:active{scale:1}.undo-toast-empty{filter:none}.undo-toast-restore.button{transition:none}.undo-toast-restore.button:active{scale:1}}.undo-toast-message{min-width:0;display:flex;position:relative}.undo-toast-message-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.undo-toast-message-text--leaving{position:absolute;top:0;left:0}}
+/*$vite$:1*/

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

@@ -0,0 +1,21 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+type Incident = {
+    daysAgo: number;
+    level: 'degraded' | 'outage';
+    minutes: number;
+    title: string;
+};
+type Service = {
+    incidents: Incident[];
+    name: string;
+};
+declare const uptime: ({ services, state: api, ...attributes }: Attributes & {
+    services: Service[];
+    state?: {
+        day: number;
+        row: number;
+    };
+}) => DocumentFragment | Text;
+export default uptime;
+export type { Incident, Service };

package/build/components/uptime/index.js

@@ -0,0 +1,210 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { batch, computed, dispose, onCleanup, read } from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import './scss/index.scss';
+const template_1em9ac73 = template_u1.template(`<span class='uptime-bar  '>`);
+const template_1em9ac76 = template_u1.template(`<span class='uptime-service-message'><!--$-->% uptime`);
+const template_1em9ac78 = template_u1.template(`<span class='uptime-service-message uptime-service-message--ok'>No downtime`);
+const template_1em9ac7a = template_u1.template(`<span class='uptime-service-message uptime-service-message--active '>`);
+const template_1em9ac7d = template_u1.template(`<div class='uptime-service'><div class='uptime-service-header'><span class='uptime-service-name'></span><span class='uptime-service-caption'><!--$--></span></div><div class='uptime-bars ' role='group' tabindex='0'>`);
+const template_1em9ac7j = template_u1.template(`<span class='uptime-service-day'>`);
+const template_1em9ac7m = template_u1.template(`<div class='uptime'><div class='uptime-header'><span class='uptime-status '></span><span class='uptime-range'>Last <!--$--> days</span></div><div class='uptime-services'></div><div class='uptime-axis'><span><!--$--> days ago</span><span>Today</span></div><p aria-live='polite' class='uptime-live'>`);
+class ReactiveObject_1em9ac70 extends reactivity_u0.ReactiveObject {
+    #day = this[reactivity_u0.SIGNAL](-1);
+    #row = this[reactivity_u0.SIGNAL](-1);
+    constructor() {
+        super(null);
+    }
+    get day() {
+        return reactivity_u0.read(this.#day);
+    }
+    set day(_v0) {
+        reactivity_u0.write(this.#day, _v0);
+    }
+    get row() {
+        return reactivity_u0.read(this.#row);
+    }
+    set row(_v1) {
+        reactivity_u0.write(this.#row, _v1);
+    }
+}
+class ReactiveObject_1em9ac71 extends reactivity_u0.ReactiveObject {
+    #days;
+    constructor(_p0) {
+        super(null);
+        this.#days = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get days() {
+        return reactivity_u0.read(this.#days);
+    }
+    set days(_v0) {
+        reactivity_u0.write(this.#days, _v0);
+    }
+}
+const COMPACT_WIDTH = 400;
+const DAY_MINUTES = 1440;
+const DAYS = 60;
+const DAYS_COMPACT = 30;
+const HEALTHY = -1;
+const SUMMARY = -2;
+function ago(day) {
+    if (day === 0) {
+        return 'Today';
+    }
+    if (day === 1) {
+        return 'Yesterday';
+    }
+    return `${day} days ago`;
+}
+function describe(incident) {
+    let minutes = incident.minutes;
+    return `${incident.title}, ${minutes < 60 ? `${minutes}m` : `${Math.floor(minutes / 60)}h ${minutes % 60}m`}`;
+}
+function find(service, day) {
+    return service.incidents.find((incident) => incident.daysAgo === day);
+}
+function percentage(service, days) {
+    let down = 0, incidents = service.incidents;
+    for (let i = 0, n = incidents.length; i < n; i++) {
+        let incident = incidents[i];
+        if (incident.daysAgo >= days) {
+            continue;
+        }
+        down += incident.level === 'outage' ? incident.minutes : incident.minutes / 3;
+    }
+    return (100 * (1 - down / (days * DAY_MINUTES))).toFixed(2);
+}
+const uptime = ({ services, state: api = new ReactiveObject_1em9ac70(), ...attributes }) => {
+    let layout = new ReactiveObject_1em9ac71(DAYS), nodes = [], observer, operational = services.every((service) => !find(service, 0));
+    function bars(service, index) {
+        let days = layout.days, render = [];
+        for (let i = 0; i < days; i++) {
+            let value = days - 1 - i, incident = find(service, value);
+            render.push((() => {
+                let root_1em9ac72 = template_1em9ac73(), element_1em9ac74 = root_1em9ac72.firstChild;
+                template_u1.setList(element_1em9ac74, 'class', incident ? `uptime-bar--${incident.level}` : '');
+                template_u1.setList(element_1em9ac74, 'class', () => api.row === index && api.day === value && '--active');
+                return root_1em9ac72;
+            })());
+        }
+        return render;
+    }
+    function clear() {
+        select(-1, -1);
+    }
+    function message(service, key) {
+        if (key === SUMMARY) {
+            return (() => {
+                let root_1em9ac75 = template_1em9ac76(), element_1em9ac77 = root_1em9ac75.firstChild.firstChild;
+                template_u1.slot(element_1em9ac77, percentage(service, layout.days));
+                return root_1em9ac75;
+            })();
+        }
+        let incident = key === HEALTHY ? undefined : find(service, key);
+        if (!incident) {
+            return template_1em9ac78();
+        }
+        return (() => {
+            let root_1em9ac79 = template_1em9ac7a(), element_1em9ac7b = root_1em9ac79.firstChild;
+            template_u1.setList(element_1em9ac7b, 'class', template_u1.interpolate(["uptime-service-message--", (incident.level)]));
+            template_u1.slot(element_1em9ac7b, describe(incident), 1);
+            return root_1em9ac79;
+        })();
+    }
+    function row(service, index) {
+        let day = computed(() => api.row === index ? api.day : -1), caption = computed(() => {
+            let value = read(day);
+            if (value === -1) {
+                return SUMMARY;
+            }
+            return find(service, value) ? value : HEALTHY;
+        });
+        nodes.push(caption, day);
+        return (() => {
+            let root_1em9ac7c = template_1em9ac7d(), element_1em9ac7e = root_1em9ac7c.firstChild.firstElementChild.firstElementChild, element_1em9ac7f = element_1em9ac7e.nextElementSibling.firstChild, element_1em9ac7g = element_1em9ac7e.nextElementSibling, element_1em9ac7h = root_1em9ac7c.firstChild.firstElementChild.nextElementSibling;
+            template_u1.slot(element_1em9ac7e, service.name, 1);
+            new template_u1.EffectSlot(element_1em9ac7f, () => {
+                let value = read(day);
+                return value !== -1 && (() => {
+                    let root_1em9ac7i = template_1em9ac7j(), element_1em9ac7k = root_1em9ac7i.firstChild;
+                    template_u1.slot(element_1em9ac7k, ago(value), 1);
+                    return root_1em9ac7i;
+                })();
+            });
+            new template_u1.EffectSlot(element_1em9ac7g, () => message(service, read(caption)), 2);
+            template_u1.setProperty(element_1em9ac7h, 'aria-label', () => `${service.name}: ${percentage(service, layout.days)}% uptime over ${layout.days} days. Arrow keys step through days.`);
+            template_u1.setList(element_1em9ac7h, 'class', () => api.row === index && '--active');
+            template_u1.on(element_1em9ac7h, 'blur', clear);
+            template_u1.on(element_1em9ac7h, 'focus', () => {
+                if (api.row !== index) {
+                    select(index, 0);
+                }
+            });
+            template_u1.delegate(element_1em9ac7h, 'keydown', (e) => {
+                let days = layout.days, step = e.key === 'ArrowLeft' ? 1 : e.key === 'ArrowRight' ? -1 : 0;
+                if (e.key === 'End') {
+                    e.preventDefault();
+                    select(index, 0);
+                }
+                else if (e.key === 'Escape') {
+                    clear();
+                }
+                else if (e.key === 'Home') {
+                    e.preventDefault();
+                    select(index, days - 1);
+                }
+                else if (step) {
+                    e.preventDefault();
+                    select(index, Math.min(days - 1, Math.max(0, (api.row === index ? api.day : 0) + step)));
+                }
+            });
+            template_u1.on(element_1em9ac7h, 'pointerleave', clear);
+            template_u1.delegate(element_1em9ac7h, 'pointermove', (e) => {
+                let days = layout.days, element = e.currentTarget, rect = element.getBoundingClientRect(), width = element.offsetWidth, x = (e.clientX - rect.left) / (rect.width / width || 1);
+                select(index, days - 1 - Math.min(days - 1, Math.max(0, Math.floor((x / width) * days))));
+            });
+            new template_u1.EffectSlot(element_1em9ac7h, () => bars(service, index), 1);
+            return root_1em9ac7c;
+        })();
+    }
+    function select(row, day) {
+        if (api.day === day && api.row === row) {
+            return;
+        }
+        batch(() => {
+            api.day = day;
+            api.row = row;
+        });
+    }
+    onCleanup(() => {
+        observer?.disconnect();
+        for (let i = 0, n = nodes.length; i < n; i++) {
+            dispose(nodes[i]);
+        }
+    });
+    return (() => {
+        let root_1em9ac7l = template_1em9ac7m(), element_1em9ac7n = root_1em9ac7l.firstChild, element_1em9ac7o = element_1em9ac7n.firstElementChild.firstElementChild, element_1em9ac7p = element_1em9ac7o.nextElementSibling.firstChild.nextSibling, element_1em9ac7q = element_1em9ac7n.firstElementChild.nextElementSibling, element_1em9ac7r = element_1em9ac7q.nextElementSibling.firstElementChild.firstChild, element_1em9ac7s = element_1em9ac7q.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_1em9ac7n, attributes);
+        template_u1.onconnect(element_1em9ac7n, (element) => {
+            observer = new ResizeObserver(() => {
+                layout.days = element.offsetWidth < COMPACT_WIDTH ? DAYS_COMPACT : DAYS;
+            });
+            observer.observe(element);
+        });
+        template_u1.setList(element_1em9ac7o, 'class', operational ? '' : 'uptime-status--degraded');
+        element_1em9ac7o.appendChild(template_u1.text(operational ? 'All systems operational' : 'Some systems degraded'));
+        new template_u1.EffectSlot(element_1em9ac7p, () => layout.days);
+        template_u1.slot(element_1em9ac7q, services.map(row), 1);
+        new template_u1.EffectSlot(element_1em9ac7r, () => layout.days);
+        new template_u1.EffectSlot(element_1em9ac7s, () => {
+            let service = services[api.row];
+            if (!service) {
+                return '';
+            }
+            let incident = find(service, api.day);
+            return `${service.name}, ${ago(api.day)}: ${incident ? describe(incident) : 'no downtime'}`;
+        }, 1);
+        return root_1em9ac7l;
+    })();
+};
+export default uptime;

package/build/components/uptime/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.uptime{--bar-active-scale:1.15;--bar-border-radius:var(--border-radius-100);--bar-dim:.35;--bar-gap:3px;--bar-height:var(--size-600);--caption-blur:4px;--caption-offset:4px;--color:var(--color-text-400);--color-degraded:oklch(80% .15 78);--color-muted:var(--color-text-300);--color-ok:oklch(80% .09 160);--color-outage:oklch(64% .2 25);--dot-size:6px;--font-size:var(--font-size-300);--service-gap:var(--size-600);--timing-function:cubic-bezier(.23, 1, .32, 1);--transition-duration:.2s;--width:min(440px, 100%)}.uptime-bar{--bar-color:var(--color-ok)}.uptime-bar--degraded{--bar-color:var(--color-degraded)}.uptime-bar--outage{--bar-color:var(--color-outage)}.uptime-service-message--degraded{--dot:var(--color-degraded)}.uptime-service-message--ok{--dot:var(--color-ok)}.uptime-service-message--outage{--dot:var(--color-outage)}.uptime-status{--dot:var(--color-ok);--dot-size:8px}.uptime-status--degraded{--dot:var(--color-degraded)}.uptime{color:var(--color);font-size:var(--font-size);width:var(--width);position:relative}.uptime-axis,.uptime-header,.uptime-service-header{justify-content:space-between;align-items:center;display:flex}.uptime-axis{color:var(--color-muted);margin-top:var(--size-300)}.uptime-bar{background:var(--bar-color);border-radius:var(--bar-border-radius);min-width:0;transition:opacity var(--transition-duration) var(--timing-function), scale var(--transition-duration) var(--timing-function);flex:1}.uptime-bar.--active{scale:1 var(--bar-active-scale)}.uptime-bars{border-radius:var(--border-radius-200);cursor:default;gap:var(--bar-gap);height:var(--bar-height);outline:none;display:flex}.uptime-bars:focus-visible{outline:2px solid var(--color);outline-offset:4px}.uptime-bars.--active .uptime-bar:not(.--active){opacity:var(--bar-dim)}.uptime-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.uptime-range,.uptime-service-day{color:var(--color-muted);font-variant-numeric:tabular-nums;flex-shrink:0}.uptime-service-caption{color:var(--color-muted);align-items:center;gap:var(--size-200);justify-content:flex-end;min-width:0;display:flex}.uptime-service-header{gap:var(--size-400);height:var(--size-500);margin-bottom:var(--size-300)}.uptime-service-message{animation:uptime-caption var(--transition-duration) var(--timing-function);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.uptime-service-message--active{color:var(--color)}.uptime-service-message--degraded:before,.uptime-service-message--ok:before,.uptime-service-message--outage:before{background:var(--dot);content:"";height:var(--dot-size);vertical-align:middle;width:var(--dot-size);border-radius:50%;margin-inline-end:var(--size-100);display:inline-block}.uptime-service-name{font-weight:var(--font-weight-500);flex-shrink:0}.uptime-services{gap:var(--service-gap);margin-top:var(--service-gap);flex-direction:column;display:flex}.uptime-status{font-size:var(--font-size-400);font-weight:var(--font-weight-500);align-items:center;gap:var(--size-200);display:flex}.uptime-status:before{background:var(--dot);content:"";height:var(--dot-size);width:var(--dot-size);border-radius:50%}@media (prefers-reduced-motion:reduce){.uptime-bar{transition:none}.uptime-bar.--active{scale:none}.uptime-service-message{animation:none}}@keyframes uptime-caption{0%{filter:blur(var(--caption-blur));opacity:0;translate:0 var(--caption-offset)}}}
+/*$vite$:1*/