@backbay/glia 0.2.0-alpha.6 → 0.2.0-alpha.8

package/dist/chunk-W67QAGSH.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/primitives/organisms/CommandPalette/CommandPalette.tsx"],"names":["Fragment"],"mappings":";;;;;;;;AAgCA,IAAM,sBAAA,GAAyB,IAAI,wDAAA,EAA0D;AAAA,EAC3F,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,8BAAA;AAAA,MACT,IAAA,EAAM,8BAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAmDM,SAAS,cAAA,CAAe;AAAA,EAC7B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA,GAAc,oBAAA;AAAA,EACd,SAAA,GAAY,mBAAA;AAAA,EACZ,OAAA,GAAU,KAAA;AAAA,EACV,iBAAA,GAAoB,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,iBAAiB,EAAC;AAAA,EAClB,GAAG;AACL,CAAA,EAAwB;AACtB,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAU,eAAS,EAAE,CAAA;AAC3C,EAAA,MAAM,UAAA,GAAmB,aAAuB,IAAI,CAAA;AACpD,EAAA,MAAM,gBAAgB,oBAAA,EAAqB;AAC3C,EAAA,MAAM,aAAA,GAAgB,CAAC,iBAAA,IAAqB,CAAC,aAAA;AAE7C,EAAA,YAAA,CAAa,YAAY,IAAI,CAAA;AAG7B,EAAA,MAAM,YAAA,GAAqB,cAAQ,MAAM;AACvC,IAAA,MAAM,SAA+C,EAAC;AAEtD,IAAA,KAAA,CAAM,OAAA,CAAQ,CAAC,IAAA,KAAS;AACtB,MAAA,MAAM,KAAA,GAAQ,KAAK,KAAA,IAAS,UAAA;AAC5B,MAAA,IAAI,CAAC,MAAA,CAAO,KAAK,CAAA,EAAG;AAClB,QAAA,MAAA,CAAO,KAAK,IAAI,EAAC;AAAA,MACnB;AACA,MAAA,MAAA,CAAO,KAAK,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AAAA,IACzB,CAAC,CAAA;AAED,IAAA,OAAO,MAAA;AAAA,EACT,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAGV,EAAM,gBAAU,MAAM;AACpB,IAAA,MAAM,aAAA,GAAgB,CAAC,CAAA,KAAqB;AAC1C,MAAA,IAAI,EAAE,GAAA,KAAQ,GAAA,KAAQ,CAAA,CAAE,OAAA,IAAW,EAAE,OAAA,CAAA,EAAU;AAC7C,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,YAAA,CAAa,IAAI,CAAA;AAAA,MACnB;AAEA,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,QAAA,IAAY,IAAA,EAAM;AAC9B,QAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAEA,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAClD,IAAA,OAAO,MAAM,QAAA,CAAS,mBAAA,CAAoB,SAAA,EAAW,aAAa,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,IAAA,EAAM,YAAY,CAAC,CAAA;AAEvB,EAAA,MAAM,YAAA,GAAe,CAAC,IAAA,KAA6B;AACjD,IAAA,IAAA,CAAK,MAAA,EAAO;AACZ,IAAA,YAAA,CAAa,KAAK,CAAA;AAClB,IAAA,QAAA,CAAS,EAAE,CAAA;AAAA,EACb,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACE,QAAA,EAAA,IAAA,oBACC,IAAA,CAAAA,UAAA,EAEE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA,CAAO,GAAA;AAAA,MAAP;AAAA,QACC,WAAW,EAAA,CAAG,sBAAA,CAAuB,EAAE,OAAA,EAAS,CAAC,CAAA;AAAA,QACjD,SAAS,aAAA,GAAgB,EAAE,OAAA,EAAS,CAAA,KAAM,EAAC;AAAA,QAC3C,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,QACtB,MAAM,aAAA,GAAgB,EAAE,OAAA,EAAS,CAAA,KAAM,EAAC;AAAA,QACxC,UAAA,EAAY,EAAE,QAAA,EAAU,aAAA,GAAgB,MAAM,CAAA,EAAE;AAAA,QAChD,OAAA,EAAS,MAAM,YAAA,CAAa,KAAK;AAAA;AAAA,KACnC;AAAA,oBAGA,GAAA;AAAA,MAAC,MAAA,CAAO,GAAA;AAAA,MAAP;AAAA,QACC,GAAA,EAAK,UAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACT,mGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,YAAA,EAAW,MAAA;AAAA,QACX,YAAA,EAAW,iBAAA;AAAA,QACX,OAAA,EAAS,aAAA,GAAgB,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,IAAA,EAAM,CAAA,EAAG,GAAA,EAAI,GAAI,EAAC;AAAA,QAChE,SAAS,EAAE,OAAA,EAAS,GAAG,KAAA,EAAO,CAAA,EAAG,GAAG,CAAA,EAAE;AAAA,QACtC,IAAA,EAAM,aAAA,GAAgB,EAAE,OAAA,EAAS,CAAA,EAAG,OAAO,IAAA,EAAM,CAAA,EAAG,GAAA,EAAI,GAAI,EAAC;AAAA,QAC7D,UAAA,EAAY;AAAA,UACV,QAAA,EAAU,gBAAgB,GAAA,GAAM,CAAA;AAAA,UAChC,IAAA,EAAM,QAAA;AAAA,UACN,MAAA,EAAQ;AAAA,SACV;AAAA,QACA,OAAA,EAAS,CAAC,CAAA,KAAM,CAAA,CAAE,eAAA,EAAgB;AAAA,QACjC,GAAG,KAAA;AAAA,QAEJ,+BAAC,OAAA,EAAA,EAAQ,KAAA,EAAc,aAAA,EAAe,QAAA,EAAU,WAAU,QAAA,EAExD,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,oDAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAO,WAAU,oCAAA,EAAqC,CAAA;AAAA,4BACvD,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,WAAA;AAAA,gBACA,SAAA,EAAU,+FAAA;AAAA,gBACV,SAAA,EAAS;AAAA;AAAA,aACX;AAAA,4BACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4DAAA,EACb,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wCAAA,EAAyC,QAAA,EAAA,QAAA,EAAC,CAAA;AAAA,8BACzD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wCAAA,EAAyC,QAAA,EAAA,GAAA,EAAC;AAAA,aAAA,EAC3D;AAAA,WAAA,EACF,CAAA;AAAA,0BAGA,GAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAU,0BAAA,EACpB,QAAA,EAAA,OAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wCAAA,EACb,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+CAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,gFAAA,EAAiF,CAAA;AAAA,4BAChG,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,SAAA,EAAU,QAAA,EAAA,YAAA,EAAU;AAAA,WAAA,EACtC,CAAA,EACF,CAAA,mBAEA,IAAA,CAAAA,QAAAA,EAAA,EACE,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,iDAAA,EACrB,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,YAGC,cAAA,CAAe,MAAA,GAAS,CAAA,oBACvB,IAAA,CAAAA,UAAA,EACE,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,OAAA,EAAQ,QAAA,EACnB,QAAA,EAAA,cAAA,CAAe,KAAA,CAAM,GAAG,CAAC,CAAA,CAAE,GAAA,CAAI,CAAC,SAAA,KAAc;AAC7C,gBAAA,MAAM,OAAO,KAAA,CAAM,IAAA,CAAK,CAAC,CAAA,KAAM,CAAA,CAAE,OAAO,SAAS,CAAA;AACjD,gBAAA,IAAI,CAAC,MAAM,OAAO,IAAA;AAElB,gBAAA,uBACE,IAAA;AAAA,kBAAC,WAAA;AAAA,kBAAA;AAAA,oBAEC,OAAO,IAAA,CAAK,KAAA;AAAA,oBACZ,QAAA,EAAU,MAAM,YAAA,CAAa,IAAI,CAAA;AAAA,oBACjC,SAAA,EAAU,kEAAA;AAAA,oBAET,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAK,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EAAU,CAAA;AAAA,sCACvC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,QAAA,EACb,QAAA,EAAA;AAAA,wCAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,wBACxC,KAAK,WAAA,oBACJ,GAAA,CAAC,SAAI,SAAA,EAAU,+BAAA,EACZ,eAAK,WAAA,EACR;AAAA,uBAAA,EAEJ,CAAA;AAAA,sCACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+BAAA,EAAgC,QAAA,EAAA,QAAA,EAAM;AAAA;AAAA,mBAAA;AAAA,kBAdhD,IAAA,CAAK;AAAA,iBAeZ;AAAA,cAEJ,CAAC,CAAA,EACH,CAAA;AAAA,kCACC,gBAAA,EAAA,EAAiB;AAAA,aAAA,EACpB,CAAA;AAAA,YAID,OAAO,OAAA,CAAQ,YAAY,CAAA,CAAE,GAAA,CAAI,CAAC,CAAC,SAAA,EAAW,UAAU,CAAA,yBACtD,YAAA,EAAA,EAA6B,OAAA,EAAS,WACpC,QAAA,EAAA,UAAA,CAAW,GAAA,CAAI,CAAC,IAAA,qBACf,IAAA;AAAA,cAAC,WAAA;AAAA,cAAA;AAAA,gBAEC,OAAO,IAAA,CAAK,KAAA;AAAA,gBACZ,UAAU,IAAA,CAAK,QAAA;AAAA,gBACf,QAAA,EAAU,MAAM,YAAA,CAAa,IAAI,CAAA;AAAA,gBACjC,SAAA,EAAU,kEAAA;AAAA,gBAET,QAAA,EAAA;AAAA,kBAAA,IAAA,CAAK,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EAAU,CAAA;AAAA,kCACvC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,QAAA,EACb,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,oBACxC,KAAK,WAAA,oBACJ,GAAA,CAAC,SAAI,SAAA,EAAU,+BAAA,EACZ,eAAK,WAAA,EACR;AAAA,mBAAA,EAEJ,CAAA;AAAA,kBACC,IAAA,CAAK,QAAA,oBACJ,GAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACZ,QAAA,EAAA,IAAA,CAAK,QAAA,CAAS,GAAA,CAAI,CAAC,GAAA,EAAK,KAAA,qBACvB,IAAA,CAAO,gBAAN,EACC,QAAA,EAAA;AAAA,oCAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wCAAA,EACZ,QAAA,EAAA,GAAA,EACH,CAAA;AAAA,oBACC,KAAA,GAAQ,KAAK,QAAA,CAAU,MAAA,GAAS,qBAC/B,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,GAAA,EAAC;AAAA,mBAAA,EAAA,EALxB,KAOrB,CACD,CAAA,EACH;AAAA;AAAA,eAAA;AAAA,cA3BG,IAAA,CAAK;AAAA,aA8Bb,CAAA,EAAA,EAjCgB,SAkCnB,CACD;AAAA,WAAA,EACH,CAAA,EAEJ,CAAA;AAAA,UAGC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCAAoC,QAAA,EAAA,MAAA,EAAO;AAAA,SAAA,EACvE;AAAA;AAAA;AACF,GAAA,EACF,CAAA,EAEJ,CAAA;AAEJ","file":"chunk-W67QAGSH.js","sourcesContent":["\"use client\";\n\nimport { cn, prefersReducedMotion } from \"../../../lib/utils\";\nimport { useFocusTrap } from \"../../../lib/useFocusTrap\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"cmdk\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport {\n  BarChart3,\n  BookOpen,\n  Calendar,\n  Home,\n  MessageSquare,\n  Pause,\n  Play,\n  Search,\n  Settings,\n  SkipForward,\n  Target,\n  Trophy,\n  Zap,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nconst commandPaletteVariants = cva(\"fixed inset-0 z-50 flex items-start justify-center p-4\", {\n  variants: {\n    variant: {\n      default: \"bg-black/50 backdrop-blur-sm\",\n      dark: \"bg-black/80 backdrop-blur-md\",\n      light: \"bg-[rgba(2,4,10,0.85)] backdrop-blur-sm\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\nexport interface CommandPaletteItem {\n  id: string;\n  title: string;\n  description?: string;\n  icon?: React.ReactNode;\n  shortcut?: string[];\n  group?: string;\n  action: () => void;\n  keywords?: string[];\n}\n\nexport interface CommandPaletteProps\n  extends\n    Omit<\n      React.HTMLAttributes<HTMLDivElement>,\n      | \"children\"\n      | \"onDrag\"\n      | \"onDragEnd\"\n      | \"onDragEnter\"\n      | \"onDragExit\"\n      | \"onDragLeave\"\n      | \"onDragOver\"\n      | \"onDragStart\"\n      | \"onDrop\"\n      | \"onAnimationStart\"\n      | \"onAnimationEnd\"\n      | \"onAnimationIteration\"\n    >,\n    VariantProps<typeof commandPaletteVariants> {\n  /** Whether the palette is open */\n  open: boolean;\n  /** Callback when open state changes */\n  onOpenChange: (open: boolean) => void;\n  /** Command items */\n  items: CommandPaletteItem[];\n  /** Placeholder text */\n  placeholder?: string;\n  /** Empty state text */\n  emptyText?: string;\n  /** Loading state */\n  loading?: boolean;\n  /** Disable animations */\n  disableAnimations?: boolean;\n  /** Custom footer */\n  footer?: React.ReactNode;\n  /** Recent commands */\n  recentCommands?: string[];\n}\n\nexport function CommandPalette({\n  className,\n  variant,\n  open,\n  onOpenChange,\n  items,\n  placeholder = \"Search commands...\",\n  emptyText = \"No results found.\",\n  loading = false,\n  disableAnimations = false,\n  footer,\n  recentCommands = [],\n  ...props\n}: CommandPaletteProps) {\n  const [value, setValue] = React.useState(\"\");\n  const paletteRef = React.useRef<HTMLDivElement>(null);\n  const reducedMotion = prefersReducedMotion();\n  const shouldAnimate = !disableAnimations && !reducedMotion;\n\n  useFocusTrap(paletteRef, open);\n\n  // Group items by category\n  const groupedItems = React.useMemo(() => {\n    const groups: Record<string, CommandPaletteItem[]> = {};\n\n    items.forEach((item) => {\n      const group = item.group || \"Commands\";\n      if (!groups[group]) {\n        groups[group] = [];\n      }\n      groups[group].push(item);\n    });\n\n    return groups;\n  }, [items]);\n\n  // Handle keyboard shortcuts\n  React.useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault();\n        onOpenChange(true);\n      }\n\n      if (e.key === \"Escape\" && open) {\n        onOpenChange(false);\n      }\n    };\n\n    document.addEventListener(\"keydown\", handleKeyDown);\n    return () => document.removeEventListener(\"keydown\", handleKeyDown);\n  }, [open, onOpenChange]);\n\n  const handleSelect = (item: CommandPaletteItem) => {\n    item.action();\n    onOpenChange(false);\n    setValue(\"\");\n  };\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <>\n          {/* Backdrop */}\n          <motion.div\n            className={cn(commandPaletteVariants({ variant }))}\n            initial={shouldAnimate ? { opacity: 0 } : {}}\n            animate={{ opacity: 1 }}\n            exit={shouldAnimate ? { opacity: 0 } : {}}\n            transition={{ duration: shouldAnimate ? 0.2 : 0 }}\n            onClick={() => onOpenChange(false)}\n          />\n\n          {/* Palette */}\n          <motion.div\n            ref={paletteRef}\n            className={cn(\n              \"relative w-full max-w-2xl mx-4 bg-card border border-border rounded-lg shadow-2xl overflow-hidden\",\n              className\n            )}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-label=\"Command palette\"\n            initial={shouldAnimate ? { opacity: 0, scale: 0.95, y: -20 } : {}}\n            animate={{ opacity: 1, scale: 1, y: 0 }}\n            exit={shouldAnimate ? { opacity: 0, scale: 0.95, y: -20 } : {}}\n            transition={{\n              duration: shouldAnimate ? 0.2 : 0,\n              type: \"spring\",\n              bounce: 0.2,\n            }}\n            onClick={(e) => e.stopPropagation()}\n            {...props}\n          >\n            <Command value={value} onValueChange={setValue} className=\"w-full\">\n              {/* Header */}\n              <div className=\"flex items-center border-b border-border px-4 py-3\">\n                <Search className=\"h-4 w-4 text-muted-foreground mr-3\" />\n                <CommandInput\n                  placeholder={placeholder}\n                  className=\"flex-1 bg-transparent border-0 outline-none text-foreground placeholder:text-muted-foreground\"\n                  autoFocus\n                />\n                <div className=\"flex items-center gap-1 text-xs text-muted-foreground ml-3\">\n                  <kbd className=\"px-1.5 py-0.5 bg-muted rounded text-xs\">⌘</kbd>\n                  <kbd className=\"px-1.5 py-0.5 bg-muted rounded text-xs\">K</kbd>\n                </div>\n              </div>\n\n              {/* Content */}\n              <CommandList className=\"max-h-96 overflow-y-auto\">\n                {loading ? (\n                  <div className=\"flex items-center justify-center py-12\">\n                    <div className=\"flex items-center gap-3 text-muted-foreground\">\n                      <div className=\"w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin\" />\n                      <span className=\"text-sm\">Loading...</span>\n                    </div>\n                  </div>\n                ) : (\n                  <>\n                    <CommandEmpty className=\"py-12 text-center text-sm text-muted-foreground\">\n                      {emptyText}\n                    </CommandEmpty>\n\n                    {/* Recent commands */}\n                    {recentCommands.length > 0 && (\n                      <>\n                        <CommandGroup heading=\"Recent\">\n                          {recentCommands.slice(0, 3).map((commandId) => {\n                            const item = items.find((i) => i.id === commandId);\n                            if (!item) return null;\n\n                            return (\n                              <CommandItem\n                                key={item.id}\n                                value={item.title}\n                                onSelect={() => handleSelect(item)}\n                                className=\"flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent\"\n                              >\n                                {item.icon || <div className=\"w-4 h-4\" />}\n                                <div className=\"flex-1\">\n                                  <div className=\"font-medium\">{item.title}</div>\n                                  {item.description && (\n                                    <div className=\"text-sm text-muted-foreground\">\n                                      {item.description}\n                                    </div>\n                                  )}\n                                </div>\n                                <div className=\"text-xs text-muted-foreground\">Recent</div>\n                              </CommandItem>\n                            );\n                          })}\n                        </CommandGroup>\n                        <CommandSeparator />\n                      </>\n                    )}\n\n                    {/* Grouped commands */}\n                    {Object.entries(groupedItems).map(([groupName, groupItems]) => (\n                      <CommandGroup key={groupName} heading={groupName}>\n                        {groupItems.map((item) => (\n                          <CommandItem\n                            key={item.id}\n                            value={item.title}\n                            keywords={item.keywords}\n                            onSelect={() => handleSelect(item)}\n                            className=\"flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-accent\"\n                          >\n                            {item.icon || <div className=\"w-4 h-4\" />}\n                            <div className=\"flex-1\">\n                              <div className=\"font-medium\">{item.title}</div>\n                              {item.description && (\n                                <div className=\"text-sm text-muted-foreground\">\n                                  {item.description}\n                                </div>\n                              )}\n                            </div>\n                            {item.shortcut && (\n                              <div className=\"flex items-center gap-0.5\">\n                                {item.shortcut.map((key, index) => (\n                                  <React.Fragment key={index}>\n                                    <kbd className=\"px-1.5 py-0.5 bg-muted rounded text-xs\">\n                                      {key}\n                                    </kbd>\n                                    {index < item.shortcut!.length - 1 && (\n                                      <span className=\"text-muted-foreground\">+</span>\n                                    )}\n                                  </React.Fragment>\n                                ))}\n                              </div>\n                            )}\n                          </CommandItem>\n                        ))}\n                      </CommandGroup>\n                    ))}\n                  </>\n                )}\n              </CommandList>\n\n              {/* Footer */}\n              {footer && <div className=\"border-t border-border px-4 py-3\">{footer}</div>}\n            </Command>\n          </motion.div>\n        </>\n      )}\n    </AnimatePresence>\n  );\n}\n\n// Pre-configured command items for common use cases\nexport const defaultCommands: CommandPaletteItem[] = [\n  {\n    id: \"dashboard\",\n    title: \"Go to Dashboard\",\n    description: \"View your study overview and progress\",\n    icon: <Home className=\"h-4 w-4\" />,\n    shortcut: [\"⌘\", \"D\"],\n    group: \"Navigation\",\n    keywords: [\"home\", \"overview\", \"progress\"],\n    action: () => console.log(\"Navigate to dashboard\"),\n  },\n  {\n    id: \"practice\",\n    title: \"Start Practice\",\n    description: \"Begin a new practice session\",\n    icon: <Target className=\"h-4 w-4\" />,\n    shortcut: [\"⌘\", \"P\"],\n    group: \"Actions\",\n    keywords: [\"practice\", \"questions\", \"study\"],\n    action: () => console.log(\"Start practice session\"),\n  },\n  {\n    id: \"tutor\",\n    title: \"Open AI Tutor\",\n    description: \"Get help from the AI study assistant\",\n    icon: <MessageSquare className=\"h-4 w-4\" />,\n    shortcut: [\"⌘\", \"T\"],\n    group: \"Actions\",\n    keywords: [\"tutor\", \"ai\", \"help\", \"assistant\"],\n    action: () => console.log(\"Open AI tutor\"),\n  },\n  {\n    id: \"analytics\",\n    title: \"View Analytics\",\n    description: \"Check your performance and statistics\",\n    icon: <BarChart3 className=\"h-4 w-4\" />,\n    shortcut: [\"⌘\", \"A\"],\n    group: \"Navigation\",\n    keywords: [\"analytics\", \"stats\", \"performance\"],\n    action: () => console.log(\"Navigate to analytics\"),\n  },\n  {\n    id: \"calendar\",\n    title: \"Study Calendar\",\n    description: \"View and manage your study schedule\",\n    icon: <Calendar className=\"h-4 w-4\" />,\n    shortcut: [\"⌘\", \"C\"],\n    group: \"Navigation\",\n    keywords: [\"calendar\", \"schedule\", \"planning\"],\n    action: () => console.log(\"Navigate to calendar\"),\n  },\n  {\n    id: \"achievements\",\n    title: \"Achievements\",\n    description: \"View your badges and accomplishments\",\n    icon: <Trophy className=\"h-4 w-4\" />,\n    shortcut: [\"⌘\", \"B\"],\n    group: \"Navigation\",\n    keywords: [\"achievements\", \"badges\", \"awards\"],\n    action: () => console.log(\"Navigate to achievements\"),\n  },\n  {\n    id: \"settings\",\n    title: \"Settings\",\n    description: \"Configure your study preferences\",\n    icon: <Settings className=\"h-4 w-4\" />,\n    shortcut: [\"⌘\", \",\", \"comma\"],\n    group: \"Navigation\",\n    keywords: [\"settings\", \"preferences\", \"config\"],\n    action: () => console.log(\"Navigate to settings\"),\n  },\n  {\n    id: \"play\",\n    title: \"Play Audio\",\n    description: \"Start playing audio content\",\n    icon: <Play className=\"h-4 w-4\" />,\n    group: \"Media\",\n    keywords: [\"play\", \"audio\", \"start\"],\n    action: () => console.log(\"Play audio\"),\n  },\n  {\n    id: \"pause\",\n    title: \"Pause Audio\",\n    description: \"Pause current audio playback\",\n    icon: <Pause className=\"h-4 w-4\" />,\n    group: \"Media\",\n    keywords: [\"pause\", \"audio\", \"stop\"],\n    action: () => console.log(\"Pause audio\"),\n  },\n  {\n    id: \"next\",\n    title: \"Next Item\",\n    description: \"Skip to the next item\",\n    icon: <SkipForward className=\"h-4 w-4\" />,\n    group: \"Navigation\",\n    keywords: [\"next\", \"skip\", \"forward\"],\n    action: () => console.log(\"Next item\"),\n  },\n  {\n    id: \"quick-study\",\n    title: \"Quick Study Session\",\n    description: \"Start a 15-minute focused study session\",\n    icon: <Zap className=\"h-4 w-4\" />,\n    group: \"Actions\",\n    keywords: [\"quick\", \"study\", \"session\", \"focus\"],\n    action: () => console.log(\"Start quick study session\"),\n  },\n  {\n    id: \"meditative-mode\",\n    title: \"Meditative Mode\",\n    description: \"Switch to calming study environment\",\n    icon: <BookOpen className=\"h-4 w-4\" />,\n    shortcut: [\"⌘\", \"M\"],\n    group: \"Actions\",\n    keywords: [\"meditative\", \"calm\", \"focus\", \"zen\"],\n    action: () => console.log(\"Enable meditative mode\"),\n  },\n];\n"]}