{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "header",
  "title": "Header",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/header/Header01.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Boxes, Menu, X } from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet'\n\nexport function Header01() {\n  const [mobileOpen, setMobileOpen] = React.useState(false)\n\n  return (\n    <header\n      data-slot=\"header-01\"\n      className=\"bg-background/80 supports-[backdrop-filter]:bg-background/60 sticky top-0 z-40 border-b backdrop-blur\"\n    >\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center justify-between px-6\">\n        <a href=\"#\" className=\"flex items-center gap-2\">\n          <div className=\"bg-primary text-primary-foreground flex size-8 items-center justify-center rounded-md\">\n            <Boxes className=\"size-4\" />\n          </div>\n          <span className=\"text-base font-semibold\">Acme</span>\n        </a>\n\n        <nav className=\"hidden items-center gap-6 md:flex\" aria-label=\"Primary\">\n          <a href=\"#features\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n            Features\n          </a>\n          <a href=\"#pricing\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n            Pricing\n          </a>\n          <a href=\"#customers\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n            Customers\n          </a>\n          <a href=\"#docs\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n            Docs\n          </a>\n          <a href=\"#blog\" className=\"text-muted-foreground hover:text-foreground text-sm transition-colors\">\n            Blog\n          </a>\n        </nav>\n\n        <div className=\"hidden items-center gap-2 md:flex\">\n          <Button variant=\"ghost\" size=\"sm\">\n            Sign in\n          </Button>\n          <Button size=\"sm\">Start free trial</Button>\n        </div>\n\n        <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"md:hidden\" aria-label=\"Open menu\">\n              <Menu className=\"size-5\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" className=\"w-72\">\n            <div className=\"flex h-full flex-col\">\n              <div className=\"flex items-center justify-between border-b px-4 py-3\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"bg-primary text-primary-foreground flex size-7 items-center justify-center rounded-md\">\n                    <Boxes className=\"size-3.5\" />\n                  </div>\n                  <span className=\"text-sm font-semibold\">Acme</span>\n                </div>\n                <Button\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-8\"\n                  aria-label=\"Close menu\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  <X className=\"size-4\" />\n                </Button>\n              </div>\n              <nav className=\"flex flex-1 flex-col gap-1 p-4\" aria-label=\"Mobile\">\n                <a\n                  href=\"#features\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Features\n                </a>\n                <a\n                  href=\"#pricing\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Pricing\n                </a>\n                <a\n                  href=\"#customers\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Customers\n                </a>\n                <a\n                  href=\"#docs\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Docs\n                </a>\n                <a\n                  href=\"#blog\"\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n                  onClick={() => setMobileOpen(false)}\n                >\n                  Blog\n                </a>\n              </nav>\n              <div className=\"flex flex-col gap-2 border-t p-4\">\n                <Button variant=\"outline\" className=\"w-full\">\n                  Sign in\n                </Button>\n                <Button className=\"w-full\">Start free trial</Button>\n              </div>\n            </div>\n          </SheetContent>\n        </Sheet>\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/header/Header01.tsx"
    },
    {
      "path": "packages/registry-react/blocks/header/HeaderAnnouncementStack.tsx",
      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { ArrowRight, Menu, Layers, X } from 'lucide-react'\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\nexport function HeaderAnnouncementStack() {\n  // Rendered on the server and dismissed only on the client, so there is no\n  // flash of a strip that then vanishes.\n  const [dismissed, setDismissed] = useState(false)\n  const [open, setOpen] = useState(false)\n\n  useEffect(() => {\n    try {\n      setDismissed(window.sessionStorage.getItem(STORAGE_KEY) === '1')\n    } catch {\n      setDismissed(false)\n    }\n  }, [])\n\n  function dismiss() {\n    setDismissed(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\n  return (\n    <div data-slot=\"header-announcement-stack\" className=\"sticky top-0 z-40\">\n      {!dismissed && (\n        <div className=\"border-border bg-muted/60 border-b backdrop-blur\">\n          <div className=\"mx-auto flex h-10 max-w-6xl items-center gap-3 px-6 text-sm\">\n            <Badge variant=\"secondary\" className=\"shrink-0\">\n              New\n            </Badge>\n            <p className=\"min-w-0 truncate\">\n              Row-level scoping now evaluates against SCIM groups.{' '}\n              <a href=\"#changelog\" className=\"hover:text-foreground underline underline-offset-4\">\n                Read the changelog\n              </a>\n            </p>\n            <ArrowRight className=\"text-muted-foreground hidden size-3.5 shrink-0 sm:block\" aria-hidden=\"true\" />\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              className=\"ml-auto size-7 shrink-0\"\n              aria-label=\"Dismiss announcement\"\n              onClick={dismiss}\n            >\n              <X className=\"size-3.5\" aria-hidden=\"true\" />\n            </Button>\n          </div>\n        </div>\n      )}\n\n      <header className=\"border-border bg-background/90 border-b backdrop-blur\">\n        <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n          <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n            <Layers className=\"text-primary size-5\" aria-hidden=\"true\" />\n            Northwind\n          </a>\n\n          <nav className=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n            {links.map((link) => (\n              <a\n                key={link.href}\n                href={link.href}\n                className=\"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            ))}\n          </nav>\n\n          <div className=\"ml-auto hidden items-center gap-2 md:flex\">\n            <Button variant=\"ghost\" size=\"sm\">\n              Sign in\n            </Button>\n            <Button size=\"sm\">Book a demo</Button>\n          </div>\n\n          <Sheet open={open} onOpenChange={setOpen}>\n            <SheetTrigger asChild>\n              <Button variant=\"ghost\" size=\"icon\" className=\"ml-auto md:hidden\" aria-label=\"Open navigation menu\">\n                <Menu className=\"size-5\" aria-hidden=\"true\" />\n              </Button>\n            </SheetTrigger>\n            <SheetContent side=\"right\" className=\"w-72\">\n              <SheetHeader>\n                <SheetTitle>Menu</SheetTitle>\n              </SheetHeader>\n              <nav className=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n                {links.map((link) => (\n                  <a\n                    key={link.href}\n                    href={link.href}\n                    className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                    onClick={() => setOpen(false)}\n                  >\n                    {link.label}\n                  </a>\n                ))}\n              </nav>\n              <Separator className=\"my-5\" />\n              <div className=\"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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/header/HeaderAnnouncementStack.tsx"
    },
    {
      "path": "packages/registry-react/blocks/header/HeaderCenteredLogo.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Compass, Menu, ShoppingBag, User } from 'lucide-react'\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 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\nexport function HeaderCenteredLogo() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <header data-slot=\"header-centered-logo\" className=\"border-border bg-background border-b\">\n      <div className=\"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 className=\"hidden flex-1 basis-0 items-center gap-1 lg:flex\" aria-label=\"Primary left\">\n          {leftLinks.map((link) => (\n            <a key={link.href} href={link.href} className={linkClass}>\n              {link.label}\n            </a>\n          ))}\n        </nav>\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"lg:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" className=\"w-72\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              {[...leftLinks, ...rightLinks].map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n            <Separator className=\"my-5\" />\n            <Button className=\"w-full\">Account</Button>\n          </SheetContent>\n        </Sheet>\n\n        <a\n          href=\"#top\"\n          className=\"mx-auto flex items-center gap-2 text-base font-semibold tracking-[0.18em] uppercase lg:mx-6\"\n        >\n          <Compass className=\"text-primary size-4\" aria-hidden=\"true\" />\n          Halden\n        </a>\n\n        <nav className=\"hidden flex-1 basis-0 items-center justify-end gap-1 lg:flex\" aria-label=\"Primary right\">\n          {rightLinks.map((link) => (\n            <a key={link.href} href={link.href} className={linkClass}>\n              {link.label}\n            </a>\n          ))}\n        </nav>\n\n        <div className=\"flex items-center gap-1 lg:ml-4\">\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Account\">\n            <User className=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n          <Button variant=\"ghost\" size=\"icon\" aria-label=\"Bag\">\n            <ShoppingBag className=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n      </div>\n    </header>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/header/HeaderCenteredLogo.tsx"
    },
    {
      "path": "packages/registry-react/blocks/header/HeaderFloatingPill.tsx",
      "content": "'use client'\n\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport { CircleDot, Menu } from 'lucide-react'\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\nexport function HeaderFloatingPill() {\n  const [active, setActive] = useState(0)\n  const [open, setOpen] = useState(false)\n  const navRef = useRef<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.\n  const [indicator, setIndicator] = useState({ left: 0, width: 0 })\n\n  const measure = useCallback(\n    (index = active) => {\n      const el = navRef.current?.querySelectorAll<HTMLElement>('[data-pill-link]')[index]\n      if (el) setIndicator({ left: el.offsetLeft, width: el.offsetWidth })\n    },\n    [active],\n  )\n\n  useEffect(() => {\n    measure()\n    const nav = navRef.current\n    if (!nav || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(() => measure())\n    observer.observe(nav)\n    return () => observer.disconnect()\n  }, [measure])\n\n  return (\n    <div data-slot=\"header-floating-pill\" className=\"pointer-events-none sticky top-0 z-40 px-4 pt-4\">\n      <header className=\"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        <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 pl-2 font-semibold tracking-tight\">\n          <CircleDot className=\"text-primary size-4\" aria-hidden=\"true\" />\n          Verity\n        </a>\n\n        <nav ref={navRef} className=\"relative hidden items-center md:flex\" aria-label=\"Primary\">\n          <span\n            className=\"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          {links.map((link, index) => (\n            <a\n              key={link.href}\n              href={link.href}\n              data-pill-link\n              className={`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                index === active ? 'text-foreground' : 'text-muted-foreground hover:text-foreground'\n              }`}\n              aria-current={index === active ? 'page' : undefined}\n              onMouseEnter={() => measure(index)}\n              onMouseLeave={() => measure()}\n              onFocus={() => measure(index)}\n              onBlur={() => measure()}\n              onClick={() => setActive(index)}\n            >\n              {link.label}\n            </a>\n          ))}\n        </nav>\n\n        <Button size=\"sm\" className=\"ml-auto rounded-full\">\n          Start free\n        </Button>\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full md:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"top\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              {links.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n          </SheetContent>\n        </Sheet>\n      </header>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/header/HeaderFloatingPill.tsx"
    },
    {
      "path": "packages/registry-react/blocks/header/HeaderMegaMenu.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { ArrowRight, BarChart3, BookOpen, Boxes, LifeBuoy, Lock, Menu, Layers, Workflow } from 'lucide-react'\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\nexport function HeaderMegaMenu() {\n  const [open, setOpen] = useState(false)\n\n  return (\n    <header data-slot=\"header-mega-menu\" className=\"border-border bg-background/90 border-b backdrop-blur\">\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n        <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n          <Layers className=\"text-primary size-5\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <NavigationMenu className=\"hidden lg:flex\">\n          <NavigationMenuList>\n            {menus.map((menu) => (\n              <NavigationMenuItem key={menu.label}>\n                <NavigationMenuTrigger>{menu.label}</NavigationMenuTrigger>\n                <NavigationMenuContent>\n                  <div className=\"grid w-[46rem] grid-cols-[1fr_1fr_16rem] gap-6 p-6\">\n                    {menu.groups.map((group) => (\n                      <div key={group.heading}>\n                        <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">\n                          {group.heading}\n                        </p>\n                        <ul className=\"mt-3 space-y-1\">\n                          {group.items.map((item) => (\n                            <li key={item.title}>\n                              <a\n                                href=\"#\"\n                                className=\"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                                <item.icon\n                                  className=\"text-muted-foreground mt-0.5 size-4 shrink-0\"\n                                  aria-hidden=\"true\"\n                                />\n                                <span className=\"min-w-0\">\n                                  <span className=\"block text-sm font-medium\">{item.title}</span>\n                                  <span className=\"text-muted-foreground block text-xs leading-snug\">{item.body}</span>\n                                </span>\n                              </a>\n                            </li>\n                          ))}\n                        </ul>\n                      </div>\n                    ))}\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 className=\"bg-muted/50 flex flex-col rounded-lg p-4\">\n                      <p className=\"text-sm font-semibold\">{menu.highlight.title}</p>\n                      <p className=\"text-muted-foreground mt-2 text-xs leading-relaxed\">{menu.highlight.body}</p>\n                      <Button variant=\"link\" className=\"mt-auto h-auto justify-start p-0 pt-4 text-xs\">\n                        {menu.highlight.cta}\n                        <ArrowRight className=\"ml-1 size-3\" aria-hidden=\"true\" />\n                      </Button>\n                    </div>\n                  </div>\n                </NavigationMenuContent>\n              </NavigationMenuItem>\n            ))}\n\n            {plainLinks.map((link) => (\n              <NavigationMenuItem key={link.href}>\n                <a href={link.href} className={navigationMenuTriggerStyle()}>\n                  {link.label}\n                </a>\n              </NavigationMenuItem>\n            ))}\n          </NavigationMenuList>\n        </NavigationMenu>\n\n        <div className=\"ml-auto flex items-center gap-2\">\n          <Button variant=\"ghost\" size=\"sm\" className=\"hidden sm:inline-flex\">\n            Sign in\n          </Button>\n          <Separator orientation=\"vertical\" className=\"hidden h-5 sm:block\" />\n          <Button size=\"sm\">Book a demo</Button>\n        </div>\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"ml-auto lg:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" className=\"w-72 overflow-y-auto\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-5\" aria-label=\"Mobile\">\n              {menus.map((menu) => (\n                <div key={menu.label}>\n                  <p className=\"text-muted-foreground/70 text-xs font-medium tracking-wide uppercase\">{menu.label}</p>\n                  <ul className=\"mt-2 grid gap-1\">\n                    {menu.groups.map((group) =>\n                      group.items.map((item) => (\n                        <li key={item.title}>\n                          <a\n                            href=\"#\"\n                            className=\"hover:bg-muted block rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                            onClick={() => setOpen(false)}\n                          >\n                            {item.title}\n                          </a>\n                        </li>\n                      )),\n                    )}\n                  </ul>\n                </div>\n              ))}\n              <Separator />\n              {plainLinks.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n              <Separator />\n              <div className=\"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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/header/HeaderMegaMenu.tsx"
    },
    {
      "path": "packages/registry-react/blocks/header/HeaderSearchCommand.tsx",
      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { BarChart3, BookOpen, Compass, FileText, History, Menu, Search, Users } from 'lucide-react'\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\nexport function HeaderSearchCommand() {\n  const [open, setOpen] = useState(false)\n  const [menuOpen, setMenuOpen] = useState(false)\n\n  useEffect(() => {\n    const onKeydown = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey)) return\n      event.preventDefault()\n      setOpen((value) => !value)\n    }\n    window.addEventListener('keydown', onKeydown)\n    return () => window.removeEventListener('keydown', onKeydown)\n  }, [])\n\n  return (\n    <header data-slot=\"header-search-command\" className=\"border-border bg-background/90 border-b backdrop-blur\">\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-4 px-6\">\n        <a href=\"#top\" className=\"flex shrink-0 items-center gap-2 font-semibold tracking-tight\">\n          <Compass className=\"text-primary size-5\" aria-hidden=\"true\" />\n          Halden\n        </a>\n\n        <nav className=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n          {links.map((link) => (\n            <a\n              key={link.href}\n              href={link.href}\n              className=\"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          ))}\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          className=\"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          onClick={() => setOpen(true)}\n        >\n          <Search className=\"size-4 shrink-0\" aria-hidden=\"true\" />\n          <span className=\"truncate\">Search docs…</span>\n          <Kbd className=\"ml-auto hidden sm:inline-flex\">⌘K</Kbd>\n        </button>\n\n        <Separator orientation=\"vertical\" className=\"hidden h-5 md:block\" />\n        <Button size=\"sm\" className=\"hidden shrink-0 sm:inline-flex\">\n          Start free\n        </Button>\n\n        <Sheet open={menuOpen} onOpenChange={setMenuOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"shrink-0 md:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" className=\"w-72\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              {links.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setMenuOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n            <Separator className=\"my-5\" />\n            <div className=\"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 open={open} onOpenChange={setOpen}>\n        <CommandInput placeholder=\"Search documentation, guides, and stories…\" />\n        <CommandList>\n          <CommandEmpty>No results.</CommandEmpty>\n          {groups.map((group) => (\n            <CommandGroup key={group.heading} heading={group.heading}>\n              {group.items.map((item) => (\n                <CommandItem key={item.label} value={item.label}>\n                  <item.icon className=\"text-muted-foreground mr-2 size-4\" aria-hidden=\"true\" />\n                  {item.label}\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          ))}\n        </CommandList>\n      </CommandDialog>\n    </header>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/header/HeaderSearchCommand.tsx"
    },
    {
      "path": "packages/registry-react/blocks/header/HeaderTransparentScroll.tsx",
      "content": "'use client'\n\nimport { useEffect, useState } from 'react'\nimport { Menu, Layers } from 'lucide-react'\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\nexport function HeaderTransparentScroll() {\n  // Starts unscrolled so server and first client paint agree; the listener is\n  // the only thing that swaps in the solid surface.\n  const [scrolled, setScrolled] = useState(false)\n  const [open, setOpen] = useState(false)\n\n  useEffect(() => {\n    const onScroll = () => setScrolled(window.scrollY > 24)\n    onScroll()\n    window.addEventListener('scroll', onScroll, { passive: true })\n    return () => window.removeEventListener('scroll', onScroll)\n  }, [])\n\n  return (\n    <header\n      data-slot=\"header-transparent-scroll\"\n      className={`fixed inset-x-0 top-0 z-40 transition-colors duration-200 ${\n        scrolled ? 'border-border bg-background/85 border-b backdrop-blur' : 'border-b border-transparent'\n      }`}\n    >\n      <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-6\">\n        <a href=\"#top\" className=\"flex items-center gap-2 font-semibold tracking-tight\">\n          <Layers className=\"text-primary size-5\" aria-hidden=\"true\" />\n          Northwind\n        </a>\n\n        <nav className=\"hidden items-center gap-1 md:flex\" aria-label=\"Primary\">\n          {links.map((link) => (\n            <a\n              key={link.href}\n              href={link.href}\n              className=\"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          ))}\n        </nav>\n\n        <div className=\"ml-auto hidden items-center gap-2 md:flex\">\n          <Button variant=\"ghost\" size=\"sm\">\n            Sign in\n          </Button>\n          <Button size=\"sm\">Start free</Button>\n        </div>\n\n        <Sheet open={open} onOpenChange={setOpen}>\n          <SheetTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"ml-auto md:hidden\" aria-label=\"Open navigation menu\">\n              <Menu className=\"size-5\" aria-hidden=\"true\" />\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"right\" className=\"w-72\">\n            <SheetHeader>\n              <SheetTitle>Menu</SheetTitle>\n            </SheetHeader>\n            <nav className=\"mt-6 grid gap-1\" aria-label=\"Mobile\">\n              {links.map((link) => (\n                <a\n                  key={link.href}\n                  href={link.href}\n                  className=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                  onClick={() => setOpen(false)}\n                >\n                  {link.label}\n                </a>\n              ))}\n            </nav>\n            <Separator className=\"my-5\" />\n            <div className=\"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  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/header/HeaderTransparentScroll.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/command.json",
    "https://uipkge.dev/r/react/kbd.json",
    "https://uipkge.dev/r/react/navigation-menu.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/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"
  ]
}