@esportsplus/ui 0.55.0 → 0.56.2

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

@@ -0,0 +1,56 @@
+.uptime {
+    --bar-active-scale: 1.15;
+    --bar-border-radius: var(--border-radius-100);
+    --bar-dim: 0.35;
+    --bar-gap: 3px;
+    --bar-height: var(--size-600);
+    --caption-blur: 4px;
+    --caption-offset: 4px;
+    --color: var(--color-text-400);
+    --color-degraded: oklch(0.8 0.15 78);
+    --color-muted: var(--color-text-300);
+    // Healthy days stay low-chroma so months of calm don't shout; incidents keep their strength.
+    --color-ok: oklch(0.8 0.09 160);
+    --color-outage: oklch(0.64 0.2 25);
+    --dot-size: 6px;
+    --font-size: var(--font-size-300);
+    --service-gap: var(--size-600);
+    --timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+    --transition-duration: 0.2s;
+    --width: min(440px, 100%);
+
+    &-bar {
+        --bar-color: var(--color-ok);
+
+        &--degraded {
+            --bar-color: var(--color-degraded);
+        }
+
+        &--outage {
+            --bar-color: var(--color-outage);
+        }
+    }
+
+    &-service-message {
+        &--degraded {
+            --dot: var(--color-degraded);
+        }
+
+        &--ok {
+            --dot: var(--color-ok);
+        }
+
+        &--outage {
+            --dot: var(--color-outage);
+        }
+    }
+
+    &-status {
+        --dot: var(--color-ok);
+        --dot-size: 8px;
+
+        &--degraded {
+            --dot: var(--color-degraded);
+        }
+    }
+}

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

@@ -0,0 +1,63 @@
+import { component, html, type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+
+
+type Usage = {
+    completion: number;
+    context: number;
+    cost?: number;
+    prompt: number;
+};
+
+
+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);
+
+        return html`
+            <div
+                class='usage-meter'
+                data-level='${() => ratio() > 0.9 ? 'critical' : ratio() > 0.75 ? 'warning' : 'normal'}'
+                style='${() => `--ratio: ${ratio()}`}'
+                ${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>
+                    </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'
+                >
+                    <span class='usage-meter-fill'></span>
+                </div>
+
+                <div class='usage-meter-footer'>
+                    <span class='usage-meter-breakdown'>
+                        ${() => `prompt ${format(usage.prompt)} · completion ${format(usage.completion)}`}
+                    </span>
+                    ${() => usage.cost !== undefined && html`
+                        <span class='usage-meter-cost'>${`$${usage.cost.toFixed(4)}`}</span>
+                    `}
+                </div>
+            </div>
+        `;
+    }
+);
+
+
+export type { Usage };

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

@@ -0,0 +1,94 @@
+@use '/tokens';
+@use 'variables';
+
+.usage-meter {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    max-width: var(--max-width);
+    width: 100%;
+
+
+    &-breakdown,
+    &-cost,
+    &-count {
+        font-family: var(--font-family-mono);
+        font-variant-numeric: tabular-nums;
+    }
+
+    &-cost::before {
+        content: '≈ ';
+    }
+
+    &-count {
+        color: var(--meta-color);
+        font-size: var(--meta-font-size);
+    }
+
+    &-fill {
+        background: var(--fill);
+        border-radius: inherit;
+        display: block;
+        height: 100%;
+        transition:
+            background-color var(--transition-duration) var(--transition-timing-function),
+            width var(--transition-duration) var(--transition-timing-function);
+        width: calc(var(--ratio) * 100%);
+    }
+
+    &-footer {
+        align-items: center;
+        color: var(--meta-color-muted);
+        display: flex;
+        font-size: var(--meta-font-size);
+        justify-content: space-between;
+    }
+
+    &-header {
+        align-items: baseline;
+        display: flex;
+        gap: var(--size-300);
+        justify-content: space-between;
+    }
+
+    &-label {
+        color: var(--label-color);
+        font-size: var(--label-font-size);
+        font-weight: var(--label-font-weight);
+    }
+
+    &-track {
+        background: var(--track-background);
+        border-radius: 999px;
+        flex: 0 0 auto;
+        height: var(--track-height);
+        overflow: hidden;
+        width: var(--track-width);
+    }
+
+    // One row: track, count, cost; the footer and header wrappers dissolve so their children join it
+    &--inline {
+        align-items: center;
+        flex-direction: row;
+        width: fit-content;
+
+        .usage-meter-breakdown,
+        .usage-meter-label,
+        .usage-meter-percent {
+            display: none;
+        }
+
+        .usage-meter-cost::before {
+            content: none;
+        }
+
+        .usage-meter-footer,
+        .usage-meter-header {
+            display: contents;
+        }
+
+        .usage-meter-track {
+            order: -1;
+        }
+    }
+}

