@mlw-packages/react-components 1.10.28 → 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,12 +22498,15 @@ function useCommandPalette({
   maxRecentItems = 5,
   multiSearch = false,
   multiSelect = false,
-  onSelectMultiple
+  onSelectMultiple,
+  onMultiSearchSubmit
 }) {
   const [query, setQuery] = React32__namespace.useState("");
   const [activeIndex, setActiveIndex] = React32__namespace.useState(0);
   const [page, setPage] = React32__namespace.useState(0);
-  const [selectedItemIds, setSelectedItemIds] = React32__namespace.useState(/* @__PURE__ */ new Set());
+  const [selectedItemIds, setSelectedItemIds] = React32__namespace.useState(
+    /* @__PURE__ */ new Set()
+  );
   const stateRef = React32.useRef({
     activeIndex,
     page,
@@ -22504,27 +22523,44 @@ function useCommandPalette({
     });
   }, []);
   const clearSelection = React32.useCallback(() => setSelectedItemIds(/* @__PURE__ */ new Set()), []);
-  const baseGroups = React32.useMemo(() => normaliseGroups(items, groups), [items, groups]);
+  const baseGroups = React32.useMemo(
+    () => normaliseGroups(items, groups),
+    [items, groups]
+  );
   React32.useEffect(() => {
     if (open) {
-      setQuery("");
+      const savedQuery = localStorage.getItem("commandPaletteQuery") || "";
+      setQuery(savedQuery);
       setActiveIndex(0);
       setPage(0);
-      clearSelection();
+      if (!multiSelect) {
+        clearSelection();
+      }
     }
-  }, [open, clearSelection]);
+  }, [open, clearSelection, multiSelect]);
+  React32.useEffect(() => {
+    if (!open) {
+      localStorage.setItem("commandPaletteQuery", query);
+    }
+  }, [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()) {
-      return recentItems.length > 0 ? [{ id: "__recent__", label: "Recent", icon: React32__namespace.createElement(react.ClockCounterClockwiseIcon), items: recentItems, priority: 999 }, ...baseGroups] : baseGroups;
-    }
-    return searchTerms.length > 1 || multiSearch && searchTerms.length > 0 ? unionGroups(baseGroups, searchTerms) : filterAndScore(baseGroups, query);
-  }, [query, baseGroups, recentItems, multiSearch, searchTerms]);
-  const allFlatItems = React32.useMemo(() => allMatchedGroups.flatMap((g) => g.items), [allMatchedGroups]);
+    if (!query.trim()) return baseGroups;
+    if (searchTerms.length > 0) {
+      return unionGroups(baseGroups, searchTerms);
+    }
+    return filterAndScore(baseGroups, query);
+  }, [query, baseGroups, searchTerms]);
+  const allFlatItems = React32.useMemo(
+    () => allMatchedGroups.flatMap((g) => g.items),
+    [allMatchedGroups]
+  );
   const totalItems = allFlatItems.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
   React32.useEffect(() => {
@@ -22551,8 +22587,14 @@ function useCommandPalette({
     }
     return result;
   }, [allMatchedGroups, page]);
-  const flatItems = React32.useMemo(() => displayedGroups.flatMap((g) => g.items), [displayedGroups]);
-  const selectedItems = React32.useMemo(() => allFlatItems.filter((i) => selectedItemIds.has(i.id)), [allFlatItems, selectedItemIds]);
+  const flatItems = React32.useMemo(
+    () => displayedGroups.flatMap((g) => g.items),
+    [displayedGroups]
+  );
+  const selectedItems = React32.useMemo(
+    () => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
+    [allFlatItems, selectedItemIds]
+  );
   React32.useEffect(() => {
     stateRef.current = { activeIndex, page, flatItems, query, selectedItems };
   }, [activeIndex, page, flatItems, query, selectedItems]);
@@ -22561,47 +22603,92 @@ function useCommandPalette({
     onSelectMultiple(selectedItems);
     onOpenChange?.(false);
   }, [onSelectMultiple, selectedItems, onOpenChange]);
-  const handleSelect = React32.useCallback((item, event) => {
-    if (!item) return;
-    if (multiSelect) {
-      const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
-      if (isCmdKey) {
-        toggleSelection(item.id);
-        return;
+  const handleSelect = React32.useCallback(
+    (item, event) => {
+      if (!item) return;
+      if (multiSelect) {
+        const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
+        if (isCmdKey) {
+          toggleSelection(item.id);
+          return;
+        }
+        if (selectedItems.length > 0) {
+          const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
+          onSelectMultiple?.(finalItems);
+          onOpenChange?.(false);
+          return;
+        }
       }
-      if (selectedItems.length > 0) {
-        const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
-        onSelectMultiple?.(finalItems);
-        onOpenChange?.(false);
-        return;
+      item.onSelect();
+      onOpenChange?.(false);
+      if (onRecentItemsChange) {
+        const next = [
+          item,
+          ...recentItems.filter((r) => r.id !== item.id)
+        ].slice(0, maxRecentItems);
+        onRecentItemsChange(next);
       }
-    }
-    item.onSelect();
-    onOpenChange?.(false);
-    if (onRecentItemsChange) {
-      const next = [item, ...recentItems.filter((r) => r.id !== item.id)].slice(0, maxRecentItems);
-      onRecentItemsChange(next);
-    }
-  }, [multiSelect, selectedItems, selectedItemIds, onSelectMultiple, onOpenChange, onRecentItemsChange, recentItems, maxRecentItems, toggleSelection]);
+    },
+    [
+      multiSelect,
+      selectedItems,
+      selectedItemIds,
+      onSelectMultiple,
+      onOpenChange,
+      onRecentItemsChange,
+      recentItems,
+      maxRecentItems,
+      toggleSelection
+    ]
+  );
   React32.useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      const { activeIndex: curIdx, flatItems: curItems, query: curQuery, selectedItems: curSelected } = stateRef.current;
+      const { activeIndex: curIdx, flatItems: curItems } = stateRef.current;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (curIdx === curItems.length - 1 && page < totalPages - 1) setPage((p) => p + 1);
+        if (curIdx === curItems.length - 1 && page < totalPages - 1)
+          setPage((p) => p + 1);
         else setActiveIndex((i) => (i + 1) % Math.max(curItems.length, 1));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         if (curIdx === 0 && page > 0) {
           setPage((p) => p - 1);
           setActiveIndex(PAGE_SIZE - 1);
-        } else setActiveIndex((i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1));
+        } else
+          setActiveIndex(
+            (i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1)
+          );
       } else if (e.key === "Enter") {
         e.preventDefault();
-        if (multiSearch && curQuery.includes(",") && curSelected.length === 0) {
+        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;
@@ -22611,7 +22698,20 @@ function useCommandPalette({
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [open, page, totalPages, multiSearch, multiSelect, handleSelect, executeBulkAction]);
+  }, [
+    open,
+    page,
+    totalPages,
+    multiSearch,
+    multiSelect,
+    handleSelect,
+    executeBulkAction,
+    onMultiSearchSubmit,
+    selectedItems,
+    allFlatItems,
+    selectedItemIds,
+    query
+  ]);
   return {
     query,
     setQuery,
@@ -22632,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 = {}) {
@@ -22932,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" })
+              }
+            )
           ]
         }
       ),
