bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/combobox/types.d.ts

@@ -1,6 +1,6 @@
-import type { PrimitiveInputAttributes } from "../../shared/attributes.js";
+import type { BitsPrimitiveInputAttributes } from "../../shared/attributes.js";
 import type { WithChild, Without } from "../../internal/types.js";
-export type { ListboxBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML, ListboxContentProps as ComboboxContentProps, ListboxContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, ListboxContentStaticProps as ComboboxContentStaticProps, ListboxContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, ListboxItemProps as ComboboxItemProps, ListboxItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, ListboxItemSnippetProps as ComboboxItemSnippetProps, ListboxMultipleRootProps as ComboboxMultipleRootProps, ListboxMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML, ListboxRootProps as ComboboxRootProps, ListboxRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML, ListboxSingleRootProps as ComboboxSingleRootProps, ListboxSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML, ListboxTriggerProps as ComboboxTriggerProps, ListboxTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, ListboxGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, ListboxGroupProps as ComboboxGroupProps, ListboxGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, ListboxGroupHeadingProps as ComboboxGroupHeadingProps, ListboxViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, ListboxViewportProps as ComboboxViewportProps, ListboxScrollDownButtonProps as ComboboxScrollDownButtonProps, ListboxScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, ListboxScrollUpButtonProps as ComboboxScrollUpButtonProps, ListboxScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, ListboxArrowProps as ComboboxArrowProps, ListboxArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, ListboxPortalProps as ComboboxPortalProps, ListboxPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../listbox/types.js";
+export type { SelectBaseRootPropsWithoutHTML as ComboboxBaseRootPropsWithoutHTML, SelectContentProps as ComboboxContentProps, SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML, SelectContentStaticProps as ComboboxContentStaticProps, SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML, SelectItemProps as ComboboxItemProps, SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML, SelectItemSnippetProps as ComboboxItemSnippetProps, SelectMultipleRootProps as ComboboxMultipleRootProps, SelectMultipleRootPropsWithoutHTML as ComboboxMultipleRootPropsWithoutHTML, SelectRootProps as ComboboxRootProps, SelectRootPropsWithoutHTML as ComboboxRootPropsWithoutHTML, SelectSingleRootProps as ComboboxSingleRootProps, SelectSingleRootPropsWithoutHTML as ComboboxSingleRootPropsWithoutHTML, SelectTriggerProps as ComboboxTriggerProps, SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML, SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML, SelectGroupProps as ComboboxGroupProps, SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML, SelectGroupHeadingProps as ComboboxGroupHeadingProps, SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML, SelectViewportProps as ComboboxViewportProps, SelectScrollDownButtonProps as ComboboxScrollDownButtonProps, SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML, SelectScrollUpButtonProps as ComboboxScrollUpButtonProps, SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML, SelectArrowProps as ComboboxArrowProps, SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML, SelectPortalProps as ComboboxPortalProps, SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML, } from "../select/types.js";
 export type ComboboxInputPropsWithoutHTML = WithChild<{
     /**
      * The default value of the input. This is not a reactive prop and is only used to populate
@@ -8,4 +8,4 @@ export type ComboboxInputPropsWithoutHTML = WithChild<{
      */
     defaultValue?: string;
 }>;
-export type ComboboxInputProps = ComboboxInputPropsWithoutHTML & Without<Omit<PrimitiveInputAttributes, "value">, ComboboxInputPropsWithoutHTML>;
+export type ComboboxInputProps = ComboboxInputPropsWithoutHTML & Without<Omit<BitsPrimitiveInputAttributes, "value">, ComboboxInputPropsWithoutHTML>;

package/dist/bits/command/command-score.js

@@ -1,4 +1,4 @@
-// eslint-disable-next-line ts/ban-ts-comment
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 // @ts-nocheck
 // The scores are arranged so that a continuous match of characters will
 // result in a total score of 1.
@@ -36,7 +36,6 @@ const PENALTY_SKIPPED = 0.999;
 // 1000 characters are inserted between matches.
 const PENALTY_CASE_MISMATCH = 0.9999;
 // Match higher for letters closer to the beginning of the word
-const PENALTY_DISTANCE_FROM_START = 0.9;
 // If the word has more characters than the user typed, it should
 // be penalised slightly.
 //

package/dist/bits/command/command.svelte.d.ts

@@ -1,18 +1,19 @@
+import { Context } from "runed";
 import type { CommandState } from "./types.js";
-import type { WithRefProps } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 export declare function defaultFilter(value: string, search: string, keywords?: string[]): number;
-export declare const setCommandGroupContainerContext: (value: CommandGroupContainerState) => CommandGroupContainerState, getCommandGroupContainerContext: <T extends CommandGroupContainerState | null | undefined = CommandGroupContainerState>(fallback?: T | undefined) => T extends null ? CommandGroupContainerState | null : CommandGroupContainerState;
+export declare const CommandGroupContainerContext: Context<CommandGroupContainerState>;
 type CommandRootStateProps = WithRefProps<ReadableBoxedValues<{
     filter: (value: string, search: string, keywords?: string[]) => number;
     shouldFilter: boolean;
     loop: boolean;
     vimBindings: boolean;
     disablePointerSelection: boolean;
+    onStateChange?: (state: Readonly<CommandState>) => void;
 }> & WritableBoxedValues<{
     value: string;
 }>>;
-type SetState = <K extends keyof CommandState>(key: K, value: CommandState[K], opts?: any) => void;
 declare class CommandRootState {
     #private;
     allItems: Set<string>;
@@ -25,6 +26,7 @@ declare class CommandRootState {
     ref: CommandRootStateProps["ref"];
     filter: CommandRootStateProps["filter"];
     shouldFilter: CommandRootStateProps["shouldFilter"];
+    onStateChange: CommandRootStateProps["onStateChange"];
     loop: CommandRootStateProps["loop"];
     key: number;
     viewportNode: HTMLElement | null;
@@ -34,28 +36,20 @@ declare class CommandRootState {
     disablePointerSelection: CommandRootStateProps["disablePointerSelection"];
     commandState: CommandState;
     _commandState: CommandState;
-    snapshot: () => CommandState;
-    setState: SetState;
-    emit: () => void;
+    setState<K extends keyof CommandState>(key: K, value: CommandState[K], opts?: boolean): void;
     constructor(props: CommandRootStateProps);
-    setValue: (value: string, opts?: boolean) => void;
-    registerValue: (id: string, value: string, keywords?: string[]) => (() => void) | undefined;
-    registerItem: (id: string, groupId: string | undefined) => () => void;
-    registerGroup: (id: string) => () => void;
+    setValue(value: string, opts?: boolean): void;
+    registerValue(id: string, value: string, keywords?: string[]): (() => void) | undefined;
+    registerItem(id: string, groupId: string | undefined): () => void;
+    registerGroup(id: string): () => void;
+    onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
         readonly role: "application";
         readonly "data-command-root": "";
         readonly tabindex: -1;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
-    createEmpty(props: CommandEmptyStateProps): CommandEmptyState;
-    createGroupContainer(props: CommandGroupContainerStateProps): CommandGroupContainerState;
-    createInput(props: CommandInputStateProps): CommandInputState;
-    createItem(props: CommandItemStateProps): CommandItemState;
-    createSeparator(props: CommandSeparatorStateProps): CommandSeparatorState;
-    createList(props: CommandListStateProps): CommandListState;
-    createLabel(props: CommandLabelStateProps): CommandLabelState;
 }
 type CommandEmptyStateProps = WithRefProps & ReadableBoxedValues<{
     forceMount: boolean;
@@ -89,8 +83,6 @@ declare class CommandGroupContainerState {
         readonly "data-value": string;
         readonly "data-command-group": "";
     };
-    createGroupHeading(props: CommandGroupHeadingStateProps): CommandGroupHeadingState;
-    createGroupItems(props: CommandGroupItemsStateProps): CommandGroupItemsState;
 }
 type CommandGroupHeadingStateProps = WithRefProps;
 declare class CommandGroupHeadingState {
@@ -129,7 +121,7 @@ declare class CommandInputState {
         readonly spellcheck: false;
         readonly "aria-autocomplete": "list";
         readonly role: "combobox";
-        readonly "aria-expanded": "false" | "true";
+        readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
         readonly "aria-labelledby": string | undefined;
         readonly "aria-activedescendant": string | undefined;
@@ -152,16 +144,19 @@ declare class CommandItemState {
     shouldRender: boolean;
     isSelected: boolean;
     constructor(props: CommandItemStateProps, root: CommandRootState);
+    onpointermove(_: BitsPointerEvent): void;
+    onclick(_: BitsMouseEvent): void;
     props: {
         readonly id: string;
-        readonly "aria-disabled": "false" | "true";
-        readonly "aria-selected": "false" | "true";
+        readonly "aria-disabled": "true" | "false";
+        readonly "aria-selected": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly "data-selected": "" | undefined;
+        readonly "data-value": string;
         readonly "data-command-item": "";
         readonly role: "option";
-        readonly onclick: () => void;
-        readonly onpointermove: () => void;
+        readonly onpointermove: (_: BitsPointerEvent) => void;
+        readonly onclick: (_: BitsMouseEvent) => void;
     };
 }
 type CommandLoadingStateProps = WithRefProps<ReadableBoxedValues<{
@@ -207,7 +202,6 @@ declare class CommandListState {
         readonly "aria-label": string;
         readonly "data-command-list": "";
     };
-    createViewport(props: CommandViewportStateProps): CommandViewportState;
 }
 type CommandLabelStateProps = WithRefProps<ReadableBoxedValues<{
     for?: string;
@@ -219,7 +213,7 @@ declare class CommandLabelState {
         readonly id: string;
         readonly "data-command-input-label": "";
         readonly for: string | undefined;
-        readonly style: import("../../index.js").StyleProperties;
+        readonly style: import("svelte-toolbelt").StyleProperties;
     };
 }
 type CommandViewportStateProps = WithRefProps;

package/dist/bits/command/command.svelte.js

@@ -1,14 +1,11 @@
 import { untrack } from "svelte";
+import { afterSleep, afterTick, srOnlyStyles, useRefById } from "svelte-toolbelt";
+import { Context } from "runed";
 import { findNextSibling, findPreviousSibling } from "./utils.js";
 import { commandScore } from "./command-score.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { createContext } from "../../internal/createContext.js";
-import { afterSleep } from "../../internal/afterSleep.js";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaDisabled, getAriaExpanded, getAriaSelected, getDataDisabled, getDataSelected, } from "../../internal/attrs.js";
 import { getFirstNonCommentChild } from "../../internal/dom.js";
-import { srOnlyStyles } from "../../internal/style.js";
-import { afterTick } from "../../internal/afterTick.js";
 const ROOT_ATTR = "data-command-root";
 const LIST_ATTR = "data-command-list";
 const INPUT_ATTR = "data-command-input";
@@ -30,17 +27,19 @@ const VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
 export function defaultFilter(value, search, keywords) {
     return commandScore(value, search, keywords);
 }
-const [setCommandRootContext, getCommandRootContext] = createContext("Command.Root");
-const [setCommandListContext, getCommandListContext] = createContext("Command.List");
-export const [setCommandGroupContainerContext, getCommandGroupContainerContext] = createContext("Command.Group");
+const CommandRootContext = new Context("Command.Root");
+const CommandListContext = new Context("Command.List");
+export const CommandGroupContainerContext = new Context("Command.Group");
 class CommandRootState {
-    allItems = new Set(); // [...itemIds]
-    allGroups = new Map(); // groupId → [...itemIds]
+    #updateScheduled = false;
+    allItems = new Set();
+    allGroups = new Map();
     allIds = new Map();
     id;
     ref;
     filter;
     shouldFilter;
+    onStateChange;
     loop;
     // attempt to prevent the harsh delay when user is typing fast
     key = $state(0);
@@ -54,8 +53,24 @@ class CommandRootState {
     commandState = $state.raw(null);
     // internal state that we mutate in batches and publish to the `state` at once
     _commandState = $state(null);
-    snapshot = () => this._commandState;
-    setState = (key, value, opts) => {
+    #snapshot() {
+        return 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.onStateChange?.current?.($state.snapshot(currentState));
+            }
+        });
+    }
+    setState(key, value, opts) {
         if (Object.is(this._commandState[key], value))
             return;
         this._commandState[key] = value;
@@ -72,12 +87,8 @@ class CommandRootState {
                 this.#scrollSelectedIntoView();
             }
         }
-        // notify subscribers that the state has changed
-        this.emit();
-    };
-    emit = () => {
-        this.commandState = $state.snapshot(this._commandState);
-    };
+        this.#scheduleUpdate();
+    }
     constructor(props) {
         this.id = props.id;
         this.ref = props.ref;
@@ -87,10 +98,11 @@ class CommandRootState {
         this.valueProp = props.value;
         this.#vimBindings = props.vimBindings;
         this.disablePointerSelection = props.disablePointerSelection;
+        this.onStateChange = props.onStateChange;
         const defaultState = {
             /** Value of the search query */
             search: "",
-            /** Currnetly selected item value */
+            /** Currently selected item value */
             value: this.valueProp.current ?? "",
             filtered: {
                 /** The count of all visible items. */
@@ -107,15 +119,20 @@ class CommandRootState {
             id: this.id,
             ref: this.ref,
         });
+        this.onkeydown = this.onkeydown.bind(this);
     }
-    #score = (value, keywords) => {
+    #score(value, keywords) {
         const filter = this.filter.current ?? defaultFilter;
         const score = value ? filter(value, this._commandState.search, keywords) : 0;
         return score;
-    };
-    #sort = () => {
-        if (!this._commandState.search || this.shouldFilter.current === false)
+    }
+    #sort() {
+        if (!this._commandState.search || this.shouldFilter.current === false) {
+            // If no search and no selection yet, select first item
+            if (!this.commandState.value)
+                this.#selectFirstItem();
             return;
+        }
         const scores = this._commandState.filtered.items;
         // sort the groups
         const groups = [];
@@ -168,8 +185,8 @@ class CommandRootState {
             const element = listInsertionElement?.querySelector(`${GROUP_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(group[0])}"]`);
             element?.parentElement?.appendChild(element);
         }
-    };
-    setValue = (value, opts) => {
+    }
+    setValue(value, opts) {
         if (value !== this.valueProp.current && value === "") {
             afterTick(() => {
                 this.key++;
@@ -177,15 +194,15 @@ class CommandRootState {
         }
         this.setState("value", value, opts);
         this.valueProp.current = value;
-    };
-    #selectFirstItem = () => {
+    }
+    #selectFirstItem() {
         afterTick(() => {
             const item = this.#getValidItems().find((item) => item.getAttribute("aria-disabled") !== "true");
             const value = item?.getAttribute(VALUE_ATTR);
             this.setValue(value || "");
         });
-    };
-    #filterItems = () => {
+    }
+    #filterItems() {
         if (!this._commandState.search || this.shouldFilter.current === false) {
             this._commandState.filtered.count = this.allItems.size;
             return;
@@ -213,15 +230,15 @@ class CommandRootState {
             }
         }
         this._commandState.filtered.count = itemCount;
