@esportsplus/ui 0.55.0 → 0.56.3

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

@@ -0,0 +1,216 @@
+@use '/tokens';
+@use 'variables';
+
+// 24px radius around 8px padding leaves 16px for the rows.
+.undo-toast {
+    background: var(--undo-toast-background);
+    border-radius: 24px;
+    box-shadow: var(--undo-toast-box-shadow);
+    height: var(--undo-toast-height);
+    padding: 8px;
+    position: relative;
+
+
+    &-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;
+
+        border: 0;
+        flex-shrink: 0;
+        height: 36px;
+        outline: none;
+        touch-action: manipulation;
+        transition:
+            background-color 150ms ease-out,
+            color 150ms ease-out,
+            scale 150ms ease-out;
+        user-select: none;
+        width: 36px;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--undo-toast-focus-color);
+        }
+
+        svg {
+            fill: none;
+            height: 16px;
+            stroke: currentColor;
+            stroke-linecap: round;
+            stroke-linejoin: round;
+            stroke-width: 1.5;
+            width: 16px;
+        }
+    }
+
+    &-empty {
+        align-items: center;
+        display: flex;
+        filter: blur(4px);
+        flex-direction: column;
+        gap: 12px;
+        inset: 0;
+        justify-content: center;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        text-align: center;
+
+        @include tokens.state(active) {
+            filter: blur(0px);
+            opacity: 1;
+            pointer-events: auto;
+            transition:
+                filter 250ms var(--undo-toast-ease) 50ms,
+                opacity 250ms var(--undo-toast-ease) 50ms;
+        }
+
+        &-label {
+            color: var(--undo-toast-color-muted);
+            font-size: 15px;
+        }
+    }
+
+    &-list {
+        list-style: none;
+        margin: 0;
+        outline: none;
+        padding: 0;
+        position: relative;
+    }
+
+    &-live {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-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;
+        height: 36px;
+        outline: none;
+        transition: scale 150ms ease-out;
+
+        &:active {
+            scale: 0.96;
+        }
+
+        &:focus-visible {
+            outline: 2px solid var(--undo-toast-focus-color);
+        }
+    }
+
+    &-row {
+        align-items: center;
+        border-radius: 16px;
+        display: flex;
+        gap: 12px;
+        height: var(--undo-toast-row-height);
+        padding-inline: 14px 10px;
+        transition: background-color 150ms ease-out;
+
+        &:hover {
+            background: var(--undo-toast-row-background-hover);
+        }
+
+        &[hidden] {
+            display: none;
+        }
+
+        &--leaving {
+            pointer-events: none;
+            position: absolute;
+        }
+
+        &-meta,
+        &-name {
+            line-height: 20px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        &-meta {
+            color: var(--undo-toast-color-muted);
+            font-size: 13px;
+        }
+
+        &-name {
+            color: var(--undo-toast-color);
+            font-size: 15px;
+            font-weight: var(--font-weight-500);
+        }
+
+        &-text {
+            display: flex;
+            flex: 1;
+            flex-direction: column;
+            min-width: 0;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: reduce) {
+        &-delete.button {
+            transition:
+                background-color 150ms ease-out,
+                color 150ms ease-out;
+
+            &:active {
+                scale: 1;
+            }
+        }
+
+        &-empty {
+            filter: none;
+        }
+
+        &-restore.button {
+            transition: none;
+
+            &:active {
+                scale: 1;
+            }
+        }
+    }
+}
+
+
+// Rendered inside the toast, so it lives outside the component root.
+.undo-toast-message {
+    display: flex;
+    min-width: 0;
+    position: relative;
+
+    &-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &--leaving {
+            left: 0;
+            position: absolute;
+            top: 0;
+        }
+    }
+}

package/src/components/undo-toast/scss/variables.scss

@@ -0,0 +1,20 @@
+.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(0.23, 1, 0.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;
+
+
+    &--white {
+        --undo-toast-background: var(--color-white-300);
+        --undo-toast-row-background-hover: var(--color-grey-400);
+    }
+}

package/src/components/uptime/index.ts

