@esportsplus/ui 0.54.0 → 0.56.2

package/build/components/command/index.js

@@ -0,0 +1,188 @@
+import * as template_u1 from '@esportsplus/template';
+import { component } from '@esportsplus/template';
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { effect, root } from '@esportsplus/reactivity';
+import input from '../input/index.js';
+import modal from '../modal/index.js';
+import { COMMAND_INPUT, COMMAND_ITEM } from './constants.js';
+import './scss/index.scss';
+const template_1nmcshy2 = template_u1.template(`<a class='command-item' role='option'><span class='command-item-icon'></span><span class='command-item-label'>`);
+const template_1nmcshy7 = template_u1.template(`<label class='command-search'><span class='command-search-icon' aria-hidden='true'></span></label><div class='command-results' role='listbox'><div class='command-list'><span class='command-highlight' aria-hidden='true'></span></div></div><div class='command-footer' aria-hidden='true'><kbd>↑</kbd><kbd>↓</kbd><span>Navigate</span><kbd>↵</kbd><span>Select</span><kbd>esc</kbd><span>Close`);
+const template_1nmcshyd = template_u1.template(`<div class='command-empty'> No results for <b>“<!--$-->”`);
+const template_1nmcshyg = template_u1.template(`<div class='command-group' role='group'><div class='command-group-label' aria-hidden='true'>`);
+const template_1nmcshyk = template_u1.template(`<!--$--><mark class='command-match'></mark><!--$-->`);
+class ReactiveObject_1nmcshy0 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #query = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get query() {
+        return reactivity_u0.read(this.#query);
+    }
+    set query(_v1) {
+        reactivity_u0.write(this.#query, _v1);
+    }
+}
+let dialog = modal.bind({ attributes: { class: 'card command' } }), uid = 0;
+function filter(sections, needle) {
+    if (!needle) {
+        return sections;
+    }
+    let filtered = [];
+    for (let i = 0, n = sections.length; i < n; i++) {
+        let rows = sections[i].rows.filter(({ item }) => item.label.toLowerCase().includes(needle));
+        if (rows.length) {
+            filtered.push({ label: sections[i].label, rows });
+        }
+    }
+    return filtered;
+}
+function highlight(label, needle) {
+    let start = needle ? label.toLowerCase().indexOf(needle) : -1;
+    if (start === -1) {
+        return label;
+    }
+    let end = start + needle.length;
+    return (() => {
+        let root_1nmcshyj = template_1nmcshyk(), element_1nmcshyl = root_1nmcshyj.firstChild, element_1nmcshym = element_1nmcshyl.nextSibling, element_1nmcshyn = element_1nmcshym.nextSibling;
+        template_u1.slot(element_1nmcshyl, label.slice(0, start));
+        template_u1.slot(element_1nmcshym, label.slice(start, end), 1);
+        template_u1.slot(element_1nmcshyn, label.slice(end));
+        return root_1nmcshyj;
+    })();
+}
+export default component(function ({ groups, placeholder = 'Search…', state = new ReactiveObject_1nmcshy0(), ...attributes }) {
+    let defaults = this?.attributes, id = `command-${++uid}`, index = 0, sections = groups.map(({ items, label }) => ({
+        label,
+        rows: items.map((item) => ({ index: index++, item }))
+    }));
+    function palette() {
+        let highlighted = reactivity_u0.signal(-1), needle = reactivity_u0.computed(() => state.query.trim().toLowerCase()), visible = reactivity_u0.computed(() => filter(sections, reactivity_u0.read(needle))), rows = reactivity_u0.computed(() => reactivity_u0.read(visible).flatMap((section) => section.rows)), active = reactivity_u0.computed(() => {
+            let list = reactivity_u0.read(rows), target = reactivity_u0.read(highlighted);
+            for (let i = 0, n = list.length; i < n; i++) {
+                if (list[i].index === target) {
+                    return target;
+                }
+            }
+            return list.length ? list[0].index : -1;
+        });
+        effect(() => {
+            if (!state.active) {
+                state.query = '';
+                reactivity_u0.write(highlighted, -1);
+            }
+        });
+        function move(step) {
+            let current = reactivity_u0.read(active), list = reactivity_u0.read(rows), n = list.length;
+            if (!n) {
+                return;
+            }
+            let next = list[(list.findIndex((row) => row.index === current) + step + n) % n].index;
+            reactivity_u0.write(highlighted, next);
+            document.getElementById(`${id}-${next}`)?.scrollIntoView({ block: 'nearest' });
+        }
+        function position() {
+            let current = reactivity_u0.read(active), r = 0, sections = reactivity_u0.read(visible);
+            for (let g = 0, n = sections.length; g < n; g++) {
+                let items = sections[g].rows;
+                for (let i = 0, m = items.length; i < m; i++, r++) {
+                    if (items[i].index === current) {
+                        return `--group: ${g + 1}; --row: ${r};`;
+                    }
+                }
+            }
+            return '';
+        }
+        function row({ index, item: { icon, label, onclick, ...item } }) {
+            return (() => {
+                let root_1nmcshy1 = template_1nmcshy2(), element_1nmcshy3 = root_1nmcshy1.firstChild, element_1nmcshy4 = element_1nmcshy3.firstElementChild, element_1nmcshy5 = element_1nmcshy4.nextElementSibling;
+                template_u1.setProperty(element_1nmcshy3, 'id', template_u1.interpolate([(id), "-", (index)]));
+                template_u1.setProperties(element_1nmcshy3, defaults?.[COMMAND_ITEM]);
+                template_u1.setProperties(element_1nmcshy3, attributes[COMMAND_ITEM]);
+                template_u1.setProperties(element_1nmcshy3, item);
+                template_u1.setProperty(element_1nmcshy3, 'aria-selected', () => reactivity_u0.read(active) === index ? 'true' : 'false');
+                template_u1.setList(element_1nmcshy3, 'class', () => reactivity_u0.read(active) === index && '--active');
+                template_u1.delegate(element_1nmcshy3, 'click', function (event) {
+                    if (typeof onclick === 'function') {
+                        onclick.call(this, event);
+                    }
+                    state.active = false;
+                });
+                template_u1.delegate(element_1nmcshy3, 'mousemove', () => {
+                    reactivity_u0.write(highlighted, index);
+                });
+                template_u1.slot(element_1nmcshy4, icon ?? '→', 1);
+                template_u1.slot(element_1nmcshy5, highlight(label, reactivity_u0.read(needle)), 1);
+                return root_1nmcshy1;
+            })();
+        }
+        return dialog({
+            ...defaults,
+            ...attributes,
+            onkeydown: (event) => {
+                if (event.isComposing) {
+                    return;
+                }
+                if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    move(event.key === 'ArrowDown' ? 1 : -1);
+                }
+                else if (event.key === 'Enter') {
+                    event.preventDefault();
+                    document.getElementById(`${id}-${reactivity_u0.read(active)}`)?.click();
+                }
+            },
+            state
+        }, (() => {
+            let root_1nmcshy6 = template_1nmcshy7(), element_1nmcshy8 = root_1nmcshy6.firstChild, element_1nmcshy9 = element_1nmcshy8.nextSibling, element_1nmcshya = element_1nmcshy9.firstElementChild, element_1nmcshyb = element_1nmcshya.firstElementChild;
+            template_u1.slot(element_1nmcshy8, input({
+                'aria-activedescendant': () => reactivity_u0.read(active) === -1 ? '' : `${id}-${reactivity_u0.read(active)}`,
+                'aria-autocomplete': 'list',
+                'aria-controls': `${id}-listbox`,
+                'aria-expanded': 'true',
+                autocomplete: 'off',
+                autofocus: true,
+                class: 'command-input',
+                oninput: (event) => {
+                    state.query = event.target.value;
+                },
+                placeholder,
+                role: 'combobox',
+                spellcheck: false,
+                type: 'text',
+                value: () => state.query,
+                ...defaults?.[COMMAND_INPUT],
+                ...attributes[COMMAND_INPUT]
+            }), 2);
+            template_u1.setProperty(element_1nmcshy9, 'id', template_u1.interpolate([(id), "-listbox"]));
+            template_u1.on(element_1nmcshya, 'mouseleave', () => { reactivity_u0.write(highlighted, -1); });
+            template_u1.setList(element_1nmcshyb, 'class', () => reactivity_u0.read(active) !== -1 && '--active');
+            template_u1.setList(element_1nmcshyb, 'style', position);
+            new template_u1.EffectSlot(element_1nmcshya, () => {
+                if (!reactivity_u0.read(visible).length) {
+                    return (() => {
+                        let root_1nmcshyc = template_1nmcshyd(), element_1nmcshye = root_1nmcshyc.firstChild.firstElementChild.firstChild.nextSibling;
+                        template_u1.slot(element_1nmcshye, state.query);
+                        return root_1nmcshyc;
+                    })();
+                }
+                return reactivity_u0.read(visible).map((section) => {
+                    let root_1nmcshyf = template_1nmcshyg(), element_1nmcshyh = root_1nmcshyf.firstChild, element_1nmcshyi = element_1nmcshyh.firstElementChild;
+                    template_u1.setProperty(element_1nmcshyh, 'aria-label', section.label);
+                    template_u1.slot(element_1nmcshyi, section.label, 1);
+                    template_u1.slot(element_1nmcshyh, section.rows.map(row), 2);
+                    return root_1nmcshyf;
+                });
+            }, 2);
+            return root_1nmcshy6;
+        })());
+    }
+    return root((_dispose) => palette());
+}, { input: COMMAND_INPUT, item: COMMAND_ITEM });

