@johly/bits-ui 2.18.1

package/dist/bits/command/components/command.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { boxWith, mergeProps } from "svelte-toolbelt";
+	import { CommandRootState } from "../command.svelte.js";
+	import type { CommandRootProps } from "../types.js";
+	import CommandLabel from "./_command-label.svelte";
+	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+	import { computeCommandScore } from "../index.js";
+
+	const uid = $props.id();
+
+	let {
+		id = createId(uid),
+		ref = $bindable(null),
+		value = $bindable(""),
+		onValueChange = noop,
+		onStateChange = noop,
+		loop = false,
+		shouldFilter = true,
+		filter = computeCommandScore,
+		label = "",
+		vimBindings = true,
+		disablePointerSelection = false,
+		disableInitialScroll = false,
+		columns = null,
+		children,
+		child,
+		...restProps
+	}: CommandRootProps = $props();
+
+	const rootState = CommandRootState.create({
+		id: boxWith(() => id),
+		ref: boxWith(
+			() => ref,
+			(v) => (ref = v)
+		),
+		filter: boxWith(() => filter),
+		shouldFilter: boxWith(() => shouldFilter),
+		loop: boxWith(() => loop),
+		value: boxWith(
+			() => value,
+			(v) => {
+				if (value !== v) {
+					value = v;
+					onValueChange(v);
+				}
+			}
+		),
+		vimBindings: boxWith(() => vimBindings),
+		disablePointerSelection: boxWith(() => disablePointerSelection),
+		disableInitialScroll: boxWith(() => disableInitialScroll),
+		onStateChange: boxWith(() => onStateChange),
+		columns: boxWith(() => columns),
+	});
+
+	// Imperative APIs - DO NOT REMOVE OR RENAME
+
+	/**
+	 * 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)
+	 * }
+	 */
+	export const updateSelectedToIndex: (typeof rootState)["updateSelectedToIndex"] = (i) =>
+		rootState.updateSelectedToIndex(i);
+	/**
+	 * 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)
+	 */
+	export const updateSelectedByGroup: (typeof rootState)["updateSelectedByGroup"] = (c) =>
+		rootState.updateSelectedByGroup(c);
+	/**
+	 * 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()
+	 */
+	export const updateSelectedByItem: (typeof rootState)["updateSelectedByItem"] = (c) =>
+		rootState.updateSelectedByItem(c);
+	/**
+	 * Gets all non-disabled, visible command items.
+	 *
+	 * @returns Array of valid item elements
+	 * @remarks Exposed for direct item access and bound checking
+	 */
+	export const getValidItems = () => rootState.getValidItems();
+
+	const mergedProps = $derived(mergeProps(restProps, rootState.props));
+</script>
+
+{#snippet Label()}
+	<CommandLabel>
+		{label}
+	</CommandLabel>
+{/snippet}
+
+{#if child}
+	{@render Label()}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div {...mergedProps}>
+		{@render Label()}
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -0,0 +1,59 @@
+import type { CommandRootProps } from "../types.js";
+declare const Command: import("svelte").Component<CommandRootProps, {
+    /**
+         * 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: number) => void;
+    /**
+         * 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: 1 | -1) => void;
+    /**
+         * 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: number) => void;
+    /**
+         * Gets all non-disabled, visible command items.
+         *
+         * @returns Array of valid item elements
+         * @remarks Exposed for direct item access and bound checking
+         */ getValidItems: () => HTMLElement[];
+}, "value" | "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/bits/command/compute-command-score.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Given a command, a search query, and (optionally) a list of keywords for the command,
+ * computes a score between 0 and 1 that represents how well the search query matches the
+ * abbreviation and keywords. 1 is a perfect match, 0 is no match.
+ *
+ * The score is calculated based on the following rules:
+ * - The scores are arranged so that a continuous match of characters will result in a total
+ * score of 1. The best case, this character is a match, and either this is the start of the string
+ * or the previous character was also a match.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely
+ * that the user will type the starts of fragments.
+ * - Word jumps between spaces are scored slightly higher than slashes, brackets, hyphens, etc.
+ * - A continuous match of characters will result in a total score of 1.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely that the user will type the starts of fragments.
+ * - Any other match isn't ideal, but we include it for completeness.
+ * - If the user transposed two letters, it should be significantly penalized.
+ * - The goodness of a match should decay slightly with each missing character.
+ * - Match higher for letters closer to the beginning of the word.
+ *
+ * @param command - The value to score against the search string (e.g. a command name like "Calculator")
+ * @param search - The search string to score against the value/aliases
+ * @param commandKeywords - An optional list of aliases/keywords to score against the search string - e.g. ["math", "add", "divide", "multiply", "subtract"]
+ * @returns A score between 0 and 1 that represents how well the search string matches the
+ * command (and keywords)
+ */
+export declare function computeCommandScore(command: string, search: string, commandKeywords?: string[]): number;

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

@@ -0,0 +1,160 @@
+// oxlint-disable ban-ts-comment
+// @ts-nocheck
+// The scores are arranged so that a continuous match of characters will
+// result in a total score of 1.
+//
+// The best case, this character is a match, and either this is the start
+// of the string, or the previous character was also a match.
+const SCORE_CONTINUE_MATCH = 1;
+// A new match at the start of a word scores better than a new match
+// elsewhere as it's more likely that the user will type the starts
+// of fragments.
+// NOTE: We score word jumps between spaces slightly higher than slashes, brackets
+// hyphens, etc.
+const SCORE_SPACE_WORD_JUMP = 0.9;
+const SCORE_NON_SPACE_WORD_JUMP = 0.8;
+// Any other match isn't ideal, but we include it for completeness.
+const SCORE_CHARACTER_JUMP = 0.17;
+// If the user transposed two letters, it should be significantly penalized.
+//
+// i.e. "ouch" is more likely than "curtain" when "uc" is typed.
+const SCORE_TRANSPOSITION = 0.1;
+// The goodness of a match should decay slightly with each missing
+// character.
+//
+// i.e. "bad" is more likely than "bard" when "bd" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 100 characters are inserted between matches.
+const PENALTY_SKIPPED = 0.999;
+// The goodness of an exact-case match should be higher than a
+// case-insensitive match by a small amount.
+//
+// i.e. "HTML" is more likely than "haml" when "HM" is typed.
+//
+// This will not change the order of suggestions based on SCORE_* until
+// 1000 characters are inserted between matches.
+const PENALTY_CASE_MISMATCH = 0.9999;
+// Match higher for letters closer to the beginning of the word
+// If the word has more characters than the user typed, it should
+// be penalized slightly.
+//
+// i.e. "html" is more likely than "html5" if I type "html".
+//
+// However, it may well be the case that there's a sensible secondary
+// ordering (like alphabetical) that it makes sense to rely on when
+// there are many prefix matches, so we don't make the penalty increase
+// with the number of tokens.
+const PENALTY_NOT_COMPLETE = 0.99;
+const IS_GAP_REGEXP = /[\\/_+.#"@[({&]/;
+const COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g;
+const IS_SPACE_REGEXP = /[\s-]/;
+const COUNT_SPACE_REGEXP = /[\s-]/g;
+function computeCommandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, stringIndex, abbreviationIndex, memoizedResults) {
+    if (abbreviationIndex === abbreviation.length) {
+        if (stringIndex === string.length)
+            return SCORE_CONTINUE_MATCH;
+        return PENALTY_NOT_COMPLETE;
+    }
+    const memoizeKey = `${stringIndex},${abbreviationIndex}`;
+    if (memoizedResults[memoizeKey] !== undefined)
+        return memoizedResults[memoizeKey];
+    const abbreviationChar = lowerAbbreviation.charAt(abbreviationIndex);
+    let index = lowerString.indexOf(abbreviationChar, stringIndex);
+    let highScore = 0;
+    let score, transposedScore, wordBreaks, spaceBreaks;
+    while (index >= 0) {
+        score = computeCommandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 1, memoizedResults);
+        if (score > highScore) {
+            if (index === stringIndex) {
+                score *= SCORE_CONTINUE_MATCH;
+            }
+            else if (IS_GAP_REGEXP.test(string.charAt(index - 1))) {
+                score *= SCORE_NON_SPACE_WORD_JUMP;
+                wordBreaks = string.slice(stringIndex, index - 1).match(COUNT_GAPS_REGEXP);
+                if (wordBreaks && stringIndex > 0) {
+                    score *= PENALTY_SKIPPED ** wordBreaks.length;
+                }
+            }
+            else if (IS_SPACE_REGEXP.test(string.charAt(index - 1))) {
+                score *= SCORE_SPACE_WORD_JUMP;
+                spaceBreaks = string.slice(stringIndex, index - 1).match(COUNT_SPACE_REGEXP);
+                if (spaceBreaks && stringIndex > 0) {
+                    score *= PENALTY_SKIPPED ** spaceBreaks.length;
+                }
+            }
+            else {
+                score *= SCORE_CHARACTER_JUMP;
+                if (stringIndex > 0) {
+                    score *= PENALTY_SKIPPED ** (index - stringIndex);
+                }
+            }
+            if (string.charAt(index) !== abbreviation.charAt(abbreviationIndex)) {
+                score *= PENALTY_CASE_MISMATCH;
+            }
+        }
+        if ((score < SCORE_TRANSPOSITION &&
+            lowerString.charAt(index - 1) ===
+                lowerAbbreviation.charAt(abbreviationIndex + 1)) ||
+            (lowerAbbreviation.charAt(abbreviationIndex + 1) ===
+                lowerAbbreviation.charAt(abbreviationIndex) &&
+                lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex))) {
+            transposedScore = computeCommandScoreInner(string, abbreviation, lowerString, lowerAbbreviation, index + 1, abbreviationIndex + 2, memoizedResults);
+            if (transposedScore * SCORE_TRANSPOSITION > score) {
+                score = transposedScore * SCORE_TRANSPOSITION;
+            }
+        }
+        if (score > highScore) {
+            highScore = score;
+        }
+        index = lowerString.indexOf(abbreviationChar, index + 1);
+    }
+    memoizedResults[memoizeKey] = highScore;
+    return highScore;
+}
+/**
+ *
+ * @param string
+ * @returns
+ */
+function formatInput(string) {
+    // convert all valid space characters to space so they match each other
+    return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
+}
+/**
+ * Given a command, a search query, and (optionally) a list of keywords for the command,
+ * computes a score between 0 and 1 that represents how well the search query matches the
+ * abbreviation and keywords. 1 is a perfect match, 0 is no match.
+ *
+ * The score is calculated based on the following rules:
+ * - The scores are arranged so that a continuous match of characters will result in a total
+ * score of 1. The best case, this character is a match, and either this is the start of the string
+ * or the previous character was also a match.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely
+ * that the user will type the starts of fragments.
+ * - Word jumps between spaces are scored slightly higher than slashes, brackets, hyphens, etc.
+ * - A continuous match of characters will result in a total score of 1.
+ * - A new match at the start of a word scores better than a new match elsewhere as it's more likely that the user will type the starts of fragments.
+ * - Any other match isn't ideal, but we include it for completeness.
+ * - If the user transposed two letters, it should be significantly penalized.
+ * - The goodness of a match should decay slightly with each missing character.
+ * - Match higher for letters closer to the beginning of the word.
+ *
+ * @param command - The value to score against the search string (e.g. a command name like "Calculator")
+ * @param search - The search string to score against the value/aliases
+ * @param commandKeywords - An optional list of aliases/keywords to score against the search string - e.g. ["math", "add", "divide", "multiply", "subtract"]
+ * @returns A score between 0 and 1 that represents how well the search string matches the
+ * command (and keywords)
+ */
+export function computeCommandScore(command, search, commandKeywords) {
+    /**
+     * NOTE: We used to do lower-casing on each recursive call, but this meant that `toLowerCase()`
+     * was the dominating cost in the algorithm. Passing both is a little ugly, but considerably
+     * faster.
+     */
+    command =
+        commandKeywords && commandKeywords.length > 0
+            ? `${`${command} ${commandKeywords?.join(" ")}`}`
+            : command;
+    return computeCommandScoreInner(command, search, formatInput(command), formatInput(search), 0, 0, {});
+}

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