-    };
-    #getValidItems = () => {
+    }
+    #getValidItems() {
         const node = this.ref.current;
         if (!node)
             return [];
         const validItems = Array.from(node.querySelectorAll(VALID_ITEM_SELECTOR)).filter((el) => !!el);
         return validItems;
-    };
-    #getSelectedItem = () => {
+    }
+    #getSelectedItem() {
         const node = this.ref.current;
         if (!node)
             return;
@@ -229,8 +246,8 @@ class CommandRootState {
         if (!selectedNode)
             return;
         return selectedNode;
-    };
-    #scrollSelectedIntoView = () => {
+    }
+    #scrollSelectedIntoView() {
         afterSleep(1, () => {
             const item = this.#getSelectedItem();
             if (!item)
@@ -239,7 +256,7 @@ class CommandRootState {
             if (!grandparent)
                 return;
             const firstChildOfParent = getFirstNonCommentChild(grandparent);
-            if (firstChildOfParent && firstChildOfParent.dataset.value === item.dataset.value) {
+            if (firstChildOfParent && firstChildOfParent.dataset?.value === item.dataset?.value) {
                 item
                     ?.closest(GROUP_SELECTOR)
                     ?.querySelector(GROUP_HEADING_SELECTOR)
@@ -248,15 +265,15 @@ class CommandRootState {
             }
             item.scrollIntoView({ block: "nearest" });
         });
-    };
-    #updateSelectedToIndex = (index) => {
+    }
+    #updateSelectedToIndex(index) {
         const items = this.#getValidItems();
         const item = items[index];
         if (item) {
             this.setValue(item.getAttribute(VALUE_ATTR) ?? "");
         }
-    };
-    #updateSelectedByItem = (change) => {
+    }
+    #updateSelectedByItem(change) {
         const selected = this.#getSelectedItem();
         const items = this.#getValidItems();
         const index = items.findIndex((item) => item === selected);