package/build/components/command/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.card{--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--padding-horizontal:0px;--padding-vertical:0px;--width:auto}.card.--active{--background:var(--background-active);--border-color:var(--border-color-active)}.card:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover)}.card:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed)}.card{background:var(--background);border-radius:var(--border-radius);padding-block:max(0px, var(--padding-vertical) - var(--border-width));padding-inline:max(0px, var(--padding-horizontal) - var(--border-width));transition:background var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function), max-height var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);width:var(--width);position:relative}.card:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration) var(--transition-timing-function), opacity var(--transition-duration) var(--transition-timing-function);z-index:-1;position:absolute;inset:0}.modal{--backdrop:color-mix(in srgb, var(--color-black-500) 64%, transparent);--margin-horizontal:0px;--margin-vertical:0px;--max-width:480px;--scale:1;--translateY:var(--margin-vertical)}.modal--alert{--backdrop:#0000001a;--blur:4px;--scale:.95;--transition-duration:.1s;--transition-timing-function:ease;--translateY:0px}.modal--blur{--backdrop:color-mix(in srgb, var(--color-black-500) 32%, transparent);--blur:8px}.modal--fade{--translateY:0px}.modal--scale{--scale:.92;--translateY:0px}.modal--sheet{--translateY:100%}.modal--spring{--scale:.8;--transition-timing-function:cubic-bezier(.34, 1.56, .64, 1);--translateY:0px}:where(dialog.modal){color:inherit;background:0 0;border:0;max-width:100%;max-height:100%;padding:0}dialog.modal{position:fixed}.modal{transition:opacity var(--transition-duration) var(--transition-timing-function), scale var(--transition-duration) var(--transition-timing-function), translate var(--transition-duration) var(--transition-timing-function);transform-origin:50%;width:min(var(--max-width), 100% - var(--margin-horizontal) * 2);margin:auto}.modal:not(.--active){opacity:0;pointer-events:none;scale:var(--scale);translate:0 var(--translateY)}.modal:not(.--active)::backdrop{opacity:0}.modal:not(.--active) input[type=password]{display:none}.modal::backdrop{background:var(--backdrop);transition:opacity var(--transition-duration) var(--transition-timing-function)}.modal--alert::backdrop,.modal--blur::backdrop{-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))}.modal--sheet{transform-origin:bottom;margin-block-end:0}.modal--sheet:not(.--active){opacity:1}.modal-frame{transition:opacity var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);transform-origin:50%}.modal-frame:not(.--active){display:none}@media (prefers-reduced-motion:reduce){.modal,.modal::backdrop{transition:none}}.command{--background-default:var(--color-white-400);--border-color-default:var(--color-border-300);--border-radius:var(--border-radius-700);--border-width:var(--border-width-400);--box-shadow-default:var(--box-shadow-600);--heading-height:36px;--height:408px;--max-width:600px;--padding:var(--size-200);--padding-horizontal:var(--padding);--padding-vertical:var(--padding);--row-height:36px}.command-footer{--background:var(--color-grey-300);--color:var(--color-text-300)}.command-highlight{--background:var(--color-grey-500)}.command-match{--background:oklch(from var(--color-yellow-300) l c h / .4)}.command-search{--background:oklch(from var(--color-grey-500) l c h / .5);--color:var(--color-text-300);--height:36px}.command{border:var(--border-width) solid var(--border-color);height:min(var(--height), 76svh);flex-direction:column;margin:12svh auto auto}.command[open]{display:flex}.command-empty{color:var(--color-text-300);font-size:var(--font-size-300);padding-top:var(--size-800);text-align:center}.command-empty b{color:var(--color-text-500);font-weight:var(--font-weight-500)}.command-footer{background:var(--background);border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;border-top:var(--border-width) solid var(--color-border-300);color:var(--color);font-size:var(--font-size-200);font-weight:var(--font-weight-500);align-items:center;gap:var(--size-200);margin:var(--size-200) calc(var(--border-width) - var(--padding)) calc(var(--border-width) - var(--padding));min-height:44px;padding:0 var(--size-400);flex:none;display:flex}.command-footer kbd{background:var(--color-white-300);border:var(--border-width) solid var(--color-border-400);border-radius:var(--border-radius-300);font-family:inherit;font-size:var(--font-size-200);min-width:22px;height:22px;padding:0 var(--size-100);justify-content:center;align-items:center;display:inline-flex}.command-footer span+kbd{margin-left:var(--size-300)}.command-group-label{color:var(--color-text-300);font-size:var(--font-size-200);font-weight:var(--font-weight-500);height:var(--heading-height);padding:0 var(--size-300) var(--size-100);align-items:flex-end;display:flex}.command-highlight{background:var(--background);border-radius:var(--border-radius-400);height:var(--row-height);opacity:0;pointer-events:none;transform:translateY(calc(var(--heading-height) * var(--group,1) + var(--row-height) * var(--row,0)));transition:opacity var(--transition-duration) var(--transition-timing-function), transform .28s cubic-bezier(.34, 1.24, .64, 1);position:absolute;top:0;left:0;right:0}.command-highlight.--active{opacity:1}.command-item{border-radius:var(--border-radius-400);color:oklch(from var(--color-text-500) l c h/.8);cursor:pointer;font-size:var(--font-size-300);font-weight:var(--font-weight-500);align-items:center;gap:var(--size-300);height:var(--row-height);padding:0 var(--size-300);transition:color var(--transition-duration) var(--transition-timing-function), transform var(--transition-duration) var(--transition-timing-function);z-index:1;text-decoration:none;display:flex;position:relative}.command-item:active{transform:scale(.985)}.command-item-icon{color:var(--color-text-300);flex:none;transition:transform .24s cubic-bezier(.34,1.24,.64,1);display:flex}.command-item-label{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.command-item.--active{color:var(--color-text-500)}.command-item.--active .command-item-icon{transform:translate(2px)}.command-list{position:relative}.command-match{background:var(--background);border-radius:var(--border-radius-100);color:inherit}.command-results{flex:auto;min-height:0;overflow:hidden auto}.command-search{background:var(--background);border:var(--border-width) solid var(--color-border-300);border-radius:var(--border-radius-400);cursor:text;align-items:center;gap:var(--size-300);height:var(--height);padding:0 var(--size-300);flex:none;display:flex}.command-search-icon{color:var(--color);flex:none;width:14px;height:14px;position:relative}.command-search-icon:after,.command-search-icon:before{content:"";position:absolute}.command-search-icon:after{transform-origin:bottom;background:currentColor;border-radius:1px;width:1.5px;height:5px;bottom:0;right:1px;transform:rotate(-45deg)}.command-search-icon:before{border:1.5px solid;border-radius:50%;width:10px;height:10px;top:0;left:0}.command-search>.input{--padding-horizontal:0px;--padding-vertical:0px;outline:none;font-family:inherit}.command-search>.input::placeholder{color:var(--color-text-300);opacity:.6}}
+/*$vite$:1*/

package/build/components/command-palette/index.d.ts

@@ -0,0 +1,51 @@
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import './scss/index.scss';
+type A = Attributes & {
+    [COMMAND_PALETTE_DIALOG]?: Dialog;
+    [COMMAND_PALETTE_INPUT]?: Field;
+    [COMMAND_PALETTE_OPTION]?: Attributes;
+    [COMMAND_PALETTE_TRIGGER]?: Attributes;
+    commands: Command[];
+    label?: Renderable<unknown>;
+    onrun?: (command: Command) => void;
+    placeholder?: string;
+    state?: State;
+};
+type Command = {
+    group: string;
+    icon?: Renderable<unknown>;
+    id: string;
+    label: string;
+    shortcut?: string[];
+};
+type Dialog = Attributes<HTMLDialogElement> & {
+    oncancel?: never;
+    onclick?: never;
+    onclose?: never;
+    onconnect?: never;
+    ondisconnect?: never;
+};
+type Field = Attributes & {
+    onfocusin?: never;
+    onfocusout?: never;
+    onrender?: never;
+};
+type State = {
+    active: boolean;
+    index: number;
+    query: string;
+};
+declare const COMMAND_PALETTE_DIALOG: unique symbol;
+declare const COMMAND_PALETTE_INPUT: unique symbol;
+declare const COMMAND_PALETTE_OPTION: unique symbol;
+declare const COMMAND_PALETTE_TRIGGER: unique symbol;
+declare const _default: ((this: {
+    attributes?: A;
+} | void, { commands, label, onrun, placeholder, state, ...attributes }: A) => DocumentFragment | Text) & {
+    readonly dialog: typeof COMMAND_PALETTE_DIALOG;
+    readonly input: typeof COMMAND_PALETTE_INPUT;
+    readonly option: typeof COMMAND_PALETTE_OPTION;
+    readonly trigger: typeof COMMAND_PALETTE_TRIGGER;
+};
+export default _default;
+export type { Command, State };

package/build/components/command-palette/index.js

@@ -0,0 +1,319 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import * as template_u1 from '@esportsplus/template';
+import input from '../input/index.js';
+import modal from '../modal/index.js';
+import './scss/index.scss';
+const template_0gex7i02 = template_u1.template(`<span class='command-palette-label'>`);
+const template_0gex7i05 = template_u1.template(`<span class='command-palette-match'>`);
+const template_0gex7i08 = template_u1.template(`<span class='command-palette-label command-palette-label--filtered'>`);
+const template_0gex7i0b = template_u1.template(`<span aria-hidden='true' class='command-palette-keys'>`);
+const template_0gex7i0e = template_u1.template(`<kbd class='command-palette-kbd'>`);
+const template_0gex7i0g = template_u1.template(`<svg aria-hidden='true' class='command-palette-icon' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' viewBox='0 0 16 16'><circle cx='7' cy='7' r='4.25' /><path d='m10.25 10.25 3 3' />`);
+const template_0gex7i0i = template_u1.template(`<div class='command-palette'><button aria-haspopup='dialog' class='command-palette-trigger' type='button'><!--$--><span class='command-palette-trigger-label'>`);
+const template_0gex7i0o = template_u1.template(`<div class='command-palette-panel'><div class='command-palette-search'><!--$--></div><div aria-label='Commands' class='command-palette-list ' role='listbox'>`);
+const template_0gex7i0u = template_u1.template(`<div class='command-palette-group' role='group'><div class='command-palette-group-label'>`);
+const template_0gex7i0y = template_u1.template(`<div class='command-palette-option ' role='option'><span aria-hidden='true' class='command-palette-option-icon'></span><!--$-->`);
+const template_0gex7i012 = template_u1.template(`<p class='command-palette-empty' role='status'>No results`);
+class ReactiveObject_0gex7i00 extends reactivity_u0.ReactiveObject {
+    #active = this[reactivity_u0.SIGNAL](false);
+    #index = this[reactivity_u0.SIGNAL](0);
+    #query = this[reactivity_u0.SIGNAL]('');
+    constructor() {
+        super(null);
+    }
+    get active() {
+        return reactivity_u0.read(this.#active);
+    }
+    set active(_v0) {
+        reactivity_u0.write(this.#active, _v0);
+    }
+    get index() {
+        return reactivity_u0.read(this.#index);
+    }
+    set index(_v1) {
+        reactivity_u0.write(this.#index, _v1);
+    }
+    get query() {
+        return reactivity_u0.read(this.#query);
+    }
+    set query(_v2) {
+        reactivity_u0.write(this.#query, _v2);
+    }
+}
+const COMMAND_PALETTE_DIALOG = Symbol.for('@esportsplus/ui/command-palette.dialog');
+const COMMAND_PALETTE_INPUT = Symbol.for('@esportsplus/ui/command-palette.input');
+const COMMAND_PALETTE_OPTION = Symbol.for('@esportsplus/ui/command-palette.option');
+const COMMAND_PALETTE_TRIGGER = Symbol.for('@esportsplus/ui/command-palette.trigger');
+let uid = 0;
+function filter(commands, query) {
+    let groups = [], index = 0, keys = new Map();
+    for (let i = 0, n = commands.length; i < n; i++) {
+        let command = commands[i], ranges = match(command.label, query);
+        if (!ranges) {
+            continue;
+        }
+        let group = keys.get(command.group);
+        if (!group) {
+            group = { group: command.group, items: [] };
+            groups.push(group);
+            keys.set(command.group, group);
+        }
+        group.items.push({ command, index: 0, ranges });
+    }
+    let flat = [];
+    for (let i = 0, n = groups.length; i < n; i++) {
+        let items = groups[i].items;
+        for (let j = 0, m = items.length; j < m; j++) {
+            items[j].index = index++;
+            flat.push(items[j]);
+        }
+    }
+    return { flat, groups };
+}
+function highlight(label, ranges) {
+    if (!ranges.length) {
+        return (() => {
+            let root_0gex7i01 = template_0gex7i02(), element_0gex7i03 = root_0gex7i01.firstChild;
+            template_u1.slot(element_0gex7i03, label, 1);
+            return root_0gex7i01;
+        })();
+    }
+    let cursor = 0, parts = [];
+    for (let i = 0, n = ranges.length; i < n; i++) {
+        let [start, end] = ranges[i];
+        if (start > cursor) {
+            parts.push(label.slice(cursor, start));
+        }
+        parts.push((() => {
+            let root_0gex7i04 = template_0gex7i05(), element_0gex7i06 = root_0gex7i04.firstChild;
+            template_u1.slot(element_0gex7i06, label.slice(start, end), 1);
+            return root_0gex7i04;
+        })());
+        cursor = end;
+    }
+    parts.push(label.slice(cursor));
+    return (() => {
+        let root_0gex7i07 = template_0gex7i08(), element_0gex7i09 = root_0gex7i07.firstChild;
+        template_u1.slot(element_0gex7i09, parts, 1);
+        return root_0gex7i07;
+    })();
+}
+function icon(value) {
+    return value instanceof Node ? value.cloneNode(true) : value;
+}
+function keep(e) {
+    if (!(e.target instanceof HTMLInputElement)) {
+        e.preventDefault();
+    }
+}
+function kbd(keys) {
+    return (() => {
+        let root_0gex7i0a = template_0gex7i0b(), element_0gex7i0c = root_0gex7i0a.firstChild;
+        template_u1.slot(element_0gex7i0c, keys.map((key) => {
+            let root_0gex7i0d = template_0gex7i0e(), element_0gex7i0f = root_0gex7i0d.firstChild;
+            template_u1.slot(element_0gex7i0f, key, 1);
+            return root_0gex7i0d;
+        }), 1);
+        return root_0gex7i0a;
+    })();
+}
+function match(label, query) {
+    if (!query) {
+        return [];
+    }
+    let hay = label.toLowerCase(), needle = query.toLowerCase(), at = hay.indexOf(needle);
+    if (at !== -1) {
+        return [[at, at + needle.length]];
+    }
+    let from = 0, ranges = [];
+    for (let char of needle) {
+        let i = hay.indexOf(char, from);
+        if (i === -1) {
+            return null;
+        }
+        let last = ranges[ranges.length - 1];
+        if (last && last[1] === i) {
+            last[1] = i + 1;
+        }
+        else {
+            ranges.push([i, i + 1]);
+        }
+        from = i + 1;
+    }
+    return ranges;
+}
+function search() {
+    return template_0gex7i0g();
+}
+export default Object.assign(function ({ commands, label = 'Search commands', onrun, placeholder = 'Type a command or search', state = new ReactiveObject_0gex7i00(), ...attributes }) {
+    let id = `command-palette-${++uid}`, mac = /Mac|iPhone|iPad/.test(navigator.platform), pointer = null, release, results = reactivity_u0.computed(() => filter(commands, state.query.trim())), trigger;
+    function close() {
+        state.active = false;
+    }
+    function option(index) {
+        let item = reactivity_u0.read(results).flat[index];
+        return item ? `${id}-option-${item.command.id}` : undefined;
+    }
+    function run(command) {
+        close();
+        onrun?.(command);
+    }
+    function selected() {
+        return Math.min(state.index, Math.max(reactivity_u0.read(results).flat.length - 1, 0));
+    }
+    function show() {
+        pointer = null;
+        state.index = 0;
+        state.query = '';
+        state.active = true;
+    }
+    function shortcut(e) {
+        if (e.key.toLowerCase() !== 'k' || !(e.metaKey || e.ctrlKey) || e.altKey || e.shiftKey || e.repeat) {
+            return;
+        }
+        if (e.defaultPrevented || !trigger?.isConnected || trigger.closest('[inert]')) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (state.active) {
+            close();
+        }
+        else {
+            show();
+        }
+    }
+    return (() => {
+        let root_0gex7i0h = template_0gex7i0i(), element_0gex7i0j = root_0gex7i0h.firstChild, element_0gex7i0k = element_0gex7i0j.firstElementChild, element_0gex7i0l = element_0gex7i0k.firstChild, element_0gex7i0m = element_0gex7i0k.firstElementChild;
+        template_u1.setProperties(element_0gex7i0j, this?.attributes);
+        template_u1.setProperties(element_0gex7i0j, attributes);
+        template_u1.setProperty(element_0gex7i0k, 'aria-keyshortcuts', mac ? 'Meta+K' : 'Control+K');
+        template_u1.setProperties(element_0gex7i0k, this?.attributes?.[COMMAND_PALETTE_TRIGGER]);
+        template_u1.setProperties(element_0gex7i0k, attributes[COMMAND_PALETTE_TRIGGER]);
+        template_u1.setProperty(element_0gex7i0k, 'aria-expanded', () => state.active ? 'true' : 'false');
+        template_u1.delegate(element_0gex7i0k, 'click', show);
+        template_u1.onconnect(element_0gex7i0k, (element) => {
+            trigger = element;
+            addEventListener('keydown', shortcut, true);
+        });
+        template_u1.ondisconnect(element_0gex7i0k, () => {
+            removeEventListener('keydown', shortcut, true);
+        });
+        template_u1.slot(element_0gex7i0l, search());
+        template_u1.slot(element_0gex7i0m, label, 1);
+        template_u1.slot(element_0gex7i0k, kbd([mac ? '⌘' : 'Ctrl', 'K']), 2);
+        template_u1.slot(element_0gex7i0j, modal({
+            'aria-label': 'Command palette',
+            state,
+            ...this?.attributes?.[COMMAND_PALETTE_DIALOG],
+            ...attributes[COMMAND_PALETTE_DIALOG],
+            class: ['command-palette-dialog', this?.attributes?.[COMMAND_PALETTE_DIALOG]?.class, attributes[COMMAND_PALETTE_DIALOG]?.class].flat()
+        }, (() => {
+            let root_0gex7i0n = template_0gex7i0o(), element_0gex7i0p = root_0gex7i0n.firstChild, element_0gex7i0q = element_0gex7i0p.firstElementChild.firstChild, element_0gex7i0r = element_0gex7i0p.firstElementChild, element_0gex7i0s = element_0gex7i0r.nextElementSibling;
+            template_u1.onconnect(element_0gex7i0p, (element) => {
+                element.addEventListener('mousedown', keep);
+                release = () => element.removeEventListener('mousedown', keep);
+            });
+            template_u1.ondisconnect(element_0gex7i0p, () => {
+                release?.();
+            });
+            template_u1.slot(element_0gex7i0q, search());
+            template_u1.slot(element_0gex7i0r, input({
+                'aria-activedescendant': () => option(selected()),
+                'aria-autocomplete': 'list',
+                'aria-controls': `${id}-listbox`,
+                'aria-expanded': 'true',
+                'aria-label': 'Search commands',
+                autocomplete: 'off',
+                autofocus: true,
+                class: 'command-palette-input',
+                oninput: (e) => {
+                    state.index = 0;
+                    state.query = e.target.value;
+                },
+                onkeydown: (e) => {
+                    if (e.isComposing) {
+                        return;
+                    }
+                    let count = reactivity_u0.read(results).flat.length;
+                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        if (!count) {
+                            return;
+                        }
+                        state.index = (selected() + (e.key === 'ArrowDown' ? 1 : -1) + count) % count;
+                        document.getElementById(option(state.index) ?? '')?.scrollIntoView({
+                            behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+                            block: 'nearest'
+                        });
+                    }
+                    else if (e.key === 'Enter') {
+                        e.preventDefault();
+                        let item = reactivity_u0.read(results).flat[selected()];
+                        if (item) {
+                            run(item.command);
+                        }
+                    }
+                    else if (e.key === 'Escape') {
+                        e.preventDefault();
+                        close();
+                    }
+                    else if (e.key === 'Tab') {
+                        e.preventDefault();
+                    }
+                },
+                placeholder,
+                role: 'combobox',
+                spellcheck: false,
+                value: () => state.query,
+                ...this?.attributes?.[COMMAND_PALETTE_INPUT],
+                ...attributes[COMMAND_PALETTE_INPUT]
+            }), 2);
+            template_u1.setList(element_0gex7i0s, 'class', () => !reactivity_u0.read(results).flat.length && '--empty');
+            template_u1.setProperty(element_0gex7i0s, 'id', template_u1.interpolate([(id), "-listbox"]));
+            template_u1.on(element_0gex7i0s, 'mouseleave', () => {
+                pointer = null;
+            });
+            new template_u1.EffectSlot(element_0gex7i0s, () => reactivity_u0.read(results).groups.map(({ group, items }, g) => {
+                let root_0gex7i0t = template_0gex7i0u(), element_0gex7i0v = root_0gex7i0t.firstChild, element_0gex7i0w = element_0gex7i0v.firstElementChild;
+                template_u1.setProperty(element_0gex7i0v, 'aria-labelledby', template_u1.interpolate([(id), "-group-", (g)]));
+                template_u1.setProperty(element_0gex7i0w, 'id', template_u1.interpolate([(id), "-group-", (g)]));
+                template_u1.slot(element_0gex7i0w, group, 1);
+                template_u1.slot(element_0gex7i0v, items.map(({ command, index, ranges }) => {
+                    let root_0gex7i0x = template_0gex7i0y(), element_0gex7i0z = root_0gex7i0x.firstChild, element_0gex7i010 = element_0gex7i0z.firstElementChild, element_0gex7i011 = element_0gex7i0z.firstChild.nextSibling;
+                    template_u1.setList(element_0gex7i0z, 'class', () => selected() === index && '--active');
+                    template_u1.setProperty(element_0gex7i0z, 'id', template_u1.interpolate([(id), "-option-", (command.id)]));
+                    template_u1.setProperties(element_0gex7i0z, this?.attributes?.[COMMAND_PALETTE_OPTION]);
+                    template_u1.setProperties(element_0gex7i0z, attributes[COMMAND_PALETTE_OPTION]);
+                    template_u1.setProperty(element_0gex7i0z, 'aria-selected', () => selected() === index ? 'true' : 'false');
+                    template_u1.delegate(element_0gex7i0z, 'click', () => run(command));
+                    template_u1.delegate(element_0gex7i0z, 'pointermove', (e) => {
+                        if (e.pointerType === 'touch') {
+                            return;
+                        }
+                        if (pointer && pointer.x === e.clientX && pointer.y === e.clientY) {
+                            return;
+                        }
+                        pointer = { x: e.clientX, y: e.clientY };
+                        if (index !== selected()) {
+                            state.index = index;
+                        }
+                    });
+                    template_u1.slot(element_0gex7i010, icon(command.icon), 1);
+                    template_u1.slot(element_0gex7i011, highlight(command.label, ranges));
+                    template_u1.slot(element_0gex7i0z, command.shortcut && kbd(command.shortcut), 2);
+                    return root_0gex7i0x;
+                }), 2);
+                return root_0gex7i0t;
+            }), 1);
+            new template_u1.EffectSlot(element_0gex7i0p, () => !reactivity_u0.read(results).flat.length && template_0gex7i012(), 2);
+            return root_0gex7i0n;
+        })()), 2);
+        return root_0gex7i0h;
+    })();
+}, {
+    dialog: COMMAND_PALETTE_DIALOG,
+    input: COMMAND_PALETTE_INPUT,
+    option: COMMAND_PALETTE_OPTION,
+    trigger: COMMAND_PALETTE_TRIGGER
+});

package/build/components/command-palette/scss/index.scss

@@ -0,0 +1,2 @@
+@layer components {.command-palette{--close-duration:.1s;--color:var(--color-text-500);--color-muted:var(--color-text-300);--dialog-backdrop:color-mix(in srgb, var(--color-text-500) 10%, transparent);--dialog-background:var(--color-white-300);--dialog-border-radius:var(--border-radius-600);--dialog-offset:20vh;--dialog-scale:.98;--dialog-width:400px;--divider-color:var(--color-border-300);--font-size:calc(var(--font-size-400) * .875);--kbd-background:var(--color-white-300);--kbd-border-color:var(--color-border-300);--kbd-border-radius:var(--border-radius-200);--kbd-font-size:calc(var(--font-size-300) * .875);--kbd-size:20px;--label-font-size:var(--font-size-300);--list-max-height:min(320px, 50vh);--open-duration:.15s;--option-background:var(--color-grey-400);--option-border-radius:var(--border-radius-400);--option-height:36px;--raised: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);--search-height:48px;--timing-function:cubic-bezier(.23, 1, .32, 1);--trigger-background:var(--color-grey-400);--trigger-border-radius:var(--border-radius-400);--trigger-height:36px;--trigger-width:240px}.command-palette--blur{--dialog-backdrop:color-mix(in srgb, var(--color-black-500) 24%, transparent)}.command-palette--centered{--dialog-offset:auto}.command-palette{display:contents}.command-palette--blur .command-palette-dialog.modal::backdrop{-webkit-backdrop-filter:blur(var(--size-100));backdrop-filter:blur(var(--size-100))}.command-palette-dialog.modal{--backdrop:var(--dialog-backdrop);--margin-horizontal:var(--size-400);--max-width:var(--dialog-width);--scale:var(--dialog-scale);--transition-duration:var(--open-duration);--transition-timing-function:var(--timing-function);--translateY:0px;background:var(--dialog-background);border-radius:var(--dialog-border-radius);box-shadow:var(--raised);color:var(--color);margin-block:var(--dialog-offset) auto;transform-origin:top;overflow:hidden}.command-palette-dialog.modal:not(.--active){--transition-duration:var(--close-duration)}.command-palette-empty{color:var(--color-muted);font-size:var(--font-size);padding:var(--size-700) var(--size-400);text-align:center}.command-palette-group-label{color:var(--color-muted);font-size:var(--label-font-size);font-weight:var(--font-weight-500);padding:var(--size-100) var(--size-300) calc(var(--size-100) / 2);-webkit-user-select:none;user-select:none}.command-palette-icon{height:var(--size-400);width:var(--size-400);flex-shrink:0}.command-palette-input.input{--color-default:var(--color);--font-size:var(--font-size);--padding-horizontal:0px;--padding-vertical:0px;--size:0px;outline:none;height:100%}.command-palette-input.input::placeholder{color:var(--color-muted)}.command-palette-kbd{background:var(--kbd-background);border:var(--border-width-400) solid var(--kbd-border-color);border-radius:var(--kbd-border-radius);color:var(--color-muted);font-family:inherit;font-size:var(--kbd-font-size);height:var(--kbd-size);min-width:var(--kbd-size);padding-inline:calc(var(--size-100) / 2);justify-content:center;align-items:center;line-height:1;display:flex}.command-palette-keys{flex-shrink:0;gap:2px;display:flex}.command-palette-label{color:var(--color);text-overflow:ellipsis;white-space:nowrap;flex:auto;min-width:0;overflow:hidden}.command-palette-label--filtered{color:var(--color-muted)}.command-palette-list{max-height:var(--list-max-height);overscroll-behavior:contain;padding:calc(var(--size-100) / 2);scroll-padding-block:calc(var(--size-100) / 2);overflow-y:auto}.command-palette-list.--empty{display:none}.command-palette-match{color:var(--color)}.command-palette-option{border-radius:var(--option-border-radius);cursor:default;font-size:var(--font-size);align-items:center;gap:var(--size-200);height:var(--option-height);padding-inline:var(--size-300);-webkit-user-select:none;user-select:none;transition:none;display:flex}.command-palette-option.--active{background:var(--option-background)}.command-palette-option-icon{color:var(--color-muted);flex-shrink:0;display:flex}.command-palette-option-icon:empty{display:none}.command-palette-option-icon svg{height:var(--size-400);width:var(--size-400)}.--active>.command-palette-option-icon{color:var(--color)}.command-palette-panel{flex-direction:column;display:flex}.command-palette-search{border-bottom:var(--border-width-400) solid var(--divider-color);color:var(--color-muted);align-items:center;gap:var(--size-200);height:var(--search-height);padding-inline:var(--size-400);flex-shrink:0;display:flex}.command-palette-trigger{background:var(--trigger-background);border-radius:var(--trigger-border-radius);box-shadow:var(--raised);color:var(--color-muted);cursor:pointer;font:inherit;font-size:var(--font-size);align-items:center;gap:var(--size-100);height:var(--trigger-height);max-width:100%;padding-inline:var(--size-300) 6px;touch-action:manipulation;transition:color var(--open-duration) ease-out, scale var(--open-duration) ease-out;-webkit-user-select:none;user-select:none;width:var(--trigger-width);border:0;outline:none;display:flex}.command-palette-trigger:active{scale:.96}.command-palette-trigger:focus-visible{outline:var(--border-width-500) solid var(--color);outline-offset:var(--border-width-500)}.command-palette-trigger:hover{color:var(--color)}.command-palette-trigger-label{text-align:left;text-overflow:ellipsis;white-space:nowrap;flex:auto;overflow:hidden}@media (prefers-reduced-motion:reduce){.command-palette-dialog.modal{--scale:1;transition:opacity var(--transition-duration) var(--transition-timing-function)}.command-palette-dialog.modal::backdrop{transition:opacity var(--transition-duration) var(--transition-timing-function)}.command-palette-trigger{transition:color var(--open-duration) ease-out}.command-palette-trigger:active{scale:1}}}
+/*$vite$:1*/

package/build/components/composer/index.d.ts

@@ -0,0 +1,29 @@
+import * as template_u1 from '@esportsplus/template';
+import { type Attributes, type Renderable } from '@esportsplus/template';
+import textarea from '../textarea/index.js';
+import './scss/index.scss';
+declare const COMPOSER_SEND: unique symbol;
+declare const COMPOSER_TEXTAREA: unique symbol;
+type A = Attributes & {
+    [COMPOSER_SEND]?: Attributes & {
+        disabled?: never;
+        onclick?: never;
+    };
+    [COMPOSER_TEXTAREA]?: Parameters<typeof textarea>[0] & {
+        oninput?: never;
+        onkeydown?: never;
+        value?: never;
+    };
+    actions?: Renderable<unknown>;
+    footer?: Renderable<unknown>;
+    state?: {
+        processing: boolean;
+        value: string;
+    };
+    submit: (value: string) => Promise<void> | void;
+};
+declare const _default: template_u1.Factory<A, Renderable<any>, Renderable<any>, {
+    readonly send: typeof COMPOSER_SEND;
+    readonly textarea: typeof COMPOSER_TEXTAREA;
+}>;
+export default _default;