@@ -0,0 +1,13 @@
+export { default as Root } from "./components/command.svelte";
+export { default as Empty } from "./components/command-empty.svelte";
+export { default as Group } from "./components/command-group.svelte";
+export { default as GroupHeading } from "./components/command-group-heading.svelte";
+export { default as GroupItems } from "./components/command-group-items.svelte";
+export { default as Input } from "./components/command-input.svelte";
+export { default as Item } from "./components/command-item.svelte";
+export { default as LinkItem } from "./components/command-link-item.svelte";
+export { default as List } from "./components/command-list.svelte";
+export { default as Viewport } from "./components/command-viewport.svelte";
+export { default as Loading } from "./components/command-loading.svelte";
+export { default as Separator } from "./components/command-separator.svelte";
+export type { CommandRootProps as RootProps, CommandEmptyProps as EmptyProps, CommandGroupProps as GroupProps, CommandGroupHeadingProps as GroupHeadingProps, CommandGroupItemsProps as GroupItemsProps, CommandItemProps as ItemProps, CommandLinkItemProps as LinkItemProps, CommandInputProps as InputProps, CommandSeparatorProps as SeparatorProps, CommandListProps as ListProps, CommandLoadingProps as LoadingProps, CommandViewportProps as ViewportProps, } from "./types.js";

