@esportsplus/ui 0.56.4 → 0.57.0

package/build/components/command/index.js

@@ -1,21 +1,45 @@
+import * as reactivity_u0 from '@esportsplus/reactivity';
+import { computed, effect, read, signal, write } from '@esportsplus/reactivity';
 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 highlight from '../highlight/index.js';
+import icon from '../icon/index.js';
 import input from '../input/index.js';
-import modal from '../modal/index.js';
-import { COMMAND_INPUT, COMMAND_ITEM } from './constants.js';
+import overlay from '../overlay/index.js';
+import { mac } from '../../shared/platform.js';
+import down from '@esportsplus/ui/svg/arrow-down.svg';
+import up from '@esportsplus/ui/svg/arrow-up.svg';
+import enter from '@esportsplus/ui/svg/enter.svg';
+import magnifier from '@esportsplus/ui/svg/search.svg';
+import '../frame/scss/index.scss';
+import '../../css-utilities/scrollbar/scss/index.scss';
 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><!--$-->`);
+const template_1nmcshy3 = template_u1.template(`<!--$--><!--$--><!--$-->`);
+const template_1nmcshy8 = template_u1.template(`<!--$--><!--$-->`);
+const template_1nmcshyc = template_u1.template(`<div class='command-group' role='group'><div class='command-group-label'>`);
+const template_1nmcshyg = template_u1.template(`<div class='command-option'>`);
+const template_1nmcshyj = template_u1.template(`<span class='command-footer-hint'><!--$-->`);
+const template_1nmcshyn = template_u1.template(`<span aria-hidden='true' class='command-keys'>`);
+const template_1nmcshyq = template_u1.template(`<kbd class='button button--kbd'>`);
+const template_1nmcshyt = template_u1.template(`<span class='command-label'>`);
+const template_1nmcshyw = template_u1.template(`<span class='command-match'>`);
+const template_1nmcshyz = template_u1.template(`<span class='command-label command-label--filtered'>`);
+const template_1nmcshy12 = template_u1.template(`<div class='command'><!--$-->`);
+const template_1nmcshy16 = template_u1.template(`<button aria-haspopup='dialog' class='button command-trigger' type='button'><!--$--><span class='command-trigger-label'>`);
+const template_1nmcshy1b = template_u1.template(`<div class='command-panel'><div class='command-search'><!--$--><!--$--></div><!--$--><div class='command-views'></div><div aria-hidden='true' class='command-footer'><!--$--><!--$--><!--$-->`);
+const template_1nmcshy1n = template_u1.template(`<span aria-hidden='true' class='command-count'>`);
+const template_1nmcshy1q = template_u1.template(`<div aria-label='Views' class='command-tabs' role='tablist'><!--$-->`);
+const template_1nmcshy1u = template_u1.template(`<button class='button command-tab' role='tab' tabindex='-1' type='button'>`);
+const template_1nmcshy1x = template_u1.template(`<div class='command-view frame '><div class='command-list --scrollbar' role='listbox'>`);
+const template_1nmcshy21 = template_u1.template(`<p class='command-empty' role='status'>`);
 class ReactiveObject_1nmcshy0 extends reactivity_u0.ReactiveObject {
     #active = this[reactivity_u0.SIGNAL](false);
+    #index = this[reactivity_u0.SIGNAL](0);
     #query = this[reactivity_u0.SIGNAL]('');
-    constructor() {
+    #tab;
+    constructor(_p0) {
         super(null);
+        this.#tab = this[reactivity_u0.SIGNAL](_p0);
     }
     get active() {
         return reactivity_u0.read(this.#active);
@@ -23,166 +47,555 @@ class ReactiveObject_1nmcshy0 extends reactivity_u0.ReactiveObject {
     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(_v1) {
-        reactivity_u0.write(this.#query, _v1);
+    set query(_v2) {
+        reactivity_u0.write(this.#query, _v2);
+    }
+    get tab() {
+        return reactivity_u0.read(this.#tab);
+    }
+    set tab(_v3) {
+        reactivity_u0.write(this.#tab, _v3);
     }
 }
-let dialog = modal.bind({ attributes: { class: 'card command' } }), uid = 0;
-function filter(sections, needle) {
-    if (!needle) {
-        return sections;
+class ReactiveObject_1nmcshy1 extends reactivity_u0.ReactiveObject {
+    #moving = this[reactivity_u0.SIGNAL](false);
+    #recent;
+    constructor(_p0) {
+        super(null);
+        this.#recent = this[reactivity_u0.SIGNAL](_p0);
+    }
+    get moving() {
+        return reactivity_u0.read(this.#moving);
+    }
+    set moving(_v0) {
+        reactivity_u0.write(this.#moving, _v0);
+    }
+    get recent() {
+        return reactivity_u0.read(this.#recent);
+    }
+    set recent(_v1) {
+        reactivity_u0.write(this.#recent, _v1);
     }
-    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 });
+}
+const COMMAND_DIALOG = Symbol.for('@esportsplus/ui/command.dialog');
+const COMMAND_INPUT = Symbol.for('@esportsplus/ui/command.input');
+const COMMAND_OPTION = Symbol.for('@esportsplus/ui/command.option');
+const COMMAND_TRIGGER = Symbol.for('@esportsplus/ui/command.trigger');
+const GLYPHS = {
+    Alt: '⌥',
+    Mod: '⌘',
+    Shift: '⇧'
+};
+const RECENT_KEY = 'recent';
+const RECENT_LIMIT = 8;
+let uid = 0;
+function aria(keys, mod) {
+    return keys.map((key) => key === 'Mod' ? mod : key).join('+');
+}
+function filter(entries, query, matcher, limit = Infinity) {
+    let flat = [], groups = [], lookup = new Map(), matches = [], needle = query.toLowerCase();
+    for (let i = 0, n = entries.length; i < n; i++) {
+        let entry = entries[i];
+        if (matcher) {
+            let found = matcher(query, entry.label);
+            if (found) {
+                matches.push({ entry, index: 0, ranges: spans(found.indices), score: found.score });
+            }
+            continue;
+        }
+        let ranges = match(entry.lower, needle);
+        if (ranges) {
+            matches.push({ entry, index: 0, ranges, score: 0 });
+        }
+    }
+    if (matcher) {
+        matches.sort((a, b) => b.score - a.score);
+    }
+    if (matches.length > limit) {
+        matches.length = limit;
+    }
+    for (let i = 0, n = matches.length; i < n; i++) {
+        let item = matches[i], group = lookup.get(item.entry.group);
+        if (!group) {
+            group = { group: item.entry.group, items: [] };
+            groups.push(group);
+            lookup.set(item.entry.group, group);
+        }
+        group.items.push(item);
+    }
+    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 = flat.length;
+            flat.push(items[j]);
         }
     }
-    return filtered;
+    return { flat, groups };
 }
-function highlight(label, needle) {
-    let start = needle ? label.toLowerCase().indexOf(needle) : -1;
-    if (start === -1) {
-        return label;
+function glyph(key, apple) {
+    if (key === 'Mod') {
+        return apple ? '⌘' : 'Ctrl';
     }
-    let end = start + needle.length;
+    return (apple && GLYPHS[key]) || key;
+}
+function hint(keys, label) {
     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;
+        let root_1nmcshyi = template_1nmcshyj(), element_1nmcshyk = root_1nmcshyi.firstChild.firstChild, element_1nmcshyl = root_1nmcshyi.firstChild;
+        template_u1.slot(element_1nmcshyk, kbd(keys));
+        template_u1.slot(element_1nmcshyl, label, 2);
+        return root_1nmcshyi;
     })();
 }
-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;
+function keep(e) {
+    if (!(e.target instanceof HTMLInputElement)) {
+        e.preventDefault();
+    }
+}
+function kbd(keys) {
+    return (() => {
+        let root_1nmcshym = template_1nmcshyn(), element_1nmcshyo = root_1nmcshym.firstChild;
+        template_u1.slot(element_1nmcshyo, keys.map((key) => {
+            let root_1nmcshyp = template_1nmcshyq(), element_1nmcshyr = root_1nmcshyp.firstChild;
+            template_u1.slot(element_1nmcshyr, key, 1);
+            return root_1nmcshyp;
+        }), 1);
+        return root_1nmcshym;
+    })();
+}
+function mark(label, ranges) {
+    if (!ranges.length) {
+        return (() => {
+            let root_1nmcshys = template_1nmcshyt(), element_1nmcshyu = root_1nmcshys.firstChild;
+            template_u1.slot(element_1nmcshyu, label, 1);
+            return root_1nmcshys;
+        })();
+    }
+    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_1nmcshyv = template_1nmcshyw(), element_1nmcshyx = root_1nmcshyv.firstChild;
+            template_u1.slot(element_1nmcshyx, label.slice(start, end), 1);
+            return root_1nmcshyv;
+        })());
+        cursor = end;
+    }
+    parts.push(label.slice(cursor));
+    return (() => {
+        let root_1nmcshyy = template_1nmcshyz(), element_1nmcshy10 = root_1nmcshyy.firstChild;
+        template_u1.slot(element_1nmcshy10, parts, 1);
+        return root_1nmcshyy;
+    })();
+}
+function match(hay, needle) {
+    if (!needle) {
+        return [];
+    }
+    let 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 spans(indices) {
+    let ranges = [];
+    for (let i = 0, n = indices.length; i < n; i++) {
+        let last = ranges[ranges.length - 1];
+        if (last && last[1] === indices[i]) {
+            last[1]++;
+        }
+        else {
+            ranges.push([indices[i], indices[i] + 1]);
+        }
+    }
+    return ranges;
+}
+function sprite(href, name = '') {
+    return icon({ 'aria-hidden': 'true', class: name }, href);
+}
+export default component(function ({ commands, hotkey, label = 'Search commands', limit, match: matcher, onrun, placeholder = 'Type a command or search', render, shortcuts, state = new ReactiveObject_1nmcshy0('all'), store, tabs = false, trigger = true, ...attributes }) {
+    let apple = mac(), id = `command-${++uid}`, keys = hotkey ?? (trigger ? ['Mod', 'K'] : []), optionAttributes = this?.attributes?.[COMMAND_OPTION], active = signal(undefined), bindings = (shortcuts ?? []).map((shortcut) => ({
+        group: shortcut.group,
+        icon: shortcut.icon,
+        id: shortcut.id,
+        keys: shortcut.keys.map((key) => glyph(key, apple)),
+        label: shortcut.label,
+        lower: shortcut.label.toLowerCase()
+    })), entries = computed(() => (typeof commands === 'function' ? commands() : commands).map((command) => ({
+        command,
+        group: command.group,
+        icon: command.icon,
+        id: command.id,
+        keys: command.shortcut?.map((key) => glyph(key, apple)),
+        label: command.label,
+        lower: command.label.toLowerCase()
+    }))), host, listening, lookup = computed(() => new Map(read(entries).map((entry) => [entry.id, entry]))), pointer = null, ui = new ReactiveObject_1nmcshy1(new Set()), views = [
+        { empty: 'No commands', entries: everything, id: 'all', label: 'All', placeholder, search: 'Search commands' },
+        ...(tabs ? groups() : []),
+        ...(tabs && bindings.length ? [{ empty: 'No shortcuts', entries: () => bindings, id: 'shortcuts', label: 'Shortcuts', placeholder: 'Search shortcuts', search: 'Search shortcuts' }] : [])
+    ]
+        .map((view, i) => ({ ...view, key: `${id}-${i}` }));
+    for (let i = 0, n = views.length; i < n; i++) {
+        let view = views[i];
+        view.results = computed(() => {
+            let query = current() === view ? state.query.trim() : '';
+            return filter(view.entries(query), query, matcher, limit);
         });
-        effect(() => {
-            if (!state.active) {
-                state.query = '';
-                reactivity_u0.write(highlighted, -1);
+    }
+    if (store) {
+        void Promise.resolve(store.get(RECENT_KEY)).then((ids) => {
+            if (Array.isArray(ids)) {
+                ui.recent = new Set([...ui.recent, ...ids].slice(0, RECENT_LIMIT));
             }
         });
-        function move(step) {
-            let current = reactivity_u0.read(active), list = reactivity_u0.read(rows), n = list.length;
-            if (!n) {
-                return;
+    }
+    effect(() => state.active && state.tab, (open) => {
+        if (open) {
+            reset();
+        }
+    });
+    effect(() => option(current(), selected()), (value) => {
+        write(active, value);
+    });
+    function close() {
+        state.active = false;
+    }
+    function current() {
+        return views.find((view) => view.id === state.tab) ?? views[0];
+    }
+    function empty(view) {
+        return state.query.trim() ? 'No results' : view.empty;
+    }
+    function everything(query) {
+        if (!tabs || query) {
+            return read(entries);
+        }
+        let list = [], known = read(lookup);
+        for (let key of ui.recent) {
+            let found = known.get(key);
+            if (found) {
+                list.push({ ...found, group: 'Recents' });
             }
-            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 list.concat(read(entries));
+    }
+    function groups() {
+        return [...new Set(read(entries).map((entry) => entry.group))].map((group) => ({
+            empty: 'No commands',
+            entries: () => read(entries).filter((entry) => entry.group === group),
+            id: group,
+            label: group,
+            placeholder,
+            search: `Search ${group}`
+        }));
+    }
+    function listen(element) {
+        if (!keys.length) {
+            return;
+        }
+        listening = new AbortController();
+        host = element;
+        addEventListener('keydown', shortcut, { capture: true, signal: listening.signal });
+    }
+    function option(view, index) {
+        return read(view.results).flat[index] ? `${view.key}-${index}` : undefined;
+    }
+    function remember(command) {
+        ui.recent = new Set([command.id, ...ui.recent].slice(0, RECENT_LIMIT));
+        void store?.set(RECENT_KEY, [...ui.recent]);
+    }
+    function reset() {
+        pointer = null;
+        state.index = 0;
+        state.query = '';
+        ui.moving = false;
+    }
+    function results(view) {
+        let groups = read(view.results).groups.map(({ group, items }, g) => ({
+            id: `${view.key}-group-${g}`,
+            label: group,
+            items: items.map(({ entry, index, ranges }) => {
+                let key = `${view.key}-${index}`;
+                return {
+                    attributes: {
+                        ...optionAttributes,
+                        ...attributes[COMMAND_OPTION],
+                        id: key,
+                        role: 'option',
+                        'aria-selected': () => signal.selector(active, key) ? 'true' : 'false',
+                        class: [
+                            optionAttributes?.class,
+                            attributes[COMMAND_OPTION]?.class,
+                            !entry.command && 'command-option--inert',
+                            () => signal.selector(active, key) && '--active'
+                        ].flat(),
+                        onclick: (event) => {
+                            event.preventDefault();
+                            run(entry);
+                        },
+                        onpointermove: (event) => {
+                            if (event.pointerType === 'touch' || (pointer && pointer.x === event.clientX && pointer.y === event.clientY)) {
+                                return;
+                            }
+                            pointer = { x: event.clientX, y: event.clientY };
+                            if (index !== selected()) {
+                                state.index = index;
+                            }
+                        }
+                    },
+                    command: entry.command,
+                    content: (() => {
+                        let root_1nmcshy2 = template_1nmcshy3(), element_1nmcshy4 = root_1nmcshy2.firstChild, element_1nmcshy5 = element_1nmcshy4.nextSibling, element_1nmcshy6 = element_1nmcshy5.nextSibling;
+                        template_u1.slot(element_1nmcshy4, entry.icon && sprite(entry.icon, ['command-option-icon', () => signal.selector(active, key) && '--active']));
+                        template_u1.slot(element_1nmcshy5, mark(entry.label, ranges));
+                        template_u1.slot(element_1nmcshy6, entry.keys && kbd(entry.keys));
+                        return root_1nmcshy2;
+                    })(),
+                    id: entry.id,
+                    label: entry.label
+                };
+            })
+        }));
+        return render ? render(groups) : (() => {
+            let root_1nmcshy7 = template_1nmcshy8(), element_1nmcshy9 = root_1nmcshy7.firstChild, element_1nmcshya = element_1nmcshy9.nextSibling;
+            template_u1.slot(element_1nmcshy9, highlight({ class: 'command-highlight', hover: false, target: '.command-option' }));
+            template_u1.slot(element_1nmcshya, groups.map((group) => {
+                let root_1nmcshyb = template_1nmcshyc(), element_1nmcshyd = root_1nmcshyb.firstChild, element_1nmcshye = element_1nmcshyd.firstElementChild;
+                template_u1.slot(element_1nmcshye, group.label, 1);
+                template_u1.slot(element_1nmcshyd, group.items.map((item) => {
+                    let root_1nmcshyf = template_1nmcshyg(), element_1nmcshyh = root_1nmcshyf.firstChild;
+                    template_u1.slot(element_1nmcshyh, item.content, 1);
+                    template_u1.setProperties(element_1nmcshyh, item.attributes);
+                    return root_1nmcshyf;
+                }), 2);
+                template_u1.setProperty(element_1nmcshye, 'id', group.id);
+                template_u1.setProperty(element_1nmcshyd, 'aria-labelledby', group.id);
+                return root_1nmcshyb;
+            }));
+            return root_1nmcshy7;
+        })();
+    }
+    function run(entry) {
+        if (!entry.command) {
+            return;
+        }
+        close();
+        remember(entry.command);
+        onrun?.(entry.command);
+    }
+    function selected() {
+        return Math.min(state.index, Math.max(read(current().results).flat.length - 1, 0));
+    }
+    function show() {
+        state.tab = views[0].id;
+        state.active = true;
+    }
+    function shortcut(e) {
+        if (e.repeat ||
+            e.key.toLowerCase() !== keys[keys.length - 1].toLowerCase() ||
+            (e.metaKey || e.ctrlKey) !== keys.includes('Mod') ||
+            e.altKey !== keys.includes('Alt') ||
+            e.shiftKey !== keys.includes('Shift')) {
+            return;
+        }
+        if (e.defaultPrevented || !host?.isConnected || host.closest('[inert]')) {
+            return;
+        }
+        let declared = e.target?.closest?.('[aria-keyshortcuts]')?.getAttribute('aria-keyshortcuts')?.toLowerCase().split(/\s+/) ?? [];
+        if (declared.includes(aria(keys, 'Control').toLowerCase()) || declared.includes(aria(keys, 'Meta').toLowerCase())) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (state.active) {
+            close();
+        }
+        else {
+            show();
+        }
+    }
+    function step(direction) {
+        let n = views.length;
+        state.tab = views[(views.indexOf(current()) + direction + n) % n].id;
+    }
+    function swap(moving) {
+        return function (e) {
+            let target = e.target;
+            if (e.propertyName === 'translate' && target.parentElement === this && target.classList.contains('--active')) {
+                ui.moving = moving;
             }
-            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
+        };
+    }
+    function unlisten() {
+        listening?.abort();
+    }
+    return (() => {
+        let root_1nmcshy11 = template_1nmcshy12(), element_1nmcshy13 = root_1nmcshy11.firstChild, element_1nmcshy14 = element_1nmcshy13.firstChild;
+        template_u1.slot(element_1nmcshy14, trigger && (() => {
+            let root_1nmcshy15 = template_1nmcshy16(), element_1nmcshy17 = root_1nmcshy15.firstChild, element_1nmcshy18 = element_1nmcshy17.firstChild, element_1nmcshy19 = element_1nmcshy17.firstElementChild;
+            template_u1.slot(element_1nmcshy18, sprite(magnifier));
+            template_u1.slot(element_1nmcshy19, label, 1);
+            template_u1.slot(element_1nmcshy17, keys.length > 0 && kbd(keys.map((key) => glyph(key, apple))), 2);
+            template_u1.setProperties(element_1nmcshy17, keys.length > 0 && { 'aria-keyshortcuts': aria(keys, apple ? 'Meta' : 'Control') });
+            template_u1.setProperties(element_1nmcshy17, this?.attributes?.[COMMAND_TRIGGER]);
+            template_u1.setProperties(element_1nmcshy17, attributes[COMMAND_TRIGGER]);
+            template_u1.setProperty(element_1nmcshy17, 'aria-expanded', () => state.active ? 'true' : 'false');
+            template_u1.delegate(element_1nmcshy17, 'click', show);
+            template_u1.onconnect(element_1nmcshy17, listen);
+            template_u1.ondisconnect(element_1nmcshy17, unlisten);
+            return root_1nmcshy15;
+        })());
+        template_u1.slot(element_1nmcshy13, overlay({
+            'aria-label': 'Command palette',
+            state,
+            ...this?.attributes?.[COMMAND_DIALOG],
+            ...attributes[COMMAND_DIALOG],
+            class: ['command-dialog', this?.attributes?.[COMMAND_DIALOG]?.class, attributes[COMMAND_DIALOG]?.class].flat()
         }, (() => {
-            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)}`,
+            let root_1nmcshy1a = template_1nmcshy1b(), element_1nmcshy1c = root_1nmcshy1a.firstChild, element_1nmcshy1d = element_1nmcshy1c.firstElementChild.firstChild, element_1nmcshy1e = element_1nmcshy1d.nextSibling, element_1nmcshy1f = element_1nmcshy1c.firstElementChild, element_1nmcshy1g = element_1nmcshy1c.firstChild.nextSibling, element_1nmcshy1h = element_1nmcshy1f.nextElementSibling, element_1nmcshy1i = element_1nmcshy1h.nextElementSibling.firstChild, element_1nmcshy1j = element_1nmcshy1i.nextSibling, element_1nmcshy1k = element_1nmcshy1j.nextSibling, element_1nmcshy1l = element_1nmcshy1h.nextElementSibling;
+            template_u1.slot(element_1nmcshy1d, sprite(magnifier));
+            template_u1.slot(element_1nmcshy1e, input({
+                'aria-activedescendant': () => read(active),
                 'aria-autocomplete': 'list',
-                'aria-controls': `${id}-listbox`,
+                'aria-controls': () => `${current().key}-listbox`,
                 'aria-expanded': 'true',
+                'aria-label': () => current().search,
                 autocomplete: 'off',
                 autofocus: true,
                 class: 'command-input',
-                oninput: (event) => {
-                    state.query = event.target.value;
+                oninput: (e) => {
+                    state.index = 0;
+                    state.query = e.target.value;
                 },
-                placeholder,
+                onkeydown: (e) => {
+                    if (e.isComposing) {
+                        return;
+                    }
+                    let view = current(), items = read(view.results).flat;
+                    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                        e.preventDefault();
+                        if (!items.length) {
+                            return;
+                        }
+                        state.index = (selected() + (e.key === 'ArrowDown' ? 1 : -1) + items.length) % items.length;
+                        document.getElementById(option(view, state.index) ?? '')?.scrollIntoView({ block: 'nearest' });
+                    }
+                    else if (e.key === 'Enter') {
+                        e.preventDefault();
+                        let item = items[selected()];
+                        if (item) {
+                            run(item.entry);
+                        }
+                    }
+                    else if (e.key === 'Escape') {
+                        e.preventDefault();
+                        close();
+                    }
+                    else if (e.key === 'Tab') {
+                        e.preventDefault();
+                        step(e.shiftKey ? -1 : 1);
+                    }
+                },
+                placeholder: () => current().placeholder,
                 role: 'combobox',
                 spellcheck: false,
-                type: 'text',
                 value: () => state.query,
-                ...defaults?.[COMMAND_INPUT],
+                ...this?.attributes?.[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;
+            }));
+            new template_u1.EffectSlot(element_1nmcshy1f, () => state.query.trim() && (() => {
+                let root_1nmcshy1m = template_1nmcshy1n(), element_1nmcshy1o = root_1nmcshy1m.firstChild;
+                new template_u1.EffectSlot(element_1nmcshy1o, () => {
+                    let count = read(current().results).flat.length;
+                    return `${count} ${count === 1 ? 'result' : 'results'}`;
+                }, 1);
+                return root_1nmcshy1m;
+            })(), 2);
+            template_u1.slot(element_1nmcshy1g, views.length > 1 && (() => {
+                let root_1nmcshy1p = template_1nmcshy1q(), element_1nmcshy1r = root_1nmcshy1p.firstChild.firstChild, element_1nmcshy1s = root_1nmcshy1p.firstChild;
+                template_u1.slot(element_1nmcshy1r, highlight({ class: 'command-tabs-highlight' }));
+                template_u1.slot(element_1nmcshy1s, views.map((view) => {
+                    let root_1nmcshy1t = template_1nmcshy1u(), element_1nmcshy1v = root_1nmcshy1t.firstChild;
+                    template_u1.slot(element_1nmcshy1v, view.label, 1);
+                    template_u1.setProperty(element_1nmcshy1v, 'aria-controls', view.key);
+                    template_u1.setProperty(element_1nmcshy1v, 'id', template_u1.interpolate([(view.key), "-tab"]));
+                    template_u1.setProperty(element_1nmcshy1v, 'aria-selected', () => current() === view ? 'true' : 'false');
+                    template_u1.setList(element_1nmcshy1v, 'class', () => current() === view && '--active');
+                    template_u1.delegate(element_1nmcshy1v, 'click', () => {
+                        state.tab = view.id;
+                    });
+                    return root_1nmcshy1t;
+                }), 2);
+                return root_1nmcshy1p;
+            })());
+            template_u1.slot(element_1nmcshy1h, views.map((view, i) => {
+                let root_1nmcshy1w = template_1nmcshy1x(), element_1nmcshy1y = root_1nmcshy1w.firstChild, element_1nmcshy1z = element_1nmcshy1y.firstElementChild;
+                new template_u1.EffectSlot(element_1nmcshy1z, () => results(view), 1);
+                new template_u1.EffectSlot(element_1nmcshy1y, () => !read(view.results).flat.length && (() => {
+                    let root_1nmcshy20 = template_1nmcshy21(), element_1nmcshy22 = root_1nmcshy20.firstChild;
+                    template_u1.slot(element_1nmcshy22, empty(view), 1);
+                    return root_1nmcshy20;
+                })(), 2);
+                template_u1.setProperty(element_1nmcshy1z, 'aria-label', view.label);
+                template_u1.setProperty(element_1nmcshy1z, 'id', template_u1.interpolate([(view.key), "-listbox"]));
+                template_u1.setList(element_1nmcshy1z, 'class', () => !read(view.results).flat.length && 'command-list--empty');
+                template_u1.on(element_1nmcshy1z, 'mouseleave', () => {
+                    pointer = null;
                 });
-            }, 2);
-            return root_1nmcshy6;
-        })());
-    }
-    return root((_dispose) => palette());
-}, { input: COMMAND_INPUT, item: COMMAND_ITEM });
+                template_u1.setList(element_1nmcshy1y, 'class', views.length > 1 && 'frame--swap');
+                template_u1.setProperty(element_1nmcshy1y, 'id', view.key);
+                template_u1.setList(element_1nmcshy1y, 'style', template_u1.interpolate(["--n: ", (i)]));
+                template_u1.setProperties(element_1nmcshy1y, views.length > 1 && { 'aria-labelledby': `${view.key}-tab`, role: 'tabpanel' });
+                template_u1.setList(element_1nmcshy1y, 'class', () => current() === view && (ui.moving ? '--active frame--moving' : '--active'));
+                template_u1.setProperty(element_1nmcshy1y, 'inert', () => current() !== view);
+                return root_1nmcshy1w;
+            }), 1);
+            template_u1.slot(element_1nmcshy1i, hint(['esc'], 'Close'));
+            template_u1.slot(element_1nmcshy1j, views.length > 1 && hint(['tab'], 'Switch'));
+            template_u1.slot(element_1nmcshy1k, hint([sprite(up, 'command-kbd-icon'), sprite(down, 'command-kbd-icon')], 'Navigate'));
+            template_u1.slot(element_1nmcshy1l, hint([sprite(enter, 'command-kbd-icon')], 'Select'), 2);
+            template_u1.delegate(element_1nmcshy1h, 'transitioncancel', swap(false));
+            template_u1.delegate(element_1nmcshy1h, 'transitionend', swap(false));
+            template_u1.delegate(element_1nmcshy1h, 'transitionrun', swap(true));
+            template_u1.setList(element_1nmcshy1h, 'style', () => `--i: ${views.indexOf(current())}`);
+            template_u1.delegate(element_1nmcshy1c, 'mousedown', keep);
+            template_u1.setProperties(element_1nmcshy1c, !trigger && { onconnect: listen, ondisconnect: unlisten });
+            return root_1nmcshy1a;
+        })()), 2);
+        template_u1.setProperties(element_1nmcshy13, this?.attributes);
+        template_u1.setProperties(element_1nmcshy13, attributes);
+        return root_1nmcshy11;
+    })();
+}, {
+    dialog: COMMAND_DIALOG,
+    input: COMMAND_INPUT,
+    option: COMMAND_OPTION,
+    trigger: COMMAND_TRIGGER
+});