@@ -22985,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,
               {
@@ -23016,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,12 +22456,15 @@ function useCommandPalette({
   maxRecentItems = 5,
   multiSearch = false,
   multiSelect = false,
-  onSelectMultiple
+  onSelectMultiple,
+  onMultiSearchSubmit
 }) {
   const [query, setQuery] = React32.useState("");
   const [activeIndex, setActiveIndex] = React32.useState(0);
   const [page, setPage] = React32.useState(0);
-  const [selectedItemIds, setSelectedItemIds] = React32.useState(/* @__PURE__ */ new Set());
+  const [selectedItemIds, setSelectedItemIds] = React32.useState(
+    /* @__PURE__ */ new Set()
+  );
   const stateRef = useRef({
     activeIndex,
     page,
@@ -22462,27 +22481,44 @@ function useCommandPalette({
     });
   }, []);
   const clearSelection = useCallback(() => setSelectedItemIds(/* @__PURE__ */ new Set()), []);
-  const baseGroups = useMemo(() => normaliseGroups(items, groups), [items, groups]);
+  const baseGroups = useMemo(
+    () => normaliseGroups(items, groups),
+    [items, groups]
+  );
   useEffect(() => {
     if (open) {
-      setQuery("");
+      const savedQuery = localStorage.getItem("commandPaletteQuery") || "";
+      setQuery(savedQuery);
       setActiveIndex(0);
       setPage(0);
-      clearSelection();
+      if (!multiSelect) {
+        clearSelection();
+      }
     }
-  }, [open, clearSelection]);
+  }, [open, clearSelection, multiSelect]);
+  useEffect(() => {
+    if (!open) {
+      localStorage.setItem("commandPaletteQuery", query);
+    }
+  }, [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()) {
-      return recentItems.length > 0 ? [{ id: "__recent__", label: "Recent", icon: React32.createElement(ClockCounterClockwiseIcon), items: recentItems, priority: 999 }, ...baseGroups] : baseGroups;
-    }
-    return searchTerms.length > 1 || multiSearch && searchTerms.length > 0 ? unionGroups(baseGroups, searchTerms) : filterAndScore(baseGroups, query);
-  }, [query, baseGroups, recentItems, multiSearch, searchTerms]);
-  const allFlatItems = useMemo(() => allMatchedGroups.flatMap((g) => g.items), [allMatchedGroups]);
+    if (!query.trim()) return baseGroups;
+    if (searchTerms.length > 0) {
+      return unionGroups(baseGroups, searchTerms);
+    }
+    return filterAndScore(baseGroups, query);
+  }, [query, baseGroups, searchTerms]);
+  const allFlatItems = useMemo(
+    () => allMatchedGroups.flatMap((g) => g.items),
+    [allMatchedGroups]
+  );
   const totalItems = allFlatItems.length;
   const totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
   useEffect(() => {
@@ -22509,8 +22545,14 @@ function useCommandPalette({
     }
     return result;
   }, [allMatchedGroups, page]);
-  const flatItems = useMemo(() => displayedGroups.flatMap((g) => g.items), [displayedGroups]);
-  const selectedItems = useMemo(() => allFlatItems.filter((i) => selectedItemIds.has(i.id)), [allFlatItems, selectedItemIds]);
+  const flatItems = useMemo(
+    () => displayedGroups.flatMap((g) => g.items),
+    [displayedGroups]
+  );
+  const selectedItems = useMemo(
+    () => allFlatItems.filter((i) => selectedItemIds.has(i.id)),
+    [allFlatItems, selectedItemIds]
+  );
   useEffect(() => {
     stateRef.current = { activeIndex, page, flatItems, query, selectedItems };
   }, [activeIndex, page, flatItems, query, selectedItems]);
@@ -22519,47 +22561,92 @@ function useCommandPalette({
     onSelectMultiple(selectedItems);
     onOpenChange?.(false);
   }, [onSelectMultiple, selectedItems, onOpenChange]);
-  const handleSelect = useCallback((item, event) => {
-    if (!item) return;
-    if (multiSelect) {
-      const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
-      if (isCmdKey) {
-        toggleSelection(item.id);
-        return;
+  const handleSelect = useCallback(
+    (item, event) => {
+      if (!item) return;
+      if (multiSelect) {
+        const isCmdKey = event && ("ctrlKey" in event || "metaKey" in event || "shiftKey" in event) && (event.ctrlKey || event.metaKey || event.shiftKey);
+        if (isCmdKey) {
+          toggleSelection(item.id);
+          return;
+        }
+        if (selectedItems.length > 0) {
+          const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
+          onSelectMultiple?.(finalItems);
+          onOpenChange?.(false);
+          return;
+        }
       }
-      if (selectedItems.length > 0) {
-        const finalItems = selectedItemIds.has(item.id) ? selectedItems : [...selectedItems, item];
-        onSelectMultiple?.(finalItems);
-        onOpenChange?.(false);
-        return;
+      item.onSelect();
+      onOpenChange?.(false);
+      if (onRecentItemsChange) {
+        const next = [
+          item,
+          ...recentItems.filter((r) => r.id !== item.id)
+        ].slice(0, maxRecentItems);
+        onRecentItemsChange(next);
       }
-    }
-    item.onSelect();
-    onOpenChange?.(false);
-    if (onRecentItemsChange) {
-      const next = [item, ...recentItems.filter((r) => r.id !== item.id)].slice(0, maxRecentItems);
-      onRecentItemsChange(next);
-    }
-  }, [multiSelect, selectedItems, selectedItemIds, onSelectMultiple, onOpenChange, onRecentItemsChange, recentItems, maxRecentItems, toggleSelection]);
+    },
+    [
+      multiSelect,
+      selectedItems,
+      selectedItemIds,
+      onSelectMultiple,
+      onOpenChange,
+      onRecentItemsChange,
+      recentItems,
+      maxRecentItems,
+      toggleSelection
+    ]
+  );
   useEffect(() => {
     if (!open) return;
     const handler = (e) => {
-      const { activeIndex: curIdx, flatItems: curItems, query: curQuery, selectedItems: curSelected } = stateRef.current;
+      const { activeIndex: curIdx, flatItems: curItems } = stateRef.current;
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        if (curIdx === curItems.length - 1 && page < totalPages - 1) setPage((p) => p + 1);
+        if (curIdx === curItems.length - 1 && page < totalPages - 1)
+          setPage((p) => p + 1);
         else setActiveIndex((i) => (i + 1) % Math.max(curItems.length, 1));
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
         if (curIdx === 0 && page > 0) {
           setPage((p) => p - 1);
           setActiveIndex(PAGE_SIZE - 1);
-        } else setActiveIndex((i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1));
+        } else
+          setActiveIndex(
+            (i) => (i - 1 + Math.max(curItems.length, 1)) % Math.max(curItems.length, 1)
+          );
       } else if (e.key === "Enter") {
         e.preventDefault();
-        if (multiSearch && curQuery.includes(",") && curSelected.length === 0) {
+        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;
@@ -22569,7 +22656,20 @@ function useCommandPalette({
     };
     window.addEventListener("keydown", handler);
     return () => window.removeEventListener("keydown", handler);
-  }, [open, page, totalPages, multiSearch, multiSelect, handleSelect, executeBulkAction]);
+  }, [
+    open,
+    page,
+    totalPages,
+    multiSearch,
+    multiSelect,
+    handleSelect,
+    executeBulkAction,
+    onMultiSearchSubmit,
+    selectedItems,
+    allFlatItems,
+    selectedItemIds,
+    query
+  ]);
   return {
     query,
     setQuery,
@@ -22590,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 = {}) {
@@ -22890,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" })
+              }
+            )
           ]
         }
       ),
@@ -22943,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,
               {
@@ -22974,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.28",
+  "version": "1.10.29",
   "homepage": "https://main--68e80310a069c2f10b546ef3.chromatic.com/",
   "repository": {
     "type": "git",