package/dist/bits/command/exports.js

@@ -0,0 +1,12 @@
+export { default as Root } from "./components/command.svelte";
+export { default as Empty } from "./components/command-empty.svelte";
+export { default as Group } from "./components/command-group.svelte";
+export { default as GroupHeading } from "./components/command-group-heading.svelte";
+export { default as GroupItems } from "./components/command-group-items.svelte";
+export { default as Input } from "./components/command-input.svelte";
+export { default as Item } from "./components/command-item.svelte";
+export { default as LinkItem } from "./components/command-link-item.svelte";
+export { default as List } from "./components/command-list.svelte";
+export { default as Viewport } from "./components/command-viewport.svelte";
+export { default as Loading } from "./components/command-loading.svelte";
+export { default as Separator } from "./components/command-separator.svelte";

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

@@ -0,0 +1,2 @@
+export * as Command from "./exports.js";
+export { computeCommandScore } from "./compute-command-score.js";

package/dist/bits/command/index.js

@@ -0,0 +1,2 @@
+export * as Command from "./exports.js";
+export { computeCommandScore } from "./compute-command-score.js";

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

@@ -0,0 +1,164 @@
+import type { BitsPrimitiveAnchorAttributes, BitsPrimitiveDivAttributes, BitsPrimitiveInputAttributes, WithChild, Without } from "../../shared/index.js";
+export type CommandState = {
+    /** The value of the search query */
+    search: string;
+    /** The value of the selected command menu item */
+    value: string;
+    /** The filtered items */
+    filtered: {
+        /** The count of all visible items. */
+        count: number;
+        /** Map from visible item value to its search store. */
+        items: Map<string, number>;
+        /** Set of groups with at least one visible item. */
+        groups: Set<string>;
+    };
+};
+export type CommandRootPropsWithoutHTML = WithChild<{
+    /**
+     * An accessible label for the command menu.
+     * Not visible & only used for screen readers.
+     */
+    label?: string;
+    /**
+     * Optionally set to `false` to turn off the automatic filtering
+     * and sorting. If `false`, you must conditionally render valid
+     * items yourself.
+     */
+    shouldFilter?: boolean;
+    /**
+     * A custom filter function for whether each command item should
+     * match the query. It should return a number between `0` and `1`,
+     * with `1` being a perfect match, and `0` being no match, resulting
+     * in the item being hidden entirely.
+     *
+     * By default, it will use the `computeCommandScore` function exported
+     * by this package to compute the score.
+     */
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    /**
+     * A function that is called when the command state changes.
+     */
+    onStateChange?: (state: Readonly<CommandState>) => void;
+    /**
+     * Optionally provide or bind to the selected command menu item.
+     */
+    value?: string;
+    /**
+     * A function that is called when the selected command menu item
+     * changes. It receives the new value as an argument.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Optionally set to `true` to enable looping through the items
+     * when the user reaches the end of the list using the keyboard.
+     */
+    loop?: boolean;
+    /**
+     * Optionally set to `true` to disable selection via pointer events.
+     */
+    disablePointerSelection?: boolean;
+    /**
+     * Set this prop to `false` to disable the option to use ctrl+n/j/p/k (vim style) navigation.
+     *
+     * @default true
+     */
+    vimBindings?: boolean;
+    /**
+     * The number of columns in a grid layout.
+     *
+     * @default null
+     */
+    columns?: number | null;
+    /**
+     * Whether to disable scrolling the selected item into view on initial mount.
+     * When `true`, prevents automatic scrolling when the command menu first renders
+     * and selects its first item, but still allows scrolling on subsequent selections.
+     *
+     * @default false
+     */
+    disableInitialScroll?: boolean;
+}>;
+export type CommandRootProps = CommandRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandRootPropsWithoutHTML>;
+export type CommandEmptyPropsWithoutHTML = WithChild<{
+    /**
+     * Whether to force mount the group container regardless of
+     * filtering logic.
+     */
+    forceMount?: boolean;
+}>;
+export type CommandEmptyProps = CommandEmptyPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandEmptyPropsWithoutHTML>;
+export type CommandGroupPropsWithoutHTML = WithChild<{
+    /**
+     * A unique value for the group.
+     */
+    value?: string;
+    /**
+     * Whether to force mount the group container regardless of
+     * filtering logic.
+     */
+    forceMount?: boolean;
+}>;
+export type CommandGroupProps = CommandGroupPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandGroupPropsWithoutHTML>;
+export type CommandGroupHeadingPropsWithoutHTML = WithChild;
+export type CommandGroupHeadingProps = CommandGroupHeadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandGroupHeadingPropsWithoutHTML>;
+export type CommandGroupItemsPropsWithoutHTML = WithChild;
+export type CommandGroupItemsProps = CommandGroupItemsPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandGroupItemsPropsWithoutHTML>;
+export type CommandItemPropsWithoutHTML = WithChild<{
+    /**
+     * Whether the item is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * A callback that is fired when the item is selected, either via
+     * click or keyboard selection.
+     */
+    onSelect?: () => void;
+    /**
+     * A unique value for this item that will be used when filtering
+     * and ranking the items. If not provided, an attempt will be made
+     * to use the `textContent` of the item. If the `textContent` is dynamic,
+     * you will need to provide a stable unique value for the item.
+     */
+    value?: string;
+    /**
+     * A list of keywords that will be used to filter the item.
+     */
+    keywords?: string[];
+    /**
+     * Whether to always mount the item regardless of filtering logic.
+     */
+    forceMount?: boolean;
+}>;
+export type CommandItemProps = CommandItemPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandItemPropsWithoutHTML>;
+export type CommandLinkItemPropsWithoutHTML = CommandItemPropsWithoutHTML;
+export type CommandLinkItemProps = CommandLinkItemPropsWithoutHTML & Without<BitsPrimitiveAnchorAttributes, CommandLinkItemPropsWithoutHTML>;
+export type CommandInputPropsWithoutHTML = WithChild<{
+    /**
+     * The value of the input element, used to search/filter items.
+     */
+    value?: string;
+}>;
+export type CommandInputProps = CommandInputPropsWithoutHTML & Without<BitsPrimitiveInputAttributes, CommandInputPropsWithoutHTML>;
+export type CommandListPropsWithoutHTML = WithChild;
+export type CommandListProps = CommandListPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandListPropsWithoutHTML>;
+export type CommandSeparatorPropsWithoutHTML = WithChild<{
+    /**
+     * Whether to force mount the separator container regardless of
+     * filtering logic.
+     */
+    forceMount?: boolean;
+}>;
+export type CommandSeparatorProps = CommandSeparatorPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandSeparatorPropsWithoutHTML>;
+export type CommandLoadingPropsWithoutHTML = WithChild<{
+    /**
+     * The current progress of the loading state.
+     * This is a number between `0` and `100`.
+     */
+    progress?: number;
+}>;
+export type CommandLoadingProps = CommandLoadingPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandLoadingPropsWithoutHTML>;
+export type CommandViewportPropsWithoutHTML = WithChild;
+export type CommandViewportProps = CommandViewportPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, CommandViewportPropsWithoutHTML>;