@@ -273,8 +290,8 @@ class CommandRootState {
         if (newSelected) {
             this.setValue(newSelected.getAttribute(VALUE_ATTR) ?? "");
         }
-    };
-    #updateSelectedByGroup = (change) => {
+    }
+    #updateSelectedByGroup(change) {
         const selected = this.#getSelectedItem();
         let group = selected?.closest(GROUP_SELECTOR);
         let item;
@@ -291,20 +308,19 @@ class CommandRootState {
         else {
             this.#updateSelectedByItem(change);
         }
-    };
+    }
     // keep id -> { value, keywords } mapping up to date
-    registerValue = (id, value, keywords) => {
+    registerValue(id, value, keywords) {
         if (value === this.allIds.get(id)?.value)
             return;
         this.allIds.set(id, { value, keywords });
         this._commandState.filtered.items.set(id, this.#score(value, keywords));
         this.#sort();
-        this.emit();
         return () => {
             this.allIds.delete(id);
         };
-    };
-    registerItem = (id, groupId) => {
+    }
+    registerItem(id, groupId) {
         this.allItems.add(id);
         // Track this item within the group
         if (groupId) {
@@ -317,11 +333,7 @@ class CommandRootState {
         }
         this.#filterItems();
         this.#sort();
-        // Could be initial mount, select the first item if none already selected
-        if (!this.commandState.value) {
-            this.#selectFirstItem();
-        }
-        this.emit();
+        this.#scheduleUpdate();
         return () => {
             this.allIds.delete(id);
             this.allItems.delete(id);
@@ -332,10 +344,10 @@ class CommandRootState {
             // so selection should be moved to the first
             if (selectedItem?.getAttribute("id") === id)
                 this.#selectFirstItem();
-            this.emit();
+            this.#scheduleUpdate();
         };
-    };
-    registerGroup = (id) => {
+    }
+    registerGroup(id) {
         if (!this.allGroups.has(id)) {
             this.allGroups.set(id, new Set());
         }
@@ -343,11 +355,11 @@ class CommandRootState {
             this.allIds.delete(id);
             this.allGroups.delete(id);
         };
-    };
-    #last = () => {
+    }
+    #last() {
         return this.#updateSelectedToIndex(this.#getValidItems().length - 1);
-    };
-    #next = (e) => {
+    }
+    #next(e) {
         e.preventDefault();
         if (e.metaKey) {
             this.#last();
@@ -358,8 +370,8 @@ class CommandRootState {
         else {
             this.#updateSelectedByItem(1);
         }
-    };
-    #prev = (e) => {
+    }
+    #prev(e) {
         e.preventDefault();
         if (e.metaKey) {
             // First item
@@ -373,8 +385,8 @@ class CommandRootState {
             // Previous item
             this.#updateSelectedByItem(-1);
         }
-    };
-    #onkeydown = (e) => {
+    }
+    onkeydown(e) {
         switch (e.key) {
             case kbd.n:
             case kbd.j: {
@@ -424,35 +436,14 @@ class CommandRootState {
                 }
             }
         }
-    };
+    }
     props = $derived.by(() => ({
         id: this.id.current,
         role: "application",
         [ROOT_ATTR]: "",
         tabindex: -1,
-        onkeydown: this.#onkeydown,
+        onkeydown: this.onkeydown,
     }));