package/src/components/usage-meter/scss/variables.scss

@@ -0,0 +1,43 @@
+@use '/tokens';
+
+.usage-meter {
+    --fill: var(--fill-normal);
+    --fill-critical: color-mix(in oklch, var(--color-red-400) 80%, transparent);
+    --fill-normal: var(--color-text-500);
+    --fill-warning: color-mix(in oklch, var(--color-yellow-500) 80%, transparent);
+    --font-family-mono: 'Geist Mono', ui-monospace, monospace;
+    --gap: var(--size-200);
+    --label-color: var(--color-text-500);
+    --label-font-size: var(--font-size-200);
+    --label-font-weight: var(--font-weight-500);
+    --max-width: 380px;
+    --meta-color: var(--color-text-300);
+    --meta-color-muted: var(--color-border-500);
+    --meta-font-size: var(--font-size-100);
+    --track-background: color-mix(in oklch, var(--color-text-500) 6%, transparent);
+    --track-height: 6px;
+    --track-width: 100%;
+    --transition-duration: 500ms;
+    --transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+
+
+    &--inline {
+        --gap: var(--size-300);
+        --max-width: none;
+        --track-background: color-mix(in oklch, var(--color-text-500) 7%, transparent);
+        --track-height: 4px;
+        --track-width: 64px;
+    }
+
+    &[data-level='critical'] {
+        --fill: var(--fill-critical);
+    }
+
+    &[data-level='warning'] {
+        --fill: var(--fill-warning);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --transition-duration: 0ms;
+    }
+}

package/src/components/value-flash/index.ts

@@ -0,0 +1,121 @@
+import { html, type Attributes } from '@esportsplus/template';
+import { effect, onCleanup, reactive, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+
+
+type Direction = 'down' | 'up';
+
+type Entry = { direction: Direction | ''; leaving: boolean; text: string };
+
+
+export default ({ announceAfter = 700, format = String, hold = 900, label, state: api, ...attributes }: Attributes & {
+    announceAfter?: number;
+    format?: (value: number) => string;
+    hold?: number;
+    label?: string;
+    state: { value: number };
+}) => {
+    let announcer: ReturnType<typeof setTimeout> | undefined,
+        holder: ReturnType<typeof setTimeout> | undefined,
+        previous = api.value,
+        render = reactive([] as Entry[]),
+        state = reactive({ changes: 0, direction: '' as Direction | '', flashing: false, settled: format(previous) }),
+        stop = effect(() => {
+            let value = api.value;
+
+            untrack(() => {
+                let prior = previous,
+                    text = format(value);
+
+                previous = value;
+
+                clearTimeout(announcer);
+                announcer = setTimeout(() => state.settled = text, announceAfter);
+
+                // First run seeds the display without rolling it in.
+                if (render.length === 0) {
+                    render.push(reactive({ direction: '', leaving: false, text }));
+                    return;
+                }
+
+                let delta = value - prior;
+
+                if (!delta) {
+                    if (render[render.length - 1].text !== text) {
+                        render[render.length - 1].text = text;
+                    }
+
+                    return;
+                }
+
+                let direction: Direction = delta > 0 ? 'up' : 'down';
+
+                // Outgoing text leaves the way the incoming text travels.
+                for (let i = 0, n = render.length; i < n; i++) {
+                    render[i].direction = direction;
+                    render[i].leaving = true;
+                }
+
+                render.push(reactive({ direction, leaving: false, text }));
+
+                state.changes++;
+                state.direction = direction;
+                state.flashing = true;
+
+                clearTimeout(holder);
+                holder = setTimeout(() => state.flashing = false, hold);
+            });
+        });
+
+    function remove(entry: Entry) {
+        let index = render.indexOf(entry);
+
+        if (index !== -1) {
+            render.splice(index, 1);
+        }
+    }
+
+    onCleanup(() => {
+        clearTimeout(announcer);
+        clearTimeout(holder);
+        stop();
+    });
+
+    return html`
+        <span
+            class='value-flash'
+            ${attributes}
+            ${{
+                'data-direction': () => state.direction,
+                // Alternating parity swaps between identical keyframes, restarting the arrow pop per change.
+                'data-flash': () => state.flashing ? (state.changes % 2 ? 'odd' : 'even') : state.changes ? 'off' : ''
+            }}
+        >
+            <span aria-hidden='true' class='value-flash-tint'></span>
+            <span aria-hidden='true' class='value-flash-value'>
+                ${html.reactive(render, function (entry) {
+                    return html`
+                        <span
+                            class='${() => `value-flash-text${entry.direction ? ` value-flash-text--${entry.direction}` : ''}${entry.leaving ? ' value-flash-text--leaving' : ''}`}'
+                            onanimationend='${() => {
+                                if (entry.leaving) {
+                                    remove(entry);
+                                }
+                            }}'
+                        >
+                            ${() => entry.text}
+                        </span>
+                    `;
+                })}
+            </span>
+            <span aria-hidden='true' class='value-flash-arrow'>
+                <svg fill='currentColor' viewBox='0 0 256 256'>
+                    <path d='M128 68 L210 180 H46 Z' />
+                </svg>
+            </span>
+            <span aria-live='polite' class='value-flash-announcement'>
+                ${() => label ? `${label}: ${state.settled}` : state.settled}
+            </span>
+        </span>
+    `;
+};

