{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "app-header",
  "title": "App Header",
  "description": "Authenticated application header with mobile menu, user dropdown, notifications, and command palette search",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "sheet",
    "dropdown-menu",
    "command",
    "mini-card"
  ],
  "files": [
    {
      "path": "registry/blocks/app-header/page.tsx",
      "content": "import { AppHeader } from \"@/registry/blocks/app-header/components/app-header\"\n\nexport default function AppHeaderDemo() {\n  return (\n    <div className=\"min-h-screen bg-treasury-base-lightest\">\n      <AppHeader\n        agentName=\"John Smith\"\n        agentRole=\"Senior Agent\"\n      />\n\n      <main className=\"container mx-auto px-4 py-12\">\n        <h1 className=\"text-3xl font-bold text-treasury-ink mb-4\">\n          App Header Demo\n        </h1>\n        <p className=\"text-treasury-base-dark mb-8\">\n          This is a demo of the App Header component with default configuration.\n          The header includes a hamburger menu, logo, search, notifications, and user menu.\n          Press \u2318K or Ctrl+K to open the command palette.\n        </p>\n\n        <div className=\"bg-treasury-paper p-6 rounded-lg border border-treasury-base-light\">\n          <h2 className=\"text-xl font-semibold text-treasury-ink mb-4\">\n            Configurable Props\n          </h2>\n          <ul className=\"space-y-2 text-treasury-base-darkest\">\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">agentName</code> - Display name in user menu</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">agentRole</code> - Role displayed under name</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">title</code> - Header title text</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">logoSrc</code> - Path to logo image</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">homeHref</code> - Home link destination</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">navItems</code> - Array of navigation items</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">footerItems</code> - Array of footer nav items</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">logoutAction</code> - Server action for logout</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">showNotifications</code> - Show/hide notifications button</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">showSearch</code> - Show/hide search button</li>\n            <li><code className=\"bg-treasury-base-lightest px-1 rounded\">commandGroups</code> - Command palette groups</li>\n          </ul>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/app-header-demo/page.tsx"
    },
    {
      "path": "registry/blocks/app-header/components/app-header.tsx",
      "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport Link from \"next/link\"\nimport { usePathname, useRouter } from \"next/navigation\"\nimport {\n  Menu,\n  Search,\n  BellIcon,\n  LogOut,\n  User,\n  Settings,\n  ListTodo,\n  type LucideIcon,\n} from \"lucide-react\"\nimport { Button } from \"@/registry/ui/button\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetClose,\n} from \"@/registry/ui/sheet\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/ui/dropdown-menu\"\nimport { MiniCard } from \"@/registry/ui/mini-card\"\nimport {\n  CommandDialog,\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from \"@/registry/ui/command\"\n\n// Types\nexport interface NavItem {\n  title: string\n  url: string\n  icon?: LucideIcon\n}\n\nexport interface CommandItemType {\n  label: string\n  icon?: LucideIcon\n  href?: string\n  action?: () => void\n}\n\nexport interface CommandGroupType {\n  heading: string\n  items: CommandItemType[]\n}\n\nconst DEFAULT_NAV_ITEMS: NavItem[] = [\n  { title: \"Queue\", url: \"/queue\" },\n]\n\nconst DEFAULT_FOOTER_ITEMS: NavItem[] = []\n\n// Default logout stub - replace with your auth implementation\nasync function defaultLogout(): Promise<void> {\n  console.warn(\"AppHeader: No logoutAction provided. Implement your own logout logic.\")\n}\n\ninterface AppHeaderProps {\n  agentName?: string\n  agentRole?: string\n  title?: string\n  logoSrc?: string\n  logoAlt?: string\n  homeHref?: string\n  navItems?: NavItem[]\n  footerItems?: NavItem[]\n  logoutAction?: () => Promise<void>\n  showNotifications?: boolean\n  showSearch?: boolean\n  commandGroups?: CommandGroupType[]\n}\n\nexport function AppHeader({\n  agentName,\n  agentRole,\n  title = \"TTB Label Verification\",\n  logoSrc = \"/logo/app-seal/treasury.png\",\n  logoAlt = \"Treasury\",\n  homeHref = \"/queue\",\n  navItems = DEFAULT_NAV_ITEMS,\n  footerItems = DEFAULT_FOOTER_ITEMS,\n  logoutAction = defaultLogout,\n  showNotifications = true,\n  showSearch = true,\n  commandGroups,\n}: AppHeaderProps) {\n  const [menuOpen, setMenuOpen] = useState(false)\n  const [commandOpen, setCommandOpen] = useState(false)\n  const pathname = usePathname()\n  const router = useRouter()\n  const logoutFormRef = useRef<HTMLFormElement | null>(null)\n\n  useEffect(() => {\n    const down = (e: KeyboardEvent) => {\n      if (e.key === \"k\" && (e.metaKey || e.ctrlKey)) {\n        e.preventDefault()\n        setCommandOpen((open) => !open)\n      }\n    }\n\n    document.addEventListener(\"keydown\", down)\n    return () => document.removeEventListener(\"keydown\", down)\n  }, [])\n\n  const runCommand = (command: () => void) => {\n    setCommandOpen(false)\n    command()\n  }\n\n  const submitLogout = () => {\n    logoutFormRef.current?.requestSubmit()\n  }\n\n  // Default command groups if not provided\n  const defaultCommandGroups: CommandGroupType[] = [\n    {\n      heading: \"Navigation\",\n      items: [\n        { label: \"Queue\", icon: ListTodo, href: \"/queue\" },\n      ],\n    },\n    {\n      heading: \"Account\",\n      items: [\n        { label: \"Settings\", icon: Settings, href: \"/settings\" },\n        { label: \"Log out\", icon: LogOut, action: submitLogout },\n      ],\n    },\n  ]\n\n  const groups = commandGroups ?? defaultCommandGroups\n\n  return (\n    <header className=\"bg-treasury-primary-dark\">\n      <div className=\"container mx-auto flex items-center justify-between px-4 py-2\">\n        {/* Left side */}\n        <div className=\"flex items-center gap-3\">\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={() => setMenuOpen(true)}\n            className=\"text-treasury-paper hover:bg-treasury-primary/50 h-auto w-auto p-1\"\n            aria-label=\"Open menu\"\n          >\n            <Menu className=\"h-[30px] w-[30px]\" />\n          </Button>\n\n          <Link href={homeHref} className=\"flex items-center gap-3\">\n            <img\n              src={logoSrc}\n              alt={logoAlt}\n              className=\"h-8 w-8\"\n            />\n            <span className=\"text-treasury-paper text-xl font-light\">\n              {title}\n            </span>\n          </Link>\n        </div>\n\n        {/* Right side */}\n        <div className=\"flex items-center gap-1\">\n          {showSearch && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              onClick={() => setCommandOpen(true)}\n              className=\"text-treasury-paper hover:bg-treasury-primary/50\"\n              aria-label=\"Search (\u2318K)\"\n            >\n              <Search className=\"h-5 w-5\" />\n            </Button>\n          )}\n\n          {showNotifications && (\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"text-treasury-ink hover:bg-treasury-primary/50\"\n              aria-label=\"Notifications\"\n            >\n              <BellIcon className=\"h-5 w-5 fill-current\" />\n            </Button>\n          )}\n\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"text-treasury-paper hover:bg-treasury-primary/50\"\n                aria-label=\"User menu\"\n              >\n                <User className=\"h-6 w-6\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-56\">\n              {agentName ? (\n                <>\n                  <DropdownMenuLabel className=\"space-y-0.5\">\n                    <div className=\"text-sm font-medium text-foreground\">\n                      {agentName}\n                    </div>\n                    {agentRole ? (\n                      <div className=\"text-xs text-muted-foreground\">\n                        {agentRole}\n                      </div>\n                    ) : null}\n                  </DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                </>\n              ) : null}\n              <DropdownMenuGroup>\n                <DropdownMenuItem asChild>\n                  <Link href=\"/settings\">\n                    <Settings />\n                    Settings\n                  </Link>\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <form action={logoutAction}>\n                <DropdownMenuItem asChild className=\"w-full\">\n                  <button type=\"submit\">\n                    <LogOut />\n                    Log out\n                  </button>\n                </DropdownMenuItem>\n              </form>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n      </div>\n\n      <Sheet open={menuOpen} onOpenChange={setMenuOpen}>\n        <SheetContent side=\"left\" className=\"w-72 p-0 gap-0 !border-r-0\" closeButtonClassName=\"text-treasury-paper hover:bg-treasury-primary hover:text-treasury-paper\">\n          <MiniCard\n            variant=\"primary\"\n            size=\"sm\"\n            title={title}\n          />\n\n          <nav className=\"flex flex-col flex-1 border-t border-treasury-base-light\">\n            <div className=\"flex-1\">\n              {navItems.map((item) => (\n                <SheetClose asChild key={item.title}>\n                  <Link\n                    href={item.url}\n                    className={`relative block px-4 py-4 border-b border-treasury-base-light transition-colors hover:text-treasury-primary ${\n                      pathname === item.url\n                        ? \"text-treasury-primary before:absolute before:left-0 before:top-2 before:bottom-2 before:w-1 before:bg-treasury-primary before:rounded-full\"\n                        : \"text-treasury-ink\"\n                    }`}\n                  >\n                    {item.title}\n                  </Link>\n                </SheetClose>\n              ))}\n            </div>\n\n            <div className=\"mt-auto border-t border-treasury-base-light\">\n              {footerItems.map((item) => (\n                <SheetClose asChild key={item.title}>\n                  <Link\n                    href={item.url}\n                    className={`relative block px-4 py-4 border-b border-treasury-base-light transition-colors hover:text-treasury-primary ${\n                      pathname === item.url\n                        ? \"text-treasury-primary before:absolute before:left-0 before:top-2 before:bottom-2 before:w-1 before:bg-treasury-primary before:rounded-full\"\n                        : \"text-treasury-ink\"\n                    }`}\n                  >\n                    {item.title}\n                  </Link>\n                </SheetClose>\n              ))}\n              <form action={logoutAction}>\n                <SheetClose asChild>\n                  <button\n                    type=\"submit\"\n                    className=\"flex items-center gap-3 px-4 py-4 text-treasury-ink transition-colors hover:text-treasury-primary\"\n                  >\n                    <LogOut className=\"h-5 w-5\" />\n                    Log out\n                  </button>\n                </SheetClose>\n              </form>\n            </div>\n          </nav>\n        </SheetContent>\n      </Sheet>\n\n      {showSearch && (\n        <CommandDialog open={commandOpen} onOpenChange={setCommandOpen}>\n          <Command>\n            <CommandInput placeholder=\"Search or jump to...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n\n              {groups.map((group, groupIndex) => (\n                <div key={group.heading}>\n                  {groupIndex > 0 && <CommandSeparator />}\n                  <CommandGroup heading={group.heading}>\n                    {group.items.map((item) => (\n                      <CommandItem\n                        key={item.label}\n                        onSelect={() =>\n                          runCommand(() => {\n                            if (item.action) {\n                              item.action()\n                            } else if (item.href) {\n                              router.push(item.href)\n                            }\n                          })\n                        }\n                      >\n                        {item.icon && <item.icon />}\n                        <span className=\"flex-1\">{item.label}</span>\n                      </CommandItem>\n                    ))}\n                  </CommandGroup>\n                </div>\n              ))}\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      )}\n\n      <form ref={logoutFormRef} action={logoutAction} className=\"hidden\">\n        <button type=\"submit\">Log out</button>\n      </form>\n    </header>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}