-    createEmpty(props) {
-        return new CommandEmptyState(props, this);
-    }
-    createGroupContainer(props) {
-        return new CommandGroupContainerState(props, this);
-    }
-    createInput(props) {
-        return new CommandInputState(props, this);
-    }
-    createItem(props) {
-        return new CommandItemState(props, this);
-    }
-    createSeparator(props) {
-        return new CommandSeparatorState(props, this);
-    }
-    createList(props) {
-        return new CommandListState(props, this);
-    }
-    createLabel(props) {
-        return new CommandLabelState(props, this);
-    }
 }
 class CommandEmptyState {
     #ref;
@@ -473,7 +464,7 @@ class CommandEmptyState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.shouldRender,
+            deps: () => this.shouldRender,
         });
     }
     props = $derived.by(() => ({
@@ -509,7 +500,7 @@ class CommandGroupContainerState {
         useRefById({
             id: this.id,
             ref: this.#ref,
-            condition: () => this.shouldRender,
+            deps: () => this.shouldRender,
         });
         $effect(() => {
             return this.#root.registerGroup(this.id.current);
@@ -536,12 +527,6 @@ class CommandGroupContainerState {
         "data-value": this.trueValue,
         [GROUP_ATTR]: "",
     }));
-    createGroupHeading(props) {
-        return new CommandGroupHeadingState(props, this);
-    }
-    createGroupItems(props) {
-        return new CommandGroupItemsState(props, this);
-    }
 }
 class CommandGroupHeadingState {
     #ref;
@@ -674,18 +659,18 @@ class CommandItemState {
         this.#disabled = props.disabled;
         this.#onSelectProp = props.onSelect;
         this.#forceMount = props.forceMount;
-        this.#group = getCommandGroupContainerContext(null);
+        this.#group = CommandGroupContainerContext.getOr(null);
         this.trueValue = props.value.current;
         useRefById({
             id: this.id,
             ref: this.#ref,
-            condition: () => Boolean(this.root.commandState.search),
+            deps: () => Boolean(this.root.commandState.search),
         });
         $effect(() => {
             this.id.current;
             this.#group?.id.current;
             if (!this.#forceMount.current) {
-                untrack(() => {
+                return untrack(() => {
                     return this.root.registerItem(this.id.current, this.#group?.id.current);
                 });
             }
@@ -703,38 +688,42 @@ class CommandItemState {
                 node.setAttribute(VALUE_ATTR, this.trueValue);
             });
         });
+        // bindings
+        this.onclick = this.onclick.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
     }
-    #onSelect = () => {
+    #onSelect() {
         if (this.#disabled.current)
             return;
         this.#select();
         this.#onSelectProp?.current();
-    };
-    #select = () => {
+    }
+    #select() {
         if (this.#disabled.current)
             return;
         this.root.setValue(this.trueValue, true);
-    };
-    #onpointermove = () => {
+    }
+    onpointermove(_) {
         if (this.#disabled.current || this.root.disablePointerSelection.current)
             return;
         this.#select();
-    };
-    #onclick = () => {
+    }
+    onclick(_) {
         if (this.#disabled.current)
             return;
         this.#onSelect();
-    };
+    }
     props = $derived.by(() => ({
         id: this.id.current,
         "aria-disabled": getAriaDisabled(this.#disabled.current),
         "aria-selected": getAriaSelected(this.isSelected),
         "data-disabled": getDataDisabled(this.#disabled.current),
         "data-selected": getDataSelected(this.isSelected),
+        "data-value": this.trueValue,
         [ITEM_ATTR]: "",
         role: "option",
-        onclick: this.#onclick,
-        onpointermove: this.#onpointermove,
+        onpointermove: this.onpointermove,
+        onclick: this.onclick,
     }));
 }
 class CommandLoadingState {
@@ -774,7 +763,7 @@ class CommandSeparatorState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.shouldRender,
+            deps: () => this.shouldRender,
         });
     }
     props = $derived.by(() => ({
@@ -804,9 +793,6 @@ class CommandListState {
         "aria-label": this.#ariaLabel.current,
         [LIST_ATTR]: "",
     }));
-    createViewport(props) {
-        return new CommandViewportState(props, this);
-    }
 }
 class CommandLabelState {
     #ref;
@@ -873,38 +859,38 @@ class CommandViewportState {
     }));
 }
 export function useCommandRoot(props) {
-    return setCommandRootContext(new CommandRootState(props));
+    return CommandRootContext.set(new CommandRootState(props));
 }
 export function useCommandEmpty(props) {
-    return getCommandRootContext().createEmpty(props);
+    return new CommandEmptyState(props, CommandRootContext.get());
 }
 export function useCommandItem(props) {
-    return getCommandRootContext().createItem(props);
+    return new CommandItemState(props, CommandRootContext.get());
 }
 export function useCommandGroupContainer(props) {
-    return setCommandGroupContainerContext(getCommandRootContext().createGroupContainer(props));
+    return CommandGroupContainerContext.set(new CommandGroupContainerState(props, CommandRootContext.get()));
 }
 export function useCommandGroupHeading(props) {
-    return getCommandGroupContainerContext().createGroupHeading(props);
+    return new CommandGroupHeadingState(props, CommandGroupContainerContext.get());
 }
 export function useCommandGroupItems(props) {
-    return getCommandGroupContainerContext().createGroupItems(props);
+    return new CommandGroupItemsState(props, CommandGroupContainerContext.get());
 }
 export function useCommandInput(props) {
-    return getCommandRootContext().createInput(props);
+    return new CommandInputState(props, CommandRootContext.get());
 }
 export function useCommandLoading(props) {
     return new CommandLoadingState(props);
 }
 export function useCommandSeparator(props) {
-    return getCommandRootContext().createSeparator(props);
+    return new CommandSeparatorState(props, CommandRootContext.get());
 }
 export function useCommandList(props) {
-    return setCommandListContext(getCommandRootContext().createList(props));
+    return CommandListContext.set(new CommandListState(props, CommandRootContext.get()));
 }
 export function useCommandViewport(props) {
-    return getCommandListContext().createViewport(props);
+    return new CommandViewportState(props, CommandListContext.get());
 }
 export function useCommandLabel(props) {
-    return getCommandRootContext().createLabel(props);
+    return new CommandLabelState(props, CommandRootContext.get());
 }