@esportsplus/ui 0.56.3 → 0.57.0

package/src/components/typewriter/scss/index.scss

@@ -1,34 +1,4 @@
+@use 'caret';
+@use 'retype';
+@use 'rotate';
 @use 'variables';
-
-.typewriter {
-    text-shadow: var(--glow);
-
-    &::after {
-        animation: typewriter--blink var(--caret-duration) var(--caret-timing-function) infinite;
-        color: var(--caret-color);
-        content: var(--caret);
-
-        @media (prefers-reduced-motion: reduce) {
-            animation: none;
-        }
-    }
-
-    &--block::after {
-        background: var(--caret-color);
-        box-shadow: var(--glow);
-        display: inline-block;
-        height: 1lh;
-        margin-inline-start: 0.08em;
-        vertical-align: bottom;
-        width: 0.56em;
-    }
-}
-
-@keyframes typewriter--blink {
-    0%, 100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0;
-    }
-}

package/src/components/typewriter/scss/variables.scss

@@ -1,16 +1,22 @@
-.typewriter {
-    --caret: '|';
+.typewriter,
+.typewriter-retype {
+    --caret: '';
+    --caret-align: -0.18em;
+    --caret-background: var(--caret-color);
     --caret-color: currentColor;
-    --caret-duration: 0.64s;
-    --caret-timing-function: ease-in-out;
-    --glow: 0 0 0 transparent;
+    --caret-duration: 1.06s;
+    --caret-height: 1.1em;
+    --caret-offset: 2px;
+    --caret-radius: 999px;
+    --caret-timing-function: linear;
+    --caret-width: 2px;
 
     &--block {
-        --caret: '';
-    }
-
-    &--glow {
-        --glow: 0 0 0.4em var(--caret-color);
+        --caret-align: bottom;
+        --caret-height: 1lh;
+        --caret-offset: 0.08em;
+        --caret-radius: 0;
+        --caret-width: 0.56em;
     }
 
     &--hard {
@@ -20,5 +26,49 @@
 
     &--underscore {
         --caret: '_';
+        --caret-align: baseline;
+        --caret-background: transparent;
+        --caret-height: auto;
+        --caret-offset: 0.04em;
+        --caret-radius: 0;
+        --caret-width: auto;
+    }
+}
+
+.typewriter-retype {
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --ink-blur: 2px;
+    --ink-duration: 140ms;
+    // Read by JS: each key's delay, a base plus up to the jitter, which lands around 8 to 14 keys a second, the pace
+    // of someone who knows the word.
+    --key-duration: 62ms;
+    --key-jitter-duration: 64ms;
+    --select-duration: 220ms;
+    --selection-color: oklch(from var(--color-text-500) l c h / 0.15);
+    --selection-radius: 3px;
+
+    // Words land whole and still fade in and get selected, without the blur or the sweep.
+    @media (prefers-reduced-motion: reduce) {
+        --ink-blur: 0px;
+        --key-duration: 0s;
+        --select-duration: 0s;
+    }
+}
+
+.typewriter-rotate {
+    --color: inherit;
+    // Read by JS: how the letters a swap keeps travel to their new places, and the width with them. Shared letters
+    // can travel most of a word across, so they get longer than a typical UI tween; any shorter and it reads as a
+    // jump.
+    --glide-duration: 440ms;
+    --glide-easing: cubic-bezier(0.77, 0, 0.175, 1);
+
+    // A swap is a plain crossfade.
+    @media (prefers-reduced-motion: reduce) {
+        --glide-duration: 0s;
+    }
+
+    &--accent {
+        --color: var(--color-blue-400);
     }
 }

package/src/components/uptime/index.ts

@@ -1,5 +1,7 @@
-import { batch, computed, dispose, onCleanup, reactive, read, type Computed } from '@esportsplus/reactivity';
+import { batch, computed, effect, reactive, read, signal, write } from '@esportsplus/reactivity';
 import { html, type Attributes } from '@esportsplus/template';
+import { observeSize } from '~/shared/resize';
+import tooltip from '~/components/tooltip';
 import './scss/index.scss';
 
 
@@ -25,10 +27,16 @@ const DAYS = 60;
 
 const DAYS_COMPACT = 30;
 
-// Caption keys: a day index names an incident, HEALTHY any clean day, SUMMARY the resting uptime figure.
+// Caption keys: a day index names an incident, HEALTHY any clean day, IDLE no day selected.
 const HEALTHY = -1;
 
-const SUMMARY = -2;
+const IDLE = -2;
+
+const STATUS = {
+    degraded: 'Degraded',
+    operational: 'Operational',
+    outage: 'Outage'
+};
 
 
 function ago(day: number) {
@@ -76,12 +84,15 @@ const uptime = ({ services, state: api = reactive({ day: -1, row: -1 }), ...attr
     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));
+    // A private mirror of the selected bar's key that bars select on, so a move restyles two bars rather than a row.
+    let active = signal(''),
+        layout = reactive({ days: DAYS }),
+        // A narrow container gets half the history so every day stays a real, tappable bar.
+        size = observeSize(({ width }) => {
+            layout.days = width < COMPACT_WIDTH ? DAYS_COMPACT : DAYS;
+        });
 
-    function bars(service: Service, index: number) {
+    function bars(index: number, service: Service) {
         let days = layout.days,
             render = [];
 
@@ -90,7 +101,7 @@ const uptime = ({ services, state: api = reactive({ day: -1, row: -1 }), ...attr
                 incident = find(service, value);
 
             render.push(html`
-                <span class='uptime-bar ${incident ? `uptime-bar--${incident.level}` : ''} ${() => api.row === index && api.day === value && '--active'}'></span>
+                <span class='uptime-bar ${incident && `uptime-bar--${incident.level}`} ${() => signal.selector(active, `${index}:${value}`) && '--active'}'></span>
             `);
         }
 
@@ -102,8 +113,8 @@ const uptime = ({ services, state: api = reactive({ day: -1, row: -1 }), ...attr
     }
 
     function message(service: Service, key: number) {
-        if (key === SUMMARY) {
-            return html`<span class='uptime-service-message'>${percentage(service, layout.days)}% uptime</span>`;
+        if (key === IDLE) {
+            return '';
         }
 
         let incident = key === HEALTHY ? undefined : find(service, key);
@@ -125,18 +136,28 @@ const uptime = ({ services, state: api = reactive({ day: -1, row: -1 }), ...attr
                 let value = read(day);
 
                 if (value === -1) {
-                    return SUMMARY;
+                    return IDLE;
                 }
 
                 return find(service, value) ? value : HEALTHY;
-            });
-
-        nodes.push(caption, day);
+            }),
+            status: keyof typeof STATUS = find(service, 0)?.level ?? 'operational';
 
         return html`
             <div class='uptime-service'>
                 <div class='uptime-service-header'>
-                    <span class='uptime-service-name'>${service.name}</span>
+                    <span class='uptime-service-name'>
+                        <span class='uptime-service-label'>${service.name}</span>
+
+                        ${tooltip.onhover(
+                            { class: `uptime-service-status uptime-service-status--${status}` },
+                            html`
+                                <span aria-hidden='true' class='uptime-service-tooltip tooltip-message tooltip-message--e tooltip-message--morph'>
+                                    ${STATUS[status]}
+                                </span>
+                            `
+                        )}
+                    </span>
 
                     <span class='uptime-service-caption'>
                         ${() => {
@@ -149,9 +170,10 @@ const uptime = ({ services, state: api = reactive({ day: -1, row: -1 }), ...attr
                 </div>
 
                 <div
-                    aria-label='${() => `${service.name}: ${percentage(service, layout.days)}% uptime over ${layout.days} days. Arrow keys step through days.`}'
+                    aria-label='${() => `${service.name}: ${STATUS[status]}, ${percentage(service, layout.days)}% uptime over ${layout.days} days. Arrow keys step through days.`}'
                     class='uptime-bars ${() => api.row === index && '--active'}'
                     role='group'
+                    style='${() => `--days: ${layout.days}`}'
                     tabindex='0'
                     ${{
                         onblur: clear,
@@ -193,7 +215,13 @@ const uptime = ({ services, state: api = reactive({ day: -1, row: -1 }), ...attr
                         }
                     }}
                 >
-                    ${() => bars(service, index)}
+                    ${() => bars(index, service)}
+                </div>
+
+                <div class='uptime-service-axis'>
+                    <span>${() => layout.days} days ago</span>
+                    <span class='uptime-service-percentage'>${() => percentage(service, layout.days)}% uptime</span>
+                    <span>Today</span>
                 </div>
             </div>
         `;
@@ -210,44 +238,17 @@ const uptime = ({ services, state: api = reactive({ day: -1, row: -1 }), ...attr
         });
     }
 
-    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 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);
-                }
-            }}
+            ${size}
         >
-            <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>
+            ${services.map(row)}
 
             <p aria-live='polite' class='uptime-live'>
                 ${() => {

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

@@ -1,34 +1,30 @@
+@use '/shared';
+@use '/tokens';
 @use 'variables';
 
 .uptime {
     color: var(--color);
+    display: flex;
+    flex-direction: column;
     font-size: var(--font-size);
+    gap: var(--service-gap);
     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);
-    }
-
+    // Whole-pixel ticks: flex-sharing fractional widths lets pixel snapping round some bars a pixel wider than
+    // the rest. The leftover width spreads through the gaps instead.
     &-bar {
         background: var(--bar-color);
         border-radius: var(--bar-border-radius);
-        flex: 1;
-        min-width: 0;
+        flex-shrink: 0;
+        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);
 
-        &.--active {
+        @include tokens.state(active) {
+            --bar-opacity: 1;
             scale: 1 var(--bar-active-scale);
         }
     }
@@ -37,34 +33,32 @@
         border-radius: var(--border-radius-200);
         cursor: default;
         display: flex;
-        gap: var(--bar-gap);
         height: var(--bar-height);
+        justify-content: space-between;
         outline: none;
 
+        // A highlighted row dims every bar but the selected one.
+        @include tokens.state(active) {
+            --bar-opacity: var(--bar-dim);
+        }
+
         &: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;
+        @extend %hidden-visually;
     }
 
-    &-range,
-    &-service-day {
+    &-service-axis {
+        align-items: center;
         color: var(--color-muted);
-        flex-shrink: 0;
-        font-variant-numeric: tabular-nums;
+        display: flex;
+        gap: var(--axis-gap);
+        margin-top: var(--size-300);
+        white-space: nowrap;
     }
 
     &-service-caption {
@@ -76,9 +70,22 @@
         min-width: 0;
     }
 
+    &-service-day,
+    &-service-percentage {
+        font-variant-numeric: tabular-nums;
+    }
+
+    &-service-day {
+        color: var(--color-muted);
+        flex-shrink: 0;
+    }
+
     &-service-header {
+        align-items: center;
+        display: flex;
         gap: var(--size-400);
         height: var(--size-500);
+        justify-content: space-between;
         margin-bottom: var(--size-300);
     }
 
@@ -111,39 +118,52 @@
         }
     }
 
+    // Same cut-out as 'image--status', anchored top right: the mask punches a ring out of the text, and
+    // the status dot, a sibling so the mask can't clip its tooltip, sits in the hole.
+    &-service-label {
+        display: block;
+        mask-clip: no-clip;
+        mask-image: var(--status-mask);
+    }
+
     &-service-name {
         flex-shrink: 0;
         font-weight: var(--font-weight-500);
+        position: relative;
     }
 
-    &-services {
-        display: flex;
-        flex-direction: column;
-        gap: var(--service-gap);
-        margin-top: var(--service-gap);
-    }
-
-    &-status {
+    &-service-percentage {
         align-items: center;
         display: flex;
-        font-size: var(--font-size-400);
-        font-weight: var(--font-weight-500);
-        gap: var(--size-200);
+        flex: 1;
+        gap: var(--axis-gap);
 
+        &::after,
         &::before {
-            background: var(--dot);
-            border-radius: 50%;
+            border-top: 1px solid var(--axis-line-color);
             content: '';
-            height: var(--dot-size);
-            width: var(--dot-size);
+            flex: 1;
         }
     }
 
+    // Qualified twice so it beats the reused tooltip's own cursor and position. The morph grows out of the dot's
+    // box and seeds its corners from the radius, so the radius is in pixels: a percentage would squash the start.
+    &-service-status.tooltip {
+        background: var(--status-color);
+        border-radius: calc(var(--status-size) / 2);
+        cursor: default;
+        height: var(--status-size);
+        position: absolute;
+        right: var(--status-right);
+        top: var(--status-top);
+        width: var(--status-size);
+    }
+
     @media (prefers-reduced-motion: reduce) {
         &-bar {
             transition: none;
 
-            &.--active {
+            @include tokens.state(active) {
                 scale: none;
             }
         }

package/src/components/uptime/scss/variables.scss

@@ -1,9 +1,12 @@
 .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: 0.35;
     --bar-gap: 3px;
     --bar-height: var(--size-600);
+    --bar-opacity: 1;
     --caption-blur: 4px;
     --caption-offset: 4px;
     --color: var(--color-text-400);
@@ -45,12 +48,37 @@
         }
     }
 
-    &-status {
-        --dot: var(--color-ok);
-        --dot-size: 8px;
+    // Shared by the label's mask and the dot, so the hole and the dot line up.
+    &-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 - 0.5px),
+            transparent calc(var(--status-size) / 2 + 0.5px) calc(var(--status-size) / 2 + var(--status-gap) - 0.5px),
+            #000 calc(var(--status-size) / 2 + var(--status-gap) + 0.5px)
+        );
+        --status-right: calc((var(--status-size) + 2px) * -1);
+        --status-size: 6px;
+        --status-top: 0px;
+    }
+
+    &-service-status {
+        --status-color: var(--color-ok);
 
         &--degraded {
-            --dot: var(--color-degraded);
+            --status-color: var(--color-degraded);
+        }
+
+        &--outage {
+            --status-color: var(--color-outage);
         }
     }
