{
  "slug": "profile-menu",
  "name": "Profile Menu",
  "description": "Tactile profile pill command menu with cycling status ticker, keyboard navigation, theme switcher, and smooth gliding highlight.",
  "summary": "An ultra-smooth profile pill component that morphs into a comprehensive command palette on hover, tap, or ⌘K. Features a live presence indicator, cycling status ticker, arrow-key navigation, customizable sections, flying highlight indicator, and integrated theme switcher.",
  "category": "menus",
  "tags": [
    "profile",
    "menu",
    "command",
    "pill",
    "avatar",
    "status",
    "theme",
    "keyboard",
    "navigation"
  ],
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "version": "1.0.0",
  "createdDate": "2026-09-28",
  "updatedDate": "2026-09-28",
  "interactive": true,
  "supportsColor": false,
  "highlights": [
    "Tactile profile pill morphs seamlessly into a command menu on hover, tap, or ⌘K",
    "Dynamic cycling status ticker with fluid blur-slide vertical transitions",
    "GPU-accelerated flying highlight that travels between list items and theme grid",
    "Zero-shift CSS grid row expansion for butter-smooth opening and closing",
    "Keyboard navigation with arrow keys, J/K, Enter, Escape, and Cmd+K (macOS) or Ctrl+K",
    "Integrated 3-column theme switcher with active indicator rings"
  ],
  "anatomy": [
    "<div> (Pill container with backdrop-blur, rounded geometry, and CSS transitions)",
    "<img> (Profile avatar with online presence pulse indicator)",
    "<div> (Rotating status ticker with keyframe blur-slide transition)",
    "<kbd> (Platform-aware shortcut badge for ⌘K or Ctrl+K)",
    "<div> (Smooth sliding highlight backdrop with cubic-bezier geometry tracking)",
    "<button> (Section items with icons, display-only shortcut labels, and external link badges)"
  ],
  "physics": {
    "engine": "Fluid Cubic-Bezier & Coordinate Highlight Interpolator",
    "description": "Continuous coordinate transforms governing menu expansion and item highlight gliding without layout shift.",
    "parameters": [
      {
        "label": "Transition Timing",
        "value": "300ms cubic-bezier(0.16, 1, 0.3, 1)"
      },
      {
        "label": "Highlight Travel",
        "value": "250ms cubic-bezier(0.16, 1, 0.3, 1)"
      }
    ]
  },
  "accessibility": {
    "role": "menu",
    "aria": "The profile pill has aria-haspopup=\"menu\" and aria-expanded. The list is a role=\"menu\" labelled by the pill, sections are labelled role=\"group\" elements, and items are menuitem or menuitemradio (with aria-checked) entries.",
    "keyboard": [
      {
        "key": "Cmd+K (macOS) / Ctrl+K",
        "description": "Toggle the menu. The letter is set by shortcutKey."
      },
      {
        "key": "Enter / Space",
        "description": "Toggle the menu when the profile pill is focused."
      },
      {
        "key": "Arrow keys / J / K",
        "description": "Move between items."
      },
      {
        "key": "Enter",
        "description": "Activate the highlighted item."
      },
      {
        "key": "Escape",
        "description": "Close the menu."
      }
    ]
  },
  "props": [
    {
      "name": "title",
      "type": "ReactNode",
      "defaultValue": "\"Yatharth K.\"",
      "description": "User name or primary label displayed inside the pill."
    },
    {
      "name": "subtitle",
      "type": "ReactNode",
      "description": "Declared on ProfileMenuProps but not rendered by the current implementation."
    },
    {
      "name": "avatarSrc",
      "type": "string",
      "defaultValue": "\"https://i.pinimg.com/736x/c9/3d/c8/c93dc8fdae8629e56c85e7b2a10ffd7b.jpg\"",
      "description": "Image URL for the avatar."
    },
    {
      "name": "avatar",
      "type": "ReactNode",
      "description": "Custom avatar element. Replaces the image from avatarSrc."
    },
    {
      "name": "status",
      "type": "(string | { text: string; icon?: ReactNode })[]",
      "defaultValue": "built-in status list",
      "description": "Status messages that rotate under the title while the menu is open."
    },
    {
      "name": "statusInterval",
      "type": "number",
      "defaultValue": "3600",
      "description": "Interval in milliseconds between status messages."
    },
    {
      "name": "sections",
      "type": "ProfileMenuSection[]",
      "defaultValue": "built-in sections",
      "description": "Custom action sections and item definitions."
    },
    {
      "name": "theme",
      "type": "\"light\" | \"dark\" | \"system\"",
      "defaultValue": "undefined",
      "description": "Currently active theme value."
    },
    {
      "name": "onThemeChange",
      "type": "(theme: \"light\" | \"dark\" | \"system\") => void",
      "defaultValue": "undefined",
      "description": "Callback when a theme option is selected."
    },
    {
      "name": "shortcutKey",
      "type": "string",
      "defaultValue": "\"k\"",
      "description": "Keyboard key combined with ⌘ / Ctrl to toggle menu."
    },
    {
      "name": "online",
      "type": "boolean",
      "defaultValue": "true",
      "description": "Whether to display the emerald pulsing presence badge."
    },
    {
      "name": "id",
      "type": "string",
      "defaultValue": "\"profile-command-menu\"",
      "description": "id of the root element, also used for outside-click detection. Must be unique per instance."
    },
    {
      "name": "className",
      "type": "string",
      "defaultValue": "undefined",
      "description": "Additional CSS class names."
    }
  ],
  "usage": "import { ProfileMenu } from \"@/components/ui/profile-menu\";\n\nexport function ProfileMenuDemo() {\n  return <ProfileMenu title=\"Ada Lovelace\" avatarSrc=\"/avatars/ada.jpg\" />;\n}",
  "files": [
    {
      "name": "profile-menu.tsx",
      "path": "registry/ui/profile-menu.tsx",
      "code": "\"use client\";\n\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ThemeValue = \"light\" | \"dark\" | \"system\";\n\nexport type ProfileMenuStatusItem = {\n  text: string;\n  icon?: ReactNode;\n};\n\nexport type StatusInput = string | ProfileMenuStatusItem;\n\nexport type ProfileMenuItem = {\n  name: string;\n  icon?: ReactNode;\n  shortcut?: string;\n  badge?: ReactNode;\n  active?: boolean;\n  centered?: boolean;\n  danger?: boolean;\n  closeOnSelect?: boolean;\n  onSelect?: () => void;\n};\n\nexport type ProfileMenuSection = {\n  label?: string;\n  grid?: boolean;\n  items: ProfileMenuItem[];\n};\n\nexport interface ProfileMenuProps {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  avatarSrc?: string;\n  avatar?: ReactNode;\n  status?: StatusInput[];\n  statusInterval?: number;\n  sections?: ProfileMenuSection[];\n  theme?: ThemeValue;\n  onThemeChange?: (theme: ThemeValue) => void;\n  shortcutKey?: string;\n  online?: boolean;\n  id?: string;\n  className?: string;\n}\n\nconst DEFAULT_AVATAR =\n  \"https://i.pinimg.com/736x/c9/3d/c8/c93dc8fdae8629e56c85e7b2a10ffd7b.jpg\";\n\nconst DEFAULT_STATUS_ITEMS: ProfileMenuStatusItem[] = [\n  {\n    text: \"Designing interactive systems\",\n    icon: <SparklesIcon />,\n  },\n  {\n    text: \"Available for select projects\",\n    icon: <ZapIcon />,\n  },\n  {\n    text: \"San Francisco, CA · 10:42 AM\",\n    icon: <MapPinIcon />,\n  },\n  {\n    text: \"Design Engineer @ DevClub\",\n    icon: <TerminalIcon />,\n  },\n];\n\nconst STYLES = `\n@keyframes pm-slide-in {\n  0% {\n    opacity: 0;\n    transform: translateY(5px);\n    filter: blur(2px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n.pm-status {\n  animation: pm-slide-in 0.3s ease-out backwards;\n}\n@media (prefers-reduced-motion: reduce) {\n  .pm-status {\n    animation: none;\n  }\n}\n`;\n\nconst subscribePlatform = () => () => { };\nconst getPlatformSnapshot = () =>\n  typeof navigator !== \"undefined\" &&\n  /Mac|iPhone|iPad|iPod/.test(navigator.platform);\nconst getServerSnapshot = () => false;\n\nexport function ProfileMenu({\n  title = \"Yatharth K.\",\n  avatarSrc = DEFAULT_AVATAR,\n  avatar,\n  status,\n  statusInterval = 3600,\n  sections,\n  theme,\n  onThemeChange,\n  shortcutKey = \"k\",\n  online = true,\n  id = \"profile-command-menu\",\n  className,\n}: ProfileMenuProps) {\n  const isApple = useSyncExternalStore(\n    subscribePlatform,\n    getPlatformSnapshot,\n    getServerSnapshot,\n  );\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isPinned, setIsPinned] = useState(false);\n  const [selected, setSelected] = useState(0);\n  const [statusIndex, setStatusIndex] = useState(0);\n  const [copied, setCopied] = useState(false);\n\n  const [internalTheme, setInternalTheme] = useState<ThemeValue>(() => {\n    if (typeof window === \"undefined\") return \"dark\";\n    const stored = localStorage.getItem(\"theme\");\n    if (stored === \"light\" || stored === \"dark\" || stored === \"system\") {\n      return stored;\n    }\n    return document.documentElement.classList.contains(\"dark\")\n      ? \"dark\"\n      : \"light\";\n  });\n\n  const activeTheme = theme ?? internalTheme;\n\n  const panelRef = useRef<HTMLDivElement>(null);\n  const highlightRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const pendingFocusRef = useRef<number | null>(null);\n\n  const rawStatuses = status ?? DEFAULT_STATUS_ITEMS;\n  const statusItems: ProfileMenuStatusItem[] = rawStatuses.map((s) =>\n    typeof s === \"string\" ? { text: s } : s,\n  );\n\n  const handleCopyEmail = useCallback(() => {\n    if (typeof navigator !== \"undefined\" && navigator.clipboard) {\n      navigator.clipboard.writeText(\"hello@devclub.co\");\n    }\n    setCopied(true);\n    setTimeout(() => {\n      setCopied(false);\n    }, 2000);\n  }, []);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const syncTheme = () => {\n      const stored = localStorage.getItem(\"theme\");\n      if (stored === \"light\" || stored === \"dark\" || stored === \"system\") {\n        setInternalTheme(stored);\n      } else {\n        setInternalTheme(\n          document.documentElement.classList.contains(\"dark\")\n            ? \"dark\"\n            : \"light\",\n        );\n      }\n    };\n\n    const observer = new MutationObserver(() => {\n      if (!localStorage.getItem(\"theme\")) {\n        syncTheme();\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    });\n\n    window.addEventListener(\"storage\", syncTheme);\n    window.addEventListener(\"theme-change\", syncTheme);\n\n    return () => {\n      observer.disconnect();\n      window.removeEventListener(\"storage\", syncTheme);\n      window.removeEventListener(\"theme-change\", syncTheme);\n    };\n  }, []);\n\n  const handleThemeSelect = useCallback(\n    (nextTheme: ThemeValue) => {\n      setInternalTheme(nextTheme);\n      onThemeChange?.(nextTheme);\n      if (typeof document !== \"undefined\") {\n        if (nextTheme === \"dark\") {\n          document.documentElement.classList.add(\"dark\");\n          document.documentElement.style.colorScheme = \"dark\";\n          try {\n            localStorage.setItem(\"theme\", \"dark\");\n          } catch { }\n        } else if (nextTheme === \"light\") {\n          document.documentElement.classList.remove(\"dark\");\n          document.documentElement.style.colorScheme = \"light\";\n          try {\n            localStorage.setItem(\"theme\", \"light\");\n          } catch { }\n        } else {\n          const isDark = window.matchMedia(\n            \"(prefers-color-scheme: dark)\",\n          ).matches;\n          document.documentElement.classList.toggle(\"dark\", isDark);\n          document.documentElement.style.colorScheme = isDark\n            ? \"dark\"\n            : \"light\";\n          try {\n            localStorage.setItem(\"theme\", \"system\");\n          } catch { }\n        }\n        window.dispatchEvent(\n          new StorageEvent(\"storage\", {\n            key: \"theme\",\n            newValue: nextTheme,\n          }),\n        );\n        window.dispatchEvent(\n          new CustomEvent(\"theme-change\", {\n            detail: { theme: nextTheme },\n          }),\n        );\n      }\n    },\n    [onThemeChange],\n  );\n\n  const defaultSections: ProfileMenuSection[] = [\n    {\n      label: \"Navigation\",\n      items: [\n        {\n          name: \"View Profile\",\n          icon: <UserIcon />,\n          shortcut: \"⌘P\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: \"Projects & Works\",\n          icon: <FolderIcon />,\n          shortcut: \"⌘J\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: copied ? \"Email Copied!\" : \"Copy Email\",\n          icon: copied ? <CheckIcon /> : <CopyIcon />,\n          shortcut: copied ? undefined : \"⌘C\",\n          badge: copied ? (\n            <span className=\"text-[10px] font-sans font-medium text-emerald-600 dark:text-emerald-400 px-1.5 py-0.5 rounded-md bg-emerald-500/10\">\n              Copied!\n            </span>\n          ) : undefined,\n          closeOnSelect: false,\n          onSelect: handleCopyEmail,\n        },\n        {\n          name: \"Book a Call\",\n          icon: <CalendarIcon />,\n          shortcut: \"⌘B\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://cal.com\", \"_blank\");\n          },\n        },\n      ],\n    },\n    {\n      label: \"Social\",\n      items: [\n        {\n          name: \"GitHub\",\n          icon: <GithubIcon />,\n          badge: <ExternalLinkIcon />,\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: \"Twitter / X\",\n          icon: <TwitterIcon />,\n          badge: <ExternalLinkIcon />,\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://x.com\", \"_blank\");\n          },\n        },\n      ],\n    },\n  ];\n\n  const resolvedSections: ProfileMenuSection[] = [\n    ...(sections || defaultSections),\n  ];\n\n  resolvedSections.push({\n    label: \"Appearance\",\n    grid: true,\n    items: [\n      {\n        name: \"Light\",\n        icon: <SunIcon />,\n        centered: true,\n        active: activeTheme === \"light\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"light\"),\n      },\n      {\n        name: \"Dark\",\n        icon: <MoonIcon />,\n        centered: true,\n        active: activeTheme === \"dark\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"dark\"),\n      },\n      {\n        name: \"System\",\n        icon: <SystemIcon />,\n        centered: true,\n        active: activeTheme === \"system\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"system\"),\n      },\n    ],\n  });\n\n  const items = resolvedSections.flatMap((s) => s.items);\n  const itemCount = items.length;\n  const triggerId = `${id}-trigger`;\n  const menuId = `${id}-menu`;\n\n  useLayoutEffect(() => {\n    const hl = highlightRef.current;\n    if (!hl) return;\n    if (!isOpen || selected < 0) {\n      hl.style.opacity = \"0\";\n      return;\n    }\n    const element = itemRefs.current[selected];\n    if (!element) return;\n    hl.style.transform = `translate3d(${element.offsetLeft}px, ${element.offsetTop}px, 0)`;\n    hl.style.width = `${element.offsetWidth}px`;\n    hl.style.height = `${element.offsetHeight}px`;\n    hl.style.opacity = \"1\";\n  }, [isOpen, selected]);\n\n  useLayoutEffect(() => {\n    if (!isOpen || pendingFocusRef.current === null) return;\n    itemRefs.current[pendingFocusRef.current]?.focus({ preventScroll: true });\n    pendingFocusRef.current = null;\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (isOpen || statusItems.length < 2) return;\n    const interval = setInterval(() => {\n      if (!document.hidden) {\n        setStatusIndex((prev) => (prev + 1) % statusItems.length);\n      }\n    }, statusInterval);\n    return () => clearInterval(interval);\n  }, [isOpen, statusItems.length, statusInterval]);\n\n  const clearHoverTimeout = useCallback(() => {\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  const focusItem = useCallback((index: number) => {\n    setSelected(index);\n    itemRefs.current[index]?.focus({ preventScroll: true });\n  }, []);\n\n  const openMenu = useCallback(\n    (focusIndex: number | null) => {\n      clearHoverTimeout();\n      setSelected(focusIndex ?? 0);\n      setIsPinned(true);\n      if (isOpen) {\n        if (focusIndex !== null) focusItem(focusIndex);\n        return;\n      }\n      pendingFocusRef.current = focusIndex;\n      setIsOpen(true);\n    },\n    [clearHoverTimeout, focusItem, isOpen],\n  );\n\n  const closeMenu = useCallback(() => {\n    clearHoverTimeout();\n    setIsOpen(false);\n    setIsPinned(false);\n    if (rootRef.current?.contains(document.activeElement)) {\n      triggerRef.current?.focus({ preventScroll: true });\n    }\n  }, [clearHoverTimeout]);\n\n  const toggleMenu = useCallback(() => {\n    if (isOpen) closeMenu();\n    else openMenu(0);\n  }, [closeMenu, isOpen, openMenu]);\n\n  const handleTriggerClick = useCallback(() => {\n    if (isOpen && isPinned) closeMenu();\n    else openMenu(null);\n  }, [closeMenu, isOpen, isPinned, openMenu]);\n\n  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        if (isOpen && isPinned) closeMenu();\n        else openMenu(0);\n        break;\n      case \"ArrowDown\":\n        event.preventDefault();\n        openMenu(0);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        openMenu(itemCount - 1);\n        break;\n    }\n  };\n\n  const handleMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (itemCount === 0) return;\n    const current = itemRefs.current.findIndex(\n      (node) => node === document.activeElement,\n    );\n    const from = current < 0 ? selected : current;\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"j\":\n        event.preventDefault();\n        focusItem((from + 1) % itemCount);\n        break;\n      case \"ArrowUp\":\n      case \"k\":\n        event.preventDefault();\n        focusItem((from - 1 + itemCount) % itemCount);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        focusItem(0);\n        break;\n      case \"End\":\n        event.preventDefault();\n        focusItem(itemCount - 1);\n        break;\n      case \"Tab\":\n        clearHoverTimeout();\n        setIsOpen(false);\n        setIsPinned(false);\n        break;\n    }\n  };\n\n  const handlePointerEnter = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (event.pointerType !== \"mouse\") return;\n      clearHoverTimeout();\n      if (!isOpen) {\n        setSelected(0);\n        setIsOpen(true);\n      }\n    },\n    [clearHoverTimeout, isOpen],\n  );\n\n  const handlePointerLeave = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (event.pointerType !== \"mouse\" || isPinned) return;\n      hoverTimeoutRef.current = setTimeout(closeMenu, 200);\n    },\n    [closeMenu, isPinned],\n  );\n\n  useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      const isCmdOrCtrl = isApple ? event.metaKey : event.ctrlKey;\n      if (\n        event.key.toLowerCase() === shortcutKey.toLowerCase() &&\n        isCmdOrCtrl\n      ) {\n        event.preventDefault();\n        toggleMenu();\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isApple, shortcutKey, toggleMenu]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        closeMenu();\n      }\n    }\n\n    function onClickOutside(event: MouseEvent) {\n      if (!(event.target as HTMLElement).closest(`#${id}`)) {\n        closeMenu();\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    window.addEventListener(\"click\", onClickOutside);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n      window.removeEventListener(\"click\", onClickOutside);\n    };\n  }, [closeMenu, isOpen, id]);\n\n  const currentStatus = statusItems[statusIndex];\n\n  return (\n    <div\n      ref={rootRef}\n      id={id}\n      role=\"region\"\n      aria-label=\"Profile command menu\"\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      className={cn(\n        \"relative w-90 max-w-[calc(100vw-2rem)] rounded-2xl select-none\",\n        \"bg-background/95 dark:bg-zinc-950/90 text-foreground backdrop-blur-2xl\",\n        \"border border-border/80 dark:border-white/10\",\n        \"transition-shadow duration-300\",\n        isOpen\n          ? \"shadow-2xl shadow-black/10 dark:shadow-black/50\"\n          : \"shadow-lg shadow-black/5 dark:shadow-black/30\",\n        className,\n      )}\n    >\n      <style>{STYLES}</style>\n\n      <div\n        ref={triggerRef}\n        id={triggerId}\n        role=\"button\"\n        tabIndex={0}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n        aria-controls={menuId}\n        onClick={handleTriggerClick}\n        onKeyDown={handleTriggerKeyDown}\n        className=\"flex items-center gap-3 p-2.5 rounded-2xl cursor-pointer outline-none select-none group focus-visible:ring-2 focus-visible:ring-foreground/30\"\n      >\n        <div className=\"relative shrink-0\">\n          {avatar ? (\n            avatar\n          ) : (\n            <img\n              src={avatarSrc}\n              alt=\"Profile\"\n              className=\"size-9 rounded-full object-cover ring-1 ring-border/70 dark:ring-white/15 shadow-xs\"\n            />\n          )}\n          {online && (\n            <span className=\"absolute bottom-0 right-0 flex size-2.5 items-center justify-center\">\n              <span className=\"absolute inline-flex size-full animate-ping motion-reduce:animate-none rounded-full bg-emerald-400 opacity-75\" />\n              <span className=\"relative inline-flex size-2 rounded-full bg-emerald-500 ring-2 ring-background dark:ring-zinc-950\" />\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex flex-1 min-w-0 flex-col justify-center\">\n          <div className=\"flex items-center justify-between gap-2\">\n            <span className=\"font-sans font-medium text-xs sm:text-sm text-foreground truncate\">\n              {title}\n            </span>\n          </div>\n\n          {currentStatus && (\n            <div className=\"relative h-4 overflow-hidden text-[11px] font-sans text-muted-foreground mt-0.5\">\n              <div\n                key={statusIndex}\n                className=\"pm-status absolute inset-0 flex items-center gap-1.5 truncate text-muted-foreground\"\n              >\n                {currentStatus.icon && (\n                  <span className=\"shrink-0 size-3 text-muted-foreground/80 flex items-center justify-center\">\n                    {currentStatus.icon}\n                  </span>\n                )}\n                <span className=\"truncate\">{currentStatus.text}</span>\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-1.5 shrink-0 pl-1\">\n          <kbd className=\"inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-md border border-border/70 bg-muted/60 text-[10px] font-mono text-muted-foreground\">\n            <span>{isApple ? \"⌘\" : \"Ctrl\"}</span>\n            <span className=\"uppercase\">{shortcutKey}</span>\n          </kbd>\n          <span\n            className={cn(\n              \"text-muted-foreground/60 transition-transform duration-300 motion-reduce:transition-none flex items-center justify-center size-4\",\n              isOpen && \"rotate-180 text-foreground\",\n            )}\n          >\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      <div\n        inert={!isOpen}\n        className={cn(\n          \"grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none\",\n          isOpen\n            ? \"grid-rows-[1fr] opacity-100\"\n            : \"grid-rows-[0fr] opacity-0 pointer-events-none\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div\n            className={cn(\n              \"transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none\",\n              isOpen ? \"translate-y-0\" : \"-translate-y-1.5\",\n            )}\n          >\n            <div className=\"mx-2.5 mb-1.5 h-px bg-border/60 dark:bg-white/10\" />\n\n            <div\n              ref={panelRef}\n              id={menuId}\n              role=\"menu\"\n              aria-labelledby={triggerId}\n              onKeyDown={handleMenuKeyDown}\n              className=\"relative flex flex-col gap-1 p-2 pt-0\"\n            >\n              <div\n                ref={highlightRef}\n                aria-hidden=\"true\"\n                className=\"pointer-events-none absolute top-0 left-0 rounded-xl bg-foreground/6 dark:bg-white/10 z-0 opacity-0 transition-[transform,width,height,opacity] duration-250 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none\"\n              />\n\n              {resolvedSections.map((section, sIdx) => (\n                <div\n                  key={section.label || sIdx}\n                  role=\"group\"\n                  aria-label={section.label}\n                  className=\"space-y-1\"\n                >\n                  {sIdx > 0 && (\n                    <div className=\"my-1.5 mx-1 h-px bg-border/40 dark:bg-white/5\" />\n                  )}\n                  {section.label && (\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"block px-2.5 pt-1 text-[10px] font-sans font-medium uppercase tracking-wider text-muted-foreground/60 select-none\"\n                    >\n                      {section.label}\n                    </span>\n                  )}\n                  <div\n                    className={\n                      section.grid ? \"grid grid-cols-3 gap-1.5\" : \"space-y-0.5\"\n                    }\n                  >\n                    {section.items.map((item) => {\n                      const index = items.indexOf(item);\n                      return (\n                        <button\n                          key={item.name}\n                          ref={(node) => {\n                            itemRefs.current[index] = node;\n                          }}\n                          type=\"button\"\n                          role={\n                            item.active === undefined\n                              ? \"menuitem\"\n                              : \"menuitemradio\"\n                          }\n                          aria-checked={item.active}\n                          tabIndex={-1}\n                          onMouseEnter={() => setSelected(index)}\n                          onFocus={() => setSelected(index)}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            item.onSelect?.();\n                            if (item.closeOnSelect) closeMenu();\n                          }}\n                          className={cn(\n                            \"relative z-10 flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-2.5 py-2 text-xs font-sans transition-colors\",\n                            item.centered\n                              ? \"justify-center\"\n                              : \"justify-between\",\n                            item.active\n                              ? \"text-foreground font-medium ring-1 ring-border/80 dark:ring-white/20 bg-foreground/5 dark:bg-white/5\"\n                              : \"text-muted-foreground hover:text-foreground\",\n                            item.danger &&\n                            \"text-rose-500 dark:text-rose-400 hover:text-rose-600\",\n                          )}\n                        >\n                          <div\n                            className={cn(\n                              \"flex items-center gap-2.5 min-w-0\",\n                              item.centered && \"flex-col gap-1 py-0.5\",\n                            )}\n                          >\n                            {item.icon && (\n                              <span className=\"shrink-0 size-4 flex items-center justify-center text-muted-foreground group-hover:text-foreground\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span className=\"truncate\">{item.name}</span>\n                          </div>\n\n                          {item.shortcut && !item.centered && (\n                            <kbd className=\"font-mono text-[10px] text-muted-foreground/60 px-1 py-0.5 rounded bg-muted/40\">\n                              {item.shortcut}\n                            </kbd>\n                          )}\n\n                          {item.badge && !item.centered && (\n                            <span className=\"shrink-0 flex items-center\">\n                              {item.badge}\n                            </span>\n                          )}\n                        </button>\n                      );\n                    })}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction UserIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <circle cx=\"12\" cy=\"8\" r=\"4\" />\n      <path strokeLinecap=\"round\" d=\"M6 20v-1a6 6 0 0 1 12 0v1\" />\n    </svg>\n  );\n}\n\nfunction FolderIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2Z\"\n      />\n    </svg>\n  );\n}\n\nfunction CopyIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" strokeLinecap=\"round\" />\n      <path\n        strokeLinecap=\"round\"\n        d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\n      />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      className=\"size-4 text-emerald-500 dark:text-emerald-400\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m4.5 12.75 6 6 9-13.5\"\n      />\n    </svg>\n  );\n}\n\nfunction CalendarIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" strokeLinecap=\"round\" />\n      <path strokeLinecap=\"round\" d=\"M16 2v4M8 2v4M3 10h18\" />\n    </svg>\n  );\n}\n\nfunction GithubIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z\"\n      />\n    </svg>\n  );\n}\n\nfunction TwitterIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n    </svg>\n  );\n}\n\nfunction SunIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path\n        strokeLinecap=\"round\"\n        d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\n      />\n    </svg>\n  );\n}\n\nfunction MoonIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z\"\n      />\n    </svg>\n  );\n}\n\nfunction SystemIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" strokeLinecap=\"round\" />\n      <path strokeLinecap=\"round\" d=\"M8 21h8M12 17v4\" />\n    </svg>\n  );\n}\n\nfunction ChevronDownIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className={cn(\"size-3.5\", className)}\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"\n      />\n    </svg>\n  );\n}\n\nfunction SparklesIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z\"\n      />\n    </svg>\n  );\n}\n\nfunction ZapIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n      />\n    </svg>\n  );\n}\n\nfunction MapPinIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n      />\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z\"\n      />\n    </svg>\n  );\n}\n\nfunction TerminalIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m6.75 7.5 4.5 4.5-4.5 4.5m6-1.5h4.5\"\n      />\n    </svg>\n  );\n}\n\nfunction ExternalLinkIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3.5 text-muted-foreground/60\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\"\n      />\n    </svg>\n  );\n}\n",
      "content": "\"use client\";\n\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ThemeValue = \"light\" | \"dark\" | \"system\";\n\nexport type ProfileMenuStatusItem = {\n  text: string;\n  icon?: ReactNode;\n};\n\nexport type StatusInput = string | ProfileMenuStatusItem;\n\nexport type ProfileMenuItem = {\n  name: string;\n  icon?: ReactNode;\n  shortcut?: string;\n  badge?: ReactNode;\n  active?: boolean;\n  centered?: boolean;\n  danger?: boolean;\n  closeOnSelect?: boolean;\n  onSelect?: () => void;\n};\n\nexport type ProfileMenuSection = {\n  label?: string;\n  grid?: boolean;\n  items: ProfileMenuItem[];\n};\n\nexport interface ProfileMenuProps {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  avatarSrc?: string;\n  avatar?: ReactNode;\n  status?: StatusInput[];\n  statusInterval?: number;\n  sections?: ProfileMenuSection[];\n  theme?: ThemeValue;\n  onThemeChange?: (theme: ThemeValue) => void;\n  shortcutKey?: string;\n  online?: boolean;\n  id?: string;\n  className?: string;\n}\n\nconst DEFAULT_AVATAR =\n  \"https://i.pinimg.com/736x/c9/3d/c8/c93dc8fdae8629e56c85e7b2a10ffd7b.jpg\";\n\nconst DEFAULT_STATUS_ITEMS: ProfileMenuStatusItem[] = [\n  {\n    text: \"Designing interactive systems\",\n    icon: <SparklesIcon />,\n  },\n  {\n    text: \"Available for select projects\",\n    icon: <ZapIcon />,\n  },\n  {\n    text: \"San Francisco, CA · 10:42 AM\",\n    icon: <MapPinIcon />,\n  },\n  {\n    text: \"Design Engineer @ DevClub\",\n    icon: <TerminalIcon />,\n  },\n];\n\nconst STYLES = `\n@keyframes pm-slide-in {\n  0% {\n    opacity: 0;\n    transform: translateY(5px);\n    filter: blur(2px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n.pm-status {\n  animation: pm-slide-in 0.3s ease-out backwards;\n}\n@media (prefers-reduced-motion: reduce) {\n  .pm-status {\n    animation: none;\n  }\n}\n`;\n\nconst subscribePlatform = () => () => { };\nconst getPlatformSnapshot = () =>\n  typeof navigator !== \"undefined\" &&\n  /Mac|iPhone|iPad|iPod/.test(navigator.platform);\nconst getServerSnapshot = () => false;\n\nexport function ProfileMenu({\n  title = \"Yatharth K.\",\n  avatarSrc = DEFAULT_AVATAR,\n  avatar,\n  status,\n  statusInterval = 3600,\n  sections,\n  theme,\n  onThemeChange,\n  shortcutKey = \"k\",\n  online = true,\n  id = \"profile-command-menu\",\n  className,\n}: ProfileMenuProps) {\n  const isApple = useSyncExternalStore(\n    subscribePlatform,\n    getPlatformSnapshot,\n    getServerSnapshot,\n  );\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isPinned, setIsPinned] = useState(false);\n  const [selected, setSelected] = useState(0);\n  const [statusIndex, setStatusIndex] = useState(0);\n  const [copied, setCopied] = useState(false);\n\n  const [internalTheme, setInternalTheme] = useState<ThemeValue>(() => {\n    if (typeof window === \"undefined\") return \"dark\";\n    const stored = localStorage.getItem(\"theme\");\n    if (stored === \"light\" || stored === \"dark\" || stored === \"system\") {\n      return stored;\n    }\n    return document.documentElement.classList.contains(\"dark\")\n      ? \"dark\"\n      : \"light\";\n  });\n\n  const activeTheme = theme ?? internalTheme;\n\n  const panelRef = useRef<HTMLDivElement>(null);\n  const highlightRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const hoverTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const triggerRef = useRef<HTMLDivElement>(null);\n  const pendingFocusRef = useRef<number | null>(null);\n\n  const rawStatuses = status ?? DEFAULT_STATUS_ITEMS;\n  const statusItems: ProfileMenuStatusItem[] = rawStatuses.map((s) =>\n    typeof s === \"string\" ? { text: s } : s,\n  );\n\n  const handleCopyEmail = useCallback(() => {\n    if (typeof navigator !== \"undefined\" && navigator.clipboard) {\n      navigator.clipboard.writeText(\"hello@devclub.co\");\n    }\n    setCopied(true);\n    setTimeout(() => {\n      setCopied(false);\n    }, 2000);\n  }, []);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const syncTheme = () => {\n      const stored = localStorage.getItem(\"theme\");\n      if (stored === \"light\" || stored === \"dark\" || stored === \"system\") {\n        setInternalTheme(stored);\n      } else {\n        setInternalTheme(\n          document.documentElement.classList.contains(\"dark\")\n            ? \"dark\"\n            : \"light\",\n        );\n      }\n    };\n\n    const observer = new MutationObserver(() => {\n      if (!localStorage.getItem(\"theme\")) {\n        syncTheme();\n      }\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"class\"],\n    });\n\n    window.addEventListener(\"storage\", syncTheme);\n    window.addEventListener(\"theme-change\", syncTheme);\n\n    return () => {\n      observer.disconnect();\n      window.removeEventListener(\"storage\", syncTheme);\n      window.removeEventListener(\"theme-change\", syncTheme);\n    };\n  }, []);\n\n  const handleThemeSelect = useCallback(\n    (nextTheme: ThemeValue) => {\n      setInternalTheme(nextTheme);\n      onThemeChange?.(nextTheme);\n      if (typeof document !== \"undefined\") {\n        if (nextTheme === \"dark\") {\n          document.documentElement.classList.add(\"dark\");\n          document.documentElement.style.colorScheme = \"dark\";\n          try {\n            localStorage.setItem(\"theme\", \"dark\");\n          } catch { }\n        } else if (nextTheme === \"light\") {\n          document.documentElement.classList.remove(\"dark\");\n          document.documentElement.style.colorScheme = \"light\";\n          try {\n            localStorage.setItem(\"theme\", \"light\");\n          } catch { }\n        } else {\n          const isDark = window.matchMedia(\n            \"(prefers-color-scheme: dark)\",\n          ).matches;\n          document.documentElement.classList.toggle(\"dark\", isDark);\n          document.documentElement.style.colorScheme = isDark\n            ? \"dark\"\n            : \"light\";\n          try {\n            localStorage.setItem(\"theme\", \"system\");\n          } catch { }\n        }\n        window.dispatchEvent(\n          new StorageEvent(\"storage\", {\n            key: \"theme\",\n            newValue: nextTheme,\n          }),\n        );\n        window.dispatchEvent(\n          new CustomEvent(\"theme-change\", {\n            detail: { theme: nextTheme },\n          }),\n        );\n      }\n    },\n    [onThemeChange],\n  );\n\n  const defaultSections: ProfileMenuSection[] = [\n    {\n      label: \"Navigation\",\n      items: [\n        {\n          name: \"View Profile\",\n          icon: <UserIcon />,\n          shortcut: \"⌘P\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: \"Projects & Works\",\n          icon: <FolderIcon />,\n          shortcut: \"⌘J\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: copied ? \"Email Copied!\" : \"Copy Email\",\n          icon: copied ? <CheckIcon /> : <CopyIcon />,\n          shortcut: copied ? undefined : \"⌘C\",\n          badge: copied ? (\n            <span className=\"text-[10px] font-sans font-medium text-emerald-600 dark:text-emerald-400 px-1.5 py-0.5 rounded-md bg-emerald-500/10\">\n              Copied!\n            </span>\n          ) : undefined,\n          closeOnSelect: false,\n          onSelect: handleCopyEmail,\n        },\n        {\n          name: \"Book a Call\",\n          icon: <CalendarIcon />,\n          shortcut: \"⌘B\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://cal.com\", \"_blank\");\n          },\n        },\n      ],\n    },\n    {\n      label: \"Social\",\n      items: [\n        {\n          name: \"GitHub\",\n          icon: <GithubIcon />,\n          badge: <ExternalLinkIcon />,\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: \"Twitter / X\",\n          icon: <TwitterIcon />,\n          badge: <ExternalLinkIcon />,\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://x.com\", \"_blank\");\n          },\n        },\n      ],\n    },\n  ];\n\n  const resolvedSections: ProfileMenuSection[] = [\n    ...(sections || defaultSections),\n  ];\n\n  resolvedSections.push({\n    label: \"Appearance\",\n    grid: true,\n    items: [\n      {\n        name: \"Light\",\n        icon: <SunIcon />,\n        centered: true,\n        active: activeTheme === \"light\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"light\"),\n      },\n      {\n        name: \"Dark\",\n        icon: <MoonIcon />,\n        centered: true,\n        active: activeTheme === \"dark\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"dark\"),\n      },\n      {\n        name: \"System\",\n        icon: <SystemIcon />,\n        centered: true,\n        active: activeTheme === \"system\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"system\"),\n      },\n    ],\n  });\n\n  const items = resolvedSections.flatMap((s) => s.items);\n  const itemCount = items.length;\n  const triggerId = `${id}-trigger`;\n  const menuId = `${id}-menu`;\n\n  useLayoutEffect(() => {\n    const hl = highlightRef.current;\n    if (!hl) return;\n    if (!isOpen || selected < 0) {\n      hl.style.opacity = \"0\";\n      return;\n    }\n    const element = itemRefs.current[selected];\n    if (!element) return;\n    hl.style.transform = `translate3d(${element.offsetLeft}px, ${element.offsetTop}px, 0)`;\n    hl.style.width = `${element.offsetWidth}px`;\n    hl.style.height = `${element.offsetHeight}px`;\n    hl.style.opacity = \"1\";\n  }, [isOpen, selected]);\n\n  useLayoutEffect(() => {\n    if (!isOpen || pendingFocusRef.current === null) return;\n    itemRefs.current[pendingFocusRef.current]?.focus({ preventScroll: true });\n    pendingFocusRef.current = null;\n  }, [isOpen]);\n\n  useEffect(() => {\n    if (isOpen || statusItems.length < 2) return;\n    const interval = setInterval(() => {\n      if (!document.hidden) {\n        setStatusIndex((prev) => (prev + 1) % statusItems.length);\n      }\n    }, statusInterval);\n    return () => clearInterval(interval);\n  }, [isOpen, statusItems.length, statusInterval]);\n\n  const clearHoverTimeout = useCallback(() => {\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n  }, []);\n\n  const focusItem = useCallback((index: number) => {\n    setSelected(index);\n    itemRefs.current[index]?.focus({ preventScroll: true });\n  }, []);\n\n  const openMenu = useCallback(\n    (focusIndex: number | null) => {\n      clearHoverTimeout();\n      setSelected(focusIndex ?? 0);\n      setIsPinned(true);\n      if (isOpen) {\n        if (focusIndex !== null) focusItem(focusIndex);\n        return;\n      }\n      pendingFocusRef.current = focusIndex;\n      setIsOpen(true);\n    },\n    [clearHoverTimeout, focusItem, isOpen],\n  );\n\n  const closeMenu = useCallback(() => {\n    clearHoverTimeout();\n    setIsOpen(false);\n    setIsPinned(false);\n    if (rootRef.current?.contains(document.activeElement)) {\n      triggerRef.current?.focus({ preventScroll: true });\n    }\n  }, [clearHoverTimeout]);\n\n  const toggleMenu = useCallback(() => {\n    if (isOpen) closeMenu();\n    else openMenu(0);\n  }, [closeMenu, isOpen, openMenu]);\n\n  const handleTriggerClick = useCallback(() => {\n    if (isOpen && isPinned) closeMenu();\n    else openMenu(null);\n  }, [closeMenu, isOpen, isPinned, openMenu]);\n\n  const handleTriggerKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    switch (event.key) {\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        if (isOpen && isPinned) closeMenu();\n        else openMenu(0);\n        break;\n      case \"ArrowDown\":\n        event.preventDefault();\n        openMenu(0);\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        openMenu(itemCount - 1);\n        break;\n    }\n  };\n\n  const handleMenuKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (itemCount === 0) return;\n    const current = itemRefs.current.findIndex(\n      (node) => node === document.activeElement,\n    );\n    const from = current < 0 ? selected : current;\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"j\":\n        event.preventDefault();\n        focusItem((from + 1) % itemCount);\n        break;\n      case \"ArrowUp\":\n      case \"k\":\n        event.preventDefault();\n        focusItem((from - 1 + itemCount) % itemCount);\n        break;\n      case \"Home\":\n        event.preventDefault();\n        focusItem(0);\n        break;\n      case \"End\":\n        event.preventDefault();\n        focusItem(itemCount - 1);\n        break;\n      case \"Tab\":\n        clearHoverTimeout();\n        setIsOpen(false);\n        setIsPinned(false);\n        break;\n    }\n  };\n\n  const handlePointerEnter = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (event.pointerType !== \"mouse\") return;\n      clearHoverTimeout();\n      if (!isOpen) {\n        setSelected(0);\n        setIsOpen(true);\n      }\n    },\n    [clearHoverTimeout, isOpen],\n  );\n\n  const handlePointerLeave = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>) => {\n      if (event.pointerType !== \"mouse\" || isPinned) return;\n      hoverTimeoutRef.current = setTimeout(closeMenu, 200);\n    },\n    [closeMenu, isPinned],\n  );\n\n  useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      const isCmdOrCtrl = isApple ? event.metaKey : event.ctrlKey;\n      if (\n        event.key.toLowerCase() === shortcutKey.toLowerCase() &&\n        isCmdOrCtrl\n      ) {\n        event.preventDefault();\n        toggleMenu();\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isApple, shortcutKey, toggleMenu]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    function onKeyDown(event: KeyboardEvent) {\n      if (event.key === \"Escape\") {\n        event.preventDefault();\n        closeMenu();\n      }\n    }\n\n    function onClickOutside(event: MouseEvent) {\n      if (!(event.target as HTMLElement).closest(`#${id}`)) {\n        closeMenu();\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    window.addEventListener(\"click\", onClickOutside);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n      window.removeEventListener(\"click\", onClickOutside);\n    };\n  }, [closeMenu, isOpen, id]);\n\n  const currentStatus = statusItems[statusIndex];\n\n  return (\n    <div\n      ref={rootRef}\n      id={id}\n      role=\"region\"\n      aria-label=\"Profile command menu\"\n      onPointerEnter={handlePointerEnter}\n      onPointerLeave={handlePointerLeave}\n      className={cn(\n        \"relative w-90 max-w-[calc(100vw-2rem)] rounded-2xl select-none\",\n        \"bg-background/95 dark:bg-zinc-950/90 text-foreground backdrop-blur-2xl\",\n        \"border border-border/80 dark:border-white/10\",\n        \"transition-shadow duration-300\",\n        isOpen\n          ? \"shadow-2xl shadow-black/10 dark:shadow-black/50\"\n          : \"shadow-lg shadow-black/5 dark:shadow-black/30\",\n        className,\n      )}\n    >\n      <style>{STYLES}</style>\n\n      <div\n        ref={triggerRef}\n        id={triggerId}\n        role=\"button\"\n        tabIndex={0}\n        aria-haspopup=\"menu\"\n        aria-expanded={isOpen}\n        aria-controls={menuId}\n        onClick={handleTriggerClick}\n        onKeyDown={handleTriggerKeyDown}\n        className=\"flex items-center gap-3 p-2.5 rounded-2xl cursor-pointer outline-none select-none group focus-visible:ring-2 focus-visible:ring-foreground/30\"\n      >\n        <div className=\"relative shrink-0\">\n          {avatar ? (\n            avatar\n          ) : (\n            <img\n              src={avatarSrc}\n              alt=\"Profile\"\n              className=\"size-9 rounded-full object-cover ring-1 ring-border/70 dark:ring-white/15 shadow-xs\"\n            />\n          )}\n          {online && (\n            <span className=\"absolute bottom-0 right-0 flex size-2.5 items-center justify-center\">\n              <span className=\"absolute inline-flex size-full animate-ping motion-reduce:animate-none rounded-full bg-emerald-400 opacity-75\" />\n              <span className=\"relative inline-flex size-2 rounded-full bg-emerald-500 ring-2 ring-background dark:ring-zinc-950\" />\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex flex-1 min-w-0 flex-col justify-center\">\n          <div className=\"flex items-center justify-between gap-2\">\n            <span className=\"font-sans font-medium text-xs sm:text-sm text-foreground truncate\">\n              {title}\n            </span>\n          </div>\n\n          {currentStatus && (\n            <div className=\"relative h-4 overflow-hidden text-[11px] font-sans text-muted-foreground mt-0.5\">\n              <div\n                key={statusIndex}\n                className=\"pm-status absolute inset-0 flex items-center gap-1.5 truncate text-muted-foreground\"\n              >\n                {currentStatus.icon && (\n                  <span className=\"shrink-0 size-3 text-muted-foreground/80 flex items-center justify-center\">\n                    {currentStatus.icon}\n                  </span>\n                )}\n                <span className=\"truncate\">{currentStatus.text}</span>\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-1.5 shrink-0 pl-1\">\n          <kbd className=\"inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-md border border-border/70 bg-muted/60 text-[10px] font-mono text-muted-foreground\">\n            <span>{isApple ? \"⌘\" : \"Ctrl\"}</span>\n            <span className=\"uppercase\">{shortcutKey}</span>\n          </kbd>\n          <span\n            className={cn(\n              \"text-muted-foreground/60 transition-transform duration-300 motion-reduce:transition-none flex items-center justify-center size-4\",\n              isOpen && \"rotate-180 text-foreground\",\n            )}\n          >\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      <div\n        inert={!isOpen}\n        className={cn(\n          \"grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none\",\n          isOpen\n            ? \"grid-rows-[1fr] opacity-100\"\n            : \"grid-rows-[0fr] opacity-0 pointer-events-none\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div\n            className={cn(\n              \"transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none\",\n              isOpen ? \"translate-y-0\" : \"-translate-y-1.5\",\n            )}\n          >\n            <div className=\"mx-2.5 mb-1.5 h-px bg-border/60 dark:bg-white/10\" />\n\n            <div\n              ref={panelRef}\n              id={menuId}\n              role=\"menu\"\n              aria-labelledby={triggerId}\n              onKeyDown={handleMenuKeyDown}\n              className=\"relative flex flex-col gap-1 p-2 pt-0\"\n            >\n              <div\n                ref={highlightRef}\n                aria-hidden=\"true\"\n                className=\"pointer-events-none absolute top-0 left-0 rounded-xl bg-foreground/6 dark:bg-white/10 z-0 opacity-0 transition-[transform,width,height,opacity] duration-250 ease-[cubic-bezier(0.16,1,0.3,1)] motion-reduce:transition-none\"\n              />\n\n              {resolvedSections.map((section, sIdx) => (\n                <div\n                  key={section.label || sIdx}\n                  role=\"group\"\n                  aria-label={section.label}\n                  className=\"space-y-1\"\n                >\n                  {sIdx > 0 && (\n                    <div className=\"my-1.5 mx-1 h-px bg-border/40 dark:bg-white/5\" />\n                  )}\n                  {section.label && (\n                    <span\n                      aria-hidden=\"true\"\n                      className=\"block px-2.5 pt-1 text-[10px] font-sans font-medium uppercase tracking-wider text-muted-foreground/60 select-none\"\n                    >\n                      {section.label}\n                    </span>\n                  )}\n                  <div\n                    className={\n                      section.grid ? \"grid grid-cols-3 gap-1.5\" : \"space-y-0.5\"\n                    }\n                  >\n                    {section.items.map((item) => {\n                      const index = items.indexOf(item);\n                      return (\n                        <button\n                          key={item.name}\n                          ref={(node) => {\n                            itemRefs.current[index] = node;\n                          }}\n                          type=\"button\"\n                          role={\n                            item.active === undefined\n                              ? \"menuitem\"\n                              : \"menuitemradio\"\n                          }\n                          aria-checked={item.active}\n                          tabIndex={-1}\n                          onMouseEnter={() => setSelected(index)}\n                          onFocus={() => setSelected(index)}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            item.onSelect?.();\n                            if (item.closeOnSelect) closeMenu();\n                          }}\n                          className={cn(\n                            \"relative z-10 flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-2.5 py-2 text-xs font-sans transition-colors\",\n                            item.centered\n                              ? \"justify-center\"\n                              : \"justify-between\",\n                            item.active\n                              ? \"text-foreground font-medium ring-1 ring-border/80 dark:ring-white/20 bg-foreground/5 dark:bg-white/5\"\n                              : \"text-muted-foreground hover:text-foreground\",\n                            item.danger &&\n                            \"text-rose-500 dark:text-rose-400 hover:text-rose-600\",\n                          )}\n                        >\n                          <div\n                            className={cn(\n                              \"flex items-center gap-2.5 min-w-0\",\n                              item.centered && \"flex-col gap-1 py-0.5\",\n                            )}\n                          >\n                            {item.icon && (\n                              <span className=\"shrink-0 size-4 flex items-center justify-center text-muted-foreground group-hover:text-foreground\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span className=\"truncate\">{item.name}</span>\n                          </div>\n\n                          {item.shortcut && !item.centered && (\n                            <kbd className=\"font-mono text-[10px] text-muted-foreground/60 px-1 py-0.5 rounded bg-muted/40\">\n                              {item.shortcut}\n                            </kbd>\n                          )}\n\n                          {item.badge && !item.centered && (\n                            <span className=\"shrink-0 flex items-center\">\n                              {item.badge}\n                            </span>\n                          )}\n                        </button>\n                      );\n                    })}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction UserIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <circle cx=\"12\" cy=\"8\" r=\"4\" />\n      <path strokeLinecap=\"round\" d=\"M6 20v-1a6 6 0 0 1 12 0v1\" />\n    </svg>\n  );\n}\n\nfunction FolderIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2Z\"\n      />\n    </svg>\n  );\n}\n\nfunction CopyIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" strokeLinecap=\"round\" />\n      <path\n        strokeLinecap=\"round\"\n        d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\n      />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      className=\"size-4 text-emerald-500 dark:text-emerald-400\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m4.5 12.75 6 6 9-13.5\"\n      />\n    </svg>\n  );\n}\n\nfunction CalendarIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" strokeLinecap=\"round\" />\n      <path strokeLinecap=\"round\" d=\"M16 2v4M8 2v4M3 10h18\" />\n    </svg>\n  );\n}\n\nfunction GithubIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z\"\n      />\n    </svg>\n  );\n}\n\nfunction TwitterIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n    </svg>\n  );\n}\n\nfunction SunIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path\n        strokeLinecap=\"round\"\n        d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\n      />\n    </svg>\n  );\n}\n\nfunction MoonIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z\"\n      />\n    </svg>\n  );\n}\n\nfunction SystemIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" strokeLinecap=\"round\" />\n      <path strokeLinecap=\"round\" d=\"M8 21h8M12 17v4\" />\n    </svg>\n  );\n}\n\nfunction ChevronDownIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className={cn(\"size-3.5\", className)}\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"\n      />\n    </svg>\n  );\n}\n\nfunction SparklesIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z\"\n      />\n    </svg>\n  );\n}\n\nfunction ZapIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n      />\n    </svg>\n  );\n}\n\nfunction MapPinIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n      />\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z\"\n      />\n    </svg>\n  );\n}\n\nfunction TerminalIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m6.75 7.5 4.5 4.5-4.5 4.5m6-1.5h4.5\"\n      />\n    </svg>\n  );\n}\n\nfunction ExternalLinkIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3.5 text-muted-foreground/60\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\"\n      />\n    </svg>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@ui/profile-menu.tsx"
    }
  ],
  "type": "registry:ui",
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "title": "Profile Menu",
  "code": "\"use client\";\n\nimport React, {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ThemeValue = \"light\" | \"dark\" | \"system\";\n\nexport type ProfileMenuStatusItem = {\n  text: string;\n  icon?: ReactNode;\n};\n\nexport type StatusInput = string | ProfileMenuStatusItem;\n\nexport type ProfileMenuItem = {\n  name: string;\n  icon?: ReactNode;\n  shortcut?: string;\n  badge?: ReactNode;\n  active?: boolean;\n  centered?: boolean;\n  danger?: boolean;\n  closeOnSelect?: boolean;\n  onSelect?: () => void;\n};\n\nexport type ProfileMenuSection = {\n  label?: string;\n  grid?: boolean;\n  items: ProfileMenuItem[];\n};\n\nexport interface ProfileMenuProps {\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  avatarSrc?: string;\n  avatar?: ReactNode;\n  status?: StatusInput[];\n  statusInterval?: number;\n  sections?: ProfileMenuSection[];\n  theme?: ThemeValue;\n  onThemeChange?: (theme: ThemeValue) => void;\n  shortcutKey?: string;\n  online?: boolean;\n  id?: string;\n  className?: string;\n}\n\nconst DEFAULT_AVATAR =\n  \"https://i.pinimg.com/736x/c9/3d/c8/c93dc8fdae8629e56c85e7b2a10ffd7b.jpg\";\n\nconst DEFAULT_STATUS_ITEMS: ProfileMenuStatusItem[] = [\n  {\n    text: \"Designing interactive systems\",\n    icon: <SparklesIcon />,\n  },\n  {\n    text: \"Available for select projects\",\n    icon: <ZapIcon />,\n  },\n  {\n    text: \"San Francisco, CA · 10:42 AM\",\n    icon: <MapPinIcon />,\n  },\n  {\n    text: \"Design Engineer @ DevClub\",\n    icon: <TerminalIcon />,\n  },\n];\n\nconst STYLES = `\n@keyframes pm-slide-in {\n  0% {\n    opacity: 0;\n    transform: translateY(5px);\n    filter: blur(2px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n    filter: blur(0);\n  }\n}\n`;\n\nconst subscribePlatform = () => () => {};\nconst getPlatformSnapshot = () =>\n  typeof navigator !== \"undefined\" &&\n  /Mac|iPhone|iPad|iPod/.test(navigator.platform);\nconst getServerSnapshot = () => false;\n\nexport function ProfileMenu({\n  title = \"Yatharth K.\",\n  avatarSrc = DEFAULT_AVATAR,\n  avatar,\n  status,\n  statusInterval = 3600,\n  sections,\n  theme,\n  onThemeChange,\n  shortcutKey = \"k\",\n  online = true,\n  id = \"profile-command-menu\",\n  className,\n}: ProfileMenuProps) {\n  const isApple = useSyncExternalStore(\n    subscribePlatform,\n    getPlatformSnapshot,\n    getServerSnapshot,\n  );\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [isPinned, setIsPinned] = useState(false);\n  const [selected, setSelected] = useState(0);\n  const [statusIndex, setStatusIndex] = useState(0);\n  const [copied, setCopied] = useState(false);\n\n  const [internalTheme, setInternalTheme] = useState<ThemeValue>(() => {\n    if (typeof window === \"undefined\") return \"dark\";\n    const stored = localStorage.getItem(\"theme\");\n    if (stored === \"light\" || stored === \"dark\" || stored === \"system\") {\n      return stored;\n    }\n    return document.documentElement.classList.contains(\"dark\")\n      ? \"dark\"\n      : \"light\";\n  });\n\n  const activeTheme = theme ?? internalTheme;\n\n  const panelRef = useRef<HTMLDivElement>(null);\n  const highlightRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const hoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n  const rawStatuses = status ?? DEFAULT_STATUS_ITEMS;\n  const statusItems: ProfileMenuStatusItem[] = rawStatuses.map((s) =>\n    typeof s === \"string\" ? { text: s } : s,\n  );\n\n  const handleCopyEmail = useCallback(() => {\n    if (typeof navigator !== \"undefined\" && navigator.clipboard) {\n      navigator.clipboard.writeText(\"hello@devclub.co\");\n    }\n    setCopied(true);\n    setTimeout(() => {\n      setCopied(false);\n    }, 2000);\n  }, []);\n\n  const handleThemeSelect = useCallback(\n    (nextTheme: ThemeValue) => {\n      setInternalTheme(nextTheme);\n      onThemeChange?.(nextTheme);\n      if (typeof document !== \"undefined\") {\n        if (nextTheme === \"dark\") {\n          document.documentElement.classList.add(\"dark\");\n          try {\n            localStorage.setItem(\"theme\", \"dark\");\n          } catch {}\n        } else if (nextTheme === \"light\") {\n          document.documentElement.classList.remove(\"dark\");\n          try {\n            localStorage.setItem(\"theme\", \"light\");\n          } catch {}\n        } else {\n          const isDark = window.matchMedia(\n            \"(prefers-color-scheme: dark)\",\n          ).matches;\n          document.documentElement.classList.toggle(\"dark\", isDark);\n          try {\n            localStorage.setItem(\"theme\", \"system\");\n          } catch {}\n        }\n        window.dispatchEvent(new Event(\"storage\"));\n      }\n    },\n    [onThemeChange],\n  );\n\n  const defaultSections: ProfileMenuSection[] = [\n    {\n      label: \"Navigation\",\n      items: [\n        {\n          name: \"View Profile\",\n          icon: <UserIcon />,\n          shortcut: \"⌘P\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: \"Projects & Works\",\n          icon: <FolderIcon />,\n          shortcut: \"⌘J\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: copied ? \"Email Copied!\" : \"Copy Email\",\n          icon: copied ? <CheckIcon /> : <CopyIcon />,\n          shortcut: copied ? undefined : \"⌘C\",\n          badge: copied ? (\n            <span className=\"text-[10px] font-sans font-medium text-emerald-600 dark:text-emerald-400 px-1.5 py-0.5 rounded-md bg-emerald-500/10\">\n              Copied!\n            </span>\n          ) : undefined,\n          closeOnSelect: false,\n          onSelect: handleCopyEmail,\n        },\n        {\n          name: \"Book a Call\",\n          icon: <CalendarIcon />,\n          shortcut: \"⌘B\",\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://cal.com\", \"_blank\");\n          },\n        },\n      ],\n    },\n    {\n      label: \"Social\",\n      items: [\n        {\n          name: \"GitHub\",\n          icon: <GithubIcon />,\n          badge: <ExternalLinkIcon />,\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://github.com/devclub-nstru\", \"_blank\");\n          },\n        },\n        {\n          name: \"Twitter / X\",\n          icon: <TwitterIcon />,\n          badge: <ExternalLinkIcon />,\n          closeOnSelect: true,\n          onSelect: () => {\n            window.open(\"https://x.com\", \"_blank\");\n          },\n        },\n      ],\n    },\n  ];\n\n  const resolvedSections: ProfileMenuSection[] = [\n    ...(sections || defaultSections),\n  ];\n\n  resolvedSections.push({\n    label: \"Appearance\",\n    grid: true,\n    items: [\n      {\n        name: \"Light\",\n        icon: <SunIcon />,\n        centered: true,\n        active: activeTheme === \"light\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"light\"),\n      },\n      {\n        name: \"Dark\",\n        icon: <MoonIcon />,\n        centered: true,\n        active: activeTheme === \"dark\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"dark\"),\n      },\n      {\n        name: \"System\",\n        icon: <SystemIcon />,\n        centered: true,\n        active: activeTheme === \"system\",\n        closeOnSelect: false,\n        onSelect: () => handleThemeSelect(\"system\"),\n      },\n    ],\n  });\n\n  const items = resolvedSections.flatMap((s) => s.items);\n  const itemsRef = useRef(items);\n  const selectedRef = useRef(selected);\n\n  useEffect(() => {\n    itemsRef.current = items;\n    selectedRef.current = selected;\n  }, [items, selected]);\n\n  useLayoutEffect(() => {\n    const hl = highlightRef.current;\n    if (!hl) return;\n    if (!isOpen || selected < 0) {\n      hl.style.opacity = \"0\";\n      return;\n    }\n    const element = itemRefs.current[selected];\n    if (!element) return;\n    hl.style.transform = `translate3d(${element.offsetLeft}px, ${element.offsetTop}px, 0)`;\n    hl.style.width = `${element.offsetWidth}px`;\n    hl.style.height = `${element.offsetHeight}px`;\n    hl.style.opacity = \"1\";\n  }, [isOpen, selected]);\n\n  useEffect(() => {\n    if (isOpen || statusItems.length < 2) return;\n    const interval = setInterval(() => {\n      if (!document.hidden) {\n        setStatusIndex((prev) => (prev + 1) % statusItems.length);\n      }\n    }, statusInterval);\n    return () => clearInterval(interval);\n  }, [isOpen, statusItems.length, statusInterval]);\n\n  const toggleMenu = useCallback(() => {\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n    setSelected(0);\n    setIsOpen((prev) => {\n      const next = !prev;\n      setIsPinned(next);\n      return next;\n    });\n  }, []);\n\n  const handleMouseEnter = useCallback(() => {\n    if (hoverTimeoutRef.current) {\n      clearTimeout(hoverTimeoutRef.current);\n      hoverTimeoutRef.current = null;\n    }\n    if (!isOpen) {\n      setSelected(0);\n      setIsOpen(true);\n    }\n  }, [isOpen]);\n\n  const handleMouseLeave = useCallback(() => {\n    if (isPinned) return;\n    hoverTimeoutRef.current = setTimeout(() => {\n      setIsOpen(false);\n    }, 200);\n  }, [isPinned]);\n\n  useEffect(() => {\n    function onKeyDown(event: KeyboardEvent) {\n      const isCmdOrCtrl = isApple ? event.metaKey : event.ctrlKey;\n      if (\n        event.key.toLowerCase() === shortcutKey.toLowerCase() &&\n        isCmdOrCtrl\n      ) {\n        event.preventDefault();\n        toggleMenu();\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n    };\n  }, [isApple, shortcutKey, toggleMenu]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n\n    function onKeyDown(event: KeyboardEvent) {\n      const count = itemsRef.current.length;\n      if (count === 0) return;\n\n      const move = (delta: number) => {\n        setSelected((prev) => (prev + delta + count) % count);\n      };\n\n      switch (event.key) {\n        case \"ArrowUp\":\n        case \"k\":\n          event.preventDefault();\n          move(-1);\n          break;\n        case \"ArrowDown\":\n        case \"j\":\n          event.preventDefault();\n          move(1);\n          break;\n        case \"Enter\": {\n          event.preventDefault();\n          const target = itemsRef.current[selectedRef.current];\n          if (target) {\n            target.onSelect?.();\n            if (target.closeOnSelect) {\n              setIsOpen(false);\n              setIsPinned(false);\n            }\n          }\n          break;\n        }\n        case \"Escape\":\n          event.preventDefault();\n          setIsOpen(false);\n          setIsPinned(false);\n          break;\n      }\n    }\n\n    function onClickOutside(event: MouseEvent) {\n      if (!(event.target as HTMLElement).closest(`#${id}`)) {\n        setIsOpen(false);\n        setIsPinned(false);\n      }\n    }\n\n    window.addEventListener(\"keydown\", onKeyDown);\n    window.addEventListener(\"click\", onClickOutside);\n    return () => {\n      window.removeEventListener(\"keydown\", onKeyDown);\n      window.removeEventListener(\"click\", onClickOutside);\n    };\n  }, [isOpen, id]);\n\n  const currentStatus = statusItems[statusIndex];\n\n  return (\n    <div\n      id={id}\n      role=\"region\"\n      aria-label=\"Profile command menu\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      className={cn(\n        \"relative w-90 max-w-[calc(100vw-2rem)] rounded-2xl select-none\",\n        \"bg-background/95 dark:bg-zinc-950/90 text-foreground backdrop-blur-2xl\",\n        \"border border-border/80 dark:border-white/10\",\n        \"transition-shadow duration-300\",\n        isOpen\n          ? \"shadow-2xl shadow-black/10 dark:shadow-black/50\"\n          : \"shadow-lg shadow-black/5 dark:shadow-black/30\",\n        className,\n      )}\n    >\n      <style>{STYLES}</style>\n\n      <div\n        role=\"button\"\n        tabIndex={0}\n        onClick={toggleMenu}\n        onKeyDown={(e) => {\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            toggleMenu();\n          }\n        }}\n        className=\"flex items-center gap-3 p-2.5 cursor-pointer outline-none select-none group\"\n      >\n        <div className=\"relative shrink-0\">\n          {avatar ? (\n            avatar\n          ) : (\n            <img\n              src={avatarSrc}\n              alt=\"Profile\"\n              className=\"size-9 rounded-full object-cover ring-1 ring-border/70 dark:ring-white/15 shadow-xs\"\n            />\n          )}\n          {online && (\n            <span className=\"absolute bottom-0 right-0 flex size-2.5 items-center justify-center\">\n              <span className=\"absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75\" />\n              <span className=\"relative inline-flex size-2 rounded-full bg-emerald-500 ring-2 ring-background dark:ring-zinc-950\" />\n            </span>\n          )}\n        </div>\n\n        <div className=\"flex flex-1 min-w-0 flex-col justify-center\">\n          <div className=\"flex items-center justify-between gap-2\">\n            <span className=\"font-sans font-medium text-xs sm:text-sm text-foreground truncate\">\n              {title}\n            </span>\n          </div>\n\n          {currentStatus && (\n            <div className=\"relative h-4 overflow-hidden text-[11px] font-sans text-muted-foreground mt-0.5\">\n              <div\n                key={statusIndex}\n                style={{ animation: \"pm-slide-in 0.3s ease-out backwards\" }}\n                className=\"absolute inset-0 flex items-center gap-1.5 truncate text-muted-foreground\"\n              >\n                {currentStatus.icon && (\n                  <span className=\"shrink-0 size-3 text-muted-foreground/80 flex items-center justify-center\">\n                    {currentStatus.icon}\n                  </span>\n                )}\n                <span className=\"truncate\">{currentStatus.text}</span>\n              </div>\n            </div>\n          )}\n        </div>\n\n        <div className=\"flex items-center gap-1.5 shrink-0 pl-1\">\n          <kbd className=\"inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-md border border-border/70 bg-muted/60 text-[10px] font-mono text-muted-foreground\">\n            <span>{isApple ? \"⌘\" : \"Ctrl\"}</span>\n            <span className=\"uppercase\">{shortcutKey}</span>\n          </kbd>\n          <span\n            className={cn(\n              \"text-muted-foreground/60 transition-transform duration-300 flex items-center justify-center size-4\",\n              isOpen && \"rotate-180 text-foreground\",\n            )}\n          >\n            <ChevronDownIcon />\n          </span>\n        </div>\n      </div>\n\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows,opacity] duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\",\n          isOpen\n            ? \"grid-rows-[1fr] opacity-100\"\n            : \"grid-rows-[0fr] opacity-0 pointer-events-none\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div\n            className={cn(\n              \"transition-transform duration-300 ease-[cubic-bezier(0.16,1,0.3,1)]\",\n              isOpen ? \"translate-y-0\" : \"-translate-y-1.5\",\n            )}\n          >\n            <div className=\"mx-2.5 mb-1.5 h-px bg-border/60 dark:bg-white/10\" />\n\n            <div\n              ref={panelRef}\n              className=\"relative flex flex-col gap-1 p-2 pt-0\"\n            >\n              <div\n                ref={highlightRef}\n                aria-hidden=\"true\"\n                className=\"pointer-events-none absolute top-0 left-0 rounded-xl bg-foreground/6 dark:bg-white/10 z-0 opacity-0 transition-[transform,width,height,opacity] duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]\"\n              />\n\n              {resolvedSections.map((section, sIdx) => (\n                <div key={section.label || sIdx} className=\"space-y-1\">\n                  {sIdx > 0 && (\n                    <div className=\"my-1.5 mx-1 h-px bg-border/40 dark:bg-white/5\" />\n                  )}\n                  {section.label && (\n                    <span className=\"block px-2.5 pt-1 text-[10px] font-sans font-medium uppercase tracking-wider text-muted-foreground/60 select-none\">\n                      {section.label}\n                    </span>\n                  )}\n                  <div\n                    className={\n                      section.grid ? \"grid grid-cols-3 gap-1.5\" : \"space-y-0.5\"\n                    }\n                  >\n                    {section.items.map((item) => {\n                      const index = items.indexOf(item);\n                      return (\n                        <button\n                          key={item.name}\n                          ref={(node) => {\n                            itemRefs.current[index] = node;\n                          }}\n                          type=\"button\"\n                          onMouseEnter={() => setSelected(index)}\n                          onClick={(e) => {\n                            e.stopPropagation();\n                            item.onSelect?.();\n                            if (item.closeOnSelect) {\n                              setIsOpen(false);\n                              setIsPinned(false);\n                            }\n                          }}\n                          className={cn(\n                            \"relative z-10 flex w-full cursor-pointer items-center gap-2.5 rounded-xl px-2.5 py-2 text-xs font-sans transition-colors\",\n                            item.centered\n                              ? \"justify-center\"\n                              : \"justify-between\",\n                            item.active\n                              ? \"text-foreground font-medium ring-1 ring-border/80 dark:ring-white/20 bg-foreground/5 dark:bg-white/5\"\n                              : \"text-muted-foreground hover:text-foreground\",\n                            item.danger &&\n                              \"text-rose-500 dark:text-rose-400 hover:text-rose-600\",\n                          )}\n                        >\n                          <div\n                            className={cn(\n                              \"flex items-center gap-2.5 min-w-0\",\n                              item.centered && \"flex-col gap-1 py-0.5\",\n                            )}\n                          >\n                            {item.icon && (\n                              <span className=\"shrink-0 size-4 flex items-center justify-center text-muted-foreground group-hover:text-foreground\">\n                                {item.icon}\n                              </span>\n                            )}\n                            <span className=\"truncate\">{item.name}</span>\n                          </div>\n\n                          {item.shortcut && !item.centered && (\n                            <kbd className=\"font-mono text-[10px] text-muted-foreground/60 px-1 py-0.5 rounded bg-muted/40\">\n                              {item.shortcut}\n                            </kbd>\n                          )}\n\n                          {item.badge && !item.centered && (\n                            <span className=\"shrink-0 flex items-center\">\n                              {item.badge}\n                            </span>\n                          )}\n                        </button>\n                      );\n                    })}\n                  </div>\n                </div>\n              ))}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction UserIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <circle cx=\"12\" cy=\"8\" r=\"4\" />\n      <path strokeLinecap=\"round\" d=\"M6 20v-1a6 6 0 0 1 12 0v1\" />\n    </svg>\n  );\n}\n\nfunction FolderIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M3 7v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-6l-2-2H5a2 2 0 0 0-2 2Z\"\n      />\n    </svg>\n  );\n}\n\nfunction CopyIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" strokeLinecap=\"round\" />\n      <path\n        strokeLinecap=\"round\"\n        d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"\n      />\n    </svg>\n  );\n}\n\nfunction CheckIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      className=\"size-4 text-emerald-500 dark:text-emerald-400\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m4.5 12.75 6 6 9-13.5\"\n      />\n    </svg>\n  );\n}\n\nfunction CalendarIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\" strokeLinecap=\"round\" />\n      <path strokeLinecap=\"round\" d=\"M16 2v4M8 2v4M3 10h18\" />\n    </svg>\n  );\n}\n\nfunction GithubIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n      <path\n        fillRule=\"evenodd\"\n        clipRule=\"evenodd\"\n        d=\"M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z\"\n      />\n    </svg>\n  );\n}\n\nfunction TwitterIcon() {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"size-4\">\n      <path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\" />\n    </svg>\n  );\n}\n\nfunction SunIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <circle cx=\"12\" cy=\"12\" r=\"4\" />\n      <path\n        strokeLinecap=\"round\"\n        d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\n      />\n    </svg>\n  );\n}\n\nfunction MoonIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79Z\"\n      />\n    </svg>\n  );\n}\n\nfunction SystemIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-4\"\n    >\n      <rect x=\"2\" y=\"3\" width=\"20\" height=\"14\" rx=\"2\" strokeLinecap=\"round\" />\n      <path strokeLinecap=\"round\" d=\"M8 21h8M12 17v4\" />\n    </svg>\n  );\n}\n\nfunction ChevronDownIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className={cn(\"size-3.5\", className)}\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m19.5 8.25-7.5 7.5-7.5-7.5\"\n      />\n    </svg>\n  );\n}\n\nfunction SparklesIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M9.813 15.904 9 18.75l-.813-2.846a4.5 4.5 0 0 0-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 0 0 3.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 0 0 3.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 0 0-3.09 3.09ZM18.259 8.715 18 9.75l-.259-1.035a3.375 3.375 0 0 0-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 0 0 2.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 0 0 2.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 0 0-2.456 2.456Z\"\n      />\n    </svg>\n  );\n}\n\nfunction ZapIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z\"\n      />\n    </svg>\n  );\n}\n\nfunction MapPinIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z\"\n      />\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z\"\n      />\n    </svg>\n  );\n}\n\nfunction TerminalIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"m6.75 7.5 4.5 4.5-4.5 4.5m6-1.5h4.5\"\n      />\n    </svg>\n  );\n}\n\nfunction ExternalLinkIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      className=\"size-3.5 text-muted-foreground/60\"\n    >\n      <path\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        d=\"M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25\"\n      />\n    </svg>\n  );\n}\n"
}