package/dist/bits/command/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export declare function findNextSibling(el: Element, selector: string): Element | undefined;
+export declare function findPreviousSibling(el: Element, selector: string): Element | undefined;
+export declare function findFirstStartMarkerWithImmediateSiblingAsEnd(el: Element, type: "item" | "group"): HTMLElement | null;

package/dist/bits/command/utils.js

@@ -0,0 +1,26 @@
+export function findNextSibling(el, selector) {
+    let sibling = el.nextElementSibling;
+    while (sibling) {
+        if (sibling.matches(selector))
+            return sibling;
+        sibling = sibling.nextElementSibling;
+    }
+}
+export function findPreviousSibling(el, selector) {
+    let sibling = el.previousElementSibling;
+    while (sibling) {
+        if (sibling.matches(selector))
+            return sibling;
+        sibling = sibling.previousElementSibling;
+    }
+}
+export function findFirstStartMarkerWithImmediateSiblingAsEnd(el, type) {
+    const startMarkers = el.querySelectorAll(`[data-bits-command-${type}-start]`);
+    for (const startMarker of startMarkers) {
+        const endMarker = startMarker.nextElementSibling;
+        if (endMarker && endMarker.hasAttribute(`data-bits-command-${type}-end`)) {
+            return startMarker;
+        }
+    }
+    return null;
+}