{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "header",
  "title": "Header",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/header/Header01.svelte",
      "content": "<script lang=\"ts\">\n  import { Boxes, Menu, X } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Sheet, SheetContent, SheetTrigger } from '$lib/components/ui/sheet'\n\n  let mobileOpen = $state(false)\n</script>\n\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 bind:open={mobileOpen}>\n      <SheetTrigger>\n        {#snippet child({ props })}\n          <Button {...props} variant=\"ghost\" size=\"icon\" class=\"md:hidden\" aria-label=\"Open menu\">\n            <Menu class=\"size-5\" />\n          </Button>\n        {/snippet}\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\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"size-8\"\n              aria-label=\"Close menu\"\n              onclick={() => (mobileOpen = false)}\n            >\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              onclick={() => (mobileOpen = false)}>Features</a\n            >\n            <a\n              href=\"#pricing\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}>Pricing</a\n            >\n            <a\n              href=\"#customers\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}>Customers</a\n            >\n            <a\n              href=\"#docs\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}>Docs</a\n            >\n            <a\n              href=\"#blog\"\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm transition-colors\"\n              onclick={() => (mobileOpen = false)}>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",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header/Header01.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/header/HeaderAnnouncementStack.svelte",
      "content": "<script lang=\"ts\">\n  import { onMount } from 'svelte'\n  import { ArrowRight, Layers, Menu, X } from '@lucide/svelte'\n  import { Badge } from '$lib/components/ui/badge'\n  import { Button } from '$lib/components/ui/button'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '$lib/components/ui/sheet'\n\n  const STORAGE_KEY = 'uipkge:announcement-dismissed'\n\n  const 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.\n  let dismissed = $state(false)\n  let open = $state(false)\n\n  function dismiss() {\n    dismissed = 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  onMount(() => {\n    try {\n      dismissed = window.sessionStorage.getItem(STORAGE_KEY) === '1'\n    } catch {\n      dismissed = false\n    }\n  })\n</script>\n\n<div data-slot=\"header-announcement-stack\" class=\"sticky top-0 z-40\">\n  {#if !dismissed}\n    <div 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          onclick={dismiss}\n        >\n          <X class=\"size-3.5\" aria-hidden=\"true\" />\n        </Button>\n      </div>\n    </div>\n  {/if}\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        {#each links as link (link.href)}\n          <a\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        {/each}\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 bind:open>\n        <SheetTrigger>\n          {#snippet child({ props })}\n            <Button {...props} 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          {/snippet}\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            {#each links as link (link.href)}\n              <a\n                href={link.href}\n                class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                onclick={() => (open = false)}\n              >\n                {link.label}\n              </a>\n            {/each}\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",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header/HeaderAnnouncementStack.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/header/HeaderCenteredLogo.svelte",
      "content": "<script lang=\"ts\">\n  import { Compass, Menu, ShoppingBag, User } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '$lib/components/ui/sheet'\n\n  const leftLinks = [\n    { label: 'Collections', href: '#collections' },\n    { label: 'New in', href: '#new' },\n    { label: 'Studio', href: '#studio' },\n  ]\n  const rightLinks = [\n    { label: 'Journal', href: '#journal' },\n    { label: 'Stockists', href: '#stockists' },\n    { label: 'Contact', href: '#contact' },\n  ]\n\n  let open = $state(false)\n  const 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<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      {#each leftLinks as link (link.href)}\n        <a href={link.href} class={linkClass}>{link.label}</a>\n      {/each}\n    </nav>\n\n    <Sheet bind:open>\n      <SheetTrigger>\n        {#snippet child({ props })}\n          <Button {...props} variant=\"ghost\" size=\"icon\" class=\"lg:hidden\" aria-label=\"Open navigation menu\">\n            <Menu class=\"size-5\" aria-hidden=\"true\" />\n          </Button>\n        {/snippet}\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          {#each [...leftLinks, ...rightLinks] as link (link.href)}\n            <a\n              href={link.href}\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              onclick={() => (open = false)}\n            >\n              {link.label}\n            </a>\n          {/each}\n        </nav>\n        <Separator class=\"my-5\" />\n        <Button class=\"w-full\">Account</Button>\n      </SheetContent>\n    </Sheet>\n\n    <a href=\"#top\" class=\"mx-auto flex items-center gap-2 text-base font-semibold tracking-[0.18em] uppercase lg:mx-6\">\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      {#each rightLinks as link (link.href)}\n        <a href={link.href} class={linkClass}>{link.label}</a>\n      {/each}\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",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header/HeaderCenteredLogo.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/header/HeaderFloatingPill.svelte",
      "content": "<script lang=\"ts\">\n  import { onMount } from 'svelte'\n  import { CircleDot, Menu } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '$lib/components/ui/sheet'\n\n  const links = [\n    { label: 'Product', href: '#product' },\n    { label: 'Pricing', href: '#pricing' },\n    { label: 'Customers', href: '#customers' },\n    { label: 'Docs', href: '#docs' },\n  ]\n\n  let active = $state(0)\n  let open = $state(false)\n  let navEl = $state<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  let indicator = $state({ left: 0, width: 0 })\n\n  function measure(index = active) {\n    const items = navEl?.querySelectorAll<HTMLElement>('[data-pill-link]')\n    const el = items?.[index]\n    if (!el) return\n    indicator = { left: el.offsetLeft, width: el.offsetWidth }\n  }\n\n  onMount(() => {\n    measure()\n    let observer: ResizeObserver | undefined\n    if ('ResizeObserver' in window && navEl) {\n      observer = new ResizeObserver(() => measure())\n      observer.observe(navEl)\n    }\n    return () => observer?.disconnect()\n  })\n</script>\n\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 bind:this={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      ></span>\n      {#each links as link, index (link.href)}\n        <a\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 {index ===\n          active\n            ? 'text-foreground'\n            : 'text-muted-foreground hover:text-foreground'}\"\n          aria-current={index === active ? 'page' : undefined}\n          onmouseenter={() => measure(index)}\n          onmouseleave={() => measure()}\n          onfocus={() => measure(index)}\n          onblur={() => measure()}\n          onclick={() => (active = index)}\n        >\n          {link.label}\n        </a>\n      {/each}\n    </nav>\n\n    <Button size=\"sm\" class=\"ml-auto rounded-full\">Start free</Button>\n\n    <Sheet bind:open>\n      <SheetTrigger>\n        {#snippet child({ props })}\n          <Button {...props} 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        {/snippet}\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          {#each links as link (link.href)}\n            <a\n              href={link.href}\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              onclick={() => (open = false)}\n            >\n              {link.label}\n            </a>\n          {/each}\n        </nav>\n      </SheetContent>\n    </Sheet>\n  </header>\n</div>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header/HeaderFloatingPill.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/header/HeaderMegaMenu.svelte",
      "content": "<script lang=\"ts\">\n  import type { Component } from 'svelte'\n  import {\n    ArrowRight,\n    BarChart3,\n    BookOpen,\n    Boxes,\n    Layers,\n    LifeBuoy,\n    Lock,\n    Menu,\n    Workflow,\n  } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import {\n    NavigationMenu,\n    NavigationMenuContent,\n    NavigationMenuItem,\n    NavigationMenuList,\n    NavigationMenuTrigger,\n    navigationMenuTriggerStyle,\n  } from '$lib/components/ui/navigation-menu'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '$lib/components/ui/sheet'\n\n  interface MegaItem {\n    icon: Component\n    title: string\n    body: string\n  }\n\n  interface MegaGroup {\n    heading: string\n    items: MegaItem[]\n  }\n\n  interface MegaMenu {\n    label: string\n    groups: MegaGroup[]\n    highlight: { title: string; body: string; cta: string }\n  }\n\n  const menus: MegaMenu[] = [\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\n  const plainLinks = [\n    { label: 'Pricing', href: '#pricing' },\n    { label: 'Customers', href: '#customers' },\n  ]\n\n  let open = $state(false)\n</script>\n\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        {#each menus as menu (menu.label)}\n          <NavigationMenuItem value={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                {#each menu.groups as group (group.heading)}\n                  <div>\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                      {#each group.items as item (item.title)}\n                        {@const ItemIcon = item.icon}\n                        <li>\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                            <ItemIcon class=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\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                      {/each}\n                    </ul>\n                  </div>\n                {/each}\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        {/each}\n\n        {#each plainLinks as link (link.href)}\n          <NavigationMenuItem value={link.label}>\n            <a href={link.href} class={navigationMenuTriggerStyle()}>{link.label}</a>\n          </NavigationMenuItem>\n        {/each}\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 bind:open>\n      <SheetTrigger>\n        {#snippet child({ props })}\n          <Button {...props} 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        {/snippet}\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          {#each menus as menu (menu.label)}\n            <div>\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                {#each menu.groups as group (group.heading)}\n                  <li>\n                    {#each group.items as item (item.title)}\n                      <a\n                        href=\"#\"\n                        class=\"hover:bg-muted block rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n                        onclick={() => (open = false)}\n                      >\n                        {item.title}\n                      </a>\n                    {/each}\n                  </li>\n                {/each}\n              </ul>\n            </div>\n          {/each}\n          <Separator />\n          {#each plainLinks as link (link.href)}\n            <a\n              href={link.href}\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              onclick={() => (open = false)}\n            >\n              {link.label}\n            </a>\n          {/each}\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",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header/HeaderMegaMenu.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/header/HeaderSearchCommand.svelte",
      "content": "<script lang=\"ts\">\n  import { onMount } from 'svelte'\n  import type { Component } from 'svelte'\n  import { BarChart3, BookOpen, Compass, FileText, History, Menu, Search, Users } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import {\n    CommandDialog,\n    CommandEmpty,\n    CommandGroup,\n    CommandInput,\n    CommandItem,\n    CommandList,\n  } from '$lib/components/ui/command'\n  import { Kbd } from '$lib/components/ui/kbd'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '$lib/components/ui/sheet'\n\n  const links = [\n    { label: 'Documentation', href: '#docs' },\n    { label: 'Components', href: '#components' },\n    { label: 'Templates', href: '#templates' },\n    { label: 'Showcase', href: '#showcase' },\n  ]\n\n  const groups: { heading: string; items: { icon: Component; label: string }[] }[] = [\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\n  let open = $state(false)\n  let menuOpen = $state(false)\n\n  function onKeydown(event: KeyboardEvent) {\n    if (event.key.toLowerCase() !== 'k' || !(event.metaKey || event.ctrlKey)) return\n    event.preventDefault()\n    open = !open\n  }\n\n  onMount(() => {\n    window.addEventListener('keydown', onKeydown)\n    return () => window.removeEventListener('keydown', onKeydown)\n  })\n</script>\n\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      {#each links as link (link.href)}\n        <a\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      {/each}\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      onclick={() => (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 bind:open={menuOpen}>\n      <SheetTrigger>\n        {#snippet child({ props })}\n          <Button {...props} 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        {/snippet}\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          {#each links as link (link.href)}\n            <a\n              href={link.href}\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              onclick={() => (menuOpen = false)}\n            >\n              {link.label}\n            </a>\n          {/each}\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 bind:open>\n    <CommandInput placeholder=\"Search documentation, guides, and stories…\" />\n    <CommandList>\n      <CommandEmpty>No results.</CommandEmpty>\n      {#each groups as group (group.heading)}\n        <CommandGroup heading={group.heading}>\n          {#each group.items as item (item.label)}\n            {@const ItemIcon = item.icon}\n            <CommandItem value={item.label}>\n              <ItemIcon class=\"text-muted-foreground mr-2 size-4\" aria-hidden=\"true\" />\n              {item.label}\n            </CommandItem>\n          {/each}\n        </CommandGroup>\n      {/each}\n    </CommandList>\n  </CommandDialog>\n</header>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header/HeaderSearchCommand.svelte"
    },
    {
      "path": "packages/registry-svelte/blocks/header/HeaderTransparentScroll.svelte",
      "content": "<script lang=\"ts\">\n  import { onMount } from 'svelte'\n  import { Layers, Menu } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Separator } from '$lib/components/ui/separator'\n  import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '$lib/components/ui/sheet'\n\n  const 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.\n  let scrolled = $state(false)\n  let open = $state(false)\n\n  function onScroll() {\n    scrolled = window.scrollY > 24\n  }\n\n  onMount(() => {\n    onScroll()\n    window.addEventListener('scroll', onScroll, { passive: true })\n    return () => window.removeEventListener('scroll', onScroll)\n  })\n</script>\n\n<header\n  data-slot=\"header-transparent-scroll\"\n  class=\"fixed inset-x-0 top-0 z-40 transition-colors duration-200 {scrolled\n    ? 'border-border bg-background/85 border-b backdrop-blur'\n    : '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      {#each links as link (link.href)}\n        <a\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      {/each}\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 bind:open>\n      <SheetTrigger>\n        {#snippet child({ props })}\n          <Button {...props} 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        {/snippet}\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          {#each links as link (link.href)}\n            <a\n              href={link.href}\n              class=\"hover:bg-muted rounded-md px-3 py-2 text-sm font-medium transition-colors\"\n              onclick={() => (open = false)}\n            >\n              {link.label}\n            </a>\n          {/each}\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",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/header/HeaderTransparentScroll.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/badge.json",
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/command.json",
    "https://uipkge.dev/r/svelte/kbd.json",
    "https://uipkge.dev/r/svelte/navigation-menu.json",
    "https://uipkge.dev/r/svelte/separator.json",
    "https://uipkge.dev/r/svelte/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"
  ]
}