@mlw-packages/react-components 1.10.27 → 1.10.29

package/dist/index.css

@@ -6002,9 +6002,6 @@ body {
 .group:hover .group-hover\:text-destructive {
   color: hsl(var(--destructive));
 }
-.group:hover .group-hover\:text-foreground {
-  color: hsl(var(--foreground));
-}
 .group:hover .group-hover\:text-primary {
   color: hsl(var(--primary));
 }

package/dist/index.d.mts

@@ -28,7 +28,6 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { UniqueIdentifier, DraggableAttributes } from '@dnd-kit/core';
 import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-import * as _phosphor_icons_react from '@phosphor-icons/react';
 import { IconProps as IconProps$1 } from '@phosphor-icons/react';
 
 type ErrorMessageProps = {
@@ -2649,6 +2648,7 @@ interface CommandPaletteProps {
     multiSelect?: boolean;
     onSelectMultiple?: (items: CommandItem[]) => void;
     multiSearch?: boolean;
+    onMultiSearchSubmit?: (terms: string[]) => void;
     debounceDelay?: number;
     footer?: React$1.ReactNode;
     onSelect?: (item: CommandItem) => void;
@@ -2692,7 +2692,7 @@ declare function CommandItemRow({ item, isActive, isSelected, multiSelect, onSel
 
 declare function CommandPalette(props: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
-declare function useCommandPalette({ items, groups, open, onOpenChange, recentItems, onRecentItemsChange, maxRecentItems, multiSearch, multiSelect, onSelectMultiple, }: Partial<CommandPaletteProps>): {
+declare function useCommandPalette({ items, groups, open, onOpenChange, recentItems, onRecentItemsChange, maxRecentItems, multiSearch, multiSelect, onSelectMultiple, onMultiSearchSubmit, }: Partial<CommandPaletteProps>): {
     query: string;
     setQuery: React$1.Dispatch<React$1.SetStateAction<string>>;
     activeIndex: number;
@@ -2700,13 +2700,7 @@ declare function useCommandPalette({ items, groups, open, onOpenChange, recentIt
     page: number;
     setPage: React$1.Dispatch<React$1.SetStateAction<number>>;
     searchTerms: string[];
-    allMatchedGroups: (CommandGroup | {
-        id: string;
-        label: string;
-        icon: React$1.FunctionComponentElement<_phosphor_icons_react.IconProps>;
-        items: CommandItem[];
-        priority: number;
-    })[];
+    allMatchedGroups: CommandGroup[];
     allFlatItems: CommandItem[];
     displayedGroups: CommandGroup[];
     flatItems: CommandItem[];

package/dist/index.d.ts

@@ -28,7 +28,6 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import { UniqueIdentifier, DraggableAttributes } from '@dnd-kit/core';
 import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-import * as _phosphor_icons_react from '@phosphor-icons/react';
 import { IconProps as IconProps$1 } from '@phosphor-icons/react';
 
 type ErrorMessageProps = {
@@ -2649,6 +2648,7 @@ interface CommandPaletteProps {
     multiSelect?: boolean;
     onSelectMultiple?: (items: CommandItem[]) => void;
     multiSearch?: boolean;
+    onMultiSearchSubmit?: (terms: string[]) => void;
     debounceDelay?: number;
     footer?: React$1.ReactNode;
     onSelect?: (item: CommandItem) => void;
@@ -2692,7 +2692,7 @@ declare function CommandItemRow({ item, isActive, isSelected, multiSelect, onSel
 
 declare function CommandPalette(props: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
-declare function useCommandPalette({ items, groups, open, onOpenChange, recentItems, onRecentItemsChange, maxRecentItems, multiSearch, multiSelect, onSelectMultiple, }: Partial<CommandPaletteProps>): {
+declare function useCommandPalette({ items, groups, open, onOpenChange, recentItems, onRecentItemsChange, maxRecentItems, multiSearch, multiSelect, onSelectMultiple, onMultiSearchSubmit, }: Partial<CommandPaletteProps>): {
     query: string;
     setQuery: React$1.Dispatch<React$1.SetStateAction<string>>;
     activeIndex: number;
@@ -2700,13 +2700,7 @@ declare function useCommandPalette({ items, groups, open, onOpenChange, recentIt
     page: number;
     setPage: React$1.Dispatch<React$1.SetStateAction<number>>;
     searchTerms: string[];
-    allMatchedGroups: (CommandGroup | {
-        id: string;
-        label: string;
-        icon: React$1.FunctionComponentElement<_phosphor_icons_react.IconProps>;
-        items: CommandItem[];
-        priority: number;
-    })[];
+    allMatchedGroups: CommandGroup[];
     allFlatItems: CommandItem[];
     displayedGroups: CommandGroup[];
     flatItems: CommandItem[];

package/dist/index.js

@@ -22284,15 +22284,24 @@ function normaliseGroups(items = [], groups = []) {
 }
 function unionGroups(base, terms) {
   if (terms.length === 0) return base;
-  const allMatchedIds = /* @__PURE__ */ new Set();
+  const bestScore = /* @__PURE__ */ new Map();
   terms.forEach((term) => {
-    const filtered = filterAndScore(base, term);
-    filtered.forEach((g) => g.items.forEach((i) => allMatchedIds.add(i.id)));
+    base.forEach((group) => {
+      group.items.forEach((item) => {
+        const s = scoreMatch(item, term);
+        if (s >= 0) {
+          const prev = bestScore.get(item.id) ?? -1;
+          if (s > prev) bestScore.set(item.id, s);
+        }
+      });
+    });
   });
   return base.map((group) => ({
     ...group,
-    items: group.items.filter((item) => allMatchedIds.has(item.id))
-  })).filter((group) => group.items.length > 0);
+    items: group.items.filter((item) => bestScore.has(item.id)).sort(
+      (a, b) => (bestScore.get(b.id) ?? 0) - (bestScore.get(a.id) ?? 0)
+    )
+  })).filter((group) => group.items.length > 0).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
 }
 function createGroup(id, label, items, opts) {
   return { id, label, items, ...opts };
@@ -22413,33 +22422,31 @@ function CommandItemRow({
   onHover,
   searchQuery
 }) {
+  const handleCheckboxChange = (checked) => {
+    if (checked !== "indeterminate") {
+      onToggleSelection?.({});
+    }
+  };
+  const handleItemClick = (e) => {
+    if (multiSelect) {
+      onToggleSelection?.(e);
+      return;
+    }
+    onSelect(e);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.button,
     {
       layout: true,
-      onClick: (e) => {
-        if (multiSelect && onToggleSelection && (e.ctrlKey || e.metaKey || e.shiftKey)) {
-          onToggleSelection(e);
-        } else {
-          onSelect(e);
-        }
-      },
+      onClick: handleItemClick,
       onMouseEnter: onHover,
       className: `
-        w-full flex items-center gap-1 px-2 py-1 rounded-md text-left cursor-pointer
-        transition-colors duration-75 group relative
+        w-full flex items-center gap-2 px-2 py-1 rounded-md text-left cursor-pointer
+        transition-colors duration-75 group relative justify-between
         ${isActive ? "text-accent-foreground bg-accent" : "hover:bg-accent hover:text-accent-foreground"}
       `,
       children: [
-        item.icon && /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: `relative flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-md text-base
-          ${isSelected ? "bg-primary text-primary-foreground" : isActive ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground group-hover:text-foreground"}`,
-            children: item.icon
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0 px-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               "span",
@@ -22453,6 +22460,14 @@ function CommandItemRow({
           item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground truncate", children: /* @__PURE__ */ jsxRuntime.jsx(HighlightText, { text: item.description, query: searchQuery }) })
         ] }),
         item.shortcut && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative hidden sm:flex items-center gap-1 flex-shrink-0", children: item.shortcut.map((k, i) => /* @__PURE__ */ jsxRuntime.jsx(Kbd, { children: k }, i)) }),
+        multiSelect && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+          CheckboxBase,
+          {
+            checked: isSelected,
+            onCheckedChange: handleCheckboxChange,
+            className: "h-4 w-4 pointer-events-none"
+          }
+        ) }),
         isSelected && /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.div,
           {
@@ -22460,7 +22475,8 @@ function CommandItemRow({
             className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-2/3 bg-primary rounded-r-md"
           }
         ),
-        isActive && !isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+        !isSelected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-2/3 bg-transparent rounded-r-md" }),
+        isActive && !isSelected && !multiSelect && /* @__PURE__ */ jsxRuntime.jsx(
           react.CaretRightIcon,
           {
             className: "relative w-4 h-4 text-primary flex-shrink-0",
@@ -22482,7 +22498,8 @@ function useCommandPalette({
   maxRecentItems = 5,
   multiSearch = false,
   multiSelect = false,
-  onSelectMultiple
+  onSelectMultiple,
+  onMultiSearchSubmit
 }) {
   const [query, setQuery] = React32__namespace.useState("");
   const [activeIndex, setActiveIndex] = React32__namespace.useState(0);
@@ -22490,6 +22507,13 @@ function useCommandPalette({
   const [selectedItemIds, setSelectedItemIds] = React32__namespace.useState(
     /* @__PURE__ */ new Set()
   );
+  const stateRef = React32.useRef({
+    activeIndex,
+    page,
+    flatItems: [],
+    query,
+    selectedItems: []
+  });
   const toggleSelection = React32.useCallback((id) => {
     setSelectedItemIds((prev) => {
       const next = new Set(prev);
@@ -22505,38 +22529,34 @@ function useCommandPalette({
   );
   React32.useEffect(() => {
     if (open) {
-      setQuery("");
+      const savedQuery = localStorage.getItem("commandPaletteQuery") || "";
+      setQuery(savedQuery);
       setActiveIndex(0);
       setPage(0);
-      clearSelection();
+      if (!multiSelect) {
+        clearSelection();
+      }
+    }
+  }, [open, clearSelection, multiSelect]);
+  React32.useEffect(() => {
+    if (!open) {
+      localStorage.setItem("commandPaletteQuery", query);
     }
-  }, [open, clearSelection]);
+  }, [open, query]);
   const searchTerms = React32.useMemo(() => {
     const parts = query.split(",");
-    if (parts.length <= 1 && !multiSearch) return [];
-    return parts.map((t) => t.trim().toLowerCase()).filter(Boolean);
+    const terms = parts.map((t) => t.trim().toLowerCase()).filter(Boolean);
+    if (terms.length > 1) return terms;
+    if (multiSearch && terms.length > 0) return terms;
+    return [];
   }, [query, multiSearch]);
   const allMatchedGroups = React32.useMemo(() => {
-    if (!query.trim()) {
-      if (recentItems.length > 0) {
-        return [
-          {
-            id: "__recent__",
-            label: "Recent",
-            icon: React32__namespace.createElement(react.ClockCounterClockwiseIcon),
-            items: recentItems,
-            priority: 999
-          },
-          ...baseGroups
-        ];
-      }
-      return baseGroups;
-    }
-    if (searchTerms.length > 1 || multiSearch && searchTerms.length > 0) {
+    if (!query.trim()) return baseGroups;
+    if (searchTerms.length > 0) {
       return unionGroups(baseGroups, searchTerms);
     }
     return filterAndScore(baseGroups, query);
-  }, [query, baseGroups, recentItems, multiSearch, searchTerms]);
+  }, [query, baseGroups, searchTerms]);
   const allFlatItems = React32.useMemo(
     () => allMatchedGroups.flatMap((g) => g.items),
     [allMatchedGroups]
@@ -22562,9 +22582,7 @@ function useCommandPalette({
         count++;
         if (count >= end) break;
       }
-      if (slicedItems.length > 0) {
-        result.push({ ...group, items: slicedItems });
-      }
+      if (slicedItems.length > 0) result.push({ ...group, items: slicedItems });
       if (count >= end) break;
     }
     return result;
@@ -22577,10 +22595,9 @@ function useCommandPalette({
     () => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
     [allFlatItems, selectedItemIds]
   );
-  const pageItemCount = flatItems.length;
   React32.useEffect(() => {
-    setActiveIndex((i) => Math.min(i, Math.max(pageItemCount - 1, 0)));
-  }, [pageItemCount]);
+    stateRef.current = { activeIndex, page, flatItems, query, selectedItems };
+  }, [activeIndex, page, flatItems, query, selectedItems]);
   const executeBulkAction = React32.useCallback(() => {
     if (!onSelectMultiple || selectedItems.length === 0) return;
     onSelectMultiple(selectedItems);
@@ -22627,49 +22644,73 @@ function useCommandPalette({
   React32.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
+      const { activeIndex: curIdx, flatItems: curItems } = stateRef.current;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (activeIndex === pageItemCount - 1 && page < totalPages - 1) {
+        if (curIdx === curItems.length - 1 && page < totalPages - 1)
           setPage((p) => p + 1);
-        } else {
-          setActiveIndex((i) => (i + 1) % Math.max(pageItemCount, 1));
-        }
+        else setActiveIndex((i) => (i + 1) % Math.max(curItems.length, 1));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (activeIndex === 0 && page > 0) {
+        if (curIdx === 0 && page > 0) {
           setPage((p) => p - 1);
           setActiveIndex(PAGE_SIZE - 1);
-        } else {
+        } else
           setActiveIndex(
-            (i) => (i - 1 + Math.max(pageItemCount, 1)) % Math.max(pageItemCount, 1)
+            (i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1)
           );
-        }
       } else if (e.key === "Enter") {
         e.preventDefault();
-        if (multiSearch && query.includes(",")) {
+        const currentSelectedItems = allFlatItems.filter(
+          (i) => selectedItemIds.has(i.id)
+        );
+        if (multiSelect && currentSelectedItems.length > 0) {
+          const selectedLabels = currentSelectedItems.map((item) => item.label);
+          onMultiSearchSubmit?.(selectedLabels);
           return;
         }
+        if (multiSearch && query.trim().length > 0) {
+          const terms = query.split(",").map((t) => t.trim()).filter(Boolean);
+          if (terms.length > 0) {
+            if (multiSelect) {
+              const matchedItems = allFlatItems.filter(
+                (item) => terms.some(
+                  (term) => item.label.toLowerCase().includes(term.toLowerCase()) || item.id.toLowerCase().includes(term.toLowerCase())
+                )
+              );
+              const newSelectedIds = new Set(selectedItemIds);
+              matchedItems.forEach((item) => newSelectedIds.add(item.id));
+              setSelectedItemIds(newSelectedIds);
+              const selectedLabels = matchedItems.map((item) => item.label);
+              onMultiSearchSubmit?.(selectedLabels);
+              return;
+            }
+            onMultiSearchSubmit?.(terms);
+            return;
+          }
+        }
         if (multiSelect && (e.ctrlKey || e.metaKey)) {
           executeBulkAction();
           return;
         }
-        handleSelect(flatItems[activeIndex], e);
+        handleSelect(curItems[curIdx], e);
       }
     };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
   }, [
     open,
-    flatItems,
-    activeIndex,
-    pageItemCount,
     page,
     totalPages,
-    query,
     multiSearch,
     multiSelect,
+    handleSelect,
     executeBulkAction,
-    handleSelect
+    onMultiSearchSubmit,
+    selectedItems,
+    allFlatItems,
+    selectedItemIds,
+    query
   ]);
   return {
     query,
@@ -22691,7 +22732,7 @@ function useCommandPalette({
     selectedItems,
     executeBulkAction,
     isEmpty: totalItems === 0 && query.trim().length > 0,
-    showList: query.trim() !== "" || recentItems.length > 0
+    showList: true
   };
 }
 function useKeyboardShortcut(key, callback, options = {}) {
@@ -22991,7 +23032,16 @@ function CommandPalette(props) {
                 className: "flex-1 bg-transparent border-none shadow-none focus-visible:ring-0 p-0 text-base"
               }
             ),
-            query && /* @__PURE__ */ jsxRuntime.jsx(ButtonBase, { variant: "ghost", size: "icon", onClick: handleClearQuery, className: "h-8 w-8", children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" }) })
+            query && /* @__PURE__ */ jsxRuntime.jsx(
+              ButtonBase,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: handleClearQuery,
+                className: "h-8 w-8",
+                children: /* @__PURE__ */ jsxRuntime.jsx(react.XIcon, { className: "w-4 h-4" })
+              }
+            )
           ]
         }
       ),
@@ -23044,7 +23094,13 @@ function CommandPalette(props) {
         style: { maxHeight: "min(600px, 80vh)" },
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "w-4 h-4 text-muted-foreground flex-shrink-0", weight: "bold" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              react.MagnifyingGlassIcon,
+              {
+                className: "w-4 h-4 text-muted-foreground flex-shrink-0",
+                weight: "bold"
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               DebouncedInput,
               {
@@ -23075,7 +23131,8 @@ function CommandPalette(props) {
               footer,
               totalItems,
               selectedCount: selectedItemIds.size,
-              executeBulkAction
+              executeBulkAction,
+              multiSelect
             }
           )
         ]

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { XIcon, CircleNotchIcon, MagnifyingGlassIcon, CaretUpIcon, CaretDownIcon, CheckIcon, CaretRightIcon, CircleIcon, CloudArrowUpIcon, MinusIcon, CaretUpDownIcon, PencilSimpleIcon, ArrowsLeftRightIcon, FloppyDiskIcon, PlusIcon, TrashIcon, SidebarSimpleIcon, CommandIcon, ArrowElbowDownRightIcon, ArrowBendUpLeftIcon, FilePdfIcon, FileDocIcon, FileXlsIcon, FilePptIcon, FileCsvIcon, FileTextIcon, FileImageIcon, FileVideoIcon, FileAudioIcon, FileZipIcon, FileIcon, DotsSixVerticalIcon, CopyIcon, InfoIcon, WarningIcon, XCircleIcon, CheckCircleIcon, CaretLeftIcon, DownloadSimpleIcon, UploadSimpleIcon, ArrowClockwiseIcon, ArrowLeftIcon, GearIcon, BellIcon, DotsThreeIcon, FunnelIcon, HeartIcon, StarIcon, EyeIcon, EyeSlashIcon, LockIcon, LockOpenIcon, FolderIcon, ArrowRightIcon as ArrowRightIcon$1, ArrowsOutIcon, DownloadIcon, CalendarBlankIcon, CalendarIcon, MapPinIcon, CalendarDotsIcon, SunIcon, ClockIcon, AlignLeftIcon, CaretLeft, CaretRight, ArrowDownIcon, ClockUserIcon, EyeSlash, Eye, ArrowUpRightIcon, ArrowDownRightIcon, FunnelSimpleIcon, PencilIcon, ClockCounterClockwiseIcon, FileArchiveIcon, TerminalIcon, CodeIcon, CalendarDotIcon as CalendarDotIcon$1, MoonIcon, DesktopIcon } from '@phosphor-icons/react';
+import { XIcon, CircleNotchIcon, MagnifyingGlassIcon, CaretUpIcon, CaretDownIcon, CheckIcon, CaretRightIcon, CircleIcon, CloudArrowUpIcon, MinusIcon, CaretUpDownIcon, PencilSimpleIcon, ArrowsLeftRightIcon, FloppyDiskIcon, PlusIcon, TrashIcon, SidebarSimpleIcon, CommandIcon, ArrowElbowDownRightIcon, ArrowBendUpLeftIcon, FilePdfIcon, FileDocIcon, FileXlsIcon, FilePptIcon, FileCsvIcon, FileTextIcon, FileImageIcon, FileVideoIcon, FileAudioIcon, FileZipIcon, FileIcon, DotsSixVerticalIcon, CopyIcon, InfoIcon, WarningIcon, XCircleIcon, CheckCircleIcon, CaretLeftIcon, DownloadSimpleIcon, UploadSimpleIcon, ArrowClockwiseIcon, ArrowLeftIcon, GearIcon, BellIcon, DotsThreeIcon, FunnelIcon, HeartIcon, StarIcon, EyeIcon, EyeSlashIcon, LockIcon, LockOpenIcon, FolderIcon, ArrowRightIcon as ArrowRightIcon$1, ArrowsOutIcon, DownloadIcon, CalendarBlankIcon, CalendarIcon, MapPinIcon, CalendarDotsIcon, SunIcon, ClockIcon, AlignLeftIcon, CaretLeft, CaretRight, ArrowDownIcon, ClockUserIcon, EyeSlash, Eye, ArrowUpRightIcon, ArrowDownRightIcon, FunnelSimpleIcon, PencilIcon, FileArchiveIcon, TerminalIcon, CodeIcon, CalendarDotIcon as CalendarDotIcon$1, MoonIcon, DesktopIcon } from '@phosphor-icons/react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -22242,15 +22242,24 @@ function normaliseGroups(items = [], groups = []) {
 }
 function unionGroups(base, terms) {
   if (terms.length === 0) return base;
-  const allMatchedIds = /* @__PURE__ */ new Set();
+  const bestScore = /* @__PURE__ */ new Map();
   terms.forEach((term) => {
-    const filtered = filterAndScore(base, term);
-    filtered.forEach((g) => g.items.forEach((i) => allMatchedIds.add(i.id)));
+    base.forEach((group) => {
+      group.items.forEach((item) => {
+        const s = scoreMatch(item, term);
+        if (s >= 0) {
+          const prev = bestScore.get(item.id) ?? -1;
+          if (s > prev) bestScore.set(item.id, s);
+        }
+      });
+    });
   });
   return base.map((group) => ({
     ...group,
-    items: group.items.filter((item) => allMatchedIds.has(item.id))
-  })).filter((group) => group.items.length > 0);
+    items: group.items.filter((item) => bestScore.has(item.id)).sort(
+      (a, b) => (bestScore.get(b.id) ?? 0) - (bestScore.get(a.id) ?? 0)
+    )
+  })).filter((group) => group.items.length > 0).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
 }
 function createGroup(id, label, items, opts) {
   return { id, label, items, ...opts };
@@ -22371,33 +22380,31 @@ function CommandItemRow({
   onHover,
   searchQuery
 }) {
+  const handleCheckboxChange = (checked) => {
+    if (checked !== "indeterminate") {
+      onToggleSelection?.({});
+    }
+  };
+  const handleItemClick = (e) => {
+    if (multiSelect) {
+      onToggleSelection?.(e);
+      return;
+    }
+    onSelect(e);
+  };
   return /* @__PURE__ */ jsxs(
     motion.button,
     {
       layout: true,
-      onClick: (e) => {
-        if (multiSelect && onToggleSelection && (e.ctrlKey || e.metaKey || e.shiftKey)) {
-          onToggleSelection(e);
-        } else {
-          onSelect(e);
-        }
-      },
+      onClick: handleItemClick,
       onMouseEnter: onHover,
       className: `
-        w-full flex items-center gap-1 px-2 py-1 rounded-md text-left cursor-pointer
-        transition-colors duration-75 group relative
+        w-full flex items-center gap-2 px-2 py-1 rounded-md text-left cursor-pointer
+        transition-colors duration-75 group relative justify-between
         ${isActive ? "text-accent-foreground bg-accent" : "hover:bg-accent hover:text-accent-foreground"}
       `,
       children: [
-        item.icon && /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: `relative flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-md text-base
-          ${isSelected ? "bg-primary text-primary-foreground" : isActive ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground group-hover:text-foreground"}`,
-            children: item.icon
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0 px-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [
             /* @__PURE__ */ jsx(
               "span",
@@ -22411,6 +22418,14 @@ function CommandItemRow({
           item.description && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: /* @__PURE__ */ jsx(HighlightText, { text: item.description, query: searchQuery }) })
         ] }),
         item.shortcut && /* @__PURE__ */ jsx("div", { className: "relative hidden sm:flex items-center gap-1 flex-shrink-0", children: item.shortcut.map((k, i) => /* @__PURE__ */ jsx(Kbd, { children: k }, i)) }),
+        multiSelect && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          CheckboxBase,
+          {
+            checked: isSelected,
+            onCheckedChange: handleCheckboxChange,
+            className: "h-4 w-4 pointer-events-none"
+          }
+        ) }),
         isSelected && /* @__PURE__ */ jsx(
           motion.div,
           {
@@ -22418,7 +22433,8 @@ function CommandItemRow({
             className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-2/3 bg-primary rounded-r-md"
           }
         ),
-        isActive && !isSelected && /* @__PURE__ */ jsx(
+        !isSelected && /* @__PURE__ */ jsx("div", { className: "absolute left-0 top-1/2 -translate-y-1/2 w-1 h-2/3 bg-transparent rounded-r-md" }),
+        isActive && !isSelected && !multiSelect && /* @__PURE__ */ jsx(
           CaretRightIcon,
           {
             className: "relative w-4 h-4 text-primary flex-shrink-0",
@@ -22440,7 +22456,8 @@ function useCommandPalette({
   maxRecentItems = 5,
   multiSearch = false,
   multiSelect = false,
-  onSelectMultiple
+  onSelectMultiple,
+  onMultiSearchSubmit
 }) {
   const [query, setQuery] = React32.useState("");
   const [activeIndex, setActiveIndex] = React32.useState(0);
@@ -22448,6 +22465,13 @@ function useCommandPalette({
   const [selectedItemIds, setSelectedItemIds] = React32.useState(
     /* @__PURE__ */ new Set()
   );
+  const stateRef = useRef({
+    activeIndex,
+    page,
+    flatItems: [],
+    query,
+    selectedItems: []
+  });
   const toggleSelection = useCallback((id) => {
     setSelectedItemIds((prev) => {
       const next = new Set(prev);
@@ -22463,38 +22487,34 @@ function useCommandPalette({
   );
   useEffect(() => {
     if (open) {
-      setQuery("");
+      const savedQuery = localStorage.getItem("commandPaletteQuery") || "";
+      setQuery(savedQuery);
       setActiveIndex(0);
       setPage(0);
-      clearSelection();
+      if (!multiSelect) {
+        clearSelection();
+      }
+    }
+  }, [open, clearSelection, multiSelect]);
+  useEffect(() => {
+    if (!open) {
+      localStorage.setItem("commandPaletteQuery", query);
     }
-  }, [open, clearSelection]);
+  }, [open, query]);
   const searchTerms = useMemo(() => {
     const parts = query.split(",");
-    if (parts.length <= 1 && !multiSearch) return [];
-    return parts.map((t) => t.trim().toLowerCase()).filter(Boolean);
+    const terms = parts.map((t) => t.trim().toLowerCase()).filter(Boolean);
+    if (terms.length > 1) return terms;
+    if (multiSearch && terms.length > 0) return terms;
+    return [];
   }, [query, multiSearch]);
   const allMatchedGroups = useMemo(() => {
-    if (!query.trim()) {
-      if (recentItems.length > 0) {
-        return [
-          {
-            id: "__recent__",
-            label: "Recent",
-            icon: React32.createElement(ClockCounterClockwiseIcon),
-            items: recentItems,
-            priority: 999
-          },
-          ...baseGroups
-        ];
-      }
-      return baseGroups;
-    }
-    if (searchTerms.length > 1 || multiSearch && searchTerms.length > 0) {
+    if (!query.trim()) return baseGroups;
+    if (searchTerms.length > 0) {
       return unionGroups(baseGroups, searchTerms);
     }
     return filterAndScore(baseGroups, query);
-  }, [query, baseGroups, recentItems, multiSearch, searchTerms]);
+  }, [query, baseGroups, searchTerms]);
   const allFlatItems = useMemo(
     () => allMatchedGroups.flatMap((g) => g.items),
     [allMatchedGroups]
@@ -22520,9 +22540,7 @@ function useCommandPalette({
         count++;
         if (count >= end) break;
       }
-      if (slicedItems.length > 0) {
-        result.push({ ...group, items: slicedItems });
-      }
+      if (slicedItems.length > 0) result.push({ ...group, items: slicedItems });
       if (count >= end) break;
     }
     return result;
@@ -22535,10 +22553,9 @@ function useCommandPalette({
     () => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
     [allFlatItems, selectedItemIds]
   );
-  const pageItemCount = flatItems.length;
   useEffect(() => {
-    setActiveIndex((i) => Math.min(i, Math.max(pageItemCount - 1, 0)));
-  }, [pageItemCount]);
+    stateRef.current = { activeIndex, page, flatItems, query, selectedItems };
+  }, [activeIndex, page, flatItems, query, selectedItems]);
   const executeBulkAction = useCallback(() => {
     if (!onSelectMultiple || selectedItems.length === 0) return;
     onSelectMultiple(selectedItems);
@@ -22585,49 +22602,73 @@ function useCommandPalette({
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
+      const { activeIndex: curIdx, flatItems: curItems } = stateRef.current;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (activeIndex === pageItemCount - 1 && page < totalPages - 1) {
+        if (curIdx === curItems.length - 1 && page < totalPages - 1)
           setPage((p) => p + 1);
-        } else {
-          setActiveIndex((i) => (i + 1) % Math.max(pageItemCount, 1));
-        }
+        else setActiveIndex((i) => (i + 1) % Math.max(curItems.length, 1));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
-        if (activeIndex === 0 && page > 0) {
+        if (curIdx === 0 && page > 0) {
           setPage((p) => p - 1);
           setActiveIndex(PAGE_SIZE - 1);
-        } else {
+        } else
           setActiveIndex(
-            (i) => (i - 1 + Math.max(pageItemCount, 1)) % Math.max(pageItemCount, 1)
+            (i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1)
           );
-        }
       } else if (e.key === "Enter") {
         e.preventDefault();
-        if (multiSearch && query.includes(",")) {
+        const currentSelectedItems = allFlatItems.filter(
+          (i) => selectedItemIds.has(i.id)
+        );
+        if (multiSelect && currentSelectedItems.length > 0) {
+          const selectedLabels = currentSelectedItems.map((item) => item.label);
+          onMultiSearchSubmit?.(selectedLabels);
           return;
         }
+        if (multiSearch && query.trim().length > 0) {
+          const terms = query.split(",").map((t) => t.trim()).filter(Boolean);
+          if (terms.length > 0) {
+            if (multiSelect) {
+              const matchedItems = allFlatItems.filter(
+                (item) => terms.some(
+                  (term) => item.label.toLowerCase().includes(term.toLowerCase()) || item.id.toLowerCase().includes(term.toLowerCase())
+                )
+              );
+              const newSelectedIds = new Set(selectedItemIds);
+              matchedItems.forEach((item) => newSelectedIds.add(item.id));
+              setSelectedItemIds(newSelectedIds);
+              const selectedLabels = matchedItems.map((item) => item.label);
+              onMultiSearchSubmit?.(selectedLabels);
+              return;
+            }
+            onMultiSearchSubmit?.(terms);
+            return;
+          }
+        }
         if (multiSelect && (e.ctrlKey || e.metaKey)) {
           executeBulkAction();
           return;
         }
-        handleSelect(flatItems[activeIndex], e);
+        handleSelect(curItems[curIdx], e);
       }
     };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
   }, [
     open,
-    flatItems,
-    activeIndex,
-    pageItemCount,
     page,
     totalPages,
-    query,
     multiSearch,
     multiSelect,
+    handleSelect,
     executeBulkAction,
-    handleSelect
+    onMultiSearchSubmit,
+    selectedItems,
+    allFlatItems,
+    selectedItemIds,
+    query
   ]);
   return {
     query,
@@ -22649,7 +22690,7 @@ function useCommandPalette({
     selectedItems,
     executeBulkAction,
     isEmpty: totalItems === 0 && query.trim().length > 0,
-    showList: query.trim() !== "" || recentItems.length > 0
+    showList: true
   };
 }
 function useKeyboardShortcut(key, callback, options = {}) {
@@ -22949,7 +22990,16 @@ function CommandPalette(props) {
                 className: "flex-1 bg-transparent border-none shadow-none focus-visible:ring-0 p-0 text-base"
               }
             ),
-            query && /* @__PURE__ */ jsx(ButtonBase, { variant: "ghost", size: "icon", onClick: handleClearQuery, className: "h-8 w-8", children: /* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4" }) })
+            query && /* @__PURE__ */ jsx(
+              ButtonBase,
+              {
+                variant: "ghost",
+                size: "icon",
+                onClick: handleClearQuery,
+                className: "h-8 w-8",
+                children: /* @__PURE__ */ jsx(XIcon, { className: "w-4 h-4" })
+              }
+            )
           ]
         }
       ),
@@ -23002,7 +23052,13 @@ function CommandPalette(props) {
         style: { maxHeight: "min(600px, 80vh)" },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-2 border-b border-border", children: [
-            /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "w-4 h-4 text-muted-foreground flex-shrink-0", weight: "bold" }),
+            /* @__PURE__ */ jsx(
+              MagnifyingGlassIcon,
+              {
+                className: "w-4 h-4 text-muted-foreground flex-shrink-0",
+                weight: "bold"
+              }
+            ),
             /* @__PURE__ */ jsx(
               DebouncedInput,
               {
@@ -23033,7 +23089,8 @@ function CommandPalette(props) {
               footer,
               totalItems,
               selectedCount: selectedItemIds.size,
-              executeBulkAction
+              executeBulkAction,
+              multiSelect
             }
           )
         ]

package/package.json

@@ -5,7 +5,7 @@
     "access": "public",
     "type": "module"
   },
-  "version": "1.10.27",
+  "version": "1.10.29",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",