dev-ui/node_modules/bits-ui/dist/bits/command/command.svelte.js

import { afterSleep, afterTick, srOnlyStyles, attachRef, } from "svelte-toolbelt";
import { Context, watch } from "runed";
import { findNextSibling, findPreviousSibling } from "./utils.js";
import { kbd } from "../../internal/kbd.js";
import { createBitsAttrs, boolToStr, boolToEmptyStrOrUndef } from "../../internal/attrs.js";
import { getFirstNonCommentChild } from "../../internal/dom.js";
import { computeCommandScore } from "./index.js";
import { cssEscape } from "../../internal/css-escape.js";
const COMMAND_VALUE_ATTR = "data-value";
const commandAttrs = createBitsAttrs({
    component: "command",
    parts: [
        "root",
        "list",
        "input",
        "separator",
        "loading",
        "empty",
        "group",
        "group-items",
        "group-heading",
        "item",
        "viewport",
        "input-label",
    ],
});
// selectors
const COMMAND_GROUP_SELECTOR = commandAttrs.selector("group");
const COMMAND_GROUP_ITEMS_SELECTOR = commandAttrs.selector("group-items");
const COMMAND_GROUP_HEADING_SELECTOR = commandAttrs.selector("group-heading");
const COMMAND_ITEM_SELECTOR = commandAttrs.selector("item");
const COMMAND_VALID_ITEM_SELECTOR = `${commandAttrs.selector("item")}:not([aria-disabled="true"])`;
const CommandRootContext = new Context("Command.Root");
const CommandListContext = new Context("Command.List");
const CommandGroupContainerContext = new Context("Command.Group");
const defaultState = {
    /** Value of the search query */
    search: "",
    /** Currently selected item value */
    value: "",
    filtered: {
        /** The count of all visible items. */
        count: 0,
        /** Map from visible item id to its search store. */
        items: new Map(),
        /** Set of groups with at least one visible item. */
        groups: new Set(),
    },
};
export class CommandRootState {
    static create(opts) {
        return CommandRootContext.set(new CommandRootState(opts));
    }
    opts;
    attachment;
    #updateScheduled = false;
    #isInitialMount = true;
    sortAfterTick = false;
    sortAndFilterAfterTick = false;
    allItems = new Set();
    allGroups = new Map();
    allIds = new Map();
    // attempt to prevent the harsh delay when user is typing fast
    key = $state(0);
    viewportNode = $state(null);
    inputNode = $state(null);
    labelNode = $state(null);
    // published state that the components and other things can react to
    commandState = $state.raw(defaultState);
    // internal state that we mutate in batches and publish to the `state` at once
    _commandState = $state(defaultState);
    #snapshot() {
        return $state.snapshot(this._commandState);
    }
    #scheduleUpdate() {
        if (this.#updateScheduled)
            return;
        this.#updateScheduled = true;
        afterTick(() => {
            this.#updateScheduled = false;
            const currentState = this.#snapshot();
            const hasStateChanged = !Object.is(this.commandState, currentState);
            if (hasStateChanged) {
                this.commandState = currentState;
                this.opts.onStateChange?.current?.(currentState);
            }
        });
    }
    setState(key, value, preventScroll) {
        if (Object.is(this._commandState[key], value))
            return;
        this._commandState[key] = value;
        if (key === "search") {
            // Filter synchronously before emitting back to children
            this.#filterItems();
            this.#sort();
        }
        else if (key === "value") {
            if (!preventScroll)
                this.#scrollSelectedIntoView();
        }
        this.#scheduleUpdate();
    }
    constructor(opts) {
        this.opts = opts;
        this.attachment = attachRef(this.opts.ref);
        const defaults = { ...this._commandState, value: this.opts.value.current ?? "" };
        this._commandState = defaults;
        this.commandState = defaults;
        this.onkeydown = this.onkeydown.bind(this);
    }
    /**
     * Calculates score for an item based on search text and keywords.
     * Higher score = better match.
     *
     * @param value - Item's display text
     * @param keywords - Optional keywords to boost scoring
     * @returns Score from 0-1, where 0 = no match
     */
    #score(value, keywords) {
        const filter = this.opts.filter.current ?? computeCommandScore;
        const score = value ? filter(value, this._commandState.search, keywords) : 0;
        return score;
    }
    /**
     * Sorts items and groups based on search scores.
     * Groups are sorted by their highest scoring item.
     * When no search active, selects first item.
     */
    #sort() {
        if (!this._commandState.search || this.opts.shouldFilter.current === false) {
            // if no search and no initial value set or when clearing search,
            // we select the first item.
            if (!this._commandState.value || !this.#isInitialMount) {
                this.#selectFirstItem();
            }
            else if (this.#isInitialMount && this._commandState.value) {
                // scroll the initial value into view if it exists
                this.#scrollInitialValue();
            }
            return;
        }
        const scores = this._commandState.filtered.items;
        // sort the groups
        const groups = [];
        for (const value of this._commandState.filtered.groups) {
            const items = this.allGroups.get(value);
            let max = 0;
            if (!items) {
                groups.push([value, max]);
                continue;
            }
            // get the max score of the group's items
            for (const item of items) {
                const score = scores.get(item);
                max = Math.max(score ?? 0, max);
            }
            groups.push([value, max]);
        }
        // Sort items within groups to bottom
        // Sort items outside of groups
        // Sort groups to bottom (pushes all non-grouped items to the top)
        const listInsertionElement = this.viewportNode;
        const sorted = this.getValidItems().sort((a, b) => {
            const valueA = a.getAttribute("data-value");
            const valueB = b.getAttribute("data-value");
            const scoresA = scores.get(valueA) ?? 0;
            const scoresB = scores.get(valueB) ?? 0;
            return scoresB - scoresA;
        });
        for (const item of sorted) {
            const group = item.closest(COMMAND_GROUP_ITEMS_SELECTOR);
            if (group) {
                const itemToAppend = item.parentElement === group
                    ? item
                    : item.closest(`${COMMAND_GROUP_ITEMS_SELECTOR} > *`);
                if (itemToAppend) {
                    group.appendChild(itemToAppend);
                }
            }
            else {
                const itemToAppend = item.parentElement === listInsertionElement
                    ? item
                    : item.closest(`${COMMAND_GROUP_ITEMS_SELECTOR} > *`);
                if (itemToAppend) {
                    listInsertionElement?.appendChild(itemToAppend);
                }
            }
        }
        const sortedGroups = groups.sort((a, b) => b[1] - a[1]);
        for (const group of sortedGroups) {
            const element = listInsertionElement?.querySelector(`${COMMAND_GROUP_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssEscape(group[0])}"]`);
            element?.parentElement?.appendChild(element);
        }
        this.#selectFirstItem();
    }
    /**
     * Sets current value and triggers re-render if cleared.
     *
     * @param value - New value to set
     */
    setValue(value, opts) {
        if (value !== this.opts.value.current && value === "") {
            afterTick(() => {
                this.key++;
            });
        }
        this.setState("value", value, opts);
        this.opts.value.current = value;
    }
    /**
     * Selects first non-disabled item on next tick.
     */
    #selectFirstItem() {
        afterTick(() => {
            const item = this.getValidItems().find((item) => item.getAttribute("aria-disabled") !== "true");
            const value = item?.getAttribute(COMMAND_VALUE_ATTR);
            const shouldPreventScroll = this.#isInitialMount && this.opts.disableInitialScroll.current;
            this.setValue(value ?? "", shouldPreventScroll);
            this.#isInitialMount = false;
        });
    }
    /**
     * Scrolls the initial value into view if it exists and is not the first item.
     * Called during initial mount when a value is provided.
     */
    #scrollInitialValue() {
        afterTick(() => {
            const shouldPreventScroll = this.opts.disableInitialScroll.current;
            if (!shouldPreventScroll) {
                this.#scrollSelectedIntoView();
            }
            this.#isInitialMount = false;
        });
    }
    /**
     * Updates filtered items/groups based on search.
     * Recalculates scores and filtered count.
     */
    #filterItems() {
        if (!this._commandState.search || this.opts.shouldFilter.current === false) {
            this._commandState.filtered.count = this.allItems.size;
            return;
        }
        // reset the groups
        this._commandState.filtered.groups = new Set();
        let itemCount = 0;
        // Check which items should be included
        for (const id of this.allItems) {
            const value = this.allIds.get(id)?.value ?? "";
            const keywords = this.allIds.get(id)?.keywords ?? [];
            const rank = this.#score(value, keywords);
            this._commandState.filtered.items.set(id, rank);
            if (rank > 0)
                itemCount++;
        }
        // Check which groups have at least 1 item shown
        for (const [groupId, group] of this.allGroups) {
            for (const itemId of group) {
                const currItem = this._commandState.filtered.items.get(itemId);
                if (currItem && currItem > 0) {
                    this._commandState.filtered.groups.add(groupId);
                    break;
                }
            }
        }
        this._commandState.filtered.count = itemCount;
    }
    /**
     * Gets all non-disabled, visible command items.
     *
     * @returns Array of valid item elements
     * @remarks Exposed for direct item access and bound checking
     */
    getValidItems() {
        const node = this.opts.ref.current;
        if (!node)
            return [];
        const validItems = Array.from(node.querySelectorAll(COMMAND_VALID_ITEM_SELECTOR)).filter((el) => !!el);
        return validItems;
    }
    /**
     * Gets all visible command items.
     *
     * @returns Array of valid item elements
     * @remarks Exposed for direct item access and bound checking
     */
    getVisibleItems() {
        const node = this.opts.ref.current;
        if (!node)
            return [];
        const visibleItems = Array.from(node.querySelectorAll(COMMAND_ITEM_SELECTOR)).filter((el) => !!el);
        return visibleItems;
    }
    /** Returns all visible items in a matrix structure
     *
     * @remarks Returns empty if the command isn't configured as a grid
     *
     * @returns
     */
    get itemsGrid() {
        if (!this.isGrid)
            return [];
        const columns = this.opts.columns.current ?? 1;
        const items = this.getVisibleItems();
        const grid = [[]];
        let currentGroup = items[0]?.getAttribute("data-group");
        let column = 0;
        let row = 0;
        for (let i = 0; i < items.length; i++) {
            const item = items[i];
            const itemGroup = item?.getAttribute("data-group");
            if (currentGroup !== itemGroup) {
                currentGroup = itemGroup;
                column = 1;
                row++;
                grid.push([{ index: i, firstRowOfGroup: true, ref: item }]);
            }
            else {
                column++;
                if (column > columns) {
                    row++;
                    column = 1;
                    grid.push([]);
                }
                grid[row]?.push({
                    index: i,
                    firstRowOfGroup: grid[row]?.[0]?.firstRowOfGroup ?? i === 0,
                    ref: item,
                });
            }
        }
        return grid;
    }
    /**
     * Gets currently selected command item.
     *
     * @returns Selected element or undefined
     */
    #getSelectedItem() {
        const node = this.opts.ref.current;
        if (!node)
            return;
        const selectedNode = node.querySelector(`${COMMAND_VALID_ITEM_SELECTOR}[data-selected]`);
        if (!selectedNode)
            return;
        return selectedNode;
    }
    /**
     * Scrolls selected item into view.
     * Special handling for first items in groups.
     */
    #scrollSelectedIntoView() {
        afterTick(() => {
            const item = this.#getSelectedItem();
            if (!item)
                return;
            const grandparent = item.parentElement?.parentElement;
            if (!grandparent)
                return;
            if (this.isGrid) {
                const isFirstRowOfGroup = this.#itemIsFirstRowOfGroup(item);
                // ensure item is visible
                item.scrollIntoView({ block: "nearest" });
                if (isFirstRowOfGroup) {
                    const closestGroupHeader = item
                        ?.closest(COMMAND_GROUP_SELECTOR)
                        ?.querySelector(COMMAND_GROUP_HEADING_SELECTOR);
                    closestGroupHeader?.scrollIntoView({ block: "nearest" });
                    return;
                }
            }
            else {
                const firstChildOfParent = getFirstNonCommentChild(grandparent);
                if (firstChildOfParent &&
                    firstChildOfParent.dataset?.value === item.dataset?.value) {
                    const closestGroupHeader = item
                        ?.closest(COMMAND_GROUP_SELECTOR)
                        ?.querySelector(COMMAND_GROUP_HEADING_SELECTOR);
                    closestGroupHeader?.scrollIntoView({ block: "nearest" });
                    return;
                }
            }
            item.scrollIntoView({ block: "nearest" });
        });
    }
    #itemIsFirstRowOfGroup(item) {
        const grid = this.itemsGrid;
        if (grid.length === 0)
            return false;
        for (let r = 0; r < grid.length; r++) {
            const row = grid[r];
            if (row === undefined)
                continue;
            for (let c = 0; c < row.length; c++) {
                const column = row[c];
                if (column === undefined || column.ref !== item)
                    continue;
                return column.firstRowOfGroup;
            }
        }
        return false;
    }
    /**
     * Sets selection to item at specified index in valid items array.
     * If index is out of bounds, does nothing.
     *
     * @param index - Zero-based index of item to select
     * @remarks
     * Uses `getValidItems()` to get selectable items, filtering out disabled/hidden ones.
     * Access valid items directly via `getValidItems()` to check bounds before calling.
     *
     * @example
     * // get valid items length for bounds check
     * const items = getValidItems()
     * if (index < items.length) {
     *   updateSelectedToIndex(index)
     * }
     */
    updateSelectedToIndex(index) {
        const item = this.getValidItems()[index];
        if (!item)
            return;
        this.setValue(item.getAttribute(COMMAND_VALUE_ATTR) ?? "");
    }
    /**
     * Updates selected item by moving up/down relative to current selection.
     * Handles wrapping when loop option is enabled.
     *
     * @param change - Direction to move: 1 for next item, -1 for previous item
     * @remarks
     * The loop behavior wraps:
     * - From last item to first when moving next
     * - From first item to last when moving previous
     *
     * Uses `getValidItems()` to get all selectable items, which filters out disabled/hidden items.
     * You can call `getValidItems()` directly to get the current valid items array.
     *
     * @example
     * // select next item
     * updateSelectedByItem(1)
     *
     * // get all valid items
     * const items = getValidItems()
     */
    updateSelectedByItem(change) {
        const selected = this.#getSelectedItem();
        const items = this.getValidItems();
        const index = items.findIndex((item) => item === selected);
        // Get item at this index
        let newSelected = items[index + change];
        if (this.opts.loop.current) {
            newSelected =
                index + change < 0
                    ? items[items.length - 1]
                    : index + change === items.length
                        ? items[0]
                        : items[index + change];
        }
        if (newSelected) {
            this.setValue(newSelected.getAttribute(COMMAND_VALUE_ATTR) ?? "");
        }
    }
    /**
     * Moves selection to the first valid item in the next/previous group.
     * If no group is found, falls back to selecting the next/previous item globally.
     *
     * @param change - Direction to move: 1 for next group, -1 for previous group
     * @example
     * // move to first item in next group
     * updateSelectedByGroup(1)
     *
     * // move to first item in previous group
     * updateSelectedByGroup(-1)
     */
    updateSelectedByGroup(change) {
        const selected = this.#getSelectedItem();
        let group = selected?.closest(COMMAND_GROUP_SELECTOR);
        let item;
        while (group && !item) {
            group =
                change > 0
                    ? findNextSibling(group, COMMAND_GROUP_SELECTOR)
                    : findPreviousSibling(group, COMMAND_GROUP_SELECTOR);
            item = group?.querySelector(COMMAND_VALID_ITEM_SELECTOR);
        }
        if (item) {
            this.setValue(item.getAttribute(COMMAND_VALUE_ATTR) ?? "");
        }
        else {
            this.updateSelectedByItem(change);
        }
    }
    /**
     * Maps item id to display value and search keywords.
     * Returns cleanup function to remove mapping.
     *
     * @param id - Unique item identifier
     * @param value - Display text
     * @param keywords - Optional search boost terms
     * @returns Cleanup function
     */
    registerValue(value, keywords) {
        if (!(value && value === this.allIds.get(value)?.value)) {
            this.allIds.set(value, { value, keywords });
        }
        this._commandState.filtered.items.set(value, this.#score(value, keywords));
        // Schedule sorting to run after this tick when all items are added not each time an item is added
        if (!this.sortAfterTick) {
            this.sortAfterTick = true;
            afterTick(() => {
                this.#sort();
                this.sortAfterTick = false;
            });
        }
        return () => {
            this.allIds.delete(value);
        };
    }
    /**
     * Registers item in command list and its group.
     * Handles filtering, sorting and selection updates.
     *
     * @param id - Item identifier
     * @param groupId - Optional group to add item to
     * @returns Cleanup function that handles selection
     */
    registerItem(id, groupId) {
        this.allItems.add(id);
        // Track this item within the group
        if (groupId) {
            if (!this.allGroups.has(groupId)) {
                this.allGroups.set(groupId, new Set([id]));
            }
            else {
                this.allGroups.get(groupId).add(id);
            }
        }
        // Schedule sorting and filtering to run after this tick when all items are added not each time an item is added
        if (!this.sortAndFilterAfterTick) {
            this.sortAndFilterAfterTick = true;
            afterTick(() => {
                this.#filterItems();
                this.#sort();
                this.sortAndFilterAfterTick = false;
            });
        }
        this.#scheduleUpdate();
        return () => {
            const selectedItem = this.#getSelectedItem();
            this.allItems.delete(id);
            this.commandState.filtered.items.delete(id);
            this.#filterItems();
            // The item removed have been the selected one,
            // so selection should be moved to the first
            if (selectedItem?.getAttribute("id") === id) {
                this.#selectFirstItem();
            }
            this.#scheduleUpdate();
        };
    }
    /**
     * Creates empty group if not exists.
     *
     * @param id - Group identifier
     * @returns Cleanup function
     */
    registerGroup(id) {
        if (!this.allGroups.has(id)) {
            this.allGroups.set(id, new Set());
        }
        return () => {
            this.allIds.delete(id);
            this.allGroups.delete(id);
        };
    }
    get isGrid() {
        return this.opts.columns.current !== null;
    }
    /**
     * Selects last valid item.
     */
    #last() {
        return this.updateSelectedToIndex(this.getValidItems().length - 1);
    }
    /**
     * Handles next item selection:
     * - Meta: Jump to last
     * - Alt: Next group
     * - Default: Next item
     *
     * @param e - Keyboard event
     */
    #next(e) {
        e.preventDefault();
        if (e.metaKey) {
            this.#last();
        }
        else if (e.altKey) {
            this.updateSelectedByGroup(1);
        }
        else {
            this.updateSelectedByItem(1);
        }
    }
    #down(e) {
        if (this.opts.columns.current === null)
            return;
        e.preventDefault();
        if (e.metaKey) {
            this.updateSelectedByGroup(1);
        }
        else {
            this.updateSelectedByItem(this.#nextRowColumnOffset(e));
        }
    }
    #getColumn(item, grid) {
        if (grid.length === 0)
            return null;
        for (let r = 0; r < grid.length; r++) {
            const row = grid[r];
            if (row === undefined)
                continue;
            for (let c = 0; c < row.length; c++) {
                const column = row[c];
                if (column === undefined || column.ref !== item)
                    continue;
                return { columnIndex: c, rowIndex: r };
            }
        }
        return null;
    }
    #nextRowColumnOffset(e) {
        const grid = this.itemsGrid;
        const selected = this.#getSelectedItem();
        if (!selected)
            return 0;
        const column = this.#getColumn(selected, grid);
        if (!column)
            return 0;
        let newItem = null;
        const skipRows = e.altKey ? 1 : 0;
        // if this is the second to last row then we need to go to the last row when skipping and not in loop mode
        if (e.altKey && column.rowIndex === grid.length - 2 && !this.opts.loop.current) {
            newItem = this.#findNextNonDisabledItem({
                start: grid.length - 1,
                end: grid.length,
                expectedColumnIndex: column.columnIndex,
                grid,
            });
        }
        else if (column.rowIndex === grid.length - 1) {
            // if this is the last row we apply the loop logic
            if (!this.opts.loop.current)
                return 0;
            newItem = this.#findNextNonDisabledItem({
                start: 0 + skipRows,
                end: column.rowIndex,
                expectedColumnIndex: column.columnIndex,
                grid,
            });
        }
        else {
            newItem = this.#findNextNonDisabledItem({
                start: column.rowIndex + 1 + skipRows,
                end: grid.length,
                expectedColumnIndex: column.columnIndex,
                grid,
            });
            // this happens if there were no non-disabled columns below the current column
            // we can now try starting from the beginning to find the right column
            if (newItem === null && this.opts.loop.current) {
                newItem = this.#findNextNonDisabledItem({
                    start: 0,
                    end: column.rowIndex,
                    expectedColumnIndex: column.columnIndex,
                    grid,
                });
            }
        }
        return this.#calculateOffset(selected, newItem);
    }
    /** Attempts to find the next non-disabled column that matches the expected column.
     *
     * @remarks
     * - Skips over disabled columns
     * - When a row is shorter than the expected column it defaults to the last item in the row
     *
     * @param param0
     * @returns
     */
    #findNextNonDisabledItem({ start, end, grid, expectedColumnIndex, }) {
        let newItem = null;
        for (let r = start; r < end; r++) {
            const row = grid[r];
            // try to get the next column
            newItem = row[expectedColumnIndex]?.ref ?? null;
            // skip over disabled items
            if (newItem !== null && itemIsDisabled(newItem)) {
                newItem = null;
                continue;
            }
            // if that column doesn't exist default to the next highest column
            if (newItem === null) {
                // try and find the next highest non-disabled item in the row
                // if there aren't any non-disabled items we just give up and return null
                for (let i = row.length - 1; i >= 0; i--) {
                    const item = row[row.length - 1];
                    if (item === undefined || itemIsDisabled(item.ref))
                        continue;
                    newItem = item.ref;
                    break;
                }
            }
            break;
        }
        return newItem;
    }
    #calculateOffset(selected, newSelected) {
        if (newSelected === null)
            return 0;
        const items = this.getValidItems();
        const ogIndex = items.findIndex((item) => item === selected);
        const newIndex = items.findIndex((item) => item === newSelected);
        return newIndex - ogIndex;
    }
    #up(e) {
        if (this.opts.columns.current === null)
            return;
        e.preventDefault();
        if (e.metaKey) {
            this.updateSelectedByGroup(-1);
        }
        else {
            this.updateSelectedByItem(this.#previousRowColumnOffset(e));
        }
    }
    #previousRowColumnOffset(e) {
        const grid = this.itemsGrid;
        const selected = this.#getSelectedItem();
        if (selected === undefined)
            return 0;
        const column = this.#getColumn(selected, grid);
        if (column === null)
            return 0;
        let newItem = null;
        const skipRows = e.altKey ? 1 : 0;
        // if this is the second row then we need to go to the top when skipping and not in loop mode
        if (e.altKey && column.rowIndex === 1 && this.opts.loop.current === false) {
            newItem = this.#findNextNonDisabledItemDesc({
                start: 0,
                end: 0,
                expectedColumnIndex: column.columnIndex,
                grid,
            });
        }
        else if (column.rowIndex === 0) {
            // if this is the last row we apply the loop logic
            if (this.opts.loop.current === false)
                return 0;
            newItem = this.#findNextNonDisabledItemDesc({
                start: grid.length - 1 - skipRows,
                end: column.rowIndex + 1,
                expectedColumnIndex: column.columnIndex,
                grid,
            });
        }
        else {
            newItem = this.#findNextNonDisabledItemDesc({
                start: column.rowIndex - 1 - skipRows,
                end: 0,
                expectedColumnIndex: column.columnIndex,
                grid,
            });
            // this happens if there were no non-disabled columns below the current column
            // we can now try starting from the beginning to find the right column
            if (newItem === null && this.opts.loop.current) {
                newItem = this.#findNextNonDisabledItemDesc({
                    start: grid.length - 1,
                    end: column.rowIndex + 1,
                    expectedColumnIndex: column.columnIndex,
                    grid,
                });
            }
        }
        return this.#calculateOffset(selected, newItem);
    }
    /**
     * Attempts to find the next non-disabled column that matches the expected column.
     *
     * @remarks
     * - Skips over disabled columns
     * - When a row is shorter than the expected column it defaults to the last item in the row
     */
    #findNextNonDisabledItemDesc({ start, end, grid, expectedColumnIndex, }) {
        let newItem = null;
        for (let r = start; r >= end; r--) {
            const row = grid[r];
            if (row === undefined)
                continue;
            // try to get the next column
            newItem = row[expectedColumnIndex]?.ref ?? null;
            // skip over disabled items
            if (newItem !== null && itemIsDisabled(newItem)) {
                newItem = null;
                continue;
            }
            // if that column doesn't exist default to the next highest column
            if (newItem === null) {
                // try and find the next highest non-disabled item in the row
                // if there aren't any non-disabled items we just give up and return null
                for (let i = row.length - 1; i >= 0; i--) {
                    const item = row[row.length - 1];
                    if (item === undefined || itemIsDisabled(item.ref))
                        continue;
                    newItem = item.ref;
                    break;
                }
            }
            break;
        }
        return newItem;
    }
    /**
     * Handles previous item selection:
     * - Meta: Jump to first
     * - Alt: Previous group
     * - Default: Previous item
     *
     * @param e - Keyboard event
     */
    #prev(e) {
        e.preventDefault();
        if (e.metaKey) {
            // First item
            this.updateSelectedToIndex(0);
        }
        else if (e.altKey) {
            // Previous group
            this.updateSelectedByGroup(-1);
        }
        else {
            // Previous item
            this.updateSelectedByItem(-1);
        }
    }
    onkeydown(e) {
        const isVim = this.opts.vimBindings.current && e.ctrlKey;
        switch (e.key) {
            case kbd.n:
            case kbd.j: {
                // vim down
                if (isVim) {
                    if (this.isGrid) {
                        this.#down(e);
                    }
                    else {
                        this.#next(e);
                    }
                }
                break;
            }
            case kbd.l: {
                // vim right
                if (isVim) {
                    if (this.isGrid) {
                        this.#next(e);
                    }
                }
                break;
            }
            case kbd.ARROW_DOWN:
                if (this.isGrid) {
                    this.#down(e);
                }
                else {
                    this.#next(e);
                }
                break;
            case kbd.ARROW_RIGHT:
                if (!this.isGrid)
                    break;
                this.#next(e);
                break;
            case kbd.p:
            case kbd.k: {
                // vim up
                if (isVim) {
                    if (this.isGrid) {
                        this.#up(e);
                    }
                    else {
                        this.#prev(e);
                    }
                }
                break;
            }
            case kbd.h: {
                // vim left
                if (isVim && this.isGrid) {
                    this.#prev(e);
                }
                break;
            }
            case kbd.ARROW_UP:
                if (this.isGrid) {
                    this.#up(e);
                }
                else {
                    this.#prev(e);
                }
                break;
            case kbd.ARROW_LEFT:
                if (!this.isGrid)
                    break;
                this.#prev(e);
                break;
            case kbd.HOME:
                // first item
                e.preventDefault();
                this.updateSelectedToIndex(0);
                break;
            case kbd.END:
                // last item
                e.preventDefault();
                this.#last();
                break;
            case kbd.ENTER: {
                /**
                 * Check if IME composition is finished before triggering the select event.
                 * This prevents unwanted triggering while user is still inputting text with IME.
                 * e.keyCode === 229 is for the Japanese IME && Safari as `isComposing` does not
                 * work with Japanese IME and Safari in combination.
                 */
                if (!e.isComposing && e.keyCode !== 229) {
                    e.preventDefault();
                    const item = this.#getSelectedItem();
                    if (item) {
                        item?.click();
                    }
                }
            }
        }
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        role: "application",
        [commandAttrs.root]: "",
        tabindex: -1,
        onkeydown: this.onkeydown,
        ...this.attachment,
    }));
}
function itemIsDisabled(item) {
    return item.getAttribute("aria-disabled") === "true";
}
export class CommandEmptyState {
    static create(opts) {
        return new CommandEmptyState(opts, CommandRootContext.get());
    }
    opts;
    root;
    attachment;
    shouldRender = $derived.by(() => {
        return ((this.root._commandState.filtered.count === 0 && this.#isInitialRender === false) ||
            this.opts.forceMount.current);
    });
    #isInitialRender = true;
    constructor(opts, root) {
        this.opts = opts;
        this.root = root;
        this.attachment = attachRef(this.opts.ref);
        $effect.pre(() => {
            this.#isInitialRender = false;
        });
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        role: "presentation",
        [commandAttrs.empty]: "",
        ...this.attachment,
    }));
}
export class CommandGroupContainerState {
    static create(opts) {
        return CommandGroupContainerContext.set(new CommandGroupContainerState(opts, CommandRootContext.get()));
    }
    opts;
    root;
    attachment;
    shouldRender = $derived.by(() => {
        if (this.opts.forceMount.current)
            return true;
        if (this.root.opts.shouldFilter.current === false)
            return true;
        if (!this.root.commandState.search)
            return true;
        return this.root._commandState.filtered.groups.has(this.trueValue);
    });
    headingNode = $state(null);
    trueValue = $state("");
    constructor(opts, root) {
        this.opts = opts;
        this.root = root;
        this.attachment = attachRef(this.opts.ref);
        this.trueValue = opts.value.current ?? opts.id.current;
        watch(() => this.trueValue, () => {
            return this.root.registerGroup(this.trueValue);
        });
        $effect(() => {
            if (this.opts.value.current) {
                this.trueValue = this.opts.value.current;
                return this.root.registerValue(this.opts.value.current);
            }
            else if (this.headingNode && this.headingNode.textContent) {
                this.trueValue = this.headingNode.textContent.trim().toLowerCase();
                return this.root.registerValue(this.trueValue);
            }
            else {
                this.trueValue = `-----${this.opts.id.current}`;
                return this.root.registerValue(this.trueValue);
            }
        });
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        role: "presentation",
        hidden: this.shouldRender ? undefined : true,
        "data-value": this.trueValue,
        [commandAttrs.group]: "",
        ...this.attachment,
    }));
}
export class CommandGroupHeadingState {
    static create(opts) {
        return new CommandGroupHeadingState(opts, CommandGroupContainerContext.get());
    }
    opts;
    group;
    attachment;
    constructor(opts, group) {
        this.opts = opts;
        this.group = group;
        this.attachment = attachRef(this.opts.ref, (v) => (this.group.headingNode = v));
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        [commandAttrs["group-heading"]]: "",
        ...this.attachment,
    }));
}
export class CommandGroupItemsState {
    static create(opts) {
        return new CommandGroupItemsState(opts, CommandGroupContainerContext.get());
    }
    opts;
    group;
    attachment;
    constructor(opts, group) {
        this.opts = opts;
        this.group = group;
        this.attachment = attachRef(this.opts.ref);
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        role: "group",
        [commandAttrs["group-items"]]: "",
        "aria-labelledby": this.group.headingNode?.id ?? undefined,
        ...this.attachment,
    }));
}
export class CommandInputState {
    static create(opts) {
        return new CommandInputState(opts, CommandRootContext.get());
    }
    opts;
    root;
    attachment;
    #selectedItemId = $derived.by(() => {
        const item = this.root.viewportNode?.querySelector(`${COMMAND_ITEM_SELECTOR}[${COMMAND_VALUE_ATTR}="${cssEscape(this.root.opts.value.current)}"]`);
        if (item === undefined || item === null)
            return;
        return item.getAttribute("id") ?? undefined;
    });
    constructor(opts, root) {
        this.opts = opts;
        this.root = root;
        this.attachment = attachRef(this.opts.ref, (v) => (this.root.inputNode = v));
        watch(() => this.opts.ref.current, () => {
            const node = this.opts.ref.current;
            if (node && this.opts.autofocus.current) {
                afterSleep(10, () => node.focus());
            }
        });
        watch(() => this.opts.value.current, () => {
            if (this.root.commandState.search !== this.opts.value.current) {
                this.root.setState("search", this.opts.value.current);
            }
        });
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        type: "text",
        [commandAttrs.input]: "",
        autocomplete: "off",
        autocorrect: "off",
        spellcheck: false,
        "aria-autocomplete": "list",
        role: "combobox",
        "aria-expanded": boolToStr(true),
        "aria-controls": this.root.viewportNode?.id ?? undefined,
        "aria-labelledby": this.root.labelNode?.id ?? undefined,
        "aria-activedescendant": this.#selectedItemId,
        ...this.attachment,
    }));
}
export class CommandItemState {
    static create(opts) {
        const group = CommandGroupContainerContext.getOr(null);
        return new CommandItemState({ ...opts, group }, CommandRootContext.get());
    }
    opts;
    root;
    attachment;
    #group = null;
    #trueForceMount = $derived.by(() => {
        return this.opts.forceMount.current || this.#group?.opts.forceMount.current === true;
    });
    shouldRender = $derived.by(() => {
        this.opts.ref.current;
        if (this.#trueForceMount ||
            this.root.opts.shouldFilter.current === false ||
            !this.root.commandState.search) {
            return true;
        }
        const currentScore = this.root.commandState.filtered.items.get(this.trueValue);
        if (currentScore === undefined)
            return false;
        return currentScore > 0;
    });
    isSelected = $derived.by(() => this.root.opts.value.current === this.trueValue && this.trueValue !== "");
    trueValue = $state("");
    constructor(opts, root) {
        this.opts = opts;
        this.root = root;
        this.#group = CommandGroupContainerContext.getOr(null);
        this.trueValue = opts.value.current;
        this.attachment = attachRef(this.opts.ref);
        watch([
            () => this.trueValue,
            () => this.#group?.trueValue,
            () => this.opts.forceMount.current,
        ], () => {
            if (this.opts.forceMount.current || !this.trueValue)
                return;
            return this.root.registerItem(this.trueValue, this.#group?.trueValue);
        });
        watch([() => this.opts.value.current, () => this.opts.ref.current], () => {
            if (this.opts.value.current) {
                this.trueValue = this.opts.value.current;
            }
            else if (this.opts.ref.current?.textContent) {
                this.trueValue = this.opts.ref.current.textContent.trim();
            }
            if (this.trueValue) {
                this.root.registerValue(this.trueValue, opts.keywords.current.map((kw) => kw.trim()));
                this.opts.ref.current?.setAttribute(COMMAND_VALUE_ATTR, this.trueValue);
            }
        });
        // bindings
        this.onclick = this.onclick.bind(this);
        this.onpointermove = this.onpointermove.bind(this);
    }
    #onSelect() {
        if (this.opts.disabled.current)
            return;
        this.#select();
        this.opts.onSelect?.current();
    }
    #select() {
        if (this.opts.disabled.current)
            return;
        this.root.setValue(this.trueValue, true);
    }
    onpointermove(_) {
        if (this.opts.disabled.current || this.root.opts.disablePointerSelection.current)
            return;
        this.#select();
    }
    onclick(_) {
        if (this.opts.disabled.current)
            return;
        this.#onSelect();
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        "aria-disabled": boolToStr(this.opts.disabled.current),
        "aria-selected": boolToStr(this.isSelected),
        "data-disabled": boolToEmptyStrOrUndef(this.opts.disabled.current),
        "data-selected": boolToEmptyStrOrUndef(this.isSelected),
        "data-value": this.trueValue,
        "data-group": this.#group?.trueValue,
        [commandAttrs.item]: "",
        role: "option",
        onpointermove: this.onpointermove,
        onclick: this.onclick,
        ...this.attachment,
    }));
}
export class CommandLoadingState {
    static create(opts) {
        return new CommandLoadingState(opts);
    }
    opts;
    attachment;
    constructor(opts) {
        this.opts = opts;
        this.attachment = attachRef(this.opts.ref);
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        role: "progressbar",
        "aria-valuenow": this.opts.progress.current,
        "aria-valuemin": 0,
        "aria-valuemax": 100,
        "aria-label": "Loading...",
        [commandAttrs.loading]: "",
        ...this.attachment,
    }));
}
export class CommandSeparatorState {
    static create(opts) {
        return new CommandSeparatorState(opts, CommandRootContext.get());
    }
    opts;
    root;
    attachment;
    shouldRender = $derived.by(() => !this.root._commandState.search || this.opts.forceMount.current);
    constructor(opts, root) {
        this.opts = opts;
        this.root = root;
        this.attachment = attachRef(this.opts.ref);
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        // role="separator" cannot belong to a role="listbox"
        "aria-hidden": "true",
        [commandAttrs.separator]: "",
        ...this.attachment,
    }));
}
export class CommandListState {
    static create(opts) {
        return CommandListContext.set(new CommandListState(opts, CommandRootContext.get()));
    }
    opts;
    root;
    attachment;
    constructor(opts, root) {
        this.opts = opts;
        this.root = root;
        this.attachment = attachRef(this.opts.ref);
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        role: "listbox",
        "aria-label": this.opts.ariaLabel.current,
        [commandAttrs.list]: "",
        ...this.attachment,
    }));
}
export class CommandLabelState {
    static create(opts) {
        return new CommandLabelState(opts, CommandRootContext.get());
    }
    opts;
    root;
    attachment;
    constructor(opts, root) {
        this.opts = opts;
        this.root = root;
        this.attachment = attachRef(this.opts.ref, (v) => (this.root.labelNode = v));
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        [commandAttrs["input-label"]]: "",
        for: this.opts.for?.current,
        style: srOnlyStyles,
        ...this.attachment,
    }));
}
export class CommandViewportState {
    static create(opts) {
        return new CommandViewportState(opts, CommandListContext.get());
    }
    opts;
    list;
    attachment;
    constructor(opts, list) {
        this.opts = opts;
        this.list = list;
        this.attachment = attachRef(this.opts.ref, (v) => (this.list.root.viewportNode = v));
        watch([() => this.opts.ref.current, () => this.list.opts.ref.current], ([node, listNode]) => {
            if (node === null || listNode === null)
                return;
            let aF;
            const observer = new ResizeObserver(() => {
                aF = requestAnimationFrame(() => {
                    const height = node.offsetHeight;
                    listNode.style.setProperty("--bits-command-list-height", `${height.toFixed(1)}px`);
                });
            });
            observer.observe(node);
            return () => {
                cancelAnimationFrame(aF);
                observer.unobserve(node);
            };
        });
    }
    props = $derived.by(() => ({
        id: this.opts.id.current,
        [commandAttrs.viewport]: "",
        ...this.attachment,
    }));
}