package/src/components/value-flash/scss/index.scss

@@ -0,0 +1,193 @@
+@use 'variables';
+
+.value-flash {
+    align-items: center;
+    border-radius: var(--border-radius);
+    display: inline-grid;
+    font-size: var(--font-size);
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--font-weight);
+    gap: var(--gap);
+    grid-auto-flow: column;
+    padding: var(--padding);
+    position: relative;
+    transition:
+        color var(--tone-duration) var(--transition-timing-function),
+        scale var(--settle-duration) var(--settle);
+
+    &[data-direction='down'] {
+        --tone: var(--color-down);
+    }
+
+    &[data-direction='up'] {
+        --tone: var(--color-up);
+    }
+
+    &:is([data-flash='even'], [data-flash='odd']) {
+        color: var(--tone);
+        scale: var(--lift-scale);
+        transition:
+            color var(--tone-duration) var(--transition-timing-function),
+            scale var(--lift-duration) var(--lift);
+
+        .value-flash-tint {
+            opacity: 1;
+            transition: opacity var(--cell-duration) var(--cell);
+        }
+    }
+
+    &[data-flash='even'] .value-flash-arrow svg {
+        animation-name: value-flash-pop-2;
+    }
+
+    &[data-flash='odd'] .value-flash-arrow svg {
+        animation-name: value-flash-pop-1;
+    }
+
+    &[data-flash='off'] .value-flash-arrow svg {
+        animation: value-flash-clear var(--clear-duration) var(--clear) both;
+    }
+
+    &-announcement {
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+    }
+
+    &-arrow {
+        display: grid;
+        height: 1em;
+        place-items: center;
+        position: relative;
+        width: 1em;
+
+        svg {
+            --from: var(--arrow-offset);
+
+            animation: none var(--pop-duration) var(--pop) both;
+            display: block;
+            height: var(--arrow-size);
+            opacity: 0;
+            width: var(--arrow-size);
+        }
+    }
+
+    &[data-direction='down'] &-arrow svg {
+        --from: calc(var(--arrow-offset) * -1);
+
+        rotate: 180deg;
+    }
+
+    &-text {
+        grid-area: 1 / 1;
+
+        &--down,
+        &--up {
+            animation: value-flash-roll var(--roll-duration) var(--roll) both;
+        }
+
+        &--down {
+            --from: calc(var(--roll-offset) * -1);
+            --to: var(--drop-offset);
+        }
+
+        &--up {
+            --from: var(--roll-offset);
+            --to: calc(var(--drop-offset) * -1);
+        }
+
+        // Pulled out of flow so the incoming text alone sizes the value.
+        &--leaving {
+            animation: value-flash-drop var(--drop-duration) var(--clear) both;
+            inset-inline-start: 0;
+            position: absolute;
+        }
+    }
+
+    &-tint {
+        background: color-mix(in oklch, var(--tone, transparent) var(--tint-opacity), transparent);
+        border-radius: inherit;
+        inset: 0;
+        opacity: 0;
+        pointer-events: none;
+        position: absolute;
+        transition: opacity var(--clear-duration) var(--clear);
+    }
+
+    &-value {
+        display: inline-grid;
+        overflow: hidden;
+        position: relative;
+    }
+}
+
+@keyframes value-flash-clear {
+    from {
+        opacity: 1;
+        scale: 1;
+    }
+
+    to {
+        opacity: 0;
+        scale: 0.8;
+    }
+}
+
+@keyframes value-flash-drop {
+    from {
+        filter: blur(0);
+        opacity: 1;
+        translate: 0 0;
+    }
+
+    to {
+        filter: blur(var(--drop-blur));
+        opacity: 0;
+        translate: 0 var(--to, 0);
+    }
+}
+
+@keyframes value-flash-pop-1 {
+    from {
+        opacity: 0;
+        scale: 0.4;
+        translate: 0 var(--from);
+    }
+
+    to {
+        opacity: 1;
+        scale: 1;
+        translate: 0 0;
+    }
+}
+
+@keyframes value-flash-pop-2 {
+    from {
+        opacity: 0;
+        scale: 0.4;
+        translate: 0 var(--from);
+    }
+
+    to {
+        opacity: 1;
+        scale: 1;
+        translate: 0 0;
+    }
+}
+
+@keyframes value-flash-roll {
+    from {
+        filter: blur(var(--roll-blur));
+        opacity: 0;
+        translate: 0 var(--from);
+    }
+
+    to {
+        filter: blur(0);
+        opacity: 1;
+        translate: 0 0;
+    }
+}

