"use client"; import React, { useState, useEffect, useRef, useCallback, createContext, useContext, useMemo, memo } from "react"; const commandPaletteStyles = ` @keyframes command-palette-overshoot { 0% { opacity: 0; transform: scale(0.94) translateY(-10px); } 85% { opacity: 1; transform: scale(1.002) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes command-palette-close { 0% { opacity: 1; transform: scale(1) translateY(0); } 100% { opacity: 0; transform: scale(0.94) translateY(-8px); } } @keyframes command-palette-backdrop-close { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } `; const CommandPaletteContext = createContext(null); export function useCommandPalette() { const context = useContext(CommandPaletteContext); if (!context) { throw new Error("useCommandPalette must be used within CommandPaletteProvider"); } return context; } export function CommandPaletteProvider({ children }) { const [isOpen, setIsOpen] = useState(false); const [isClosing, setIsClosing] = useState(false); const open = useCallback(() => { setIsClosing(false); setIsOpen(true); }, []); const close = useCallback(() => { setIsClosing(true); setTimeout(() => { setIsOpen(false); setIsClosing(false); }, 150); }, []); const toggle = useCallback(() => { if (isOpen) { close(); } else { open(); } }, [isOpen, open, close]); useEffect(() => { const handleKeyDown = (e) => { if ((e.ctrlKey || e.metaKey) && e.key === "k") { e.preventDefault(); toggle(); } if (e.key === "Escape" && isOpen) { close(); } }; window.addEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown); }, [isOpen, toggle, close]); const value = useMemo(() => ({ isOpen, isClosing, open, close, toggle }), [isOpen, isClosing, open, close, toggle]); return ( {children} ); } export const CommandPalette = memo(function CommandPalette({ groups = [], placeholder = "Type a command or search...", onSelect, emptyMessage = "No results found.", footer, className = "", }) { const { isOpen, isClosing, close } = useCommandPalette(); const [search, setSearch] = useState(""); const [selectedIndex, setSelectedIndex] = useState(0); const [isKeyboardNav, setIsKeyboardNav] = useState(false); const inputRef = useRef(null); const listRef = useRef(null); const pointerPositionRef = useRef({ x: 0, y: 0 }); const filteredGroups = useMemo(() => { const searchLower = search.toLowerCase(); return groups.map((group) => ({ ...group, items: group.items.filter((item) => item.label.toLowerCase().includes(searchLower) || item.keywords?.some((k) => k.toLowerCase().includes(searchLower)) ), })).filter((group) => group.items.length > 0); }, [groups, search]); const allItems = useMemo(() => filteredGroups.flatMap((g) => g.items), [filteredGroups]); useEffect(() => { setSelectedIndex(0); }, [search]); useEffect(() => { if (isOpen && inputRef.current) { requestAnimationFrame(() => inputRef.current?.focus()); } if (!isOpen) { setSearch(""); setSelectedIndex(0); } }, [isOpen]); const handleSelect = useCallback((item) => { onSelect?.(item); item.onSelect?.(); close(); }, [onSelect, close]); const handleKeyDown = useCallback((e) => { if (e.key === "ArrowDown") { e.preventDefault(); setIsKeyboardNav(true); setSelectedIndex((prev) => Math.min(prev + 1, allItems.length - 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setIsKeyboardNav(true); setSelectedIndex((prev) => Math.max(prev - 1, 0)); } else if (e.key === "Enter" && allItems[selectedIndex]) { e.preventDefault(); onSelect?.(allItems[selectedIndex]); allItems[selectedIndex].onSelect?.(); close(); } }, [allItems, selectedIndex, onSelect, close]); useEffect(() => { if (!isOpen) return; const keySequence = []; let keyTimeout; const handleShortcut = (e) => { if (e.target.tagName === 'INPUT') return; const key = e.key.toUpperCase(); if (key.length === 1 && /[A-Z0-9]/.test(key)) { keySequence.push(key); clearTimeout(keyTimeout); keyTimeout = setTimeout(() => keySequence.length = 0, 500); for (const group of groups) { for (const item of group.items) { if (item.shortcut) { const shortcutKeys = item.shortcut.filter(k => !['⌘', 'Ctrl', '⇧', 'Shift', 'Alt', '⌥'].includes(k)); if (shortcutKeys.length === keySequence.length && shortcutKeys.every((k, i) => k.toUpperCase() === keySequence[i])) { e.preventDefault(); handleSelect(item); keySequence.length = 0; return; } } } } } }; window.addEventListener('keydown', handleShortcut); return () => { window.removeEventListener('keydown', handleShortcut); clearTimeout(keyTimeout); }; }, [isOpen, groups, handleSelect]); useEffect(() => { if (!isKeyboardNav) return; const selectedEl = listRef.current?.querySelector(`[data-index="${selectedIndex}"]`); if (selectedEl) { const groupContainer = selectedEl.closest('[data-group]'); const heading = groupContainer?.querySelector('[data-heading]'); const listContainer = listRef.current; if (heading && listContainer) { const headingRect = heading.getBoundingClientRect(); const containerRect = listContainer.getBoundingClientRect(); if (headingRect.top < containerRect.top) { heading.scrollIntoView({ block: "start" }); setIsKeyboardNav(false); return; } } selectedEl.scrollIntoView({ block: "nearest" }); } setIsKeyboardNav(false); }, [selectedIndex, isKeyboardNav]); if (!isOpen && !isClosing) return null; let itemIndex = -1; return ( <>

e.stopPropagation()} >

setSearch(e.target.value)} onKeyDown={handleKeyDown} placeholder={placeholder} className="flex-1 bg-transparent text-sm text-neutral-900 dark:text-neutral-200 placeholder-neutral-400 dark:placeholder-neutral-600 outline-none" />

{filteredGroups.length === 0 ? (

{emptyMessage}

) : ( filteredGroups.map((group, groupIndex) => (

{group.heading && (

{group.heading}

)} {group.items.map((item) => { itemIndex++; const currentIndex = itemIndex; return ( ); })}

)) )}

{footer !== false && (

↑↓ Navigate ↵ Select esc Close

)}

); }); const CommandItem = memo(function CommandItem({ item, index, isSelected, onSelect, onHover, isKeyboardNav, pointerPositionRef, setIsKeyboardNav }) { const handleMouseMove = useCallback((e) => { const { x, y } = pointerPositionRef.current; if (Math.abs(e.clientX - x) > 1 || Math.abs(e.clientY - y) > 1) { pointerPositionRef.current = { x: e.clientX, y: e.clientY }; setIsKeyboardNav(false); onHover(index); } }, [index, onHover, pointerPositionRef, setIsKeyboardNav]); return ( ); }); export function CommandPaletteTrigger({ children, className = "" }) { const { open } = useCommandPalette(); return ( ); } export function CommandPaletteSearchTrigger({ className = "" }) { const { open } = useCommandPalette(); const isMac = typeof navigator !== 'undefined' && navigator.platform?.includes('Mac'); return ( ); }