@esportsplus/ui 0.55.0 → 0.56.3

package/build/components/usage-meter/index.js

@@ -0,0 +1,30 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import './scss/index.scss';
+const template_0r0k9fw1 = template_u1.template(`<div class='usage-meter'><div class='usage-meter-header'><span class='usage-meter-label'></span><span class='usage-meter-count'><!--$--><span class='usage-meter-percent'></span></span></div><div aria-valuemin='0' class='usage-meter-track' role='meter'><span class='usage-meter-fill'></span></div><div class='usage-meter-footer'><span class='usage-meter-breakdown'>`);
+const template_0r0k9fwa = template_u1.template(`<span class='usage-meter-cost'>`);
+function format(count) {
+    return count < 1000 ? `${count}` : `${(count / 1000).toFixed(1)}k`;
+}
+export default component(function ({ label = 'Context window', usage, ...attributes }) {
+    let ratio = () => Math.min(1, (usage.prompt + usage.completion) / usage.context);
+    return (() => {
+        let root_0r0k9fw0 = template_0r0k9fw1(), element_0r0k9fw2 = root_0r0k9fw0.firstChild, element_0r0k9fw3 = element_0r0k9fw2.firstElementChild.firstElementChild, element_0r0k9fw4 = element_0r0k9fw3.nextElementSibling.firstChild, element_0r0k9fw5 = element_0r0k9fw3.nextElementSibling.firstElementChild, element_0r0k9fw6 = element_0r0k9fw2.firstElementChild.nextElementSibling, element_0r0k9fw7 = element_0r0k9fw6.nextElementSibling.firstElementChild, element_0r0k9fw8 = element_0r0k9fw6.nextElementSibling;
+        template_u1.setProperty(element_0r0k9fw2, 'data-level', () => ratio() > 0.9 ? 'critical' : ratio() > 0.75 ? 'warning' : 'normal');
+        template_u1.setList(element_0r0k9fw2, 'style', () => `--ratio: ${ratio()}`);
+        template_u1.setProperties(element_0r0k9fw2, attributes);
+        template_u1.slot(element_0r0k9fw3, label, 1);
+        new template_u1.EffectSlot(element_0r0k9fw4, () => `${format(usage.prompt + usage.completion)} / ${format(usage.context)}`);
+        new template_u1.EffectSlot(element_0r0k9fw5, () => ` · ${Math.round(ratio() * 100)}%`, 1);
+        template_u1.setProperty(element_0r0k9fw6, 'aria-label', label);
+        template_u1.setProperty(element_0r0k9fw6, 'aria-valuemax', () => usage.context);
+        template_u1.setProperty(element_0r0k9fw6, 'aria-valuenow', () => usage.prompt + usage.completion);
+        new template_u1.EffectSlot(element_0r0k9fw7, () => `prompt ${format(usage.prompt)} · completion ${format(usage.completion)}`, 1);
+        new template_u1.EffectSlot(element_0r0k9fw8, () => usage.cost !== undefined && (() => {
+            let root_0r0k9fw9 = template_0r0k9fwa(), element_0r0k9fwb = root_0r0k9fw9.firstChild;
+            element_0r0k9fwb.appendChild(template_u1.text(`$${usage.cost.toFixed(4)}`));
+            return root_0r0k9fw9;
+        })(), 2);
+        return root_0r0k9fw0;
+    })();
+});

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

@@ -0,0 +1,2 @@
+@layer components {.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:.5s;--transition-timing-function:cubic-bezier(.23, 1, .32, 1)}.usage-meter--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}.usage-meter[data-level=critical]{--fill:var(--fill-critical)}.usage-meter[data-level=warning]{--fill:var(--fill-warning)}@media (prefers-reduced-motion:reduce){.usage-meter{--transition-duration:0s}}.usage-meter{gap:var(--gap);max-width:var(--max-width);flex-direction:column;width:100%;display:flex}.usage-meter-breakdown,.usage-meter-cost,.usage-meter-count{font-family:var(--font-family-mono);font-variant-numeric:tabular-nums}.usage-meter-cost:before{content:"≈ "}.usage-meter-count{color:var(--meta-color);font-size:var(--meta-font-size)}.usage-meter-fill{background:var(--fill);border-radius:inherit;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%);display:block}.usage-meter-footer{color:var(--meta-color-muted);font-size:var(--meta-font-size);justify-content:space-between;align-items:center;display:flex}.usage-meter-header{align-items:baseline;gap:var(--size-300);justify-content:space-between;display:flex}.usage-meter-label{color:var(--label-color);font-size:var(--label-font-size);font-weight:var(--label-font-weight)}.usage-meter-track{background:var(--track-background);height:var(--track-height);width:var(--track-width);border-radius:999px;flex:none;overflow:hidden}.usage-meter--inline{flex-direction:row;align-items:center;width:fit-content}.usage-meter--inline .usage-meter-breakdown,.usage-meter--inline .usage-meter-label,.usage-meter--inline .usage-meter-percent{display:none}.usage-meter--inline .usage-meter-cost:before{content:none}.usage-meter--inline .usage-meter-footer,.usage-meter--inline .usage-meter-header{display:contents}.usage-meter--inline .usage-meter-track{order:-1}}
+/*$vite$:1*/

package/build/components/value-flash/index.d.ts

@@ -0,0 +1,12 @@
+import { type Attributes } from '@esportsplus/template';
+import './scss/index.scss';
+export default _default;
+declare function _default({ announceAfter, format, hold, label, state: api, ...attributes }: Attributes & {
+    announceAfter?: number;
+    format?: (value: number) => string;
+    hold?: number;
+    label?: string;
+    state: {
+        value: number;
+    };
+}): DocumentFragment | Text;

package/build/components/value-flash/index.js