package/src/components/value-flash/scss/variables.scss

@@ -0,0 +1,47 @@
+// Springs are sampled from motion's stiffness / damping / mass so the CSS settles like the original.
+.value-flash {
+    --arrow-offset: 0.3em;
+    --arrow-size: 0.68em;
+    --border-radius: var(--border-radius-300);
+    --cell: linear(0, 0.092, 0.262, 0.426, 0.567, 0.679, 0.764, 0.827, 0.874, 0.908, 0.933, 0.951, 0.964, 0.974, 0.981, 0.986, 0.99, 0.993, 0.995, 0.996, 0.997, 0.998, 0.999, 0.999, 1);
+    --cell-duration: 360ms;
+    --clear: cubic-bezier(0.4, 0, 1, 1);
+    --clear-duration: 160ms;
+    --color-down: var(--color-red-500);
+    // The green scale is tuned for dark surfaces; drop lightness so text stays legible on light ones.
+    --color-up: oklch(from var(--color-green-500) 0.6 c h);
+    --drop-blur: 4px;
+    --drop-duration: 140ms;
+    --drop-offset: 0.7em;
+    --font-size: var(--font-size-300);
+    --font-weight: var(--font-weight-500);
+    --gap: 6px;
+    --lift: linear(0, 0.06, 0.193, 0.351, 0.506, 0.644, 0.758, 0.845, 0.909, 0.954, 0.983, 1.001, 1.011, 1.015, 1.015, 1.014, 1.012, 1.009, 1.007, 1.005, 1.003, 1.002, 1.001, 1.001, 1);
+    --lift-duration: 390ms;
+    --lift-scale: 1.05;
+    --padding: 3px 6px;
+    --pop: linear(0, 0.136, 0.423, 0.722, 0.953, 1.092, 1.145, 1.138, 1.1, 1.055, 1.017, 0.992, 0.98, 0.979, 0.983, 0.99, 0.996, 1, 1.003, 1.003, 1.003, 1.002, 1.001, 1, 1);
+    --pop-duration: 460ms;
+    --roll: linear(0, 0.065, 0.201, 0.348, 0.487, 0.606, 0.703, 0.779, 0.837, 0.881, 0.913, 0.937, 0.955, 0.968, 0.977, 0.984, 0.988, 0.992, 0.994, 0.996, 0.997, 0.998, 0.999, 0.999, 1);
+    --roll-blur: 5px;
+    --roll-duration: 340ms;
+    --roll-offset: 0.85em;
+    --settle: linear(0, 0.086, 0.242, 0.399, 0.533, 0.641, 0.725, 0.79, 0.84, 0.879, 0.908, 0.93, 0.947, 0.96, 0.969, 0.977, 0.982, 0.987, 0.99, 0.992, 0.994, 0.995, 0.997, 0.997, 1);
+    --settle-duration: 660ms;
+    --tint-opacity: 14%;
+    --tone-duration: 200ms;
+
+    @media (prefers-reduced-motion: reduce) {
+        --arrow-offset: 0em;
+        --cell-duration: 1ms;
+        --clear-duration: 1ms;
+        --drop-blur: 0px;
+        --drop-duration: 1ms;
+        --drop-offset: 0em;
+        --lift-scale: 1;
+        --pop-duration: 1ms;
+        --roll-blur: 0px;
+        --roll-duration: 1ms;
+        --roll-offset: 0em;
+    }
+}