@tensor_1/react 2.47.0 → 2.48.0

package/dist/components/Combobox.js

@@ -1,8 +1,15 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
-import { filterComboboxOptions } from "../combobox-model.js";
+import { filterComboboxItems } from "../combobox-model.js";
+import { useAnchoredPosition, zoomOf } from "../hooks/useAnchoredPosition.js";
+import { CheckIcon } from "../icons/components.js";
+import { buildSelectModel, firstEnabled, lastEnabled, moveActive } from "../select-model.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const OFFSET = 4;
+const EDGE = 8;
+const MAX_HEIGHT = 320;
 function Combobox({
   options,
   value,
@@ -14,105 +21,235 @@ function Combobox({
   name,
   disabled,
   className,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  inputId,
+  placement = "bottom-start",
   ...props
 }) {
-  const generatedId = useId();
-  const listboxId = `${generatedId}-listbox`;
+  const uid = useId();
+  const listboxId = `${uid}-listbox`;
+  const optionId = (index) => `${listboxId}-${index}`;
   const rootRef = useRef(null);
+  const inputRef = useRef(null);
+  const popupRef = useRef(null);
+  const listRef = useRef(null);
   const [internalValue, setInternalValue] = useState(defaultValue ?? "");
   const selectedValue = value ?? internalValue;
-  const selected = options.find((option) => option.value === selectedValue);
+  const all = useMemo(() => buildSelectModel(options).all, [options]);
+  const selected = all.find((entry) => entry.option.value === selectedValue)?.option;
   const [query, setQuery] = useState(selected?.label ?? "");
+  const [filter, setFilter] = useState("");
   const [open, setOpen] = useState(false);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const filtered = useMemo(() => filterComboboxOptions(options, open ? query : ""), [open, options, query]);
-  const activeOption = filtered[activeIndex];
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const model = useMemo(() => buildSelectModel(filterComboboxItems(options, open ? filter : "")), [open, options, filter]);
+  const entries = model.entries;
+  const active = activeIndex >= 0 ? entries[activeIndex] : void 0;
+  const selectedLabel = () => all.find((entry) => entry.option.value === selectedValue)?.option.label ?? "";
   useEffect(() => {
-    if (!open) setQuery(options.find((option) => option.value === selectedValue)?.label ?? "");
+    if (!open) setQuery(selectedLabel());
   }, [open, options, selectedValue]);
-  const select = (option) => {
-    if (option.disabled) return;
+  const openList = (target = "selected", list = entries) => {
+    if (disabled) return;
+    const chosen = list.findIndex((entry) => entry.option.value === selectedValue && !entry.disabled);
+    setActiveIndex(target === "last" ? lastEnabled(list) : target === "first" || chosen < 0 ? firstEnabled(list) : chosen);
+    setOpen(true);
+  };
+  const select = (entry) => {
+    if (!entry || entry.disabled) return;
+    const option = entry.option;
     if (value == null) setInternalValue(option.value);
     setQuery(option.label);
+    setFilter("");
     setOpen(false);
+    setActiveIndex(-1);
     onValueChange?.(option.value, option);
   };
-  const move = (step) => {
-    if (!filtered.length) return;
-    let next = activeIndex;
-    for (let attempts = 0; attempts < filtered.length; attempts += 1) {
-      next = (next + step + filtered.length) % filtered.length;
-      if (!filtered[next]?.disabled) break;
-    }
-    setActiveIndex(next);
+  const restore = () => {
+    setFilter("");
+    setOpen(false);
+    setActiveIndex(-1);
+    setQuery(selectedLabel());
   };
   const handleKeyDown = (event) => {
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      if (!open) setOpen(true);
-      else move(event.key === "ArrowDown" ? 1 : -1);
-    } else if (event.key === "Enter" && open && activeOption) {
-      event.preventDefault();
-      select(activeOption);
-    } else if (event.key === "Escape") {
-      setOpen(false);
-      setQuery(selected?.label ?? "");
+    if (event.nativeEvent.isComposing || event.keyCode === 229) return;
+    const { key, altKey } = event;
+    switch (key) {
+      case "ArrowDown":
+      case "ArrowUp":
+        event.preventDefault();
+        if (!open) {
+          openList(key === "ArrowUp" && !altKey ? "last" : "selected");
+          return;
+        }
+        if (altKey) return;
+        setActiveIndex((index) => moveActive(entries, index, key === "ArrowDown" ? 1 : -1));
+        return;
+      case "PageDown":
+      case "PageUp":
+        if (!open) return;
+        event.preventDefault();
+        setActiveIndex((index) => moveActive(entries, index, key === "PageDown" ? 10 : -10));
+        return;
+      case "Home":
+      case "End":
+        if (!open || activeIndex < 0) return;
+        event.preventDefault();
+        setActiveIndex(key === "Home" ? firstEnabled(entries) : lastEnabled(entries));
+        return;
+      case "Enter":
+        if (open && active) {
+          event.preventDefault();
+          select(active);
+        }
+        return;
+      case "Escape":
+        if (open || query !== selectedLabel()) {
+          event.preventDefault();
+          event.stopPropagation();
+          restore();
+        }
+        return;
+      default:
     }
   };
   const handleBlur = (event) => {
-    if (!rootRef.current?.contains(event.relatedTarget)) {
-      setOpen(false);
-      setQuery(options.find((option) => option.value === selectedValue)?.label ?? "");
-    }
+    const next = event.relatedTarget;
+    if (!rootRef.current?.contains(next)) restore();
   };
   const handleChange = (event) => {
-    setQuery(event.target.value);
-    setActiveIndex(0);
+    const text = event.target.value;
+    setQuery(text);
+    setFilter(text);
+    const list = buildSelectModel(filterComboboxItems(options, text)).entries;
+    setActiveIndex(firstEnabled(list));
     setOpen(true);
   };
+  useIsomorphicLayoutEffect(() => {
+    if (open && activeIndex >= entries.length) setActiveIndex(firstEnabled(entries));
+  }, [open, entries.length]);
+  useIsomorphicLayoutEffect(() => {
+    const popup = popupRef.current;
+    const input = inputRef.current;
+    if (!popup || !input) return;
+    const isOpen = () => {
+      try {
+        return popup.matches(":popover-open");
+      } catch {
+        return false;
+      }
+    };
+    if (open) {
+      const zoom = zoomOf(input);
+      const r = input.getBoundingClientRect();
+      const room = Math.max(r.top, window.innerHeight - r.bottom) / zoom - OFFSET - EDGE;
+      popup.style.minWidth = `${Math.round(r.width / zoom)}px`;
+      popup.style.maxHeight = `${Math.max(96, Math.min(MAX_HEIGHT, Math.floor(room)))}px`;
+      try {
+        if (!isOpen()) popup.showPopover();
+      } catch {
+      }
+    } else {
+      try {
+        if (isOpen()) popup.hidePopover();
+      } catch {
+      }
+    }
+  }, [open]);
+  useAnchoredPosition(inputRef, popupRef, { open, placement, offset: OFFSET, padding: EDGE });
+  useIsomorphicLayoutEffect(() => {
+    const list = listRef.current;
+    if (!open || !list || activeIndex < 0) return;
+    const el = list.ownerDocument.getElementById(optionId(activeIndex));
+    if (!el || !list.contains(el)) return;
+    const top = el.offsetTop;
+    const bottom = top + el.offsetHeight;
+    if (top < list.scrollTop) list.scrollTop = top;
+    else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+  }, [open, activeIndex]);
+  const popoverAttr = { popover: "manual" };
+  const invalid = ariaInvalid != null && ariaInvalid !== false && ariaInvalid !== "false";
+  const renderEntry = (entry) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id: optionId(entry.index),
+      className: "uix-listbox__option",
+      role: "option",
+      "aria-selected": entry.option.value === selectedValue,
+      "aria-disabled": entry.disabled || void 0,
+      "data-active": open && entry.index === activeIndex || void 0,
+      onMouseDown: (event) => event.preventDefault(),
+      onPointerMove: () => {
+        if (entry.index !== activeIndex && !entry.disabled) setActiveIndex(entry.index);
+      },
+      onClick: () => select(entry),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-listbox__text", children: /* @__PURE__ */ jsx("span", { className: "uix-listbox__label", children: entry.option.label }) }),
+        /* @__PURE__ */ jsx("span", { className: "uix-listbox__check", "aria-hidden": "true", children: entry.option.value === selectedValue && /* @__PURE__ */ jsx(CheckIcon, { size: "sm" }) })
+      ]
+    },
+    `${entry.option.value}-${entry.index}`
+  );
   return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cx("uix-combobox", className), onBlur: handleBlur, ...props, children: [
     name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selectedValue }),
     /* @__PURE__ */ jsx(
       "input",
       {
+        ref: inputRef,
+        id: inputId,
         className: "uix-input",
         role: "combobox",
-        "aria-label": label,
+        "aria-label": ariaLabelledBy ? void 0 : label,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        "aria-invalid": invalid || void 0,
         "aria-autocomplete": "list",
         "aria-expanded": open,
         "aria-controls": listboxId,
-        "aria-activedescendant": open && activeOption ? `${listboxId}-${activeIndex}` : void 0,
+        "aria-activedescendant": open && active ? optionId(activeIndex) : void 0,
+        autoComplete: "off",
+        spellCheck: false,
         value: query,
         placeholder,
         disabled,
         onChange: handleChange,
         onFocus: () => {
           setQuery("");
-          setOpen(true);
-          setActiveIndex(Math.max(0, options.findIndex((option) => option.value === selectedValue)));
+          openList("selected", buildSelectModel(options).entries);
         },
         onKeyDown: handleKeyDown
       }
     ),
-    open && /* @__PURE__ */ jsxs("ul", { id: listboxId, className: "uix-listbox uix-combobox__listbox", role: "listbox", children: [
-      filtered.length === 0 && /* @__PURE__ */ jsx("li", { className: "uix-listbox__empty", children: emptyLabel }),
-      filtered.map((option, index) => /* @__PURE__ */ jsx(
-        "li",
-        {
-          id: `${listboxId}-${index}`,
-          className: "uix-listbox__option",
-          role: "option",
-          "aria-selected": option.value === selectedValue,
-          "aria-disabled": option.disabled || void 0,
-          "data-active": index === activeIndex || void 0,
-          onMouseDown: (event) => event.preventDefault(),
-          onMouseEnter: () => setActiveIndex(index),
-          onClick: () => select(option),
-          children: option.label
-        },
-        option.value
-      ))
-    ] })
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: popupRef,
+        className: "uix-select__popup uix-combobox__popup",
+        hidden: !open,
+        ...popoverAttr,
+        onMouseDown: (event) => event.preventDefault(),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: listRef,
+              id: listboxId,
+              role: "listbox",
+              "aria-label": label,
+              className: "uix-listbox uix-select__listbox",
+              hidden: entries.length === 0 || void 0,
+              children: model.sections.map((section, i) => section.label != null ? /* @__PURE__ */ jsxs("div", { role: "group", className: "uix-listbox__group", "aria-labelledby": `${uid}-group-${i}`, "aria-disabled": section.disabled || void 0, children: [
+                /* @__PURE__ */ jsx("div", { id: `${uid}-group-${i}`, role: "presentation", className: "uix-listbox__group-label", children: section.label }),
+                section.entries.map(renderEntry)
+              ] }, `g${i}`) : /* @__PURE__ */ jsx(Fragment, { children: section.entries.map(renderEntry) }, `s${i}`))
+            }
+          ),
+          entries.length === 0 && /* @__PURE__ */ jsx("div", { className: "uix-select__state", children: emptyLabel })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: open && entries.length === 0 ? emptyLabel : "" })
   ] });
 }
 export {

package/dist/components/CommandPalette.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { CommandPaletteItem } from '../command-palette-model.js';
 
 interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
@@ -12,6 +13,40 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
     /** Props for the search input (value/onChange/placeholder wired by the consumer). */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     children?: ReactNode;
+    /**
+     * Items mode (HAR-1378): pass the commands and the palette filters them itself (case and
+     * diacritics folded, best match first), groups them, moves the active one with ↑ / ↓ (Home / End
+     * while the query is empty) through `aria-activedescendant`, and runs it on Enter or a click.
+     * Without `items`, `children` render as before and the consumer wires everything.
+     */
+    items?: readonly CommandPaletteItem[];
+    /** Items mode: the query (controlled). Pair with `onQueryChange`. */
+    query?: string;
+    /** Items mode: the query as it changes (also when the palette clears it on close). */
+    onQueryChange?: (query: string) => void;
+    /** Items mode: what an empty query shows above all items, under the `recentLabel` heading. */
+    recent?: readonly CommandPaletteItem[];
+    /** Items mode: your own matching instead of the built-in one (`filterCommandItems`). */
+    filter?: (items: readonly CommandPaletteItem[], query: string) => CommandPaletteItem[];
+    /** Items mode: called with every chosen item, after its own `onSelect`, e.g. to record it as recent. */
+    onItemSelect?: (item: CommandPaletteItem) => void;
+    /** Items mode: follow an item's `href` with your router. Default: the browser goes there. */
+    onNavigate?: (href: string, item: CommandPaletteItem) => void;
+    /** Items mode: shown when nothing matches. Default: `UixLabelsProvider` `commandPalette.empty`, then "No results". */
+    emptyLabel?: ReactNode;
+    /** Items mode: the heading of `recent`. Default: `commandPalette.recent`, then "Recent". */
+    recentLabel?: string;
+    /** Items mode: the input's placeholder. */
+    placeholder?: string;
+    /**
+     * Items mode: host the palette in a modal native `<dialog>` (focus stays inside, Escape and a
+     * click outside close it, focus returns to the opener). Closing it clears the query. Without
+     * `open`, the palette renders in place.
+     */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Items mode: render at most this many found items (the count still says how many were found). Default 100. */
+    limit?: number;
 }
 /**
  * ⌘K command palette surface over `.uix-cmdk`. Presentational: mount it inside a
@@ -23,7 +58,7 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
  * popover it sits in `[data-uix-instant]`: it opens and closes with no animation, without the
  * consumer knowing the attribute (or the older `data-uix-cmdk-dialog`).
  */