@@ -0,0 +1,106 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, onCleanup, untrack } from '@esportsplus/reactivity';
+import './scss/index.scss';
+const template_0fbj40f2 = template_u1.template(`<span class='value-flash'><span aria-hidden='true' class='value-flash-tint'></span><span aria-hidden='true' class='value-flash-value'></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'>`);
+const template_0fbj40f7 = template_u1.template(`<span>`);
+class ReactiveObject_0fbj40f0 extends reactivity_u0.ReactiveObject {
+    #changes = this[reactivity_u0.SIGNAL](0);
+    #direction;
+    #flashing = this[reactivity_u0.SIGNAL](false);
+    #settled;
+    constructor(_p0, _p1) {
+        super(null);
+        this.#direction = this[reactivity_u0.SIGNAL](_p0);
+        this.#settled = this[reactivity_u0.SIGNAL](_p1);
+    }
+    get changes() {
+        return reactivity_u0.read(this.#changes);
+    }
+    set changes(_v0) {
+        reactivity_u0.write(this.#changes, _v0);
+    }
+    get direction() {
+        return reactivity_u0.read(this.#direction);
+    }
+    set direction(_v1) {
+        reactivity_u0.write(this.#direction, _v1);
+    }
+    get flashing() {
+        return reactivity_u0.read(this.#flashing);
+    }
+    set flashing(_v2) {
+        reactivity_u0.write(this.#flashing, _v2);
+    }
+    get settled() {
+        return reactivity_u0.read(this.#settled);
+    }
+    set settled(_v3) {
+        reactivity_u0.write(this.#settled, _v3);
+    }
+}
+export default ({ announceAfter = 700, format = String, hold = 900, label, state: api, ...attributes }) => {
+    let announcer, holder, previous = api.value, render = new reactivity_u0.ReactiveArray(), state = new ReactiveObject_0fbj40f0('', 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);
+            if (render.$length === 0) {
+                render.push(reactivity_u0.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 = delta > 0 ? 'up' : 'down';
+            for (let i = 0, n = render.$length; i < n; i++) {
+                render[i].direction = direction;
+                render[i].leaving = true;
+            }
+            render.push(reactivity_u0.reactive({ direction, leaving: false, text }));
+            state.changes++;
+            state.direction = direction;
+            state.flashing = true;
+            clearTimeout(holder);
+            holder = setTimeout(() => state.flashing = false, hold);
+        });
+    });
+    function remove(entry) {
+        let index = render.indexOf(entry);
+        if (index !== -1) {
+            render.splice(index, 1);
+        }
+    }
+    onCleanup(() => {
+        clearTimeout(announcer);
+        clearTimeout(holder);
+        stop();
+    });
+    return (() => {
+        let root_0fbj40f1 = template_0fbj40f2(), element_0fbj40f3 = root_0fbj40f1.firstChild, element_0fbj40f4 = element_0fbj40f3.firstElementChild.nextElementSibling, element_0fbj40f5 = element_0fbj40f4.nextElementSibling.nextElementSibling;
+        template_u1.setProperties(element_0fbj40f3, attributes);
+        template_u1.setProperty(element_0fbj40f3, 'data-direction', () => state.direction);
+        template_u1.setProperty(element_0fbj40f3, 'data-flash', () => state.flashing ? (state.changes % 2 ? 'odd' : 'even') : state.changes ? 'off' : '');
+        element_0fbj40f4.appendChild(new template_u1.ArraySlot(render, function (entry) {
+            return (() => {
+                let root_0fbj40f6 = template_0fbj40f7(), element_0fbj40f8 = root_0fbj40f6.firstChild;
+                template_u1.setList(element_0fbj40f8, 'class', () => `value-flash-text${entry.direction ? ` value-flash-text--${entry.direction}` : ''}${entry.leaving ? ' value-flash-text--leaving' : ''}`);
+                template_u1.delegate(element_0fbj40f8, 'animationend', () => {
+                    if (entry.leaving) {
+                        remove(entry);
+                    }
+                });
+                new template_u1.EffectSlot(element_0fbj40f8, () => entry.text, 1);
+                return root_0fbj40f6;
+            })();
+        }, true).fragment);
+        new template_u1.EffectSlot(element_0fbj40f5, () => label ? `${label}: ${state.settled}` : state.settled, 1);
+        return root_0fbj40f1;
+    })();
+};

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

@@ -0,0 +1,2 @@
+@layer components {.value-flash{--arrow-offset:.3em;--arrow-size:.68em;--border-radius:var(--border-radius-300);--cell:linear(0, .092, .262, .426, .567, .679, .764, .827, .874, .908, .933, .951, .964, .974, .981, .986, .99, .993, .995, .996, .997, .998, .999, .999, 1);--cell-duration:.36s;--clear:cubic-bezier(.4, 0, 1, 1);--clear-duration:.16s;--color-down:var(--color-red-500);--color-up:oklch(from var(--color-green-500) .6 c h);--drop-blur:4px;--drop-duration:.14s;--drop-offset:.7em;--font-size:var(--font-size-300);--font-weight:var(--font-weight-500);--gap:6px;--lift:linear(0, .06, .193, .351, .506, .644, .758, .845, .909, .954, .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:.39s;--lift-scale:1.05;--padding:3px 6px;--pop:linear(0, .136, .423, .722, .953, 1.092, 1.145, 1.138, 1.1, 1.055, 1.017, .992, .98, .979, .983, .99, .996, 1, 1.003, 1.003, 1.003, 1.002, 1.001, 1, 1);--pop-duration:.46s;--roll:linear(0, .065, .201, .348, .487, .606, .703, .779, .837, .881, .913, .937, .955, .968, .977, .984, .988, .992, .994, .996, .997, .998, .999, .999, 1);--roll-blur:5px;--roll-duration:.34s;--roll-offset:.85em;--settle:linear(0, .086, .242, .399, .533, .641, .725, .79, .84, .879, .908, .93, .947, .96, .969, .977, .982, .987, .99, .992, .994, .995, .997, .997, 1);--settle-duration:.66s;--tint-opacity:14%;--tone-duration:.2s}@media (prefers-reduced-motion:reduce){.value-flash{--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}}.value-flash{border-radius:var(--border-radius);font-size:var(--font-size);font-variant-numeric:tabular-nums;font-weight:var(--font-weight);align-items:center;gap:var(--gap);padding:var(--padding);transition:color var(--tone-duration) var(--transition-timing-function), scale var(--settle-duration) var(--settle);grid-auto-flow:column;display:inline-grid;position:relative}.value-flash[data-direction=down]{--tone:var(--color-down)}.value-flash[data-direction=up]{--tone:var(--color-up)}.value-flash: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:is([data-flash=even],[data-flash=odd]) .value-flash-tint{opacity:1;transition:opacity var(--cell-duration) var(--cell)}.value-flash[data-flash=even] .value-flash-arrow svg{animation-name:value-flash-pop-2}.value-flash[data-flash=odd] .value-flash-arrow svg{animation-name:value-flash-pop-1}.value-flash[data-flash=off] .value-flash-arrow svg{animation:value-flash-clear var(--clear-duration) var(--clear) both}.value-flash-announcement{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.value-flash-arrow{place-items:center;width:1em;height:1em;display:grid;position:relative}.value-flash-arrow svg{--from:var(--arrow-offset);animation:none var(--pop-duration) var(--pop) both;height:var(--arrow-size);opacity:0;width:var(--arrow-size);display:block}.value-flash[data-direction=down] .value-flash-arrow svg{--from:calc(var(--arrow-offset) * -1);rotate:180deg}.value-flash-text{grid-area:1/1}.value-flash-text--down,.value-flash-text--up{animation:value-flash-roll var(--roll-duration) var(--roll) both}.value-flash-text--down{--from:calc(var(--roll-offset) * -1);--to:var(--drop-offset)}.value-flash-text--up{--from:var(--roll-offset);--to:calc(var(--drop-offset) * -1)}.value-flash-text--leaving{animation:value-flash-drop var(--drop-duration) var(--clear) both;position:absolute;inset-inline-start:0}.value-flash-tint{background:color-mix(in oklch, var(--tone,transparent) var(--tint-opacity), transparent);border-radius:inherit;opacity:0;pointer-events:none;transition:opacity var(--clear-duration) var(--clear);position:absolute;inset:0}.value-flash-value{display:inline-grid;position:relative;overflow:hidden}@keyframes value-flash-clear{0%{opacity:1;scale:1}to{opacity:0;scale:.8}}@keyframes value-flash-drop{0%{filter:blur();opacity:1;translate:0}to{filter:blur(var(--drop-blur));opacity:0;translate:0 var(--to,0)}}@keyframes value-flash-pop-1{0%{opacity:0;scale:.4;translate:0 var(--from)}to{opacity:1;translate:0;scale:1}}@keyframes value-flash-pop-2{0%{opacity:0;scale:.4;translate:0 var(--from)}to{opacity:1;translate:0;scale:1}}@keyframes value-flash-roll{0%{filter:blur(var(--roll-blur));opacity:0;translate:0 var(--from)}to{filter:blur();opacity:1;translate:0}}}
+/*$vite$:1*/

package/build/components/waitlist-join/index.d.ts

@@ -0,0 +1,34 @@
+import { type Attributes } from '@esportsplus/template';
+import input from '../input/index.js';
+import './scss/index.scss';
+type A = Attributes & {
+    [WAITLIST_JOIN_INPUT]?: Parameters<typeof input>[0];
+    linkBase?: string;
+    onjoin?: (email: string) => void;
+    product?: string;
+    queue: QueuePerson[];
+    skip?: number;
+    state?: State;
+    waiting: number;
+};
+type QueuePerson = {
+    avatar?: string;
+    id: string;
+    name: string;
+};
+type State = {
+    bumped: boolean;
+    copied: boolean;
+    email: string;
+    status: 'idle' | 'joined' | 'joining';
+    touched: boolean;
+};
+declare const WAITLIST_JOIN_INPUT: unique symbol;
+declare function template(this: {
+    attributes?: Partial<A>;
+} | void, { linkBase, onjoin, product, queue, skip, state, waiting, ...attributes }: A): DocumentFragment | Text;
+declare const _default: typeof template & {
+    readonly input: typeof WAITLIST_JOIN_INPUT;
+};
+export default _default;
+export type { QueuePerson, State };

package/build/components/waitlist-join/index.js

@@ -0,0 +1,402 @@
+import * as template_u1 from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, untrack } from '@esportsplus/reactivity';
+import clipboard from '../clipboard/index.js';
+import counter from '../counter/index.js';
+import form from '../form/index.js';
+import input from '../input/index.js';
+import './scss/index.scss';
+const template_1iptpxt4 = template_u1.template(`<img alt='' class='waitlist-join-face-image' draggable='false' height='36' width='36' />`);
+const template_1iptpxt6 = template_u1.template(`<svg aria-hidden='true' class='waitlist-join-face-image' viewBox='0 0 36 36'><circle cx='18' cy='14.5' r='6.5' /><path d='M5 36c1.5-8 6.5-12 13-12s11.5 4 13 12Z' />`);
+const template_1iptpxt8 = template_u1.template(`<section class='waitlist-join'><div class='waitlist-join-top'><p class='waitlist-join-product'><!--$--> · Private beta</p><button class='button waitlist-join-reset' type='button'> Not you? </button></div><h2 class='waitlist-join-title'><span class='waitlist-join-heading'>Join the waitlist</span><span class='waitlist-join-heading'><span aria-hidden='true' class='waitlist-join-spot'> You’re #</span><span class='waitlist-join-live'></span></span></h2><p class='waitlist-join-description'></p><div class='waitlist-join-queue'><ol class='waitlist-join-line'><!--$--><li aria-label='You' class='waitlist-join-person waitlist-join-person--me' hidden><span class='waitlist-join-me'></span><span aria-hidden='true' class='waitlist-join-badge'>You</span></li></ol></div><div class='waitlist-join-meta'><span class='waitlist-join-front'><svg aria-hidden='true' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><path d='M12.5 8h-9M7 4.5 3.5 8 7 11.5' /></svg> Front of the line </span><span class='waitlist-join-count'></span></div><div class='waitlist-join-slot'><!--$--><div class='waitlist-join-share'><span class='waitlist-join-link'></span><button class='button waitlist-join-copy' type='button'><span class='waitlist-join-icons' aria-hidden='true'><svg class='waitlist-join-icon waitlist-join-icon--copy' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' viewBox='0 0 16 16'><rect height='8' rx='1.5' width='8' x='5.5' y='5.5' /><path d='M10.5 3.5v-.5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h.5' /></svg><svg class='waitlist-join-icon waitlist-join-icon--check' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' viewBox='0 0 16 16'><path d='m3.5 8.5 3 3 6-7' /></svg></span></button></div></div><p aria-live='polite' class='waitlist-join-note'>`);
+const template_1iptpxts = template_u1.template(`<li class='waitlist-join-person'><span class='waitlist-join-face'>`);
+const template_1iptpxtw = template_u1.template(`<!--$--><button class='button waitlist-join-submit' type='submit'><span>Join</span><span class='waitlist-join-live'>`);
+class ReactiveObject_1iptpxt0 extends reactivity_u0.ReactiveObject {
+    #value;
+    constructor(_p0) {
+        super(null);
+        this.#value = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get value() {
+        return reactivity_u0.read(this.#value);
+    }
+    set value(_v0) {
+        reactivity_u0.write(this.#value, _v0);
+    }
+}
+class ReactiveObject_1iptpxt1 extends reactivity_u0.ReactiveObject {
+    #bumped = this[reactivity_u0.SIGNAL](false);
+    #copied = this[reactivity_u0.SIGNAL](false);
+    #email = this[reactivity_u0.SIGNAL]('');
+    #status;
+    #touched = this[reactivity_u0.SIGNAL](false);
+    constructor(_p0) {
+        super(null);
+        this.#status = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get bumped() {
+        return reactivity_u0.read(this.#bumped);
+    }
+    set bumped(_v0) {
+        reactivity_u0.write(this.#bumped, _v0);
+    }
+    get copied() {
+        return reactivity_u0.read(this.#copied);
+    }
+    set copied(_v1) {
+        reactivity_u0.write(this.#copied, _v1);
+    }
+    get email() {
+        return reactivity_u0.read(this.#email);
+    }
+    set email(_v2) {
+        reactivity_u0.write(this.#email, _v2);
+    }
+    get status() {
+        return reactivity_u0.read(this.#status);
+    }
+    set status(_v3) {
+        reactivity_u0.write(this.#status, _v3);
+    }
+    get touched() {
+        return reactivity_u0.read(this.#touched);
+    }
+    set touched(_v4) {
+        reactivity_u0.write(this.#touched, _v4);
+    }
+}
+class ReactiveObject_1iptpxt2 extends reactivity_u0.ReactiveObject {
+    #round = this[reactivity_u0.SIGNAL](0);
+    constructor() {
+        super(null);
+    }
+    get round() {
+        return reactivity_u0.read(this.#round);
+    }
+    set round(_v0) {
+        reactivity_u0.write(this.#round, _v0);
+    }
+}
+const DROP = {
+    duration: 595,
+    easing: 'linear(0, 0.051, 0.165, 0.302, 0.452, 0.593, 0.717, 0.819, 0.896, 0.956, 0.997, 1.024, 1.038, 1.044, 1.044, 1.04, 1.035, 1.028, 1.022, 1.016, 1.011, 1.006, 1.003, 1.001, 1)'
+};
+const EASE_OUT = 'cubic-bezier(0.23, 1, 0.32, 1)';
+const JOIN_MS = 650;
+const ME = 'me';
+const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
+const SHUFFLE = {
+    duration: 749,
+    easing: 'linear(0, 0.058, 0.181, 0.331, 0.474, 0.602, 0.71, 0.796, 0.863, 0.912, 0.947, 0.97, 0.987, 0.996, 1.002, 1.005, 1.006, 1.006, 1.005, 1.004, 1.003, 1.003, 1.002, 1.001, 1)'
+};
+const SLOTS = 9;
+const WAITLIST_JOIN_INPUT = Symbol.for('@esportsplus/ui/waitlist-join.input');
+function face(person) {
+    if (person.avatar) {
+        return (() => {
+            let root_1iptpxt3 = template_1iptpxt4(), element_1iptpxt5 = root_1iptpxt3.firstChild;
+            template_u1.setProperty(element_1iptpxt5, 'src', person.avatar);
+            return root_1iptpxt3;
+        })();
+    }
+    return template_1iptpxt6();
+}
+function format(value) {
+    return value.toLocaleString('en-US');
+}
+function problem(raw) {
+    let email = raw.trim();
+    if (!email) {
+        return 'Enter your email to join.';
+    }
+    if (/\s/.test(email)) {
+        return 'Emails cannot contain spaces.';
+    }
+    let at = email.lastIndexOf('@');
+    if (at === -1) {
+        return 'Add an @ and a domain, like sam@studio.com.';
+    }
+    if (at === 0) {
+        return 'Add your name before the @.';
+    }
+    let domain = email.slice(at + 1);
+    if (!domain) {
+        return 'Add the domain after the @, like gmail.com.';
+    }
+    if (!/\.[^.]{2,}$/.test(domain)) {
+        return `Finish the domain, like @${domain.replace(/\.+$/, '')}.com.`;
+    }
+    return '';
+}
+function referral(email, base) {
+    let hash = 0, local = email.split('@')[0].toLowerCase().replace(/[^a-z0-9]/g, '');
+    for (let char of email) {
+        hash = (hash * 31 + char.charCodeAt(0)) >>> 0;
+    }
+    return `${base}/${local.slice(0, 12) || 'friend'}-${hash.toString(36).slice(0, 3)}`;
+}
+function swap(container, text) {
+    let current = container.querySelector(':scope > :not([data-exiting])');
+    if (current?.textContent === text) {
+        return;
+    }
+    let next = document.createElement('span'), reduce = matchMedia(REDUCED_MOTION).matches;
+    next.className = 'waitlist-join-swap';
+    next.textContent = text;
+    container.append(next);
+    if (!current) {
+        return;
+    }
+    let previous = current;
+    previous.dataset.exiting = '';
+    previous.animate(reduce ? { opacity: [1, 0] } : { filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0], translate: ['0 0', '0 -2px'] }, { duration: 120, easing: EASE_OUT, fill: 'forwards' }).onfinish = () => previous.remove();
+    next.animate(reduce ? { opacity: [0, 1] } : { filter: ['blur(4px)', 'blur(0px)'], opacity: [0, 1], translate: ['0 4px', '0 0'] }, { duration: 240, easing: EASE_OUT });
+}
+function template({ linkBase = 'parcel.so/i', onjoin, product = 'Parcel', queue, skip = 5, state, waiting, ...attributes }) {
+    let copyButton, defaults = this?.attributes, disposers = [], emailInput, hop = Math.min(skip, SLOTS - 2), id = `waitlist-join-${Math.random().toString(36).slice(2, 8)}`, people = new Map(), position = new ReactiveObject_1iptpxt0(waiting + 1), s = state || new ReactiveObject_1iptpxt1('idle'), strip, tail = queue.slice(-SLOTS), timers = [], ui = new ReactiveObject_1iptpxt2();
+    function arrange(animate) {
+        if (!strip) {
+            return;
+        }
+        let before = new Map(), ids = line(), reduce = !animate || matchMedia(REDUCED_MOTION).matches;
+        for (let [, element] of people) {
+            if (!element.hidden && !element.hasAttribute('data-exiting')) {
+                before.set(element, element.getBoundingClientRect().left);
+            }
+        }
+        for (let [key, element] of people) {
+            if (element.hidden || ids.includes(key) || element.hasAttribute('data-exiting')) {
+                continue;
+            }
+            if (reduce && !animate) {
+                element.hidden = true;
+                continue;
+            }
+            element.dataset.exiting = '';
+            element.style.left = `${element.offsetLeft}px`;
+            element.style.top = `${element.offsetTop}px`;
+            element.animate(reduce ? { opacity: [1, 0] } : { filter: ['blur(0px)', 'blur(2px)'], opacity: [1, 0], transform: ['none', 'translateX(-12px)'] }, { duration: 200, easing: EASE_OUT, fill: 'forwards' }).onfinish = function () {
+                delete element.dataset.exiting;
+                element.hidden = true;
+                element.style.left = '';
+                element.style.top = '';
+                this.cancel();
+            };
+        }
+        for (let i = 0, n = ids.length; i < n; i++) {
+            let element = people.get(ids[i]);
+            for (let animation of element.getAnimations()) {
+                animation.cancel();
+            }
+            delete element.dataset.exiting;
+            element.hidden = false;
+            element.style.left = '';
+            element.style.top = '';
+            strip.append(element);
+        }
+        if (!animate) {
+            return;
+        }
+        for (let i = 0, n = ids.length; i < n; i++) {
+            let element = people.get(ids[i]), from = before.get(element);
+            if (from === undefined) {
+                element.animate(reduce ? { opacity: [0, 1] } : { filter: ['blur(4px)', 'blur(0px)'], opacity: [0, 1], transform: ['translateY(-20px)', 'none'] }, reduce ? { duration: 200, easing: EASE_OUT } : DROP);
+                continue;
+            }
+            let dx = from - element.getBoundingClientRect().left;
+            if (dx && !reduce) {
+                element.animate({ translate: [`${dx}px 0`, '0 0'] }, SHUFFLE);
+            }
+        }
+    }
+    function bump() {
+        if (s.bumped) {
+            return;
+        }
+        s.bumped = true;
+        position.value = waiting + 1 - skip;
+        arrange(true);
+        if (!matchMedia(REDUCED_MOTION).matches) {
+            people.get(ME)?.animate({ transform: ['translateY(0)', 'translateY(-10px)', 'translateY(0)'] }, { duration: 450, easing: 'cubic-bezier(0.77, 0, 0.175, 1)' });
+        }
+    }
+    function copy() {
+        void clipboard.write(`https://${link()}`);
+        s.copied = true;
+        bump();
+        timers.push(setTimeout(() => {
+            s.copied = false;
+        }, 1800));
+    }
+    function error() {
+        return s.touched ? problem(s.email) : '';
+    }
+    function join() {
+        s.touched = true;
+        if (problem(s.email) || s.status !== 'idle') {
+            emailInput?.focus();
+            return;
+        }
+        s.status = 'joining';
+        timers.push(setTimeout(() => {
+            position.value = waiting + 1;
+            s.status = 'joined';
+            ui.round++;
+            arrange(true);
+            onjoin?.(s.email.trim());
+            timers.push(setTimeout(() => copyButton?.focus(), 50));
+        }, JOIN_MS));
+    }
+    function line() {
+        if (s.status !== 'joined') {
+            return tail.map((person) => person.id);
+        }
+        let rest = queue.slice(-(SLOTS - 1)).map((person) => person.id);
+        rest.splice(rest.length - (s.bumped ? hop : 0), 0, ME);
+        return rest;
+    }
+    function link() {
+        return referral(s.email.trim(), linkBase);
+    }
+    function note() {
+        let message = error();
+        if (message) {
+            return message;
+        }
+        if (s.status !== 'joined') {
+            return 'One email when your invite is ready. Nothing else.';
+        }
+        return s.bumped
+            ? `You jumped ${skip} spots. Every friend who joins moves you up again.`
+            : `Skip ahead by sharing: your link moves you up ${skip} spots.`;
+    }
+    function register(key) {
+        return (element) => {
+            people.set(key, element);
+        };
+    }
+    function reset() {
+        s.bumped = false;
+        s.copied = false;
+        s.email = '';
+        s.status = 'idle';
+        s.touched = false;
+        arrange(true);
+        timers.push(setTimeout(() => emailInput?.focus(), 50));
+    }
+    return (() => {
+        let root_1iptpxt7 = template_1iptpxt8(), element_1iptpxt9 = root_1iptpxt7.firstChild, element_1iptpxta = element_1iptpxt9.firstElementChild.firstElementChild.firstChild, element_1iptpxtb = element_1iptpxt9.firstElementChild.firstElementChild.nextElementSibling, element_1iptpxtc = element_1iptpxt9.firstElementChild.nextElementSibling, element_1iptpxtd = element_1iptpxtc.firstElementChild, element_1iptpxte = element_1iptpxtd.nextElementSibling, element_1iptpxtf = element_1iptpxte.firstElementChild, element_1iptpxtg = element_1iptpxtf.nextElementSibling, element_1iptpxth = element_1iptpxtc.nextElementSibling, element_1iptpxti = element_1iptpxth.nextElementSibling.firstElementChild, element_1iptpxtj = element_1iptpxti.firstChild, element_1iptpxtk = element_1iptpxti.firstElementChild, element_1iptpxtl = element_1iptpxtk.firstElementChild, element_1iptpxtm = element_1iptpxth.nextElementSibling.nextElementSibling.nextElementSibling.firstChild, element_1iptpxtn = element_1iptpxth.nextElementSibling.nextElementSibling.nextElementSibling.firstElementChild, element_1iptpxto = element_1iptpxtn.firstElementChild, element_1iptpxtp = element_1iptpxto.nextElementSibling, element_1iptpxtq = element_1iptpxth.nextElementSibling.nextElementSibling.nextElementSibling.nextElementSibling;
+        template_u1.setProperty(element_1iptpxt9, 'aria-labelledby', template_u1.interpolate([(id), "-title"]));
+        template_u1.setProperties(element_1iptpxt9, defaults);
+        template_u1.setProperties(element_1iptpxt9, attributes);
+        template_u1.setList(element_1iptpxt9, 'class', () => s.status === 'joined' && '--joined');
+        template_u1.onconnect(element_1iptpxt9, (element) => {
+            let count = element.querySelector('.waitlist-join-count'), hint = element.querySelector('.waitlist-join-note');
+            emailInput = element.querySelector('.waitlist-join-input') ?? undefined;
+            if (count) {
+                disposers.push(effect(() => swap(count, s.status === 'joined' ? `${format(position.value - 1)} ahead of you` : `${format(waiting)} waiting`)));
+            }
+            if (hint) {
+                disposers.push(effect(() => swap(hint, note())));
+            }
+        });
+        template_u1.ondisconnect(element_1iptpxt9, () => {
+            for (let i = 0, n = disposers.length; i < n; i++) {
+                disposers[i]();
+            }
+            for (let i = 0, n = timers.length; i < n; i++) {
+                clearTimeout(timers[i]);
+            }
+            disposers.length = 0;
+            timers.length = 0;
+        });
+        template_u1.slot(element_1iptpxta, product);
+        template_u1.setList(element_1iptpxtb, 'class', () => s.status === 'joined' && '--active');
+        template_u1.setProperty(element_1iptpxtb, 'inert', () => s.status !== 'joined');
+        template_u1.delegate(element_1iptpxtb, 'click', reset);
+        template_u1.setProperty(element_1iptpxtc, 'id', template_u1.interpolate([(id), "-title"]));
+        template_u1.setList(element_1iptpxtd, 'class', () => s.status !== 'joined' && '--active');
+        template_u1.setList(element_1iptpxte, 'class', () => s.status === 'joined' && '--active');
+        new template_u1.EffectSlot(element_1iptpxtf, () => ui.round > 0 && untrack(() => counter({
+            class: 'counter--ticker waitlist-join-roll',
+            currency: 'IGNORE',
+            decimals: 0,
+            delay: 16,
+            state: position,
+            value: position.value
+        })), 2);
+        new template_u1.EffectSlot(element_1iptpxtg, () => `You’re #${format(position.value)} in line`, 1);
+        new template_u1.EffectSlot(element_1iptpxth, () => s.status === 'joined'
+            ? 'The next 200 people get in on Friday. You will hear from us the moment you do.'
+            : `${product} lets in 200 new people every Friday. Save your spot in line.`, 1);
+        template_u1.setProperty(element_1iptpxti, 'aria-label', () => s.status === 'joined' ? `Queue, you are number ${format(position.value)}` : `Queue, ${format(waiting)} people waiting`);
+        template_u1.onconnect(element_1iptpxti, (element) => {
+            strip = element;
+            arrange(false);
+        });
+        template_u1.slot(element_1iptpxtj, tail.map((person) => {
+            let root_1iptpxtr = template_1iptpxts(), element_1iptpxtt = root_1iptpxtr.firstChild, element_1iptpxtu = element_1iptpxtt.firstElementChild;
+            template_u1.setProperty(element_1iptpxtt, 'aria-label', person.name);
+            template_u1.onrender(element_1iptpxtt, register(person.id));
+            template_u1.setProperty(element_1iptpxtu, 'title', person.name);
+            template_u1.slot(element_1iptpxtu, face(person), 1);
+            return root_1iptpxtr;
+        }));
+        template_u1.onrender(element_1iptpxtk, register(ME));
+        new template_u1.EffectSlot(element_1iptpxtl, () => s.email.trim()[0]?.toUpperCase() ?? 'Y', 1);
+        template_u1.slot(element_1iptpxtm, form.action({
+            action: () => {
+                join();
+                return { errors: [] };
+            },
+            class: ['waitlist-join-form', () => s.status !== 'joined' && '--active'],
+            inert: () => s.status === 'joined',
+            novalidate: true
+        }, (() => {
+            let root_1iptpxtv = template_1iptpxtw(), element_1iptpxtx = root_1iptpxtv.firstChild, element_1iptpxty = element_1iptpxtx.nextSibling, element_1iptpxtz = element_1iptpxty.firstElementChild.nextElementSibling;
+            template_u1.slot(element_1iptpxtx, input({
+                'aria-describedby': `${id}-note`,
+                'aria-invalid': () => String(!!error()),
+                'aria-label': 'Email',
+                autocapitalize: 'none',
+                autocomplete: 'email',
+                class: ['waitlist-join-input', () => !!error() && '--error'],
+                disabled: () => s.status === 'joining',
+                inputmode: 'email',
+                name: 'email',
+                onblur: () => {
+                    if (s.email.trim()) {
+                        s.touched = true;
+                    }
+                },
+                oninput: (e) => {
+                    s.email = e.target.value;
+                },
+                placeholder: 'you@studio.com',
+                spellcheck: false,
+                type: 'email',
+                value: () => s.email,
+                ...defaults?.[WAITLIST_JOIN_INPUT],
+                ...attributes[WAITLIST_JOIN_INPUT]
+            }));
+            template_u1.setProperty(element_1iptpxty, 'aria-busy', () => s.status === 'joining' ? 'true' : 'false');
+            template_u1.setList(element_1iptpxty, 'class', () => s.status === 'joining' && 'button--processing');
+            new template_u1.EffectSlot(element_1iptpxtz, () => s.status === 'joining' ? 'Joining' : '', 1);
+            return root_1iptpxtv;
+        })()));
+        template_u1.setList(element_1iptpxtn, 'class', () => s.status === 'joined' && '--active');
+        template_u1.setProperty(element_1iptpxtn, 'inert', () => s.status !== 'joined');
+        new template_u1.EffectSlot(element_1iptpxto, link, 1);
+        template_u1.setProperty(element_1iptpxtp, 'aria-describedby', template_u1.interpolate([(id), "-note"]));
+        template_u1.setList(element_1iptpxtp, 'class', () => s.copied && '--copied');
+        template_u1.delegate(element_1iptpxtp, 'click', copy);
+        template_u1.onrender(element_1iptpxtp, (element) => {
+            copyButton = element;
+        });
+        new template_u1.EffectSlot(element_1iptpxtp, () => s.copied ? 'Copied' : 'Copy link', 2);
+        template_u1.setProperty(element_1iptpxtq, 'id', template_u1.interpolate([(id), "-note"]));
+        template_u1.setList(element_1iptpxtq, 'class', () => !!error() && '--error');
+        return root_1iptpxt7;
+    })();
+}
+export default Object.assign(template, { input: WAITLIST_JOIN_INPUT });

package/build/components/waitlist-join/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.waitlist-join{--accent:var(--color-text-500);--accent-contrast:var(--color-white-300);--background:var(--color-white-300);--box-shadow:0 0 0 1px oklch(from var(--color-black-300) l c h / .06), 0 1px 2px oklch(from var(--color-black-300) l c h / .06), 0 6px 16px -6px oklch(from var(--color-black-300) l c h / .12);--color-danger:var(--color-red-500);--color-muted:var(--color-text-300);--ease:cubic-bezier(.23, 1, .32, 1);--face-background:oklch(97% 0 0);--face-ring:oklch(from var(--color-black-300) l c h / .1);--face-silhouette:oklch(84% 0 0);--face-size:36px;--focus-ring:oklch(from var(--color-text-500) l c h / .38);--font-size:calc(var(--font-size-400) * .875);--font-size-small:calc(var(--font-size-400) * .8125);--foreground:var(--color-text-500);--icon-duration:.446s;--icon-timing-function:linear(0, .118, .319, .509, .657, .769, .848, .901, .937, .96, .975, .984, .99, .994, 1);--radius:20px;--surface:var(--color-grey-400);--width:min(440px, 100%);background:var(--background);border-radius:var(--radius);box-shadow:var(--box-shadow);color:var(--foreground);font-size:var(--font-size);width:var(--width);padding:24px;display:block}.waitlist-join-badge{background:var(--background);box-shadow:0 1px 2px oklch(from var(--color-black-300) l c h/.15);color:var(--foreground);font-size:12px;font-weight:var(--font-weight-500);border-radius:999px;padding:0 6px;line-height:16px;position:absolute;bottom:-8px}.waitlist-join-copy{--background-default:var(--accent);--color-default:var(--accent-contrast);--padding-horizontal:12px;--padding-vertical:0px;font-size:var(--font-size-small);font-weight:var(--font-weight-500);border-radius:9px;flex-shrink:0;gap:6px;height:36px}.waitlist-join-copy,.waitlist-join-reset,.waitlist-join-submit{outline:0 solid var(--focus-ring);outline-offset:2px}.waitlist-join-copy:focus-visible,.waitlist-join-reset:focus-visible,.waitlist-join-submit:focus-visible{outline-width:2px}.waitlist-join-copy:active,.waitlist-join-reset:active,.waitlist-join-submit:active{scale:.96}.waitlist-join-count{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;display:block;position:relative}.waitlist-join-description{color:var(--color-muted);text-wrap:pretty;min-height:40px;margin-top:8px}.waitlist-join-face{background:var(--face-background);box-shadow:inset 0 0 0 1px var(--face-ring);height:var(--face-size);width:var(--face-size);border-radius:50%;justify-content:center;align-items:flex-end;display:flex;overflow:hidden}.waitlist-join-face-image{fill:var(--face-silhouette);width:100%;height:100%}.waitlist-join-form,.waitlist-join-share,.waitlist-join-heading,.waitlist-join-reset{filter:blur(2px);opacity:0;pointer-events:none;transition:filter .12s var(--ease), opacity .12s var(--ease), scale .15s ease-out, translate .12s var(--ease), visibility 0s .12s;visibility:hidden;translate:0 -2px}.waitlist-join-form.--active,.waitlist-join-share.--active,.waitlist-join-heading.--active,.waitlist-join-reset.--active{filter:none;opacity:1;pointer-events:auto;transition:filter .24s var(--ease), opacity .24s var(--ease), scale .15s ease-out, translate .24s var(--ease);visibility:visible;translate:0}.waitlist-join-form{--gap-horizontal:8px;flex-wrap:nowrap;margin:0;position:absolute;inset:0}.waitlist-join-front{align-items:center;gap:4px;display:flex}.waitlist-join-front svg{width:14px;height:14px}.waitlist-join-heading{white-space:nowrap;position:absolute;inset:0}.waitlist-join-icon{filter:blur(4px);opacity:0;height:14px;transition:filter var(--icon-duration) var(--icon-timing-function), opacity var(--icon-duration) var(--icon-timing-function), scale var(--icon-duration) var(--icon-timing-function);width:14px;position:absolute;inset:0;scale:.25}.waitlist-join-copy:not(.--copied) .waitlist-join-icon--copy,.waitlist-join-copy.--copied .waitlist-join-icon--check{filter:none;opacity:1;scale:1}.waitlist-join-icons{flex-shrink:0;width:14px;height:14px;position:relative}.waitlist-join-input{--background-default:var(--surface);--color-default:var(--foreground);--font-size:calc(var(--font-size-400) * .9375);--padding-horizontal:14px;--padding-vertical:0px;box-shadow:none;outline:0 solid var(--focus-ring);border-radius:12px;flex:1 1 0;height:44px;min-height:0;transition:box-shadow .15s ease-out}.waitlist-join-input::placeholder{color:var(--color-muted)}.waitlist-join-input:focus-visible{outline-width:2px}.waitlist-join-input.--error{box-shadow:inset 0 0 0 1px var(--color-danger)}.waitlist-join-line{justify-content:flex-end;gap:8px;margin:-8px 0;padding:8px 0;list-style:none;display:flex;position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#0000,#000 56px);mask-image:linear-gradient(90deg,#0000,#000 56px)}.waitlist-join-link{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--font-size-small);text-overflow:ellipsis;white-space:nowrap;flex:1 1 0;min-width:0;overflow:hidden}.waitlist-join-live{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.waitlist-join-me{background:var(--accent);color:var(--accent-contrast);font-weight:var(--font-weight-600);height:var(--face-size);width:var(--face-size);border-radius:50%;justify-content:center;align-items:center;display:flex}.waitlist-join-meta{color:var(--color-muted);font-size:var(--font-size-small);justify-content:space-between;align-items:center;margin-top:8px;display:flex}.waitlist-join-note{color:var(--color-muted);font-size:var(--font-size-small);height:40px;margin-top:8px;line-height:20px;transition:color .15s ease-out;position:relative}.waitlist-join-note.--error{color:var(--color-danger)}@media (width>=640px){.waitlist-join-note{height:20px}}.waitlist-join-person{width:var(--face-size);flex-shrink:0;justify-content:center;display:flex;position:relative}.waitlist-join-person[data-exiting]{pointer-events:none;position:absolute}.waitlist-join-person[hidden]{display:none}.waitlist-join-person--me{z-index:1}.waitlist-join-product{color:var(--color-muted);font-size:var(--font-size-small);width:auto}.waitlist-join-queue{background:var(--surface);border-radius:16px;margin-top:20px;padding:14px}.waitlist-join-reset{--background-hover:var(--surface);--color-default:var(--color-muted);--color-hover:var(--foreground);--padding-horizontal:8px;--padding-vertical:0px;font-size:var(--font-size-small);outline-offset:0;border-radius:8px;height:32px;margin-right:-8px}.waitlist-join-roll{--font-weight:var(--font-weight-600);--stagger:80ms;--timing-function:var(--ease);--transition-duration:.7s;display:inline-flex}.waitlist-join-share{background:var(--surface);border-radius:12px;align-items:center;gap:8px;padding:0 4px 0 14px;display:flex;position:absolute;inset:0}.waitlist-join-slot{height:44px;margin-top:20px;position:relative}.waitlist-join-spot{display:inline-flex}.waitlist-join-submit{--background-default:var(--accent);--color-default:var(--accent-contrast);--padding-horizontal:0px;--padding-vertical:0px;font-size:var(--font-size);font-weight:var(--font-weight-500);border-radius:12px;flex:0 0 84px;height:44px}.waitlist-join-submit.button--processing{--border-width:var(--border-width-500)}.waitlist-join-swap{text-wrap:pretty;display:block}.waitlist-join-swap[data-exiting]{position:absolute;inset:0 0 auto}.waitlist-join-title{color:var(--foreground);font-size:calc(var(--font-size-400) * 1.5);font-weight:var(--font-weight-600);height:32px;margin-top:8px;line-height:32px;position:relative}.waitlist-join-top{justify-content:space-between;align-items:center;height:24px;display:flex}@media (prefers-reduced-motion:reduce){.waitlist-join-form,.waitlist-join-heading,.waitlist-join-icon,.waitlist-join-reset,.waitlist-join-share{filter:none;translate:0;scale:1}}}
+/*$vite$:1*/