@esportsplus/ui 0.56.3 → 0.57.0

package/build/components/typewriter/index.js

@@ -1,6 +1,8 @@
 import * as template_u1 from '@esportsplus/template';
 import { component } from '@esportsplus/template';
 import * as reactivity_u0 from '@esportsplus/reactivity';
+import retype from './retype.js';
+import rotate from './rotate.js';
 import './scss/index.scss';
 const template_1i9nt0y2 = template_u1.template(`<div class='typewriter'>`);
 const template_1i9nt0y4 = template_u1.template(``);
@@ -21,8 +23,12 @@ export default component(function (attributes, content) {
     let state = new ReactiveObject_1i9nt0y0(), timer;
     return (() => {
         let root_1i9nt0y1 = template_1i9nt0y2(), element_1i9nt0y3 = root_1i9nt0y1.firstChild;
+        new template_u1.EffectSlot(element_1i9nt0y3, () => state.text || EMPTY_NODE, 1);
         template_u1.setProperties(element_1i9nt0y3, attributes);
         template_u1.onconnect(element_1i9nt0y3, () => {
+            if (!content.length) {
+                return;
+            }
             let character = 0, i = 0, isWriting = true, write = content[i];
             function play() {
                 timer = setTimeout(() => {
@@ -54,7 +60,6 @@ export default component(function (attributes, content) {
         template_u1.ondisconnect(element_1i9nt0y3, () => {
             clearTimeout(timer);
         });
-        new template_u1.EffectSlot(element_1i9nt0y3, () => state.text || EMPTY_NODE, 1);
         return root_1i9nt0y1;
     })();
-});
+}, { retype, rotate });

package/build/components/typewriter/retype.d.ts

@@ -0,0 +1,7 @@
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    prefix?: string;
+    words: string[];
+};
+export default _default;
+declare function _default({ prefix, words, ...attributes }: A): DocumentFragment | Text;

package/build/components/typewriter/retype.js

@@ -0,0 +1,83 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { timing } from '../../shared/animation.js';
+const template_0kt2xyv2 = template_u1.template(`<span class='typewriter-retype'><span class='typewriter-retype-sr'></span><span aria-hidden='true' class='typewriter-retype-sizer'></span><span aria-hidden='true' class='typewriter-retype-line '><!--$--><span class='typewriter-retype-word '><!--$-->`);
+const template_0kt2xyvb = template_u1.template(`<span class='typewriter-retype-letter'>`);
+class ReactiveObject_0kt2xyv0 extends reactivity_u0.ReactiveObject {
+    #retyped = this[reactivity_u0.SIGNAL](false);
+    #state;
+    constructor(_p0) {
+        super(null);
+        this.#state = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get retyped() {
+        return reactivity_u0.read(this.#retyped);
+    }
+    set retyped(_v0) {
+        reactivity_u0.write(this.#retyped, _v0);
+    }
+    get state() {
+        return reactivity_u0.read(this.#state);
+    }
+    set state(_v1) {
+        reactivity_u0.write(this.#state, _v1);
+    }
+}
+const HOLD = 1800;
+const SELECTED_FOR = 620;
+function jitter(word, char) {
+    let n = Math.sin(char * 12.9898 + word * 78.233) * 43758.5453, wave = Math.sin(char * 1.9 + word * 2.7) * 0.5 + 0.5;
+    return wave * 0.7 + (n - Math.floor(n)) * 0.3;
+}
+export default ({ prefix = '', words, ...attributes }) => {
+    let lead = prefix ? `${prefix} ` : '', letters = new reactivity_u0.ReactiveArray(), longest = words.reduce((a, b) => b.length > a.length ? b : a, ''), timer, view = new ReactiveObject_0kt2xyv0('');
+    return (() => {
+        let root_0kt2xyv1 = template_0kt2xyv2(), element_0kt2xyv3 = root_0kt2xyv1.firstChild, element_0kt2xyv4 = element_0kt2xyv3.firstElementChild, element_0kt2xyv5 = element_0kt2xyv4.nextElementSibling, element_0kt2xyv6 = element_0kt2xyv5.nextElementSibling, element_0kt2xyv7 = element_0kt2xyv6.firstChild, element_0kt2xyv8 = element_0kt2xyv6.firstElementChild, element_0kt2xyv9 = element_0kt2xyv8.firstChild;
+        element_0kt2xyv4.appendChild(template_u1.text(`${lead}${new Intl.ListFormat('en', { type: 'disjunction' }).format(words)}.`));
+        element_0kt2xyv5.appendChild(template_u1.text(`${lead}${longest}`));
+        template_u1.slot(element_0kt2xyv7, lead);
+        new template_u1.EffectSlot(element_0kt2xyv9, () => !view.retyped && (words[0] ?? ''));
+        element_0kt2xyv8.appendChild(new template_u1.ArraySlot(letters, (char) => {
+            let root_0kt2xyva = template_0kt2xyvb(), element_0kt2xyvc = root_0kt2xyva.firstChild;
+            template_u1.slot(element_0kt2xyvc, char, 1);
+            return root_0kt2xyva;
+        }).fragment);
+        template_u1.setList(element_0kt2xyv8, 'class', () => view.state === 'selecting' && 'typewriter-retype-word--selecting');
+        template_u1.setList(element_0kt2xyv6, 'class', () => view.state && `typewriter-retype-line--${view.state}`);
+        template_u1.setProperties(element_0kt2xyv3, attributes);
+        template_u1.onconnect(element_0kt2xyv3, (element) => {
+            if (words.length < 2) {
+                return;
+            }
+            let length = words[0].length, word = 0;
+            function key() {
+                let computed = getComputedStyle(element), pace = timing(computed, 'key'), spread = timing(computed, 'key-jitter'), target = words[word], end = pace ? length + 1 : target.length;
+                letters.push(...target.slice(length, end));
+                length = end;
+                let finished = length >= target.length;
+                view.state = finished ? '' : 'typing';
+                timer = finished
+                    ? setTimeout(select, HOLD)
+                    : setTimeout(key, pace?.duration + jitter(word, length) * (spread?.duration || 0));
+            }
+            function select() {
+                view.state = 'selecting';
+                timer = setTimeout(() => {
+                    length = 0;
+                    letters.clear();
+                    view.retyped = true;
+                    word = (word + 1) % words.length;
+                    key();
+                }, SELECTED_FOR);
+            }
+            timer = setTimeout(select, HOLD);
+        });
+        template_u1.ondisconnect(element_0kt2xyv3, () => {
+            clearTimeout(timer);
+            letters.clear();
+            view.retyped = false;
+            view.state = '';
+        });
+        return root_0kt2xyv1;
+    })();
+};

package/build/components/typewriter/rotate.d.ts

@@ -0,0 +1,13 @@
+import { type Attributes } from '@esportsplus/template';
+type A = Attributes & {
+    interval?: number;
+    state?: State;
+    words: string[];
+};
+type State = {
+    index: number;
+    paused: boolean;
+};
+export default _default;
+declare function _default({ interval, state, words, ...attributes }: A): DocumentFragment | Text;
+export type { State as TypewriterRotateState };

package/build/components/typewriter/rotate.js

@@ -0,0 +1,186 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { ReactiveArray, effect } from '@esportsplus/reactivity';
+import { timing } from '../../shared/animation.js';
+const template_1dcchwt2 = template_u1.template(`<span class='typewriter-rotate-letter typewriter-rotate-letter--exiting' style=';'>`);
+const template_1dcchwt5 = template_u1.template(`<span class='typewriter-rotate-letter'>`);
+const template_1dcchwt8 = template_u1.template(`<span class='typewriter-rotate'><span class='typewriter-rotate-sr'></span><span aria-hidden='true' class='typewriter-rotate-box'><!--$-->`);
+class ReactiveObject_1dcchwt0 extends reactivity_u0.ReactiveObject {
+    #index = this[reactivity_u0.SIGNAL](0);
+    #paused = this[reactivity_u0.SIGNAL](false);
+    constructor() {
+        super(null);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v0) {
+        reactivity_u0.write(this.#index, _v0);
+    }
+    get paused() {
+        return reactivity_u0.read(this.#paused);
+    }
+    set paused(_v1) {
+        reactivity_u0.write(this.#paused, _v1);
+    }
+}
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const ENTER_MS = 320;
+const EXIT_MS = 200;
+const INTERVAL = 2600;
+const STAGGER_MS = 28;
+function match(prev, next) {
+    let dp = Array.from({ length: prev.length + 1 }, () => new Array(next.length + 1).fill(0)), i = 0, j = 0, pairs = new Map();
+    for (let a = prev.length - 1; a >= 0; a--) {
+        for (let b = next.length - 1; b >= 0; b--) {
+            dp[a][b] = prev[a] === next[b] ? dp[a + 1][b + 1] + 1 : Math.max(dp[a + 1][b], dp[a][b + 1]);
+        }
+    }
+    while (i < prev.length && j < next.length) {
+        if (prev[i] === next[j]) {
+            pairs.set(j++, i++);
+        }
+        else if (dp[i + 1][j] >= dp[i][j + 1]) {
+            i++;
+        }
+        else {
+            j++;
+        }
+    }
+    return pairs;
+}
+export default ({ interval = INTERVAL, state = new ReactiveObject_1dcchwt0(), words, ...attributes }) => {
+    let box, current = words[state.index] === undefined ? 0 : state.index, exits = new ReactiveArray(), hovered = false, letters = new ReactiveArray([...words[current]].map((char) => ({ char }))), timer;
+    let leaving = new template_u1.ArraySlot(exits, (l) => {
+        let root_1dcchwt1 = template_1dcchwt2(), element_1dcchwt3 = root_1dcchwt1.firstChild;
+        template_u1.slot(element_1dcchwt3, l.char, 1);
+        template_u1.setList(element_1dcchwt3, 'style', template_u1.interpolate(["left: ", (l.left ?? 0), "px"]));
+        return root_1dcchwt1;
+    }), word = new template_u1.ArraySlot(letters, (l) => {
+        let root_1dcchwt4 = template_1dcchwt5(), element_1dcchwt6 = root_1dcchwt4.firstChild;
+        template_u1.slot(element_1dcchwt6, l.char, 1);
+        return root_1dcchwt4;
+    });
+    function schedule() {
+        clearTimeout(timer);
+        if (state.paused) {
+            if (current !== 0) {
+                timer = setTimeout(() => state.index = 0, 250);
+            }
+            return;
+        }
+        timer = setTimeout(() => {
+            if (hovered || document.hidden) {
+                schedule();
+                return;
+            }
+            state.index = (current + 1) % words.length;
+        }, interval);
+    }
+    function swap(index) {
+        if (!box) {
+            return;
+        }
+        let from = box.getBoundingClientRect(), glide = timing(getComputedStyle(box), 'glide'), nodes = box.children, s = from.width / box.offsetWidth || 1;
+        for (let i = 0, n = letters.$length; i < n; i++) {
+            letters[i].left = ((nodes[i]?.getBoundingClientRect().left ?? from.left) - from.left) / s;
+        }
+        let chars = [...words[index]], kept = [], pairs = glide ? match(letters.map((l) => l.char), chars) : new Map(), next = chars.map((char, j) => {
+            let p = pairs.get(j);
+            if (p === undefined) {
+                return { char };
+            }
+            kept[p] = true;
+            return letters[p];
+        }), out = exits.$length;
+        for (let i = 0, n = letters.$length; i < n; i++) {
+            if (!kept[i]) {
+                exits.push({ char: letters[i].char, left: letters[i].left });
+            }
+        }
+        letters.splice(0, letters.$length, ...next);
+        word.flush();
+        leaving.flush();
+        current = index;
+        for (let i = out, n = exits.$length; i < n; i++) {
+            let l = exits[i];
+            nodes[letters.$length + i]?.animate(glide
+                ? [
+                    { filter: 'blur(0px)', opacity: 1, transform: 'translateY(0)' },
+                    { filter: 'blur(4px)', opacity: 0, transform: 'translateY(-0.35em)' }
+                ]
+                : [{ opacity: 1 }, { opacity: 0 }], { duration: EXIT_MS, easing: EASE_OUT, fill: 'forwards' }).finished.then(() => {
+                let at = exits.indexOf(l);
+                if (at !== -1) {
+                    exits.splice(at, 1);
+                }
+            }, () => { });
+        }
+        box.getAnimations().forEach((a) => a.cancel());
+        let to = box.getBoundingClientRect(), order = 0, scale = to.width / box.offsetWidth || 1, width = to.width / scale;
+        if (glide && Math.abs(width - from.width / s) > 0.5) {
+            box.animate([{ width: `${from.width / s}px` }, { width: `${width}px` }], glide);
+        }
+        let lefts = [];
+        for (let i = 0, n = letters.$length; i < n; i++) {
+            lefts.push(letters[i].left === undefined ? 0 : ((nodes[i]?.getBoundingClientRect().left ?? to.left) - to.left) / scale);
+        }
+        for (let i = 0, n = letters.$length; i < n; i++) {
+            let l = letters[i], was = l.left;
+            if (was === undefined) {
+                nodes[i]?.animate(glide
+                    ? [
+                        { filter: 'blur(4px)', opacity: 0, transform: 'translateY(0.4em)' },
+                        { filter: 'blur(0px)', opacity: 1, transform: 'translateY(0)' }
+                    ]
+                    : [{ opacity: 0 }, { opacity: 1 }], {
+                    delay: glide ? 90 + order++ * STAGGER_MS : 0,
+                    duration: ENTER_MS,
+                    easing: EASE_OUT,
+                    fill: 'backwards'
+                });
+                continue;
+            }
+            let now = lefts[i];
+            if (!glide || Math.abs(was - now) < 0.5) {
+                continue;
+            }
+            nodes[i]?.animate([{ transform: `translateX(${was - now}px)` }, { transform: 'translateX(0)' }], glide);
+        }
+    }
+    return (() => {
+        let root_1dcchwt7 = template_1dcchwt8(), element_1dcchwt9 = root_1dcchwt7.firstChild, element_1dcchwta = element_1dcchwt9.firstElementChild, element_1dcchwtb = element_1dcchwta.nextElementSibling, element_1dcchwtc = element_1dcchwtb.firstChild;
+        template_u1.slot(element_1dcchwta, words.join(', '), 1);
+        template_u1.slot(element_1dcchwtc, word);
+        template_u1.slot(element_1dcchwtb, leaving, 2);
+        template_u1.onconnect(element_1dcchwtb, (element) => {
+            box = element;
+        });
+        template_u1.setProperties(element_1dcchwt9, attributes);
+        template_u1.onconnect(element_1dcchwt9, () => {
+            if (!box) {
+                return;
+            }
+            effect(() => {
+                let index = state.index;
+                state.paused;
+                if (index !== current && words[index] !== undefined) {
+                    swap(index);
+                }
+                schedule();
+            });
+        });
+        template_u1.ondisconnect(element_1dcchwt9, () => {
+            clearTimeout(timer);
+        });
+        template_u1.on(element_1dcchwt9, 'pointerenter', (e) => {
+            if (e.pointerType !== 'touch') {
+                hovered = true;
+            }
+        });
+        template_u1.on(element_1dcchwt9, 'pointerleave', () => {
+            hovered = false;
+        });
+        return root_1dcchwt7;
+    })();
+};

package/build/components/typewriter/scss/index.scss

@@ -1,2 +1,2 @@
-@layer components {.typewriter{--caret:"|";--caret-color:currentColor;--caret-duration:.64s;--caret-timing-function:ease-in-out;--glow:0 0 0 transparent}.typewriter--block{--caret:""}.typewriter--glow{--glow:0 0 .4em var(--caret-color)}.typewriter--hard{--caret-duration:1s;--caret-timing-function:steps(1, end)}.typewriter--underscore{--caret:"_"}.typewriter{text-shadow:var(--glow)}.typewriter:after{animation:typewriter--blink var(--caret-duration) var(--caret-timing-function) infinite;color:var(--caret-color);content:var(--caret)}@media (prefers-reduced-motion:reduce){.typewriter:after{animation:none}}.typewriter--block:after{background:var(--caret-color);box-shadow:var(--glow);vertical-align:bottom;width:.56em;height:1lh;margin-inline-start:.08em;display:inline-block}@keyframes typewriter--blink{0%,to{opacity:1}50%{opacity:0}}}
+@layer components{.typewriter:after,.typewriter-retype-line:after,.typewriter-retype-sizer:after{animation:typewriter--blink var(--caret-duration) var(--caret-timing-function) infinite;background:var(--caret-background);border-radius:var(--caret-radius);color:var(--caret-color);content:var(--caret);height:var(--caret-height);vertical-align:var(--caret-align);width:var(--caret-width);margin-inline-start:var(--caret-offset);display:inline-block}@media (prefers-reduced-motion:reduce){.typewriter:after,.typewriter-retype-line:after,.typewriter-retype-sizer:after{animation:none}}@keyframes typewriter--blink{0%,45%{opacity:1}55%,95%{opacity:0}to{opacity:1}}.typewriter-rotate-sr,.typewriter-retype-sr{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.typewriter-retype{white-space:pre;display:inline-grid}.typewriter-retype-letter{animation:typewriter-retype--ink var(--ink-duration) var(--ease-out)}.typewriter-retype-line,.typewriter-retype-sizer{grid-area:1/1}.typewriter-retype-line{text-align:left}.typewriter-retype-line--selecting:after{visibility:hidden}.typewriter-retype-line--typing:after{animation:none}.typewriter-retype-sizer{visibility:hidden}.typewriter-retype-word{isolation:isolate;display:inline-block;position:relative}.typewriter-retype-word:before{background:var(--selection-color);border-radius:var(--selection-radius);content:"";transform-origin:100%;z-index:-1;position:absolute;inset:-.06em -1px;scale:0 1}.typewriter-retype-word--selecting:before{transition:scale var(--select-duration) var(--ease-out);scale:1}@keyframes typewriter-retype--ink{0%{filter:blur(var(--ink-blur));opacity:0}}.typewriter-rotate{color:var(--color);display:inline-block;position:relative}.typewriter-rotate-box{text-align:left;white-space:pre;display:inline-block;position:relative}.typewriter-rotate-letter{display:inline-block}.typewriter-rotate-letter--exiting{pointer-events:none;position:absolute;top:0}.typewriter,.typewriter-retype{--caret:"";--caret-align:-.18em;--caret-background:var(--caret-color);--caret-color:currentColor;--caret-duration:1.06s;--caret-height:1.1em;--caret-offset:2px;--caret-radius:999px;--caret-timing-function:linear;--caret-width:2px}.typewriter--block,.typewriter-retype--block{--caret-align:bottom;--caret-height:1lh;--caret-offset:.08em;--caret-radius:0;--caret-width:.56em}.typewriter--hard,.typewriter-retype--hard{--caret-duration:1s;--caret-timing-function:steps(1, end)}.typewriter--underscore,.typewriter-retype--underscore{--caret:"_";--caret-align:baseline;--caret-background:transparent;--caret-height:auto;--caret-offset:.04em;--caret-radius:0;--caret-width:auto}.typewriter-retype{--ease-out:cubic-bezier(.23, 1, .32, 1);--ink-blur:2px;--ink-duration:.14s;--key-duration:62ms;--key-jitter-duration:64ms;--select-duration:.22s;--selection-color:oklch(from var(--color-text-500) l c h / .15);--selection-radius:3px}@media (prefers-reduced-motion:reduce){.typewriter-retype{--ink-blur:0px;--key-duration:0s;--select-duration:0s}}.typewriter-rotate{--color:inherit;--glide-duration:.44s;--glide-easing:cubic-bezier(.77, 0, .175, 1)}@media (prefers-reduced-motion:reduce){.typewriter-rotate{--glide-duration:0s}}.typewriter-rotate--accent{--color:var(--color-blue-400)}}
 /*$vite$:1*/

package/build/components/uptime/index.js

@@ -1,14 +1,16 @@
 import * as reactivity_u0 from '@esportsplus/reactivity';
-import { batch, computed, dispose, onCleanup, read } from '@esportsplus/reactivity';
+import { batch, computed, effect, read, signal, write } from '@esportsplus/reactivity';
 import * as template_u1 from '@esportsplus/template';
+import { observeSize } from '../../shared/resize.js';
+import tooltip from '../tooltip/index.js';
 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'>`);
+const template_1em9ac75 = template_u1.template(`<span class='uptime-service-message uptime-service-message--ok'>No downtime`);
+const template_1em9ac77 = template_u1.template(`<span class='uptime-service-message uptime-service-message--active '>`);
+const template_1em9ac7a = template_u1.template(`<div class='uptime-service'><div class='uptime-service-header'><span class='uptime-service-name'><span class='uptime-service-label'></span></span><span class='uptime-service-caption'><!--$--></span></div><div class='uptime-bars ' role='group' tabindex='0'></div><div class='uptime-service-axis'><span><!--$--> days ago</span><span class='uptime-service-percentage'><!--$-->% uptime</span><span>Today`);
+const template_1em9ac7j = template_u1.template(`<span aria-hidden='true' class='uptime-service-tooltip tooltip-message tooltip-message--e tooltip-message--morph'>`);
+const template_1em9ac7m = template_u1.template(`<span class='uptime-service-day'>`);
+const template_1em9ac7p = template_u1.template(`<div class='uptime'><!--$--><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);
@@ -46,7 +48,12 @@ const DAY_MINUTES = 1440;
 const DAYS = 60;
 const DAYS_COMPACT = 30;
 const HEALTHY = -1;
-const SUMMARY = -2;
+const IDLE = -2;
+const STATUS = {
+    degraded: 'Degraded',
+    operational: 'Operational',
+    outage: 'Outage'
+};
 function ago(day) {
     if (day === 0) {
         return 'Today';
@@ -75,15 +82,17 @@ function percentage(service, days) {
     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 active = signal(''), layout = new ReactiveObject_1em9ac71(DAYS), size = observeSize(({ width }) => {
+        layout.days = width < COMPACT_WIDTH ? DAYS_COMPACT : DAYS;
+    });
+    function bars(index, service) {
         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');
+                template_u1.setList(element_1em9ac74, 'class', incident && `uptime-bar--${incident.level}`);
+                template_u1.setList(element_1em9ac74, 'class', () => signal.selector(active, `${index}:${value}`) && '--active');
                 return root_1em9ac72;
             })());
         }
@@ -93,54 +102,58 @@ const uptime = ({ services, state: api = new ReactiveObject_1em9ac70(), ...attri
         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;
-            })();
+        if (key === IDLE) {
+            return '';
         }
         let incident = key === HEALTHY ? undefined : find(service, key);
         if (!incident) {
-            return template_1em9ac78();
+            return template_1em9ac75();
         }
         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;
+            let root_1em9ac76 = template_1em9ac77(), element_1em9ac78 = root_1em9ac76.firstChild;
+            template_u1.slot(element_1em9ac78, describe(incident), 1);
+            template_u1.setList(element_1em9ac78, 'class', template_u1.interpolate(["uptime-service-message--", (incident.level)]));
+            return root_1em9ac76;
         })();
     }
     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 IDLE;
             }
             return find(service, value) ? value : HEALTHY;
-        });
-        nodes.push(caption, day);
+        }), status = find(service, 0)?.level ?? 'operational';
         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 root_1em9ac79 = template_1em9ac7a(), element_1em9ac7b = root_1em9ac79.firstChild.firstElementChild.firstElementChild.firstElementChild, element_1em9ac7c = root_1em9ac79.firstChild.firstElementChild.firstElementChild, element_1em9ac7d = element_1em9ac7c.nextElementSibling.firstChild, element_1em9ac7e = element_1em9ac7c.nextElementSibling, element_1em9ac7f = root_1em9ac79.firstChild.firstElementChild.nextElementSibling, element_1em9ac7g = element_1em9ac7f.nextElementSibling.firstElementChild.firstChild, element_1em9ac7h = element_1em9ac7f.nextElementSibling.firstElementChild.nextElementSibling.firstChild;
+            template_u1.slot(element_1em9ac7b, service.name, 1);
+            template_u1.slot(element_1em9ac7c, tooltip.onhover({ class: `uptime-service-status uptime-service-status--${status}` }, (() => {
+                let root_1em9ac7i = template_1em9ac7j(), element_1em9ac7k = root_1em9ac7i.firstChild;
+                template_u1.slot(element_1em9ac7k, STATUS[status], 1);
+                return root_1em9ac7i;
+            })()), 2);
+            new template_u1.EffectSlot(element_1em9ac7d, () => {
                 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;
+                    let root_1em9ac7l = template_1em9ac7m(), element_1em9ac7n = root_1em9ac7l.firstChild;
+                    template_u1.slot(element_1em9ac7n, ago(value), 1);
+                    return root_1em9ac7l;
                 })();
             });
-            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', () => {
+            new template_u1.EffectSlot(element_1em9ac7e, () => message(service, read(caption)), 2);
+            new template_u1.EffectSlot(element_1em9ac7f, () => bars(index, service), 1);
+            new template_u1.EffectSlot(element_1em9ac7g, () => layout.days);
+            new template_u1.EffectSlot(element_1em9ac7h, () => percentage(service, layout.days));
+            template_u1.setProperty(element_1em9ac7f, 'aria-label', () => `${service.name}: ${STATUS[status]}, ${percentage(service, layout.days)}% uptime over ${layout.days} days. Arrow keys step through days.`);
+            template_u1.setList(element_1em9ac7f, 'class', () => api.row === index && '--active');
+            template_u1.setList(element_1em9ac7f, 'style', () => `--days: ${layout.days}`);
+            template_u1.on(element_1em9ac7f, 'blur', clear);
+            template_u1.on(element_1em9ac7f, 'focus', () => {
                 if (api.row !== index) {
                     select(index, 0);
                 }
             });
-            template_u1.delegate(element_1em9ac7h, 'keydown', (e) => {
+            template_u1.delegate(element_1em9ac7f, 'keydown', (e) => {
                 let days = layout.days, step = e.key === 'ArrowLeft' ? 1 : e.key === 'ArrowRight' ? -1 : 0;
                 if (e.key === 'End') {
                     e.preventDefault();
@@ -158,13 +171,12 @@ const uptime = ({ services, state: api = new ReactiveObject_1em9ac70(), ...attri
                     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) => {
+            template_u1.on(element_1em9ac7f, 'pointerleave', clear);
+            template_u1.delegate(element_1em9ac7f, '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;
+            return root_1em9ac79;
         })();
     }
     function select(row, day) {
@@ -176,26 +188,12 @@ const uptime = ({ services, state: api = new ReactiveObject_1em9ac70(), ...attri
             api.row = row;
         });
     }
-    onCleanup(() => {
-        observer?.disconnect();
-        for (let i = 0, n = nodes.length; i < n; i++) {
-            dispose(nodes[i]);
-        }
+    effect(() => `${api.row}:${api.day}`, (key) => {
+        write(active, key);
     });
     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);
+        let root_1em9ac7o = template_1em9ac7p(), element_1em9ac7q = root_1em9ac7o.firstChild, element_1em9ac7r = element_1em9ac7q.firstChild, element_1em9ac7s = element_1em9ac7q.firstElementChild;
+        template_u1.slot(element_1em9ac7r, services.map(row));
         new template_u1.EffectSlot(element_1em9ac7s, () => {
             let service = services[api.row];
             if (!service) {
@@ -204,7 +202,9 @@ const uptime = ({ services, state: api = new ReactiveObject_1em9ac70(), ...attri
             let incident = find(service, api.day);
             return `${service.name}, ${ago(api.day)}: ${incident ? describe(incident) : 'no downtime'}`;
         }, 1);
-        return root_1em9ac7l;
+        template_u1.setProperties(element_1em9ac7q, attributes);
+        template_u1.setProperties(element_1em9ac7q, size);
+        return root_1em9ac7o;
     })();
 };
 export default uptime;

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

@@ -1,2 +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)}}}
+@layer components{.uptime-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.uptime{--axis-gap:var(--size-300);--axis-line-color:color-mix(in oklch, var(--color-muted) 40%, transparent);--bar-active-scale:1.15;--bar-border-radius:var(--border-radius-100);--bar-dim:.35;--bar-gap:3px;--bar-height:var(--size-600);--bar-opacity:1;--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-service-name{--status-gap:var(--border-width-500);--status-mask:radial-gradient(circle at calc(100% - var(--status-right) - var(--status-size) / 2) calc(var(--status-top) + var(--status-size) / 2), #000 calc(var(--status-size) / 2 - .5px), transparent calc(var(--status-size) / 2 + .5px) calc(var(--status-size) / 2 + var(--status-gap) - .5px), #000 calc(var(--status-size) / 2 + var(--status-gap) + .5px));--status-right:calc((var(--status-size) + 2px) * -1);--status-size:6px;--status-top:0px}.uptime-service-status{--status-color:var(--color-ok)}.uptime-service-status--degraded{--status-color:var(--color-degraded)}.uptime-service-status--outage{--status-color:var(--color-outage)}.uptime-service-tooltip.tooltip-message{--background-default:var(--color-grey-400);--border-radius:var(--border-radius-400);--color:var(--color-text-400);--padding-horizontal:8px;--padding-vertical:4px}.uptime{color:var(--color);font-size:var(--font-size);gap:var(--service-gap);width:var(--width);flex-direction:column;display:flex;position:relative}.uptime-bar{background:var(--bar-color);border-radius:var(--bar-border-radius);opacity:var(--bar-opacity);transition:opacity var(--transition-duration) var(--timing-function), scale var(--transition-duration) var(--timing-function);width:round(down, (100% - (var(--days) - 1) * var(--bar-gap)) / var(--days), 1px);flex-shrink:0}.uptime-bar.--active{--bar-opacity:1;scale:1 var(--bar-active-scale)}.uptime-bars{border-radius:var(--border-radius-200);cursor:default;height:var(--bar-height);outline:none;justify-content:space-between;display:flex}.uptime-bars.--active{--bar-opacity:var(--bar-dim)}.uptime-bars:focus-visible{outline:2px solid var(--color);outline-offset:4px}.uptime-service-axis{color:var(--color-muted);align-items:center;gap:var(--axis-gap);margin-top:var(--size-300);white-space:nowrap;display:flex}.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-day,.uptime-service-percentage{font-variant-numeric:tabular-nums}.uptime-service-day{color:var(--color-muted);flex-shrink:0}.uptime-service-header{align-items:center;gap:var(--size-400);height:var(--size-500);margin-bottom:var(--size-300);justify-content:space-between;display:flex}.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-label{-webkit-mask-clip:no-clip;mask-clip:no-clip;-webkit-mask-image:var(--status-mask);-webkit-mask-image:var(--status-mask);mask-image:var(--status-mask);display:block}.uptime-service-name{font-weight:var(--font-weight-500);flex-shrink:0;position:relative}.uptime-service-percentage{align-items:center;gap:var(--axis-gap);flex:1;display:flex}.uptime-service-percentage:after,.uptime-service-percentage:before{border-top:1px solid var(--axis-line-color);content:"";flex:1}.uptime-service-status.tooltip{background:var(--status-color);border-radius:calc(var(--status-size) / 2);cursor:default;height:var(--status-size);right:var(--status-right);top:var(--status-top);width:var(--status-size);position:absolute}@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*/

package/build/components/usage-meter/index.d.ts

@@ -12,7 +12,7 @@ declare const _default: {
         class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         onconnect?: ((element: HTMLElement) => void) | undefined;
         ondisconnect?: ((element: HTMLElement) => void) | undefined;
-        onrender?: ((element: HTMLElement) => void) | undefined;
+        onfirstpaint?: ((element: HTMLElement) => void) | undefined;
         ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
         style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
     } & {
@@ -718,6 +718,10 @@ declare const _default: {
         onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+    } & {
+        onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
     } & Record<PropertyKey, unknown> & {
         label?: string;
         usage: Usage;
@@ -727,7 +731,7 @@ declare const _default: {
         class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         onconnect?: ((element: HTMLElement) => void) | undefined;
         ondisconnect?: ((element: HTMLElement) => void) | undefined;
-        onrender?: ((element: HTMLElement) => void) | undefined;
+        onfirstpaint?: ((element: HTMLElement) => void) | undefined;
         ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
         style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
     } & {
@@ -1433,6 +1437,10 @@ declare const _default: {
         onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
         onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+    } & {
+        onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+        onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
     } & Record<PropertyKey, unknown> & {
         label?: string;
         usage: Usage;
@@ -1442,7 +1450,7 @@ declare const _default: {
             class?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
             onconnect?: ((element: HTMLElement) => void) | undefined;
             ondisconnect?: ((element: HTMLElement) => void) | undefined;
-            onrender?: ((element: HTMLElement) => void) | undefined;
+            onfirstpaint?: ((element: HTMLElement) => void) | undefined;
             ontick?: ((dispose: VoidFunction, element: HTMLElement) => void) | undefined;
             style?: template_u1.Attribute<HTMLElement>[] | template_u1.Attribute<HTMLElement>;
         } & {
@@ -2148,6 +2156,10 @@ declare const _default: {
             onwindowwebkitanimationstart?: ((this: HTMLElement, event: Event) => void) | undefined;
             onwindowwebkittransitionend?: ((this: HTMLElement, event: Event) => void) | undefined;
             onwindowwheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
+        } & {
+            onactivetouchmove?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+            onactivetouchstart?: ((this: HTMLElement, event: TouchEvent) => void) | undefined;
+            onactivewheel?: ((this: HTMLElement, event: WheelEvent) => void) | undefined;
         } & Record<PropertyKey, unknown> & {
             label?: string;
             usage: Usage;