@@ -0,0 +1,271 @@
+import { batch, computed, dispose, onCleanup, reactive, read, type Computed } from '@esportsplus/reactivity';
+import { html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type Incident = {
+    // Days before today: 0 is today.
+    daysAgo: number;
+    level: 'degraded' | 'outage';
+    minutes: number;
+    title: string;
+};
+
+type Service = {
+    incidents: Incident[];
+    name: string;
+};
+
+
+const COMPACT_WIDTH = 400;
+
+const DAY_MINUTES = 1440;
+
+const DAYS = 60;
+
+const DAYS_COMPACT = 30;
+
+// Caption keys: a day index names an incident, HEALTHY any clean day, SUMMARY the resting uptime figure.
+const HEALTHY = -1;
+
+const SUMMARY = -2;
+
+
+function ago(day: number) {
+    if (day === 0) {
+        return 'Today';
+    }
+
+    if (day === 1) {
+        return 'Yesterday';
+    }
+
+    return `${day} days ago`;
+}
+
+function describe(incident: Incident) {
+    let minutes = incident.minutes;
+
+    return `${incident.title}, ${minutes < 60 ? `${minutes}m` : `${Math.floor(minutes / 60)}h ${minutes % 60}m`}`;
+}
+
+function find(service: Service, day: number) {
+    return service.incidents.find((incident) => incident.daysAgo === day);
+}
+
+function percentage(service: Service, days: number) {
+    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;
+        }
+
+        // Degraded counts at a third: slow isn't down, but it isn't fine.
+        down += incident.level === 'outage' ? incident.minutes : incident.minutes / 3;
+    }
+
+    return (100 * (1 - down / (days * DAY_MINUTES))).toFixed(2);
+}
+
+
+const uptime = ({ services, state: api = reactive({ day: -1, row: -1 }), ...attributes }: Attributes & {
+    services: Service[];
+    state?: { day: number; row: number };
+}) => {
+    let layout = reactive({ days: DAYS }),
+        nodes: Computed<number>[] = [],
+        observer: ResizeObserver | undefined,
+        operational = services.every((service) => !find(service, 0));
+
+    function bars(service: Service, index: number) {
+        let days = layout.days,
+            render = [];
+
+        for (let i = 0; i < days; i++) {
+            let value = days - 1 - i,
+                incident = find(service, value);
+
+            render.push(html`
+                <span class='uptime-bar ${incident ? `uptime-bar--${incident.level}` : ''} ${() => api.row === index && api.day === value && '--active'}'></span>
+            `);
+        }
+
+        return render;
+    }
+
+    function clear() {
+        select(-1, -1);
+    }
+
+    function message(service: Service, key: number) {
+        if (key === SUMMARY) {
+            return html`<span class='uptime-service-message'>${percentage(service, layout.days)}% uptime</span>`;
+        }
+
+        let incident = key === HEALTHY ? undefined : find(service, key);
+
+        if (!incident) {
+            return html`<span class='uptime-service-message uptime-service-message--ok'>No downtime</span>`;
+        }
+
+        return html`
+            <span class='uptime-service-message uptime-service-message--active uptime-service-message--${incident.level}'>
+                ${describe(incident)}
+            </span>
+        `;
+    }
+
+    function row(service: Service, index: number) {
+        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 html`
+            <div class='uptime-service'>
+                <div class='uptime-service-header'>
+                    <span class='uptime-service-name'>${service.name}</span>
+
+                    <span class='uptime-service-caption'>
+                        ${() => {
+                            let value = read(day);
+
+                            return value !== -1 && html`<span class='uptime-service-day'>${ago(value)}</span>`;
+                        }}
+                        ${() => message(service, read(caption))}
+                    </span>
+                </div>
+
+                <div
+                    aria-label='${() => `${service.name}: ${percentage(service, layout.days)}% uptime over ${layout.days} days. Arrow keys step through days.`}'
+                    class='uptime-bars ${() => api.row === index && '--active'}'
+                    role='group'
+                    tabindex='0'
+                    ${{
+                        onblur: clear,
+                        onfocus: () => {
+                            if (api.row !== index) {
+                                select(index, 0);
+                            }
+                        },
+                        onkeydown: (e: KeyboardEvent) => {
+                            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)));
+                            }
+                        },
+                        onpointerleave: clear,
+                        onpointermove: (e: PointerEvent) => {
+                            let days = layout.days,
+                                element = e.currentTarget as HTMLElement,
+                                rect = element.getBoundingClientRect(),
+                                width = element.offsetWidth,
+                                // Divides out any CSS scale so the maths holds inside a scaled container.
+                                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))));
+                        }
+                    }}
+                >
+                    ${() => bars(service, index)}
+                </div>
+            </div>
+        `;
+    }
+
+    function select(row: number, day: number) {
+        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 html`
+        <div
+            class='uptime'
+            ${attributes}
+            ${{
+                onconnect: (element: HTMLElement) => {
+                    // A narrow container gets half the history so every day stays a real, tappable bar.
+                    observer = new ResizeObserver(() => {
+                        layout.days = element.offsetWidth < COMPACT_WIDTH ? DAYS_COMPACT : DAYS;
+                    });
+                    observer.observe(element);
+                }
+            }}
+        >
+            <div class='uptime-header'>
+                <span class='uptime-status ${operational ? '' : 'uptime-status--degraded'}'>
+                    ${operational ? 'All systems operational' : 'Some systems degraded'}
+                </span>
+
+                <span class='uptime-range'>Last ${() => layout.days} days</span>
+            </div>
+
+            <div class='uptime-services'>
+                ${services.map(row)}
+            </div>
+
+            <div class='uptime-axis'>
+                <span>${() => layout.days} days ago</span>
+                <span>Today</span>
+            </div>
+
+            <p aria-live='polite' class='uptime-live'>
+                ${() => {
+                    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'}`;
+                }}
+            </p>
+        </div>
+    `;
+};
+
+
+export default uptime;
+export type { Incident, Service };

package/src/components/uptime/scss/index.scss

@@ -0,0 +1,163 @@
+@use 'variables';
+
+.uptime {
+    color: var(--color);
+    font-size: var(--font-size);
+    position: relative;
+    width: var(--width);
+
+    &-axis,
+    &-header,
+    &-service-header {
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    &-axis {
+        color: var(--color-muted);
+        margin-top: var(--size-300);
+    }
+
+    &-bar {
+        background: var(--bar-color);
+        border-radius: var(--bar-border-radius);
+        flex: 1;
+        min-width: 0;
+        transition:
+            opacity var(--transition-duration) var(--timing-function),
+            scale var(--transition-duration) var(--timing-function);
+
+        &.--active {
+            scale: 1 var(--bar-active-scale);
+        }
+    }
+
+    &-bars {
+        border-radius: var(--border-radius-200);
+        cursor: default;
+        display: flex;
+        gap: var(--bar-gap);
+        height: var(--bar-height);
+        outline: none;
+
+        &:focus-visible {
+            outline: 2px solid var(--color);
+            outline-offset: 4px;
+        }
+
+        &.--active .uptime-bar:not(.--active) {
+            opacity: var(--bar-dim);
+        }
+    }
+
+    &-live {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-range,
+    &-service-day {
+        color: var(--color-muted);
+        flex-shrink: 0;
+        font-variant-numeric: tabular-nums;
+    }
+
+    &-service-caption {
+        align-items: center;
+        color: var(--color-muted);
+        display: flex;
+        gap: var(--size-200);
+        justify-content: flex-end;
+        min-width: 0;
+    }
+
+    &-service-header {
+        gap: var(--size-400);
+        height: var(--size-500);
+        margin-bottom: var(--size-300);
+    }
+
+    // Each caption change mounts a fresh node, so the entry animation replays per swap.
+    &-service-message {
+        animation: uptime-caption var(--transition-duration) var(--timing-function);
+        font-variant-numeric: tabular-nums;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &--active {
+            color: var(--color);
+        }
+
+        &--degraded,
+        &--ok,
+        &--outage {
+            &::before {
+                background: var(--dot);
+                border-radius: 50%;
+                content: '';
+                display: inline-block;
+                height: var(--dot-size);
+                margin-inline-end: var(--size-100);
+                vertical-align: middle;
+                width: var(--dot-size);
+            }
+        }
+    }
+
+    &-service-name {
+        flex-shrink: 0;
+        font-weight: var(--font-weight-500);
+    }
+
+    &-services {
+        display: flex;
+        flex-direction: column;
+        gap: var(--service-gap);
+        margin-top: var(--service-gap);
+    }
+
+    &-status {
+        align-items: center;
+        display: flex;
+        font-size: var(--font-size-400);
+        font-weight: var(--font-weight-500);
+        gap: var(--size-200);
+
+        &::before {
+            background: var(--dot);
+            border-radius: 50%;
+            content: '';
+            height: var(--dot-size);
+            width: var(--dot-size);
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &-bar {
+            transition: none;
+
+            &.--active {
+                scale: none;
+            }
+        }
+
+        &-service-message {
+            animation: none;
+        }
+    }
+}
+
+@keyframes uptime-caption {
+    from {
+        filter: blur(var(--caption-blur));
+        opacity: 0;
+        translate: 0 var(--caption-offset);
+    }
+}