+
+    &-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;
+    }
 }

package/src/components/usage-meter/index.ts

@@ -1,4 +1,6 @@
+import { computed, read } from '@esportsplus/reactivity';
 import { component, html, type Attributes } from '@esportsplus/template';
+import number from '../number';
 import './scss/index.scss';
 
 
@@ -10,48 +12,46 @@ type Usage = {
 };
 
 
-function format(count: number) {
-    return count < 1000 ? `${count}` : `${(count / 1000).toFixed(1)}k`;
-}
-
-
 // Reads 'usage' inside bindings so a reactive object keeps the meter live
 export default component(
     function({ label = 'Context window', usage, ...attributes }: Attributes & { label?: string; usage: Usage }) {
-        let ratio = () => Math.min(1, (usage.prompt + usage.completion) / usage.context);
+        let costed = computed(() => usage.cost !== undefined),
+            used = computed(() => usage.prompt + usage.completion),
+            ratio = computed(() => Math.min(1, read(used) / usage.context));
 
         return html`
             <div
-                class='usage-meter'
-                data-level='${() => ratio() > 0.9 ? 'critical' : ratio() > 0.75 ? 'warning' : 'normal'}'
-                style='${() => `--ratio: ${ratio()}`}'
+                class='usage-meter ${() => read(ratio) > 0.9 ? 'usage-meter--critical' : read(ratio) > 0.75 && 'usage-meter--warning'}'
                 ${attributes}
             >
                 <div class='usage-meter-header'>
                     <span class='usage-meter-label'>${label}</span>
                     <span class='usage-meter-count'>
-                        ${() => `${format(usage.prompt + usage.completion)} / ${format(usage.context)}`}
-                        <span class='usage-meter-percent'>${() => ` · ${Math.round(ratio() * 100)}%`}</span>
+                        ${() => `${number.abbreviate(read(used))} / ${number.abbreviate(usage.context)}`}
+                        <span class='usage-meter-percent'>${() => ` · ${Math.round(read(ratio) * 100)}%`}</span>
                     </span>
                 </div>
 
                 <div
                     aria-label='${label}'
-                    aria-valuemax='${() => usage.context}'
                     aria-valuemin='0'
-                    aria-valuenow='${() => usage.prompt + usage.completion}'
                     class='usage-meter-track'
                     role='meter'
+                    ${{
+                        'aria-valuemax': () => usage.context,
+                        'aria-valuenow': () => read(used),
+                        'aria-valuetext': () => `${number.abbreviate(read(used))} of ${number.abbreviate(usage.context)} tokens, ${Math.round(read(ratio) * 100)}%`
+                    }}
                 >
-                    <span class='usage-meter-fill'></span>
+                    <span class='usage-meter-fill' style='${() => `translate: ${(read(ratio) - 1) * 100}% 0`}'></span>
                 </div>
 
                 <div class='usage-meter-footer'>
                     <span class='usage-meter-breakdown'>
-                        ${() => `prompt ${format(usage.prompt)} · completion ${format(usage.completion)}`}
+                        ${() => `prompt ${number.abbreviate(usage.prompt)} · completion ${number.abbreviate(usage.completion)}`}
                     </span>
-                    ${() => usage.cost !== undefined && html`
-                        <span class='usage-meter-cost'>${`$${usage.cost.toFixed(4)}`}</span>
+                    ${() => read(costed) && html`
+                        <span class='usage-meter-cost'>${() => `$${usage.cost!.toFixed(4)}`}</span>
                     `}
                 </div>
             </div>