@choice-ui/command 0.0.3 → 0.0.4

package/dist/index.cjs

@@ -1,1309 +0,0 @@
-'use strict';
-
-var shared = require('@choice-ui/shared');
-var React4 = require('react');
-var usehooksTs = require('usehooks-ts');
-var jsxRuntime = require('react/jsx-runtime');
-var tabs = require('@choice-ui/tabs');
-var input = require('@choice-ui/input');
-var kbd = require('@choice-ui/kbd');
-var scrollArea = require('@choice-ui/scroll-area');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React4__default = /*#__PURE__*/_interopDefault(React4);
-
-// src/command.tsx
-
-// src/command-score.ts
-var SCORE_CONTINUE_MATCH = 1;
-var SCORE_SPACE_WORD_JUMP = 0.9;
-var SCORE_NON_SPACE_WORD_JUMP = 0.8;
-var SCORE_CHARACTER_JUMP = 0.17;
-var SCORE_TRANSPOSITION = 0.1;
-var PENALTY_SKIPPED = 0.999;
-var PENALTY_CASE_MISMATCH = 0.9999;
-var PENALTY_NOT_COMPLETE = 0.99;
-var IS_GAP_REGEXP = /[\\/_+.#"@[({&]/;
-var COUNT_GAPS_REGEXP = /[\\/_+.#"@[({&]/g;
-var IS_SPACE_REGEXP = /[\s-]/;
-var COUNT_SPACE_REGEXP = /[\s-]/g;
-function commandScoreInner(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] !== void 0) {
-    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 = commandScoreInner(
-      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 *= Math.pow(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 *= Math.pow(PENALTY_SKIPPED, spaceBreaks.length);
-        }
-      } else {
-        score *= SCORE_CHARACTER_JUMP;
-        if (stringIndex > 0) {
-          score *= Math.pow(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) && // allow duplicate letters. Ref #7428
-    lowerString.charAt(index - 1) !== lowerAbbreviation.charAt(abbreviationIndex)) {
-      transposedScore = commandScoreInner(
-        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;
-}
-function formatInput(string) {
-  return string.toLowerCase().replace(COUNT_SPACE_REGEXP, " ");
-}
-function commandScore(string, abbreviation, aliases) {
-  string = aliases && aliases.length > 0 ? `${string + " " + aliases.join(" ")}` : string;
-  return commandScoreInner(
-    string,
-    abbreviation,
-    formatInput(string),
-    formatInput(abbreviation),
-    0,
-    0,
-    {}
-  );
-}
-var CommandContext = React4.createContext(void 0);
-var StoreContext = React4.createContext(void 0);
-
-// src/context/create-command-context.ts
-function createCommandContext(options) {
-  const {
-    allGroups,
-    allItems,
-    filterItems,
-    ids,
-    inputId,
-    label,
-    labelId,
-    listId,
-    listInnerRef,
-    propsRef,
-    schedule,
-    selectFirstItem,
-    size,
-    sort,
-    state,
-    store,
-    variant
-  } = options;
-  function score(value, keywords) {
-    const filter = propsRef.current?.filter ?? ((value2, search, keywords2) => commandScore(value2, search, keywords2));
-    return value ? filter(value, state.current.search, keywords) : 0;
-  }
-  return {
-    // Keep id → {value, keywords} mapping up-to-date
-    value: (id, value, keywords) => {
-      if (value !== ids.current.get(id)?.value) {
-        ids.current.set(id, { value: value || "", keywords });
-        state.current.filtered.items.set(id, score(value || "", keywords));
-        schedule(2, () => {
-          sort();
-          store.emit();
-        });
-      }
-    },
-    // Track item lifecycle (mount, unmount)
-    item: (id, groupId) => {
-      allItems.current.add(id);
-      if (groupId) {
-        if (!allGroups.current.has(groupId)) {
-          allGroups.current.set(groupId, /* @__PURE__ */ new Set([id]));
-        } else {
-          allGroups.current.get(groupId)?.add(id);
-        }
-      }
-      schedule(3, () => {
-        filterItems();
-        sort();
-        if (!state.current.value) {
-          selectFirstItem();
-        }
-        store.emit();
-      });
-      return () => {
-        ids.current.delete(id);
-        allItems.current.delete(id);
-        state.current.filtered.items.delete(id);
-        schedule(4, () => {
-          filterItems();
-          const ITEM_SELECTOR2 = `[role="option"]`;
-          const selectedItem = listInnerRef.current?.querySelector(
-            `${ITEM_SELECTOR2}[aria-selected="true"]`
-          );
-          if (selectedItem?.getAttribute("id") === id) selectFirstItem();
-          store.emit();
-        });
-      };
-    },
-    // Track group lifecycle (mount, unmount)
-    group: (id) => {
-      if (!allGroups.current.has(id)) {
-        allGroups.current.set(id, /* @__PURE__ */ new Set());
-      }
-      return () => {
-        ids.current.delete(id);
-        allGroups.current.delete(id);
-      };
-    },
-    filter: () => {
-      return propsRef.current.shouldFilter !== false;
-    },
-    label: label || propsRef.current["aria-label"],
-    getDisablePointerSelection: () => {
-      return propsRef.current.disablePointerSelection ?? false;
-    },
-    listId,
-    inputId,
-    labelId,
-    listInnerRef,
-    store,
-    size,
-    variant
-  };
-}
-function useAsRef(data) {
-  const ref = React4.useRef(data);
-  usehooksTs.useIsomorphicLayoutEffect(() => {
-    ref.current = data;
-  });
-  return ref;
-}
-var useCommand = () => {
-  const context = React4__default.default.useContext(CommandContext);
-  if (!context) {
-    throw new Error("useCommand must be used within a Command component");
-  }
-  return context;
-};
-var useStore = () => {
-  const store = React4__default.default.useContext(StoreContext);
-  if (!store) {
-    throw new Error("useStore must be used within a Command component");
-  }
-  return store;
-};
-function useCommandState(selector) {
-  const store = useStore();
-  const cb = () => selector(store.snapshot());
-  return React4__default.default.useSyncExternalStore(store.subscribe, cb, cb);
-}
-var useScheduleLayoutEffect = () => {
-  const [updateCount, setUpdateCount] = React4.useState(0);
-  const fns = shared.useLazyRef(() => /* @__PURE__ */ new Map());
-  usehooksTs.useIsomorphicLayoutEffect(() => {
-    fns.current.forEach((f) => f());
-    fns.current = /* @__PURE__ */ new Map();
-  }, [updateCount]);
-  return React4.useCallback((id, cb) => {
-    fns.current.set(id, cb);
-    setUpdateCount((prev) => prev + 1);
-  }, []);
-};
-
-// src/utils/constants.ts
-var GROUP_SELECTOR = `[role="presentation"]`;
-var GROUP_ITEMS_SELECTOR = `[role="group"]`;
-var GROUP_HEADING_SELECTOR = `[aria-hidden="true"]`;
-var ITEM_SELECTOR = `[role="option"]`;
-var VALID_ITEM_SELECTOR = `${ITEM_SELECTOR}:not([aria-disabled="true"])`;
-var SELECT_EVENT = `cmdk-item-select`;
-var VALUE_ATTR = `data-value`;
-
-// src/utils/dom.ts
-function findNextSibling(el, selector) {
-  let sibling = el.nextElementSibling;
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling;
-    sibling = sibling.nextElementSibling;
-  }
-  return null;
-}
-function findPreviousSibling(el, selector) {
-  let sibling = el.previousElementSibling;
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling;
-    sibling = sibling.previousElementSibling;
-  }
-  return null;
-}
-var useLayoutEffect = typeof window === "undefined" ? React4__default.default.useEffect : React4__default.default.useLayoutEffect;
-function renderChildren(children) {
-  const childrenType = children.type;
-  if (typeof childrenType === "function") {
-    try {
-      return childrenType(children.props);
-    } catch {
-      return children;
-    }
-  }
-  if (typeof childrenType === "object" && childrenType !== null && "render" in childrenType) {
-    const forwardRefComponent = childrenType;
-    return forwardRefComponent.render(children.props, null);
-  }
-  return children;
-}
-function SlottableWithNestedChildren({ asChild, children }, render) {
-  if (asChild && React4__default.default.isValidElement(children)) {
-    const renderedChild = renderChildren(children);
-    if (React4__default.default.isValidElement(renderedChild)) {
-      const childProps = children.props;
-      return React4__default.default.cloneElement(renderedChild, {}, render(childProps.children));
-    }
-  }
-  return render(children);
-}
-
-// src/hooks/use-value.ts
-function useValue(id, ref, deps, aliases = []) {
-  const valueRef = React4.useRef();
-  const context = useCommand();
-  useLayoutEffect(() => {
-    const value = (() => {
-      for (const part of deps) {
-        if (typeof part === "string") {
-          return part.trim();
-        }
-        if (typeof part === "object" && part && "current" in part) {
-          if (part.current) {
-            return part.current.textContent?.trim();
-          }
-          return valueRef.current;
-        }
-      }
-      return void 0;
-    })();
-    const keywords = aliases.map((alias) => alias.trim());
-    context.value(id, value || "", keywords);
-    ref.current?.setAttribute(VALUE_ATTR, value || "");
-    valueRef.current = value;
-  });
-  return valueRef;
-}
-var GroupContext = React4__default.default.createContext(void 0);
-var commandTv = shared.tcv({
-  slots: {
-    root: "flex h-full w-full flex-col overflow-hidden",
-    divider: "my-2 h-px"
-  },
-  variants: {
-    variant: {
-      default: {
-        root: "bg-default-background text-default-foreground",
-        divider: "bg-default-boundary"
-      },
-      dark: {
-        root: "bg-menu-background text-white",
-        divider: "bg-menu-boundary"
-      }
-    }
-  }
-});
-var commandInputTv = shared.tcv({
-  slots: {
-    root: "m-2 flex items-center",
-    input: "w-full rounded-lg"
-  },
-  variants: {
-    size: {
-      default: {
-        input: "text-body-medium h-8 px-2"
-      },
-      large: {
-        input: "leading-lg tracking-lg h-10 px-4 text-body-large"
-      }
-    }
-  },
-  defaultVariants: {
-    size: "default"
-  }
-});
-var commandListTv = shared.tcv({
-  slots: {
-    root: "px-2 pb-2",
-    content: "flex flex-col"
-  }
-});
-var commandGroupTv = shared.tcv({
-  slots: {
-    root: "flex flex-col gap-1 not-first:mt-4",
-    heading: "text-body-medium px-2"
-  },
-  variants: {
-    variant: {
-      default: {
-        heading: "text-secondary-foreground"
-      },
-      dark: {
-        heading: "text-white/50"
-      }
-    }
-  }
-});
-var commandItemTv = shared.tcv({
-  slots: {
-    root: ["group/item relative flex items-center rounded-lg select-none", "focus:outline-none"],
-    icon: "flex flex-shrink-0 items-center justify-center rounded-md",
-    value: "flex-1 truncate",
-    shortcut: "text-secondary-foreground"
-  },
-  variants: {
-    variant: {
-      default: {},
-      dark: {
-        root: "text-white"
-      }
-    },
-    size: {
-      default: {
-        root: "text-body-medium min-h-8 p-1",
-        icon: "h-6 min-w-6"
-      },
-      large: {
-        root: "leading-lg tracking-lg min-h-10 p-2 text-body-large",
-        icon: "h-6 min-w-6"
-      }
-    },
-    hasPrefix: {
-      true: "",
-      false: ""
-    },
-    hasSuffix: {
-      true: "",
-      false: ""
-    },
-    selected: {
-      true: {},
-      false: {}
-    },
-    disabled: {
-      true: {
-        root: "pointer-events-none"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      hasPrefix: true,
-      size: "default",
-      class: {
-        root: "gap-1 pl-1"
-      }
-    },
-    {
-      hasPrefix: false,
-      size: "default",
-      class: {
-        root: "pl-2"
-      }
-    },
-    {
-      hasSuffix: true,
-      size: "default",
-      class: {
-        root: "gap-1 pr-1"
-      }
-    },
-    {
-      hasSuffix: false,
-      size: "default",
-      class: {
-        root: "pr-2"
-      }
-    },
-    // large
-    {
-      hasPrefix: true,
-      size: "large",
-      class: {
-        root: "gap-2 pl-2"
-      }
-    },
-    {
-      hasPrefix: false,
-      size: "large",
-      class: {
-        root: "pl-4"
-      }
-    },
-    {
-      hasSuffix: true,
-      size: "large",
-      class: {
-        root: "gap-2 pr-2"
-      }
-    },
-    {
-      hasSuffix: false,
-      size: "large",
-      class: {
-        root: "pr-4"
-      }
-    },
-    {
-      variant: "default",
-      selected: true,
-      class: {
-        root: "bg-secondary-background"
-      }
-    },
-    {
-      variant: "dark",
-      selected: true,
-      class: {
-        root: "bg-gray-700"
-      }
-    },
-    {
-      variant: "default",
-      disabled: true,
-      class: {
-        root: "text-secondary-foreground"
-      }
-    },
-    {
-      variant: "dark",
-      disabled: true,
-      class: {
-        root: "text-white/50"
-      }
-    }
-  ],
-  defaultVariants: {
-    size: "default",
-    hasPrefix: false,
-    hasSuffix: false,
-    variant: "default"
-  }
-});
-var commandFooterTv = shared.tcv({
-  slots: {
-    root: "flex h-10 items-center justify-between border-t px-2"
-  },
-  variants: {
-    variant: {
-      default: {
-        root: "border-default-boundary"
-      },
-      dark: {
-        root: "border-menu-boundary"
-      }
-    }
-  },
-  defaultVariants: {
-    variant: "default"
-  }
-});
-var commandTabsTv = shared.tcv({
-  slots: {
-    tabs: "mx-2 mb-2"
-  }
-});
-var commandEmptyTv = shared.tcv({
-  slots: {
-    root: "py-6 text-center"
-  },
-  variants: {
-    variant: {
-      default: {
-        root: "text-secondary-foreground"
-      },
-      dark: {
-        root: "text-white/50"
-      }
-    }
-  }
-});
-var commandLoadingTv = shared.tcv({
-  slots: {
-    root: "flex items-center justify-center py-6 text-center"
-  }
-});
-var defaultFilter = (value, search, keywords) => commandScore(value, search, keywords);
-var Command = React4.forwardRef((props, forwardedRef) => {
-  const state = shared.useLazyRef(() => ({
-    /** Value of the search query. */
-    search: "",
-    /** Currently selected item value. */
-    value: props.value ?? props.defaultValue ?? "",
-    /** Currently selected item id. */
-    selectedItemId: void 0,
-    filtered: {
-      /** The count of all visible items. */
-      count: 0,
-      /** Map from visible item id to its search score. */
-      items: /* @__PURE__ */ new Map(),
-      /** Set of groups with at least one visible item. */
-      groups: /* @__PURE__ */ new Set()
-    }
-  }));
-  const allItems = shared.useLazyRef(() => /* @__PURE__ */ new Set());
-  const allGroups = shared.useLazyRef(() => /* @__PURE__ */ new Map());
-  const ids = shared.useLazyRef(() => /* @__PURE__ */ new Map());
-  const listeners = shared.useLazyRef(() => /* @__PURE__ */ new Set());
-  const propsRef = useAsRef(props);
-  const {
-    label,
-    children,
-    value,
-    onChange: onValueChange,
-    filter,
-    shouldFilter,
-    loop,
-    size = "default",
-    variant = "default",
-    disablePointerSelection = false,
-    vimBindings = true,
-    className,
-    ...etc
-  } = props;
-  const listId = React4.useId();
-  const labelId = React4.useId();
-  const inputId = React4.useId();
-  const listInnerRef = React4.useRef(null);
-  const schedule = useScheduleLayoutEffect();
-  const tv = commandTv({ variant });
-  const store = React4.useMemo(() => {
-    return {
-      subscribe: (cb) => {
-        listeners.current.add(cb);
-        return () => listeners.current.delete(cb);
-      },
-      snapshot: () => {
-        return state.current;
-      },
-      setState: (key, value2, opts) => {
-        if (Object.is(state.current[key], value2)) return;
-        state.current[key] = value2;
-        if (key === "search") {
-          filterItems();
-          sort();
-          schedule(1, selectFirstItem);
-        } else if (key === "value") {
-          const activeElement = document.activeElement;
-          if (activeElement?.hasAttribute("data-command-input") || activeElement?.hasAttribute("data-command-root")) {
-            const input = document.getElementById(inputId);
-            if (input) input.focus();
-            else document.getElementById(listId)?.focus();
-          }
-          schedule(7, () => {
-            state.current.selectedItemId = getSelectedItem()?.id;
-            store.emit();
-          });
-          if (!opts) {
-            schedule(5, scrollSelectedIntoView);
-          }
-          if (propsRef.current?.value !== void 0) {
-            const newValue = value2 ?? "";
-            propsRef.current.onChange?.(newValue);
-            return;
-          }
-        }
-        store.emit();
-      },
-      emit: () => {
-        listeners.current.forEach((l) => l());
-      }
-    };
-  }, []);
-  usehooksTs.useIsomorphicLayoutEffect(() => {
-    if (value !== void 0) {
-      const v = value.trim();
-      state.current.value = v;
-      store.emit();
-    }
-  }, [value]);
-  usehooksTs.useIsomorphicLayoutEffect(() => {
-    schedule(6, scrollSelectedIntoView);
-  }, []);
-  const score = usehooksTs.useEventCallback((value2, keywords) => {
-    const filter2 = propsRef.current?.filter ?? defaultFilter;
-    return value2 ? filter2(value2, state.current.search, keywords) : 0;
-  });
-  const sort = React4.useCallback(() => {
-    if (!state.current.search || // Explicitly false, because true | undefined is the default
-    propsRef.current.shouldFilter === false) {
-      return;
-    }
-    const scores = state.current.filtered.items;
-    const groups = [];
-    state.current.filtered.groups.forEach((value2) => {
-      const items = allGroups.current.get(value2);
-      let max = 0;
-      items?.forEach((item) => {
-        const score2 = scores.get(item) ?? 0;
-        max = Math.max(score2, max);
-      });
-      groups.push([value2, max]);
-    });
-    const listInsertionElement = listInnerRef.current;
-    getValidItems().sort((a, b) => {
-      const valueA = a.getAttribute("id");
-      const valueB = b.getAttribute("id");
-      return (scores.get(valueB ?? "") ?? 0) - (scores.get(valueA ?? "") ?? 0);
-    }).forEach((item) => {
-      const group = item.closest(GROUP_ITEMS_SELECTOR);
-      if (group) {
-        const elementToMove = item.parentElement === group ? item : item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
-        if (elementToMove) group.appendChild(elementToMove);
-      } else {
-        const elementToMove = item.parentElement === listInsertionElement ? item : item.closest(`${GROUP_ITEMS_SELECTOR} > *`);
-        if (elementToMove) listInsertionElement?.appendChild(elementToMove);
-      }
-    });
-    groups.sort((a, b) => b[1] - a[1]).forEach((group) => {
-      const element = listInnerRef.current?.querySelector(
-        `${GROUP_SELECTOR}[${VALUE_ATTR}="${encodeURIComponent(group[0])}"]`
-      );
-      if (element && element.parentElement) {
-        element.parentElement.appendChild(element);
-      }
-    });
-  }, []);
-  const selectFirstItem = React4.useCallback(() => {
-    const item = getValidItems().find((item2) => item2.getAttribute("aria-disabled") !== "true");
-    const value2 = item?.getAttribute(VALUE_ATTR);
-    store.setState("value", value2 || "");
-  }, []);
-  const filterItems = React4.useCallback(() => {
-    if (!state.current.search || // Explicitly false, because true | undefined is the default
-    propsRef.current.shouldFilter === false) {
-      state.current.filtered.count = allItems.current.size;
-      return;
-    }
-    state.current.filtered.groups = /* @__PURE__ */ new Set();
-    let itemCount = 0;
-    for (const id of allItems.current) {
-      const value2 = ids.current.get(id)?.value ?? "";
-      const keywords = ids.current.get(id)?.keywords ?? [];
-      const rank = score(value2, keywords);
-      state.current.filtered.items.set(id, rank);
-      if (rank > 0) itemCount++;
-    }
-    for (const [groupId, group] of allGroups.current) {
-      for (const itemId of group) {
-        if ((state.current.filtered.items.get(itemId) ?? 0) > 0) {
-          state.current.filtered.groups.add(groupId);
-          break;
-        }
-      }
-    }
-    state.current.filtered.count = itemCount;
-  }, []);
-  const scrollSelectedIntoView = React4.useCallback(() => {
-    const item = getSelectedItem();
-    if (item) {
-      if (item.parentElement?.firstChild === item) {
-        item.closest(GROUP_SELECTOR)?.querySelector(GROUP_HEADING_SELECTOR)?.scrollIntoView({ block: "nearest" });
-      }
-      item.scrollIntoView({ block: "nearest" });
-    }
-  }, []);
-  const getSelectedItem = React4.useCallback(() => {
-    return listInnerRef.current?.querySelector(`${ITEM_SELECTOR}[aria-selected="true"]`);
-  }, []);
-  function getValidItems() {
-    return Array.from(
-      listInnerRef.current?.querySelectorAll(VALID_ITEM_SELECTOR) || []
-    );
-  }
-  const updateSelectedToIndex = usehooksTs.useEventCallback((index) => {
-    const items = getValidItems();
-    const item = items[index];
-    if (item) store.setState("value", item.getAttribute(VALUE_ATTR) || "");
-  });
-  const updateSelectedByItem = usehooksTs.useEventCallback((change) => {
-    const selected = getSelectedItem();
-    const items = getValidItems();
-    const index = items.findIndex((item) => item === selected);
-    let newSelected = items[index + change];
-    if (propsRef.current?.loop) {
-      newSelected = index + change < 0 ? items[items.length - 1] : index + change === items.length ? items[0] : items[index + change];
-    }
-    if (newSelected) store.setState("value", newSelected.getAttribute(VALUE_ATTR) || "");
-  });
-  const updateSelectedByGroup = usehooksTs.useEventCallback((change) => {
-    const selected = getSelectedItem();
-    let group = selected?.closest(GROUP_SELECTOR);
-    let item = null;
-    while (group && !item) {
-      group = change > 0 ? findNextSibling(group, GROUP_SELECTOR) : findPreviousSibling(group, GROUP_SELECTOR);
-      item = group?.querySelector(VALID_ITEM_SELECTOR);
-    }
-    if (item) {
-      store.setState("value", item.getAttribute(VALUE_ATTR) || "");
-    } else {
-      updateSelectedByItem(change);
-    }
-  });
-  const context = React4.useMemo(
-    () => createCommandContext({
-      allGroups,
-      allItems,
-      filterItems,
-      ids,
-      inputId,
-      label,
-      labelId,
-      listId,
-      listInnerRef,
-      propsRef,
-      schedule,
-      selectFirstItem,
-      size,
-      sort,
-      state,
-      store,
-      variant
-    }),
-    []
-    // ❌ 空依赖数组，和原始实现一致
-  );
-  const last = () => updateSelectedToIndex(getValidItems().length - 1);
-  const next = (e) => {
-    e.preventDefault();
-    if (e.metaKey) {
-      last();
-    } else if (e.altKey) {
-      updateSelectedByGroup(1);
-    } else {
-      updateSelectedByItem(1);
-    }
-  };
-  const prev = (e) => {
-    e.preventDefault();
-    if (e.metaKey) {
-      updateSelectedToIndex(0);
-    } else if (e.altKey) {
-      updateSelectedByGroup(-1);
-    } else {
-      updateSelectedByItem(-1);
-    }
-  };
-  const handleKeyDown = usehooksTs.useEventCallback((e) => {
-    etc.onKeyDown?.(e);
-    const isComposing = e.nativeEvent.isComposing || e.keyCode === 229;
-    if (e.defaultPrevented || isComposing) {
-      return;
-    }
-    switch (e.key) {
-      case "n":
-      case "j": {
-        if (vimBindings && e.ctrlKey) {
-          next(e);
-        }
-        break;
-      }
-      case "ArrowDown": {
-        next(e);
-        break;
-      }
-      case "p":
-      case "k": {
-        if (vimBindings && e.ctrlKey) {
-          prev(e);
-        }
-        break;
-      }
-      case "ArrowUp": {
-        prev(e);
-        break;
-      }
-      case "Home": {
-        e.preventDefault();
-        updateSelectedToIndex(0);
-        break;
-      }
-      case "End": {
-        e.preventDefault();
-        last();
-        break;
-      }
-      case "Enter": {
-        e.preventDefault();
-        const item = getSelectedItem();
-        if (item) {
-          const event = new Event(SELECT_EVENT);
-          item.dispatchEvent(event);
-        }
-      }
-    }
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: forwardedRef,
-      tabIndex: -1,
-      ...etc,
-      className: shared.tcx(tv.root({ className })),
-      "data-command-root": "",
-      onKeyDown: handleKeyDown,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "label",
-          {
-            htmlFor: context.inputId,
-            id: context.labelId,
-            className: "sr-only",
-            children: label
-          }
-        ),
-        SlottableWithNestedChildren(props, (child) => /* @__PURE__ */ jsxRuntime.jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsxRuntime.jsx(CommandContext.Provider, { value: context, children: child }) }))
-      ]
-    }
-  );
-});
-Command.displayName = "Command";
-var CommandEmpty = React4.forwardRef(
-  ({ className, ...props }, forwardedRef) => {
-    const context = useCommand();
-    const render = useCommandState((state) => state.filtered.count === 0);
-    const tv = commandEmptyTv({ variant: context.variant });
-    if (!render) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: forwardedRef,
-        ...props,
-        className: shared.tcx(tv.root({ className })),
-        role: "presentation"
-      }
-    );
-  }
-);
-CommandEmpty.displayName = "CommandEmpty";
-var CommandFooter = React4.forwardRef(
-  ({ className, ...props }, ref) => {
-    const context = useCommand();
-    const tv = commandFooterTv({ variant: context.variant });
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: shared.tcx(tv.root({ className })),
-        ...props
-      }
-    );
-  }
-);
-CommandFooter.displayName = "CommandFooter";
-var CommandGroup = React4.forwardRef((props, forwardedRef) => {
-  const { className, heading, children, forceMount, value, ...rest } = props;
-  const id = React4.useId();
-  const ref = React4.useRef(null);
-  const headingRef = React4.useRef(null);
-  const headingId = React4__default.default.useId();
-  const context = useCommand();
-  const render = useCommandState(
-    (state) => forceMount ? true : context.filter() === false ? true : !state.search ? true : state.filtered.groups.has(id)
-  );
-  React4.useEffect(() => {
-    return context.group(id);
-  }, [context, id]);
-  const valueDeps = React4.useMemo(() => [value, heading, headingRef], [value, heading]);
-  useValue(id, ref, valueDeps);
-  const contextValue = React4.useMemo(() => ({ id, forceMount }), [id, forceMount]);
-  const tv = commandGroupTv({ variant: context.variant });
-  if (!render) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: (el) => {
-        ref.current = el;
-        if (typeof forwardedRef === "function") forwardedRef(el);
-        else if (forwardedRef) forwardedRef.current = el;
-      },
-      ...rest,
-      className: shared.tcx(tv.root({ className })),
-      role: "presentation",
-      "data-value": value,
-      children: [
-        heading && /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            ref: headingRef,
-            className: shared.tcx(tv.heading()),
-            "aria-hidden": true,
-            id: headingId,
-            children: heading
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "group",
-            "aria-labelledby": heading ? headingId : void 0,
-            children: /* @__PURE__ */ jsxRuntime.jsx(GroupContext.Provider, { value: contextValue, children })
-          }
-        )
-      ]
-    }
-  );
-});
-CommandGroup.displayName = "CommandGroup";
-var CommandInput = React4.forwardRef((props, ref) => {
-  const { className, onChange, value, prefixElement, suffixElement, ...rest } = props;
-  const isControlled = value != null;
-  const store = useCommand().store;
-  const search = useCommandState((state) => state.search);
-  const selectedItemId = useCommandState((state) => state.selectedItemId);
-  const context = useCommand();
-  React4.useEffect(() => {
-    if (value != null) {
-      store.setState("search", value);
-    }
-  }, [value, store]);
-  const handleChange = usehooksTs.useEventCallback((value2) => {
-    if (!isControlled) {
-      store.setState("search", value2);
-    }
-    onChange?.(value2);
-  });
-  const tv = commandInputTv({ size: context.size });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: shared.tcx(tv.root({ className })), children: [
-    prefixElement,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      input.Input,
-      {
-        ref,
-        ...rest,
-        className: shared.tcx(tv.input({ className })),
-        variant: props.variant || context.variant,
-        "data-command-input": "",
-        autoComplete: "off",
-        autoCorrect: "off",
-        spellCheck: false,
-        "aria-autocomplete": "list",
-        role: "combobox",
-        "aria-expanded": true,
-        "aria-controls": context.listId,
-        "aria-labelledby": context.labelId,
-        "aria-activedescendant": selectedItemId,
-        id: context.inputId,
-        type: "text",
-        value: isControlled ? value : search,
-        onChange: handleChange
-      }
-    ),
-    suffixElement
-  ] });
-});
-CommandInput.displayName = "CommandInput";
-var CommandItem = React4.forwardRef((props, forwardedRef) => {
-  const {
-    className,
-    disabled,
-    forceMount,
-    keywords,
-    onSelect,
-    value,
-    children,
-    prefixElement,
-    suffixElement,
-    shortcut,
-    ...rest
-  } = props;
-  const ref = React4.useRef(null);
-  const id = React4__default.default.useId();
-  const context = useCommand();
-  const groupContext = React4__default.default.useContext(GroupContext);
-  const propsRef = React4.useRef({
-    disabled,
-    forceMount: forceMount ?? groupContext?.forceMount,
-    keywords,
-    onSelect,
-    value
-  });
-  propsRef.current = {
-    disabled,
-    forceMount: forceMount ?? groupContext?.forceMount,
-    keywords,
-    onSelect,
-    value
-  };
-  React4.useEffect(() => {
-    if (!propsRef.current.forceMount) {
-      return context.item(id, groupContext?.id);
-    }
-  }, [context, groupContext?.id, id]);
-  const valueDeps = React4.useMemo(() => [value, children, ref], [value, children]);
-  const stableKeywords = React4.useMemo(() => keywords || [], [keywords]);
-  const valueRef = useValue(id, ref, valueDeps, stableKeywords);
-  const store = context.store;
-  const selected = useCommandState(
-    (state) => Boolean(state.value && state.value === valueRef?.current)
-  );
-  const render = useCommandState(
-    (state) => propsRef.current.forceMount ? true : context.filter() === false ? true : !state.search ? true : (state.filtered.items.get(id) ?? 0) > 0
-  );
-  React4.useEffect(() => {
-    const element = ref.current;
-    if (!element || disabled) return;
-    const handleSelect = () => {
-      select();
-      propsRef.current.onSelect?.(valueRef.current || "");
-    };
-    element.addEventListener(SELECT_EVENT, handleSelect);
-    return () => element.removeEventListener(SELECT_EVENT, handleSelect);
-  }, [render, disabled, valueRef]);
-  const select = () => {
-    store.setState("value", valueRef.current || "", true);
-  };
-  const hasValidShortcut = shortcut && (shortcut.modifier || shortcut.keys);
-  const handlePointerMove = usehooksTs.useEventCallback(() => {
-    if (disabled || context.getDisablePointerSelection()) return;
-    select();
-  });
-  const handleClick = usehooksTs.useEventCallback(() => {
-    if (disabled) return;
-    propsRef.current.onSelect?.(valueRef.current || "");
-  });
-  const tv = commandItemTv({
-    selected,
-    disabled,
-    size: context.size,
-    hasPrefix: !!prefixElement,
-    hasSuffix: !!suffixElement,
-    variant: context.variant
-  });
-  if (!render) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: (el) => {
-        ref.current = el;
-        if (typeof forwardedRef === "function") forwardedRef(el);
-        else if (forwardedRef) forwardedRef.current = el;
-      },
-      ...rest,
-      id,
-      className: shared.tcx(tv.root({ className })),
-      role: "option",
-      "aria-disabled": disabled,
-      "aria-selected": selected || void 0,
-      "data-disabled": disabled,
-      "data-selected": selected,
-      "data-value": valueRef.current,
-      onPointerMove: handlePointerMove,
-      onClick: handleClick,
-      children: [
-        prefixElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tv.icon(), children: prefixElement }),
-        children,
-        hasValidShortcut && /* @__PURE__ */ jsxRuntime.jsx(
-          kbd.Kbd,
-          {
-            className: tv.shortcut(),
-            keys: shortcut.modifier,
-            children: shortcut.keys
-          }
-        ),
-        suffixElement && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tv.icon(), children: suffixElement })
-      ]
-    }
-  );
-});
-CommandItem.displayName = "CommandItem";
-var CommandList = React4.forwardRef((props, forwardedRef) => {
-  const { children, className, label = "Suggestions", hoverBoundary = "none", ...rest } = props;
-  const ref = React4.useRef(null);
-  const height = React4.useRef(null);
-  const selectedItemId = useCommandState((state) => state.selectedItemId);
-  const context = useCommand();
-  React4.useEffect(() => {
-    if (height.current && ref.current) {
-      const el = height.current;
-      const wrapper = ref.current;
-      let animationFrame;
-      const observer = new ResizeObserver(() => {
-        animationFrame = requestAnimationFrame(() => {
-          const height2 = el.offsetHeight;
-          wrapper.style.setProperty(`--cmdk-list-height`, height2.toFixed(1) + "px");
-        });
-      });
-      observer.observe(el);
-      return () => {
-        cancelAnimationFrame(animationFrame);
-        observer.unobserve(el);
-      };
-    }
-  }, []);
-  const tv = commandListTv();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    scrollArea.ScrollArea,
-    {
-      variant: context.variant,
-      hoverBoundary,
-      ...rest,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        scrollArea.ScrollArea.Viewport,
-        {
-          ref: (el) => {
-            ref.current = el;
-            if (typeof forwardedRef === "function") forwardedRef(el);
-            else if (forwardedRef) forwardedRef.current = el;
-          },
-          ...rest,
-          className: shared.tcx(tv.root({ className })),
-          role: "listbox",
-          tabIndex: -1,
-          "aria-activedescendant": selectedItemId,
-          "aria-label": label,
-          id: context.listId,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            scrollArea.ScrollArea.Content,
-            {
-              className: shared.tcx(tv.content()),
-              ref: (el) => {
-                height.current = el;
-                if (context.listInnerRef) {
-                  context.listInnerRef.current = el;
-                }
-              },
-              children
-            }
-          )
-        }
-      )
-    }
-  );
-});
-CommandList.displayName = "CommandList";
-var CommandLoading = React4.forwardRef((props, ref) => {
-  const { className, children, label = "Loading...", progress, ...rest } = props;
-  const tv = commandLoadingTv();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      ...props,
-      className: shared.tcx(tv.root({ className })),
-      role: "progressbar",
-      "aria-valuenow": progress,
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-label": label,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, children })
-    }
-  );
-});
-CommandLoading.displayName = "CommandLoading";
-var CommandDivider = React4.forwardRef(
-  ({ className, alwaysRender, ...props }, forwardedRef) => {
-    const context = useCommand();
-    const render = useCommandState((state) => !state.search);
-    const tv = commandTv({ variant: context.variant });
-    if (!alwaysRender && !render) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: forwardedRef,
-        ...props,
-        className: shared.tcx(tv.divider({ className })),
-        role: "separator"
-      }
-    );
-  }
-);
-CommandDivider.displayName = "CommandDivider";
-var CommandValue = React4.forwardRef((props, ref) => {
-  const { className, children, ...rest } = props;
-  const context = useCommand();
-  const tv = commandItemTv({ size: context.size });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      ...rest,
-      className: shared.tcx(tv.value({ className })),
-      children
-    }
-  );
-});
-CommandValue.displayName = "CommandValue";
-var CommandTabs = React4.forwardRef((props, ref) => {
-  const context = useCommand();
-  const tv = commandTabsTv();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    tabs.Tabs,
-    {
-      ref,
-      variant: props.variant || context.variant,
-      className: tv.tabs(),
-      ...props
-    }
-  );
-});
-CommandTabs.displayName = "CommandTabs";
-
-// src/index.ts
-var Command2 = Object.assign(Command, {
-  Empty: CommandEmpty,
-  Footer: CommandFooter,
-  Group: CommandGroup,
-  Input: CommandInput,
-  Item: CommandItem,
-  List: CommandList,
-  Loading: CommandLoading,
-  Divider: CommandDivider,
-  Value: CommandValue,
-  Tabs: CommandTabs,
-  TabItem: tabs.TabItem
-});
-
-exports.Command = Command2;
-exports.CommandRoot = Command;
-exports.defaultFilter = defaultFilter;
-exports.useCommandState = useCommandState;