-declare function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, resultsLabel, className, ...props }: CommandPaletteProps): react.JSX.Element;
+declare function CommandPalette(props: CommandPaletteProps): react.JSX.Element;
 interface CommandGroupProps {
     label?: ReactNode;
     children?: ReactNode;

package/dist/components/CommandPalette.js

@@ -1,12 +1,40 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { fillLabel } from "../fill-label.js";
 import { useUixLabels } from "../labels-context.js";
+import { useDialog } from "../hooks/useDialog.js";
+import { filterCommandItems, groupCommandItems } from "../command-palette-model.js";
+import { searchSegments } from "../search-suggest-model.js";
+import { KbdCombo, ariaKeyShortcuts, useKbdPlatform } from "./Kbd.js";
 const CmdkContext = createContext(null);
 const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
-function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, resultsLabel, className, ...props }) {
+function CommandPalette(props) {
+  if (props.items) return /* @__PURE__ */ jsx(CommandPaletteItems, { ...props, items: props.items });
+  return /* @__PURE__ */ jsx(CommandPaletteChildren, { ...props });
+}
+function CommandPaletteChildren({
+  inputProps,
+  children,
+  inputLabel: inputLabelProp,
+  resultsLabel,
+  className,
+  items: _items,
+  query: _query,
+  onQueryChange: _onQueryChange,
+  recent: _recent,
+  filter: _filter,
+  onItemSelect: _onItemSelect,
+  onNavigate: _onNavigate,
+  emptyLabel: _emptyLabel,
+  recentLabel: _recentLabel,
+  placeholder: _placeholder,
+  open: _open,
+  onOpenChange: _onOpenChange,
+  limit: _limit,
+  ...props
+}) {
   const uixLabels = useUixLabels();
   const inputLabel = inputLabelProp ?? uixLabels.commandPalette?.input ?? "Command palette";
   const resultsOne = uixLabels.commandPalette?.resultsOne ?? "{count} result";
@@ -89,6 +117,230 @@ function CommandItem({ icon, shortcut, active, children, className, id, ...props
     }
   );
 }
+const optionId = (listId, item, recent) => `${listId}-${recent ? "r-" : ""}${item.id.replace(/[^\w-]/g, "_")}`;
+function Highlighted({ text, query }) {
+  return /* @__PURE__ */ jsx(Fragment, { children: searchSegments(text, query).map((segment, index) => segment.match ? /* @__PURE__ */ jsx("mark", { className: "uix-cmdk__mark", children: segment.text }, index) : segment.text) });
+}
+function CommandPaletteItems({
+  items,
+  query: queryProp,
+  onQueryChange,
+  recent,
+  filter,
+  onItemSelect,
+  onNavigate,
+  emptyLabel,
+  recentLabel,
+  placeholder,
+  open,
+  onOpenChange,
+  limit = 100,
+  inputLabel: inputLabelProp,
+  resultsLabel,
+  inputProps,
+  className,
+  children: _children,
+  ...props
+}) {
+  const uixLabels = useUixLabels();
+  const labels = uixLabels.commandPalette;
+  const inputLabel = inputLabelProp ?? labels?.input ?? "Command palette";
+  const empty = emptyLabel ?? labels?.empty ?? "No results";
+  const recentHeading = recentLabel ?? labels?.recent ?? "Recent";
+  const resultsText = (count2) => resultsLabel?.(count2) ?? fillLabel(count2 === 1 ? labels?.resultsOne ?? "{count} result" : labels?.resultsMany ?? "{count} results", { count: count2 });
+  const resultsTextRef = useRef(resultsText);
+  resultsTextRef.current = resultsText;
+  const platform = useKbdPlatform();
+  const listId = useId();
+  const [queryState, setQueryState] = useState("");
+  const query = queryProp ?? queryState;
+  const setQuery = (next) => {
+    if (queryProp === void 0) setQueryState(next);
+    onQueryChange?.(next);
+  };
+  const inDialog = open !== void 0;
+  const ref = useDialog(inDialog ? open : false, () => onOpenChange?.(false));
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const returnTo = useRef(null);
+  const pressedBackdrop = useRef(false);
+  const found = useMemo(() => (filter ?? filterCommandItems)(items, query), [filter, items, query]);
+  const showRecent = query.trim() === "" && (recent?.length ?? 0) > 0;
+  const groups = useMemo(() => groupCommandItems(found.slice(0, Math.max(0, limit))), [found, limit]);
+  const rows = useMemo(() => [
+    ...showRecent ? recent.map((item) => ({ item, id: optionId(listId, item, true) })) : [],
+    ...groups.flatMap((group) => group.items.map((item) => ({ item, id: optionId(listId, item, false) })))
+  ], [showRecent, recent, groups, listId]);
+  const enabled = rows.filter((row) => !row.item.disabled);
+  const [activeState, setActiveState] = useState(null);
+  const activeId = enabled.some((row) => row.id === activeState) ? activeState : enabled[0]?.id ?? null;
+  const active = rows.find((row) => row.id === activeId);
+  useLayoutEffect(() => {
+    if (!activeId) return;
+    const el = listRef.current?.querySelector(`[id="${activeId}"]`);
+    el?.scrollIntoView?.({ block: "nearest" });
+  }, [activeId]);
+  const [announced, setAnnounced] = useState("");
+  const count = found.length;
+  useEffect(() => {
+    const t = window.setTimeout(() => setAnnounced(resultsTextRef.current(count)), 150);
+    return () => window.clearTimeout(t);
+  }, [count]);
+  useEffect(() => {
+    if (!inDialog) return;
+    if (open) {
+      returnTo.current = document.activeElement;
+      inputRef.current?.focus();
+    } else {
+      if (query) setQuery("");
+      setActiveState(null);
+      returnTo.current?.focus?.();
+      returnTo.current = null;
+    }
+  }, [open, inDialog]);
+  const choose = (item) => {
+    if (item.disabled) return;
+    item.onSelect?.();
+    if (item.href) {
+      if (onNavigate) onNavigate(item.href, item);
+      else window.location.assign(item.href);
+    }
+    onItemSelect?.(item);
+    if (inDialog) onOpenChange?.(false);
+  };
+  const move = (to) => {
+    if (enabled.length === 0) return;
+    const index = (to + enabled.length) % enabled.length;
+    setActiveState(enabled[index].id);
+  };
+  const onKeyDown = (event) => {
+    inputProps?.onKeyDown?.(event);
+    if (event.defaultPrevented || event.nativeEvent.isComposing) return;
+    const at = enabled.findIndex((row) => row.id === activeId);
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        move(at + 1);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        move(at - 1);
+        break;
+      // Home / End move the caret while there is text to edit; in an empty field they jump.
+      case "Home":
+        if (query === "") {
+          event.preventDefault();
+          move(0);
+        }
+        break;
+      case "End":
+        if (query === "") {
+          event.preventDefault();
+          move(enabled.length - 1);
+        }
+        break;
+      case "Enter":
+        if (active) {
+          event.preventDefault();
+          choose(active.item);
+        }
+        break;
+      default:
+    }
+  };
+  const renderRow = ({ item, id }) => {
+    const isActive = id === activeId;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id,
+        role: "option",
+        className: "uix-cmdk__item",
+        "data-active": isActive || void 0,
+        "aria-selected": isActive,
+        "aria-disabled": item.disabled || void 0,
+        "aria-keyshortcuts": item.shortcut?.length ? ariaKeyShortcuts(item.shortcut, platform) : void 0,
+        onPointerMove: () => {
+          if (!item.disabled && !isActive) setActiveState(id);
+        },
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: () => choose(item),
+        children: [
+          item.icon != null && /* @__PURE__ */ jsx("span", { className: "uix-cmdk__icon", "aria-hidden": "true", children: item.icon }),
+          /* @__PURE__ */ jsxs("span", { className: "uix-cmdk__text", children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-cmdk__label", children: /* @__PURE__ */ jsx(Highlighted, { text: item.label, query }) }),
+            item.description && /* @__PURE__ */ jsx("span", { className: "uix-cmdk__desc", children: item.description })
+          ] }),
+          item.shortcut?.length ? /* @__PURE__ */ jsx("span", { className: "uix-cmdk__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...item.shortcut], platform }) }) : null
+        ]
+      },
+      id
+    );
+  };
+  const recentRows = showRecent ? rows.slice(0, recent.length) : [];
+  let cursor = recentRows.length;
+  const palette = /* @__PURE__ */ jsxs("div", { className: cx("uix-cmdk", className), "data-items": "", ...props, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        className: "uix-cmdk__input",
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-autocomplete": "list",
+        "aria-controls": listId,
+        "aria-activedescendant": activeId ?? void 0,
+        "aria-label": inputLabel,
+        placeholder,
+        autoComplete: "off",
+        spellCheck: false,
+        ...inputProps,
+        value: query,
+        onChange: (event) => {
+          inputProps?.onChange?.(event);
+          setQuery(event.currentTarget.value);
+        },
+        onKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { ref: listRef, className: "uix-cmdk__list", role: "listbox", id: listId, "aria-label": inputLabel, hidden: rows.length === 0, children: [
+      recentRows.length > 0 && /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": `${listId}-recent`, children: [
+        /* @__PURE__ */ jsx("div", { className: "uix-cmdk__group", id: `${listId}-recent`, role: "presentation", children: recentHeading }),
+        recentRows.map(renderRow)
+      ] }),
+      groups.map((group, index) => {
+        const groupRows = rows.slice(cursor, cursor + group.items.length);
+        cursor += group.items.length;
+        const headingId = `${listId}-g${index}`;
+        return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": group.label != null ? headingId : void 0, children: [
+          group.label != null && /* @__PURE__ */ jsx("div", { className: "uix-cmdk__group", id: headingId, role: "presentation", children: group.label }),
+          groupRows.map(renderRow)
+        ] }, group.label ?? `__${index}`);
+      })
+    ] }),
+    rows.length === 0 && /* @__PURE__ */ jsx("p", { className: "uix-cmdk__empty", children: empty }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", children: announced })
+  ] });
+  if (!inDialog) return palette;
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref,
+      className: "uix-dialog uix-cmdk-dialog",
+      "data-uix-cmdk-dialog": "",
+      "data-uix-instant": "",
+      "aria-label": inputLabel,
+      onPointerDown: (event) => {
+        pressedBackdrop.current = event.target === event.currentTarget;
+      },
+      onClick: (event) => {
+        if (event.target === event.currentTarget && pressedBackdrop.current) onOpenChange?.(false);
+        pressedBackdrop.current = false;
+      },
+      children: palette
+    }
+  );
+}
 export {
   CommandGroup,
   CommandItem,