Command Palette

1/**
2 * Spectrum UI — CommandPalette
3 * 
4 * Dependencies: framer-motion, lucide-react, next-themes, @/lib/utils
5 * 
6 * @example
7 * <CommandPalette isOpen={isOpen} onClose={() => setIsOpen(false)} />
8 */
9 
10"use client"
11 
12import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"
13import { useRouter } from "next/navigation"
14import { useTheme } from "next-themes"
15import { motion, AnimatePresence, useReducedMotion } from "framer-motion"
16import { Search, Home, Code, HelpCircle, Laptop, Sun, Moon, Copy, Github, CornerDownLeft } from "lucide-react"
17import { cn } from "@/lib/utils"
18 
19// ─── Types ───────────────────────────────────────────────────────────────────
20 
21export interface CommandItem {
22  id: string
23  title: string
24  description: string
25  category: "Navigation" | "Theme" | "Repository"
26  shortcut?: string[]
27  icon: React.ReactNode
28  action: () => void
29}
30 
31export interface CommandPaletteProps {
32  isOpen: boolean
33  onClose: () => void
34  className?: string
35}
36 
37// ─── Animation Springs ────────────────────────────────────────────────────────
38 
39const SPRING_FLUID = {
40  type: "spring",
41  stiffness: 300,
42  damping: 30,
43} as const
44 
45const SPRING_ENTRANCE = {
46  type: "spring",
47  stiffness: 260,
48  damping: 20,
49} as const
50 
51// ─── Component ───────────────────────────────────────────────────────────────
52 
53export function CommandPalette({ isOpen, onClose, className }: CommandPaletteProps) {
54  const router = useRouter()
55  const { theme, setTheme } = useTheme()
56  const shouldReduceMotion = useReducedMotion()
57  const [query, setQuery] = useState("")
58  const [activeIndex, setActiveIndex] = useState(0)
59  const [isCopied, setIsCopied] = useState(false)
60  const inputRef = useRef<HTMLInputElement>(null)
61  const itemsContainerRef = useRef<HTMLDivElement>(null)
62 
63  // Auto-focus input when opened
64  useEffect(() => {
65    if (isOpen) {
66      setTimeout(() => {
67        inputRef.current?.focus()
68      }, 50)
69      setQuery("")
70      setActiveIndex(0)
71    }
72  }, [isOpen])
73 
74  // Copy CLI command action
75  const handleCopyCommand = useCallback(() => {
76// … truncated