{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "header-search-command",
  "title": "Header — Inline Search",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/header-search-command/HeaderSearchCommand.vue",
      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue'\nimport { BarChart3, BookOpen, Compass, FileText, History, Menu, Search, Users } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport { Kbd } from '@/components/ui/kbd'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst links = [\n  { label: 'Product', href: '#product' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n]\n\nconst groups = [\n  {\n    heading: 'Documentation',\n    items: [\n      { icon: BookOpen, label: 'Connect a warehouse' },\n      { icon: FileText, label: 'Define your first metric' },\n      { icon: BarChart3, label: 'Publish a dashboard' },\n    ],\n  },\n  {\n    heading: 'Company',\n    items: [\n      { icon: Users, label: 'Customer stories' },\n      { icon: History, label: 'Changelog' },\n    ],\n  },\n]\n\nconst open = ref(false)\nconst menuOpen = ref(false)\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey)) return\n  event.preventDefault()\n  open.value = !open.value\n}\n\nonMounted(() => window.addEventListener('keydown', onKeydown))\nonBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))\n</script>\n\n<template>\n  <header data-slot=\"header-search-command\" class=\"border-border bg-background/90 border-b backdrop-blur\">\n    <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-4 px-6\">\n      <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n        <Compass class=\"text-primary size-5\" aria-hidden=\"true\" />\n        Halden\n      </a>\n\n      <nav class=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n        <a\n          v-for=\"link in links\"\n          :key=\"link.href\"\n          :href=\"link.href\"\n          class=\"text-muted-foreground hover:text-foreground hover:bg-muted focus-visible:ring-ring rounded-md px-3 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        >\n          {{ link.label }}\n        </a>\n      </nav>\n\n      <!-- Trigger is a button, not an input: the real field lives in the dialog,\n           so focus lands there and the shortcut hint stays visible until then. -->\n      <button\n        type=\"button\"\n        class=\"border-border bg-muted/40 text-muted-foreground hover:bg-muted focus-visible:ring-ring ml-auto flex h-9 w-full max-w-64 items-center gap-2 rounded-md border px-3 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n        @click=\"open = true\"\n      >\n        <Search class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n        <span class=\"truncate\">Search docs…</span>\n        <Kbd class=\"ml-auto hidden sm:inline-flex\">⌘K</Kbd>\n      </button>\n\n      <Separator orientation=\"vertical\" class=\"hidden h-5 md:block\" />\n      <Button size=\"sm\" class=\"hidden shrink-0 sm:inline-flex\">Start free</Button>\n\n      <Sheet v-model:open=\"menuOpen\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"shrink-0 md:hidden\" aria-label=\"Open navigation menu\">\n            <Menu class=\"size-5\" aria-hidden=\"true\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\" class=\"w-72\">\n          <SheetHeader>\n            <SheetTitle>Menu</SheetTitle>\n          </SheetHeader>\n          <nav class=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n            <a\n              v-for=\"link in links\"\n              :key=\"link.href\"\n              :href=\"link.href\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              @click=\"menuOpen = false\"\n            >\n              {{ link.label }}\n            </a>\n          </nav>\n          <Separator class=\"my-5\" />\n          <div class=\"grid gap-2\">\n            <Button variant=\"outline\">Sign in</Button>\n            <Button>Start free</Button>\n          </div>\n        </SheetContent>\n      </Sheet>\n    </div>\n\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Search documentation, guides, and stories…\" />\n      <CommandList>\n        <CommandEmpty>No results.</CommandEmpty>\n        <CommandGroup v-for=\"group in groups\" :key=\"group.heading\" :heading=\"group.heading\">\n          <CommandItem v-for=\"item in group.items\" :key=\"item.label\" :value=\"item.label\">\n            <component :is=\"item.icon\" class=\"text-muted-foreground mr-2 size-4\" aria-hidden=\"true\" />\n            {{ item.label }}\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </header>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeaderSearchCommand.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/command.json",
    "https://uipkge.dev/r/vue/kbd.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/sheet.json"
  ],
  "description": "Navbar with an inline search trigger that opens a command palette on click or ⌘K, listing grouped results with keyboard hints alongside the usual nav links and CTA.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "header"
}