{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "header",
  "title": "Header",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/header/Header01.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Boxes, Menu, X } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'\n\nconst mobileOpen = ref(false)\n</script>\n\n<template>\n  <header\n    data-slot=\"header-01\"\n    class=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur\"\n  >\n    <div class=\"mx-auto flex h-16 max-w-6xl items-center justify-between px-6\">\n      <a href=\"#\" class=\"flex items-center gap-2\">\n        <div class=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n          <Boxes class=\"size-4\" />\n        </div>\n        <span class=\"text-base font-semibold\">Acme</span>\n      </a>\n\n      <nav class=\"hidden items-center gap-6 md:flex\" aria-label=\"Primary\">\n        <a href=\"#features\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Features</a>\n        <a href=\"#pricing\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Pricing</a>\n        <a href=\"#customers\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Customers</a>\n        <a href=\"#docs\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Docs</a>\n        <a href=\"#blog\" class=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">Blog</a>\n      </nav>\n\n      <div class=\"hidden items-center gap-2 md:flex\">\n        <Button variant=\"ghost\" size=\"sm\">Sign in</Button>\n        <Button size=\"sm\">Start free trial</Button>\n      </div>\n\n      <Sheet v-model:open=\"mobileOpen\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\" aria-label=\"Open menu\">\n            <Menu class=\"size-5\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"right\" class=\"w-72\">\n          <div class=\"flex h-full flex-col\">\n            <div class=\"flex items-center justify-between border-b px-4 py-3\">\n              <div class=\"flex items-center gap-2\">\n                <div class=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md\">\n                  <Boxes class=\"size-3.5\" />\n                </div>\n                <span class=\"text-sm font-semibold\">Acme</span>\n              </div>\n              <Button variant=\"ghost\" size=\"icon\" class=\"size-8\" aria-label=\"Close menu\" @click=\"mobileOpen = false\">\n                <X class=\"size-4\" />\n              </Button>\n            </div>\n            <nav class=\"flex flex-1 flex-col gap-1 p-4\" aria-label=\"Mobile\">\n              <a\n                href=\"#features\"\n                class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                @click=\"mobileOpen = false\"\n                >Features</a\n              >\n              <a\n                href=\"#pricing\"\n                class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                @click=\"mobileOpen = false\"\n                >Pricing</a\n              >\n              <a\n                href=\"#customers\"\n                class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                @click=\"mobileOpen = false\"\n                >Customers</a\n              >\n              <a\n                href=\"#docs\"\n                class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                @click=\"mobileOpen = false\"\n                >Docs</a\n              >\n              <a\n                href=\"#blog\"\n                class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                @click=\"mobileOpen = false\"\n                >Blog</a\n              >\n            </nav>\n            <div class=\"flex flex-col gap-2 border-t p-4\">\n              <Button variant=\"outline\" class=\"w-full\">Sign in</Button>\n              <Button class=\"w-full\">Start free trial</Button>\n            </div>\n          </div>\n        </SheetContent>\n      </Sheet>\n    </div>\n  </header>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/header/Header01.vue"
    },
    {
      "path": "packages/registry-vue/blocks/header/HeaderAnnouncementStack.vue",
      "content": "<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { ArrowRight, Layers, Menu, X } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst STORAGE_KEY = 'uipkge:announcement-dismissed'\n\nconst links = [\n  { label: 'Platform', href: '#platform' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n  { label: 'Docs', href: '#docs' },\n]\n\n// Rendered on the server and dismissed only on the client, so there is no flash\n// of a strip that then vanishes.\nconst dismissed = ref(false)\nconst open = ref(false)\n\nfunction dismiss() {\n  dismissed.value = true\n  try {\n    window.sessionStorage.setItem(STORAGE_KEY, '1')\n  } catch {\n    // Blocked storage: the dismissal still holds for this page view.\n  }\n}\n\nonMounted(() => {\n  try {\n    dismissed.value = window.sessionStorage.getItem(STORAGE_KEY) === '1'\n  } catch {\n    dismissed.value = false\n  }\n})\n</script>\n\n<template>\n  <div data-slot=\"header-announcement-stack\" class=\"sticky top-0 z-40\">\n    <div v-if=\"!dismissed\" class=\"border-border bg-muted/60 border-b backdrop-blur\">\n      <div class=\"mx-auto flex h-10 max-w-6xl items-center gap-3 px-6 text-sm\">\n        <Badge variant=\"secondary\" class=\"shrink-0\">New</Badge>\n        <p class=\"min-w-0 truncate\">\n          Row-level scoping now evaluates against SCIM groups.\n          <a href=\"#changelog\" class=\"hover:text-foreground underline underline-offset-4\">Read the changelog</a>\n        </p>\n        <ArrowRight class=\"text-muted-foreground hidden size-3.5 shrink-0 sm:block\" aria-hidden=\"true\" />\n        <Button\n          variant=\"ghost\"\n          size=\"icon\"\n          class=\"ml-auto size-7 shrink-0\"\n          aria-label=\"Dismiss announcement\"\n          @click=\"dismiss\"\n        >\n          <X class=\"size-3.5\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </div>\n\n    <header class=\"border-border bg-background/90 border-b backdrop-blur\">\n      <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n        <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n          <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n          Northwind\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        <div class=\"ml-auto hidden items-center gap-2 md:flex\">\n          <Button variant=\"ghost\" size=\"sm\">Sign in</Button>\n          <Button size=\"sm\">Book a demo</Button>\n        </div>\n\n        <Sheet v-model:open=\"open\">\n          <SheetTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"ml-auto 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=\"open = 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>Book a demo</Button>\n            </div>\n          </SheetContent>\n        </Sheet>\n      </div>\n    </header>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/header/HeaderAnnouncementStack.vue"
    },
    {
      "path": "packages/registry-vue/blocks/header/HeaderCenteredLogo.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Compass, Menu, ShoppingBag, User } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst leftLinks = [\n  { label: 'Collections', href: '#collections' },\n  { label: 'New in', href: '#new' },\n  { label: 'Studio', href: '#studio' },\n]\nconst rightLinks = [\n  { label: 'Journal', href: '#journal' },\n  { label: 'Stockists', href: '#stockists' },\n  { label: 'Contact', href: '#contact' },\n]\n\nconst open = ref(false)\nconst linkClass =\n  'text-muted-foreground hover:text-foreground 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</script>\n\n<template>\n  <header data-slot=\"header-centered-logo\" class=\"border-border bg-background border-b\">\n    <div class=\"mx-auto flex h-16 max-w-6xl items-center px-6\">\n      <!-- Equal-basis flanks keep the wordmark optically centred regardless of\n           how long the link labels are. -->\n      <nav class=\"hidden flex-1 basis-0 items-center gap-1 lg:flex\" aria-label=\"Primary left\">\n        <a v-for=\"link in leftLinks\" :key=\"link.href\" :href=\"link.href\" :class=\"linkClass\">{{ link.label }}</a>\n      </nav>\n\n      <Sheet v-model:open=\"open\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"lg:hidden\" aria-label=\"Open navigation menu\">\n            <Menu class=\"size-5\" aria-hidden=\"true\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\" 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 [...leftLinks, ...rightLinks]\"\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=\"open = false\"\n            >\n              {{ link.label }}\n            </a>\n          </nav>\n          <Separator class=\"my-5\" />\n          <Button class=\"w-full\">Account</Button>\n        </SheetContent>\n      </Sheet>\n\n      <a\n        href=\"#top\"\n        class=\"mx-auto flex items-center gap-2 text-base font-semibold tracking-[0.18em] uppercase lg:mx-6\"\n      >\n        <Compass class=\"text-primary size-4\" aria-hidden=\"true\" />\n        Halden\n      </a>\n\n      <nav class=\"hidden flex-1 basis-0 items-center justify-end gap-1 lg:flex\" aria-label=\"Primary right\">\n        <a v-for=\"link in rightLinks\" :key=\"link.href\" :href=\"link.href\" :class=\"linkClass\">{{ link.label }}</a>\n      </nav>\n\n      <div class=\"flex items-center gap-1 lg:ml-4\">\n        <Button variant=\"ghost\" size=\"icon\" aria-label=\"Account\">\n          <User class=\"size-4\" aria-hidden=\"true\" />\n        </Button>\n        <Button variant=\"ghost\" size=\"icon\" aria-label=\"Bag\">\n          <ShoppingBag class=\"size-4\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </div>\n  </header>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/header/HeaderCenteredLogo.vue"
    },
    {
      "path": "packages/registry-vue/blocks/header/HeaderFloatingPill.vue",
      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue'\nimport { Menu, CircleDot } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\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: 'Customers', href: '#customers' },\n  { label: 'Docs', href: '#docs' },\n]\n\nconst active = ref(0)\nconst open = ref(false)\nconst navEl = ref<HTMLElement | null>(null)\n// Measured from the live element, so the indicator fits any label length or\n// font — no hard-coded widths to drift out of sync with the copy.\nconst indicator = ref({ left: 0, width: 0 })\n\nfunction measure(index = active.value) {\n  const items = navEl.value?.querySelectorAll<HTMLElement>('[data-pill-link]')\n  const el = items?.[index]\n  if (!el) return\n  indicator.value = { left: el.offsetLeft, width: el.offsetWidth }\n}\n\nlet observer: ResizeObserver | undefined\n\nonMounted(() => {\n  measure()\n  if ('ResizeObserver' in window && navEl.value) {\n    observer = new ResizeObserver(() => measure())\n    observer.observe(navEl.value)\n  }\n})\n\nonBeforeUnmount(() => observer?.disconnect())\n</script>\n\n<template>\n  <div data-slot=\"header-floating-pill\" class=\"pointer-events-none sticky top-0 z-40 px-4 pt-4\">\n    <header\n      class=\"border-border bg-card/85 pointer-events-auto mx-auto flex h-14 max-w-4xl items-center gap-3 rounded-full border px-3 shadow-sm backdrop-blur\"\n    >\n      <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 pl-2 font-semibold tracking-tight\">\n        <CircleDot class=\"text-primary size-4\" aria-hidden=\"true\" />\n        Verity\n      </a>\n\n      <nav ref=\"navEl\" class=\"relative hidden items-center md:flex\" aria-label=\"Primary\">\n        <span\n          class=\"bg-muted absolute inset-y-1 rounded-full transition-colors duration-200 ease-out\"\n          :style=\"{ left: `${indicator.left}px`, width: `${indicator.width}px` }\"\n          aria-hidden=\"true\"\n        />\n        <a\n          v-for=\"(link, index) in links\"\n          :key=\"link.href\"\n          :href=\"link.href\"\n          data-pill-link\n          class=\"focus-visible:ring-ring relative rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n          :class=\"index === active ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'\"\n          :aria-current=\"index === active ? 'page' : undefined\"\n          @mouseenter=\"measure(index)\"\n          @mouseleave=\"measure()\"\n          @focus=\"measure(index)\"\n          @blur=\"measure()\"\n          @click=\"active = index\"\n        >\n          {{ link.label }}\n        </a>\n      </nav>\n\n      <Button size=\"sm\" class=\"ml-auto rounded-full\">Start free</Button>\n\n      <Sheet v-model:open=\"open\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"rounded-full md:hidden\" aria-label=\"Open navigation menu\">\n            <Menu class=\"size-5\" aria-hidden=\"true\" />\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"top\">\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=\"open = false\"\n            >\n              {{ link.label }}\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n    </header>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/header/HeaderFloatingPill.vue"
    },
    {
      "path": "packages/registry-vue/blocks/header/HeaderMegaMenu.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { ArrowRight, BarChart3, BookOpen, Boxes, Layers, LifeBuoy, Lock, Menu, Workflow } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/components/ui/navigation-menu'\nimport { Separator } from '@/components/ui/separator'\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'\n\nconst menus = [\n  {\n    label: 'Product',\n    groups: [\n      {\n        heading: 'Core',\n        items: [\n          { icon: Boxes, title: 'Metric layer', body: 'Versioned definitions your whole org shares.' },\n          { icon: BarChart3, title: 'Dashboards', body: 'Composed from certified metrics, not raw SQL.' },\n          { icon: Workflow, title: 'Pipelines', body: 'Scheduled materialisation with cost ceilings.' },\n        ],\n      },\n      {\n        heading: 'Governance',\n        items: [\n          { icon: Lock, title: 'Row-level access', body: 'Scope evaluated per query, per identity.' },\n          { icon: BookOpen, title: 'Change history', body: 'Every definition edit reviewed and revertible.' },\n          { icon: LifeBuoy, title: 'Audit exports', body: 'Generated from the same history, not by hand.' },\n        ],\n      },\n    ],\n    highlight: {\n      title: 'Ship your first dashboard today',\n      body: 'Connect a warehouse, publish one certified metric, and invite the team. No migration required.',\n      cta: 'Start the walkthrough',\n    },\n  },\n  {\n    label: 'Resources',\n    groups: [\n      {\n        heading: 'Learn',\n        items: [\n          { icon: BookOpen, title: 'Documentation', body: 'Setup, modelling, and the access model.' },\n          { icon: Layers, title: 'Guides', body: 'Reconciliation and first-close checklists.' },\n          { icon: BarChart3, title: 'Benchmarks', body: 'Close speed across 240 finance teams.' },\n        ],\n      },\n      {\n        heading: 'Support',\n        items: [\n          { icon: LifeBuoy, title: 'Help centre', body: 'Answers to the questions support gets most.' },\n          { icon: Workflow, title: 'Status', body: 'Live uptime and incident history.' },\n          { icon: Lock, title: 'Trust centre', body: 'SOC 2, subprocessors, and data residency.' },\n        ],\n      },\n    ],\n    highlight: {\n      title: 'Read the rollout plan',\n      body: 'The five-week implementation we run for every customer, written down so you can run it yourself.',\n      cta: 'Open the plan',\n    },\n  },\n]\n\nconst plainLinks = [\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Customers', href: '#customers' },\n]\n\nconst open = ref(false)\n</script>\n\n<template>\n  <header data-slot=\"header-mega-menu\" class=\"border-border bg-background/90 border-b backdrop-blur\">\n    <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n      <a href=\"#top\" class=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n        <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n        Northwind\n      </a>\n\n      <NavigationMenu class=\"hidden lg:flex\">\n        <NavigationMenuList>\n          <NavigationMenuItem v-for=\"menu in menus\" :key=\"menu.label\">\n            <NavigationMenuTrigger>{{ menu.label }}</NavigationMenuTrigger>\n            <NavigationMenuContent>\n              <div class=\"grid w-[46rem] grid-cols-[1fr_1fr_16rem] gap-6 p-6\">\n                <div v-for=\"group in menu.groups\" :key=\"group.heading\">\n                  <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">\n                    {{ group.heading }}\n                  </p>\n                  <ul class=\"mt-3 space-y-1\">\n                    <li v-for=\"item in group.items\" :key=\"item.title\">\n                      <a\n                        href=\"#\"\n                        class=\"hover:bg-muted focus-visible:ring-ring flex gap-3 rounded-md p-2 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                      >\n                        <component\n                          :is=\"item.icon\"\n                          class=\"text-muted-foreground mt-0.5 size-4 shrink-0\"\n                          aria-hidden=\"true\"\n                        />\n                        <span class=\"min-w-0\">\n                          <span class=\"block text-sm font-medium\">{{ item.title }}</span>\n                          <span class=\"text-muted-foreground block text-xs leading-snug\">{{ item.body }}</span>\n                        </span>\n                      </a>\n                    </li>\n                  </ul>\n                </div>\n\n                <!-- Highlight rail: one promoted destination per panel, on the\n                     muted surface so it reads as an aside, not a sixth link. -->\n                <div class=\"bg-muted/50 flex flex-col rounded-lg p-4\">\n                  <p class=\"text-sm font-semibold\">{{ menu.highlight.title }}</p>\n                  <p class=\"text-muted-foreground mt-2 text-xs leading-relaxed\">{{ menu.highlight.body }}</p>\n                  <Button variant=\"link\" class=\"mt-auto h-auto justify-start p-0 pt-4 text-xs\">\n                    {{ menu.highlight.cta }}\n                    <ArrowRight class=\"ml-1 size-3\" aria-hidden=\"true\" />\n                  </Button>\n                </div>\n              </div>\n            </NavigationMenuContent>\n          </NavigationMenuItem>\n\n          <NavigationMenuItem v-for=\"link in plainLinks\" :key=\"link.href\">\n            <a :href=\"link.href\" :class=\"navigationMenuTriggerStyle()\">{{ link.label }}</a>\n          </NavigationMenuItem>\n        </NavigationMenuList>\n      </NavigationMenu>\n\n      <div class=\"ml-auto flex items-center gap-2\">\n        <Button variant=\"ghost\" size=\"sm\" class=\"hidden sm:inline-flex\">Sign in</Button>\n        <Separator orientation=\"vertical\" class=\"hidden h-5 sm:block\" />\n        <Button size=\"sm\">Book a demo</Button>\n      </div>\n\n      <Sheet v-model:open=\"open\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"ml-auto lg: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 overflow-y-auto\">\n          <SheetHeader>\n            <SheetTitle>Menu</SheetTitle>\n          </SheetHeader>\n          <nav class=\"mt-6 grid gap-5\" aria-label=\"Mobile\">\n            <div v-for=\"menu in menus\" :key=\"menu.label\">\n              <p class=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{{ menu.label }}</p>\n              <ul class=\"mt-2 grid gap-1\">\n                <li v-for=\"group in menu.groups\" :key=\"group.heading\">\n                  <a\n                    v-for=\"item in group.items\"\n                    :key=\"item.title\"\n                    href=\"#\"\n                    class=\"hover:bg-muted block rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                    @click=\"open = false\"\n                  >\n                    {{ item.title }}\n                  </a>\n                </li>\n              </ul>\n            </div>\n            <Separator />\n            <a\n              v-for=\"link in plainLinks\"\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=\"open = false\"\n            >\n              {{ link.label }}\n            </a>\n            <Separator />\n            <div class=\"grid gap-2\">\n              <Button variant=\"outline\">Sign in</Button>\n              <Button>Book a demo</Button>\n            </div>\n          </nav>\n        </SheetContent>\n      </Sheet>\n    </div>\n  </header>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/header/HeaderMegaMenu.vue"
    },
    {
      "path": "packages/registry-vue/blocks/header/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  CommandSeparator,\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: 'Documentation', href: '#docs' },\n  { label: 'Components', href: '#components' },\n  { label: 'Templates', href: '#templates' },\n  { label: 'Showcase', href: '#showcase' },\n]\n\nconst groups = [\n  {\n    heading: 'Documentation',\n    items: [\n      { icon: BookOpen, label: 'Getting started' },\n      { icon: FileText, label: 'Installation guide' },\n      { icon: BarChart3, label: 'Telemetry & analytics' },\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/header/HeaderSearchCommand.vue"
    },
    {
      "path": "packages/registry-vue/blocks/header/HeaderTransparentScroll.vue",
      "content": "<script setup lang=\"ts\">\nimport { onBeforeUnmount, onMounted, ref } from 'vue'\nimport { Layers, Menu } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\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: 'Solutions', href: '#solutions' },\n  { label: 'Pricing', href: '#pricing' },\n  { label: 'Docs', href: '#docs' },\n]\n\n// Starts unscrolled so server and first client paint agree; the listener is the\n// only thing that swaps in the solid surface.\nconst scrolled = ref(false)\nconst open = ref(false)\n\nfunction onScroll() {\n  scrolled.value = window.scrollY > 24\n}\n\nonMounted(() => {\n  onScroll()\n  window.addEventListener('scroll', onScroll, { passive: true })\n})\n\nonBeforeUnmount(() => window.removeEventListener('scroll', onScroll))\n</script>\n\n<template>\n  <header\n    data-slot=\"header-transparent-scroll\"\n    class=\"fixed inset-x-0 top-0 z-40 transition-colors duration-200\"\n    :class=\"scrolled ? 'border-border bg-background/85 border-b backdrop-blur' : 'border-b border-transparent'\"\n  >\n    <div class=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n      <a href=\"#top\" class=\"flex items-center gap-2 font-semibold tracking-tight\">\n        <Layers class=\"text-primary size-5\" aria-hidden=\"true\" />\n        Northwind\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      <div class=\"ml-auto hidden items-center gap-2 md:flex\">\n        <Button variant=\"ghost\" size=\"sm\">Sign in</Button>\n        <Button size=\"sm\">Start free</Button>\n      </div>\n\n      <Sheet v-model:open=\"open\">\n        <SheetTrigger as-child>\n          <Button variant=\"ghost\" size=\"icon\" class=\"ml-auto 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=\"open = 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  </header>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/header/HeaderTransparentScroll.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "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/navigation-menu.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/sheet.json"
  ],
  "description": "Site header collection: sticky top bar, dismissible announcement stack, centered-logo split, floating pill, full-width mega menu, inline search with command palette, and a transparent-over-hero scroll variant — each with a mobile sheet fallback.",
  "categories": [
    "marketing"
  ]
}